Wednesday, February 4, 2015

Set Dimension For Multiple Screen in Android

Continue from previous lesson,  Set Android View's Bound in Java Class (RelativeLayout)
For this post, it all about how to make the position and size of view compatible almost all type of screen size.

If you aware from last post, I have used margin top to add some space between view.


From above code, the y-value of view fix at 50 px.






No matter how big the device's screen, the position still at y = 50px


So how to make it dynamic.In android, there are many unit of measurement can use. 

dp/dip Density-independent Pixels 

sp/sip

Scale-independent Pixels. Use for font.

pt

Points - 1/72 of an inch based on the physical size of the screen.

px

Pixels - Corresponds to actual pixels on the screen. 

mm

Millimeters - Based on the physical size of the screen.

in

Inches - Based on the physical size of the screen.

Reference : More Resources Types | Android,  Difference between px, dp, dip and sp in Android?

In android there are four generalized sizes (small, normal, large, xlarge) and six generalized densities,

  • ldpi (low) ~120dpi
  • mdpi (medium) ~160dpi
  • hdpi (high) ~240dpi
  • xhdpi (extra-high) ~320dpi
  • xxhdpi (extra-extra-high) ~480dpi
  • xxxhdpi (extra-extra-extra-high) ~640dpi

Reference: Supporting Multiple Screens | Android

Now start coding, not really...for this time, only play with XML Layout File.
First, let's create a UI like below,




If you are too lazy, just copy XML code below.




Then try change device or Preview All Screen Sizes, like below,



From what you can see, there are several device that the view more to left side.
So, now i will try to fix layout problem for Nexus 10.

If you open AVD > Create Virtual Device.

Tablet tab and click at Nexus 10, device details display on the right-side.


The size is xlarge and density is xhdpi same as Nexus 9.
There have two option, whether create many layout for different size or density or create many dimension file.

And for this post I will only use multiple dimension file method.

Firstly, we need change every 'dp' unit in layout into a attribute in dimens.xml.




And every attribute need initialize in values/dimens.xml,




Okay, now for next step. What you need to do is create new 'Values resource file' or just copy and paste it. For create new 'Values resource file',

Right-click on dimens.xml >  new > Values resource file



There are several way to grouping the screen size and density, whether you use Size, Density, Ratio or etc.




You can add multiple qualifier, for example, Size x Ratio or Size x Density,
This post only use density and size as qualifier,



From the device detail we got before, set the size as X-Large and density as X-High. File name is "dimens.xml".

So now, the project have two dimens.xml file, one for default and one more for xlarge-xhdpi.




Now copy all content in dimens.xml into dimens.xml(xlarge-xhdpi),


What you need to do now is, adjust every value until you feel it okay.
Below is my dimens.xml(xlarge-xhdpi),




below UI is before and after adjust the values in dimens.xml,

Before :

After :

Other X-large and X-High Screen :




That only for this post,
If you have problem or something to ask something related to java...
you can email or comment on this post...
I will try to find the solution and share it with you..












you can test it by your self..
i hope you like this souce code...
and please give some comment....
                                                                                                                                                      Created By : Z-man, 2015

No comments:

Post a Comment