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

2

6

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;
}
Maren answered 19/2, 2015 at 17:37 Comment(0)
D
12

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(...){

}
Darelldarelle answered 19/2, 2015 at 18:5 Comment(4)
if i assume my button (bt1) would be perfect with height "32 dp" and width "72dp" on samsung s2 , then? how i will do it ?!Maren
Then you define that layout in your layout.xml file that is placed in res/layout-sw480 @amerhalemDarelldarelle
what you said if it is right it will be (very helpful), so i have to design a layout for every device then the app automatically will choose the best one as you said before,,, ok,,, "res/layout-sw480" for S2, so for the other devices do you know the correct name to make the directory S3,S4, Dous..etc ?Maren
You only have to consider their screen size and (occasional) density, but mostly screen size for your layout files. I strongly suggest you to read the official documentation that covers this subject. But as the S2 is having a screen width of 480px, it will use the layout in the layout-sw480, aswell as any other device with screen width of 480px. So, define your different layouts for the devices that you plan to support. If you find a device with width = 600, you add that layout in layout-sw600 folder. @amerhalemDarelldarelle
C
1

If you're asking how to get the density of the device's screen, it took me 3 seconds to find that answer (not including the time to type "android get device density" into my favorite search engine):

getting the screen density programmatically in android?

Compromise answered 19/2, 2015 at 17:42 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.