How to make my app look the same in all devices?

amer halem picture amer halem · Feb 19, 2015 · Viewed 19.2k times · Source

I'm newly on android development and i build an app on android studio and i want to make my app have same design in all devices:

Samsung Galaxy S4 => 1080x1290 ; 5.0”

Galaxy Nexus => 720x1280 ; 4.7”

Nexus 4 => 768x1280 ; 4.7”

Motorola Droid Razr M => 540x960 ; 4.3”

Nexus S => 480x800 ; 4”

Galaxy S2 => 480x800 ; 4.3”

Galaxy Ace => 320x480 ; 3.5”

Galaxy Note => 800x1280 ; 5.3”

Galaxy Note II => 720x1280 ; 5.5”

Nexus 10 => 2560 x 1600 ; 10.1”

Galaxy Tab 10.1 => 1280*800 ; 10.1”

Galaxy Note 8.0 => 1280*800 ; 8.0”

Galaxy Tab 7.7 => 1280*800 ; 7.7”

Nexus 7 => 1280*800 ; 7.0”

Galaxy Tab => 1024*600 ; 7.0”


and i read these and lots of question here

http://developer.android.com/training/multiscreen/index.html

http://developer.android.com/guide/practices/screens_support.html#DeclaringTabletLayouts

i used the width/height in "dp" and made this with all items

android:layout_margin
android:paddingLeft
android:paddingRight
android:paddingTop
android:paddingBottom

and it works fine, but as i know there is a method that read the device screen then decide which layout will open in the app, assume i have one layout and i have these size for it

res/layout/main_activity.xml # For handsets (smaller than 600dp available width) res/layout-sw600dp/main_activity.xml # For 7” tablets (600dp wide and bigger) res/layout-sw720dp/main_activity.xml # For 10” tablets (720dp wide and bigger)


My question is : how i code my java activity to read the device screen which my app run on it then decide which layout will open like if the device is S2 then the java make something like this:

if (tabletDeviceSize) {

//use tablet support layout

} else

{

//another layout for mobile support

}

i see this code, but i need the complete one because i'm not perfect in coding :(

DisplayMetrics metrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(metrics);
switch(metrics.densityDpi){
  case DisplayMetrics.DENSITY_LOW:
            break;
  case DisplayMetrics.DENSITY_MEDIUM:
             break;
  case DisplayMetrics.DENSITY_HIGH:
             break;
}

Answer

Marcus picture Marcus · Feb 19, 2015

According to the official documentation, you don't need to programmatically decide which layout to use with the respective screen size.

To optimize your application's UI for the different screen sizes and densities, you can provide alternative resources for any of the generalized sizes and densities. Typically, you should provide alternative layouts for some of the different screen sizes and alternative bitmap images for different screen densities. At runtime, the system uses the appropriate resources for your application, based on the generalized size or density of the current device screen.

In other words, if you follow the recommendation stated in the documentation, as I can see that you've done, placing your layout files in their respective resource folder like so:

res/layout/main_activity.xml # For handsets (smaller than 600dp available width)
res/layout-sw600dp/main_activity.xml # For 7” tablets (600dp wide and bigger) 
res/layout-sw720dp/main_activity.xml # For 10” tablets (720dp wide and bigger)

Then the system will decide, which layout to use. No additional code is needed for you to specify it at run time.

If you however would want to make changes depending on your screen resolution, you could get the width and height in pixels using the following code

Display display = getWindowManager().getDefaultDisplay();
Point size = new Point();
display.getSize(size);
int width = size.x;
int height = size.y;

Then do something cleaver depending on the width and height variables, e.g. in your case with the S2:

if(width == 480 && height == 800){
    //Do work that's related to the S2 screen resolution
}else if(...){

}