Tuesday, July 21, 2015

Android - Upload project on github

Overview:    I am going to explain some easy steps for upload project on GitHub by using eclipse Git.

So let's start eclipse and create a demo project for upload.

Before upload, a project on GitHub create an account on github.com if you are not on GitHub.

1. Create a new repository.

2. Give repository name, description, public or private etc and hit create repository button.

3. Now you can see your repository created.

4. Now copy HTTP clone url.

5. Now start Eclipse and create a clone repository.


6. You can see now all requir field is filled automatically if not just past clone that you copied from github. Enter user name and password in the following box. After click next you will master box, click next on it. 

7. Now change the following field if require and click on finish button.

8. Now you can find in your directory create git created with given folder name. Now past your project in that directory.

9. Now in Eclipse you can repository showing all required package in the following box. Come right on working directory and commit button.

10. In the following box, you can all project file. We can select or deselect file for commit on GitHub.
Now hit commit button for commit on Github. Click ok

11. Now refresh the Github page. We can see project uploaded on Github.

If you face any problem comment below.

Thursday, May 28, 2015

Android - Crop image.

Overview:-You may notice on e-commerce site they showing product image on separate large window via crop certain portion of the product image. 

have a look

In the bellow snippet, i am going to demonstrate it.




Monday, May 25, 2015

Android - Canvas

Android comes along with powerful open-source API libraries which support custom 2D and 3D graphics as well animations. In this tutorial, i am going to explain 2D graphics only.

Canvas allows the user to draw any shapes, text, bitmap on view and its also allow the user to override onDraw() method when user want to update it.

1. Arrow

 class Arrow {
    private float angle;
    private Path path;
    private boolean mDoubleHeader;
    private float mViewWidth;
    private float mViewHeight;
    private float mStartX;
    private float mStartY;
    private float mEndX;
    private float mEndY;

    public Arrow(int width, int height, float startX, float startY, float endX, float endY, boolean doubleHeader) {
        mDoubleHeader = doubleHeader;
        mViewWidth = width;
        mViewHeight = height;
        mStartX = startX;
        mStartY = startY;
        mEndX = endX;
        mEndY = endY;
        angle = (float) getAngle(startX, startY, endX, endY);
        float xm2 = getActualDimensionsX(getRatioX(1f));
        float tempX = 0, tempY = 0, tempX2 = getActualDimensionsX(getRatioX(40)), tempY2 = 0;
        float x0 = endX - tempX2;
        float deltaX = (tempX2 - tempX);
        float deltaY = (tempY2 - tempY);
        float frac = 0.25f;
        float point_x_1 = tempX + ((1 - frac) * deltaX + frac * deltaY);
        float point_y_1 = tempY + ((1 - frac) * deltaY - frac * deltaX);
        float point_x_2 = tempX2;
        float point_y_2 = tempY2;
        float point_x_3 = tempX + ((1 - frac) * deltaX - frac * deltaY);
        float point_y_3 = tempY + ((1 - frac) * deltaY + frac * deltaX);
        float px = (point_x_1 + point_x_3) / 2;
        float py = (point_y_1 + point_y_3) / 2;
        px = (px + point_x_2) / 2;
        py = (py + point_y_2) / 2;
        path = new Path();
        path.moveTo(point_x_1 + x0 + xm2, point_y_1 + endY);
        path.lineTo(point_x_2 + x0 + xm2, point_y_2 + endY);
        path.lineTo(point_x_3 + x0 + xm2, point_y_3 + endY);
        path.lineTo(px + x0 + xm2, py + endY);
        path.lineTo(point_x_1 + x0 + xm2, point_y_1 + endY);

    public void draw(Canvas canvas, Paint paint) {
        canvas.drawLine(mStartX, mStartY, mEndX, mEndY, paint);
        if (mDoubleHeader) {
            float xm = getActualDimensionsX(getRatioX(2));
            canvas.rotate(angle, mStartX, mStartY);
            canvas.drawCircle(mStartX - xm, mStartY, xm, paint);
            canvas.rotate(-angle, mStartX, mStartY);
        canvas.rotate(angle, mEndX, mEndY);
        canvas.drawPath(path, paint);
        canvas.rotate(-angle, mEndX, mEndY);

    private double getAngle(float x0, float y0, float x1, float y1) {
        double dx = x1 - x0;
        double dy = -(y1 - y0);
        double inRads = Math.atan2(dy, dx);
        if (inRads < 0) {
            inRads = Math.abs(inRads);
        } else {
            inRads = 2 * Math.PI - inRads;
        return Math.toDegrees(inRads);

     * Getting X coordinate according device width
    private float getActualDimensionsX(float ratio) {
        return ratio * mViewWidth;

     * Convert X coordinates device respective
    private static float getRatioX(float value) {
        return ((value * 100) / 320) / 100;

2. Different shape

 public class Shape {
    private Path path;
    private float mViewWidth;
    private float mViewHeight;
    private float mCenterX
    private float mCenterY;

    public Shape(float x, float y, float width, float height) {
        mCenterX = x;
        mCenterY = y;
        mViewWidth = width;
        mViewHeight = height;
        path = new Path();

     * set star path for draw on given position, radius and number of arrow in
     * star
    public void setStar(float r1, float innerR1, int numOfPt) {
        float radius = getActualDimensionsX(getRatioX(r1));
        float innerRadius = getActualDimensionsX(getRatioX(innerR1));
        double section = 2.0 * Math.PI / numOfPt;
        path.moveTo((float) (mCenterX + radius * Math.cos(0)), (float) (mCenterY + radius * Math.sin(0)));
        path.lineTo((float) (mCenterX + innerRadius * Math.cos(0 + section / 2.0)),
                (float) (mCenterY + innerRadius * Math.sin(0 + section / 2.0)));
        for (int i = 1; i < numOfPt; i++) {
            path.lineTo((float) (mCenterX + radius * Math.cos(section * i)), (float) (mCenterY + radius * Math.sin(section * i)));
            path.lineTo((float) (mCenterX + innerRadius * Math.cos(section * i + section / 2.0)), (float) (mCenterY + innerRadius
                    * Math.sin(section * i + section / 2.0)));

     * Getting X coordinate according device width
    private float getActualDimensionsX(float ratio) {
        return ratio * mViewWidth;

     * Convert X coordinates device respective
    private static float getRatioX(float value) {
        return ((value * 100) / 320) / 100;

    public void draw(Canvas canvas, Paint paint) {
        canvas.rotate(90, mCenterX, mCenterY)
        canvas.drawPath(path, paint);
        canvas.rotate(-90, mCenterX, mCenterY);



Thursday, May 14, 2015

Android - Android Studio Short Keys and tips

For Android studio  shortcuts. Here are a few that I know.

Add unimplemented methods:                               CTRL + I
Override methods:                                                   CTRL + O
Format code:                                                             CTRL + ALT + L
Show project:                                                            ALT + 1
Show logcat:                                                             ALT + 6
Hide project - logcat:                                                SHIFT + ESC
Build:                                                                          CTRL + F9
Build and Run:                                                           CTRL + F10
Collapse all:                                                               CTRL + SHIFT + NumPad +
Expand all:                                                                 CTRL + SHIFT + NumPad -
Find and replace:                                                       CTRL + R

Find:                                                                           CTRL + F
Go to file:                                                                   CTRL + SHIFT  + N

Go to class:                                                               CTRL    N

Navigate open tabs:                                                  ALT L-ARROW , ALT R-ARROW 

Loop up recent files:                                                 CTRL +  E 

Go to line:                                                                   CTRL +  G 

Navigate to last edit location:                                   CTRL +  SHIFT  +  BACKSPACE 

Go to declaration:                                                      CTRL + B 

Go to implementation                                               CTRL +  ALT  +  B 

Go to source:                                                             F4 

Go to super class:                                                        CTRL +  U 

Show call hierchy:                                                     CTRL +  ALT  +  H 

Search in path/project:                                              CTRL +  SHIFT  +  F 

Optimize imports:                                                     CTRL + ALT  +  O 

Issue quick fix:                                                          ALT + ENTER 

Surrond code block:                                                 CTRL + ALT + T 

Rename and Refractor                                              SHIFT + F6 

Line Comment or Uncomment                                 CTRL +  / 

Block Comment or Uncomment                               CTRL + SHIFT + / 

Go to previous/next method                                     CTRL + UP/DOWN 

Show parameters for method                                   CTRL +  P 

Quick documentation lookup                                    CTRL + Q 

Delete a line                                                                CTRL +  Y 

View declaration in layout                                         CTRL +  B 

We can also use Eclipse Shorts keys.Settings> keymap, in the list box select Eclipse and apply. As set here.


Wednesday, April 8, 2015

Android - Get Image from Canvas

Overview:  We can create an image that canvas draw in view.

1. Draw Something: First, we going to draw some shapes such as a circle by using canvas.

Now Launching Application.

2.Creating imageNow we going to create an image from draw view. Let see the following snippet

Above Snippet, we have created a bitmap with required image width and height. After that draw bitmap by using canvas. At the end, we draw a circle on canvas and return createBitmap object.


Android - Infinite GridView

Introduction: The sort definition of infinite GridView is that we will draw bitmap and user can move (Scroll) in any direction in our custom surface view. 

We can view such kind of application on google play store:https://play.google.com/store/apps/details?id=com.HBO&hl=en

Infinite GridView 

Here I am going to share the overall logic of this view. We have achieved it by using canvas ( 2D ) in android. We drawing each bitmap with a label in Android Surface View.The view contains a bunch of bitmaps that circulate when view move in any direction. 

You can get the code from GitHub.

Get it on Google Play

React Native - Start Development with Typescript

React Native is a popular framework for building mobile apps for both Android and iOS. It allows developers to write JavaScript code that ca...