In this post, we will cover on how to achieve pixel perfect design in android studio. If you are beginner you must understand first what is pixels, densities, density independent pixels (dp or dip), scale independent pixels (sp), resolution, points (pt), Inches (in) and screen sizes. First of all, i will explain a very basic concept of UI for beginner then move to pixel perfect designing.
Inches ( in ) : It is based on physical size of screen as 1 inch = 2.54 centimeters
Pixels ( px ) : Pixel is number of dots on the screen. There is no proper unit of measurement for pixels because pixels vary across devices; each devices may have a different number of pixels per inch and may have more or fewer total pixels available on the screen.
Density Independent pixels ( dp ) : It is a pixel unit that is used to define a UI layout. To explain or defining your layout in density independent pixel, you must consider this formula in your mind.
Android UI design is divided into two categories one is UI design must support different screen size and second is to support multiple screen densities.
let's take a example of 3 button, one image and one textview as shown in the above image. First of all, to make pixel perfect design must divide whole design into parts. You can divide things in dp (density independent pixels) or font size to sp (scale independent pixels) and also you can divide design into percentage of the screen. I divided the design in percentage of screen because it is easier for me.
Inches ( in ) : It is based on physical size of screen as 1 inch = 2.54 centimeters
Pixels ( px ) : Pixel is number of dots on the screen. There is no proper unit of measurement for pixels because pixels vary across devices; each devices may have a different number of pixels per inch and may have more or fewer total pixels available on the screen.
Density Independent pixels ( dp ) : It is a pixel unit that is used to define a UI layout. To explain or defining your layout in density independent pixel, you must consider this formula in your mind.
px = dp * (dpi / 160)
dp = ( px / dpi ) * 160
sp = ( px / dpi ) * 160
 |
| Units for density independent pixel |
 |
| Density Independent |
Screen Sizes : screen size is actual size of screen measured by screen diagonal. For simplicity Google has divided android screen sizes into 4 categories.
- small ( 600 - 960 dp *width or height both)
- normal ( 960 - 1280 dp *width or height both)
- large ( 1280 - 1920 dp *width or height both)
- extra-large ( more than 1920 dp *width or height both)
It is total dp of width and height, the large or extra large size comes in sizes of tablet and small, normal and large come in sizes of phones
- 320dp: a typical phone screen (240x320 ldpi, 320x480 mdpi, 480x800 hdpi, etc).
- 480dp: a large phone screen ~5" (480x800 mdpi).
- 600dp: a 7” tablet (600x1024 mdpi).
- 720dp: a 10” tablet (720x1280 mdpi, 800x1280 mdpi, etc).
Screen Density : the number of pixel of physical mobiles screen defined as screen density it is divided into six categories
- low
- medium
- high
- extra-high
- extra-extra-high
- extra-extra-extra-high
The categorization is based on number of pixels, for pixel perfect design, you must take care of screen density of android phone
Android UI design is divided into two categories one is UI design must support different screen size and second is to support multiple screen densities.
Scale independent pixels ( sp ) : it is like a dp unit but it is only used for font size.
Points ( pt ) : it is 1/72 inch based on the physical size of the screen.
Pro Tips
To get the same size on different screen densities, Android translates these units into pixels at runtime, so there is no tricky math for you to do.
 |
| Font size 30px , 30dp , 30sp |
Use sp for text size and use dp for everything else
Always divide images into different densities so your image will not be blurred in some specific android devices
Use Android drawable importer plugin, it will help you to create auto images for different densities
I hope these basic UI concepts will help you, still you have problem contact me or comment below, i will help you. Now lets explain our topic that is Pixel perfect.
What is Pixel Perfect ?
A pixel perfect design is the exact design given by designer which means you have consider all details which is given to you by designer. A pixel perfect design must be free of image noise, aberrations, distortions and unwanted blur.
How to do Pixel Perfect design in Android studio
It is tricky in android to develop pixel perfect design because a lot of different screen sizes and screen densities. For a android developer you must have ability to interpret all the UI specification from design and translate all pixels values to dp values or in some cases to percentage of screen, similarly translate pt value to sp.
Remember one thing pixel perfect design not depended on android screen size, it is depended on android screen densities. Always work on different screen densities.
Practical Example
 |
| how to create pixel perfect ui in android studio |
let's take a example of 3 button, one image and one textview as shown in the above image. First of all, to make pixel perfect design must divide whole design into parts. You can divide things in dp (density independent pixels) or font size to sp (scale independent pixels) and also you can divide design into percentage of the screen. I divided the design in percentage of screen because it is easier for me.
 |
| dividing android screen size in percentage |
As in the above picture, you will see that the design is divided into percentage of screen.
First you need to understand the logic of my program, as every android screen has different size (different width and height) and thus it will give different number of pixel of different screen size. so for this you will set pixel of width or height as dynamic (take value at runtime depending on which screen size is it ) and multiple with static percentage of screen for ui element ( I set every UI element size as percent of screen it occupy in width or height wise) in this way, you will appropriate value of every UI element then simply apply it on every ui element.
You can download the source code from below link
Code
............................................................................................................public void make_pixel_perfect(){............................................................................................................
// Get the actual screen width int screenWidth = getScreenWidth();
// Get the actual screen height int screenHeight = getScreenHeight();
// Calculate the new image size int imageWidth = (int) ((float) screenWidth * IMAGE_SCREEN_WIDTH_RATIO);
int imageheight = (int) ((float) screenHeight * IMAGE_SCREEN_Height_RATIO);
// Calculate the margin
// 5% int margin_5_width = (int) ((float) screenWidth * Margin_five);
// total 5% of screen height wise, but 1 % between every ui element int margin_5_height = (int) ((float) screenHeight * Margin_one ) ;
// 10% int margin_ten = (int) ((float) screenHeight * Margin_ten );
// 2%
int margin_2 = (int) ((float) screenWidth * Margin_two);
// calculate button %
int btn44 = (int) ((float) screenWidth * btn_width);
// print System.out.println("screenWidth = "+screenWidth);
System.out.println("screenHeight = "+screenHeight);
System.out.println("imageWidth = "+imageWidth);
System.out.println("imageheight = "+imageheight);
System.out.println("margin_5_width = "+margin_5_width);
System.out.println("margin_5_height = "+margin_5_height);
System.out.println("margin_10 = "+margin_ten);
System.out.println("margin_2 = "+margin_2);
System.out.println("btn44 = "+btn44);
// Set the Image size LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) image.getLayoutParams();
// Setting the same size for Width and height params.height = imageheight;
params.width = imageWidth;
// Set the margin’s
params.topMargin = 1;
params.leftMargin = margin_5_width;
image.requestLayout();
// Set the Header Tv margin params = (LinearLayout.LayoutParams) btn1.getLayoutParams();
params.height = margin_ten;
params.width = imageWidth;
params.topMargin = 1;
params.leftMargin = margin_5_width;
btn1.requestLayout();
params = (LinearLayout.LayoutParams) t1.getLayoutParams();
t1.setTextSize(margin_ten/(Resources.getSystem().getDisplayMetrics().density+1));
params.topMargin = 1;
params.leftMargin = margin_5_width;
t1.requestLayout();
LinearLayout.LayoutParams params2 = (LinearLayout.LayoutParams) btn2.getLayoutParams();
params2.height = margin_ten;
params2.width = btn44;
params2.topMargin = 1;
params2.leftMargin = margin_5_width;
btn2.requestLayout();
// Set the Send Button margin
params2 = (LinearLayout.LayoutParams) btn3.getLayoutParams();
params2.height = margin_ten;
params2.width = btn44;
params2.topMargin = 1;
params2.leftMargin = margin_2;
params2.rightMargin = margin_5_width;
btn3.requestLayout();
}
First you need to understand the logic of my program, as every android screen has different size (different width and height) and thus it will give different number of pixel of different screen size. so for this you will set pixel of width or height as dynamic (take value at runtime depending on which screen size is it ) and multiple with static percentage of screen for ui element ( I set every UI element size as percent of screen it occupy in width or height wise) in this way, you will appropriate value of every UI element then simply apply it on every ui element.
You can download the source code from below link