Dheeraj Shetty Dheeraj Shetty

Some of the tools/best practices to match the given design by the designer (Android).

Previos PostNext Post

If the below give image is one of the crop images given by designer.

First check the resolution of the given crop image.

  1.  Right click the image in the explorer and choose properties
  2. Navigate to the Details tab and look under image Dimensions- which is 128 px x 128px for the above image
  3. Navigate to
    Click on the Px(Pixels) box and set the resolution tab to xxxhdpi: ~640 and then type 128 px in the pixels form
  4. Now note down dp(Density-Independent) box which in here is 32 dp. Use this value in your Android Studio.
To convert the given font size(for below example font size is 65px), use the same above process and use the sp tab value which is 16 sp in the below example and use it your Android Studio to set the font size.


In order to measure distances in the below contents of a mobile screen given by the designer

Download these 2 tools and install them.
  1.FSviewer -http://www.faststone.org/FSViewerDetail.htm
  2.Picpick - http://ngwin.com/picpick

Consider this Screen

If you need to measure the distance button width and height and also its distance from the side.

  1. Open the image in fsviewer by right clicking and navigating to “open with” option
  2. Click the up button in your keyboard to show its true pixels or right click and navigate as given below to show the image’s true pixels.
  3. Once when it revels its true pixels, open the formerly installed program “Picpick” and right click the Picpick icon in the taskbar and select PixelRuler as shown below
  4. Then drag the ruler and place it like in the below image
  5. From the above image – width of the button is 1230 px , Now using the online tool which I have mentioned previously in the article
    Calculate its value in dp- which is 307.50 dp as shown below
  6. Similarly the height of the button and distance of the button from the side is
    168px which is 42dp and 106px which is 26.5dp as shown below.















Previos PostNext Post Share Post :

Leave a Reply