Different resolution support android
Asked Answered
D

8

84

Edited Question:

Mobile Resolution:
I would like to design different screen dpi like following resolutions.
320x480,
480×800,
540x960,
720x1280 (Samsung S3),
1080x1920 (S4, Nexus5,Nexus 5x, Moto G4),
2560 x 1440 (Nexus 6, Nexus 6p, Samsung edge)

Tablet Resolution:
480x800 (micromax) ,
600x1024 (samsung tab2),
800x1280 (nexus 7),
1200x1920 (new nexus 7),
2048x1536 (nexus 9)

I want to use different font sizes depending on the device display resolution.

Q1) What is the best way to solve this problem?

Q2) What is best option doing throw coding or XML?

Q3) Which drawable folder is represent which device resolution?

Q4) Application Launcher icon size for different resolution?

Denims answered 23/5, 2013 at 5:13 Comment(5)
Screen resolution does not matter. Screen density matters.Riata
Take a look at [this SO answer][1] and make a try on your code. [1]: #9878446Clariceclarie
Please stop bumping your question with trivial edits. If this continues, we'll lock the question.Uturn
@Sotti: Screen sizes != screen resolutions.Riata
@Sotti: If you read my comment, you will notice that I wrote that screen resolution does not matter. I did not write that screen size does not matter.Riata
D
194

App launcher icon size in pixels for different resolution

Mobile Resolution

  • mipmap-mdpi (48X48)
  • mipmap-hdpi (72X72)
  • mipmap-xhdpi (96X96)
  • mipmap-xxhdpi (144X144)
  • mipmap-xxxhdpi (192X192)

Tablet Layouts:

Use following folders if you wish to have tablet-specific layouts:

layout-large-mdpi   (1024x600)
layout-large-tvdpi  (800x1280)
layout-large-xhdpi  (1200x1920)
layout-xlarge-mdpi  (1280x800)
layout-xlarge-xhdpi (2560x1600)

Drawables folders:

  1. Mobile

    res/drawable        (default)
    res/drawable-ldpi/  (240x320 and nearer resolution)
    res/drawable-mdpi/  (320x480 and nearer resolution)
    res/drawable-hdpi/  (480x800, 540x960 and nearer resolution)
    res/drawable-xhdpi/  (720x1280 - Samsung S3, Micromax Canvas HD etc)
    res/drawable-xxhdpi/ (1080x1920 - Samsung S4, HTC one, Nexus 5, etc)
    res/drawable-xxxhdpi/ (1440X2560 - Nexus 6,Samsung S6edge).
    
  2. Tablet Resolution: enter image description here

    Font Sizes:

NOTE: Always try to use SP whenever you deal with textSize, like textsize=12sp

  1. Use predefined textAppearance:

    It will set text size automatically as per device density.

    <TextView android:textAppearance="?android:attr/textAppearanceSmall"/>
    <TextView android:textAppearance="?android:attr/textAppearanceMedium"/>
    <TextView android:textAppearance="?android:attr/textAppearanceLarge" />
    

    Sample usage:

    <TextView
        style="@android:style/TextAppearance.Small"
        android:text="Sample Text - Small" />
    <TextView
        style="@android:style/TextAppearance.Medium"
        android:text="Sample Text  - Medium" />
    <TextView
        style="@android:style/TextAppearance.Large"
        android:text="Sample Text  - Large" />
    
  2. Use dimension.xml for each device:

    From Google IO Pdf, we see structure below:

    1. Mobile:

      res/values/dimens.xml(default)
      res/values-ldpi/dimens.xml   (240x320 and nearer resolution)
      res/values-mdpi/dimens.xml   (320x480 and nearer resolution)
      res/values-hdpi/dimens.xml   (480x800, 540x960 and nearer resolution)
      res/values-xhdpi/dimens.xml  (720x1280 - Samsung S3, Micromax Canvas HD, etc)
      res/values-xxhdpi/dimens.xml (1080x1920 - Samsung S4, HTC one, etc)
      

      res/values-xxxhdpi/dimens.xml (1440X2560 - Nexus 6,Samsung S6edge).

    2. Tablet:

      For tablet you can use more specific folder like values-xlarge, values-large.

      res/values-large/dimens.xml      (480x800)
      res/values-large-mdpi/dimens.xml (600x1024)
      

      or

      res/values-sw600dp/dimens.xml      (600x1024)
      res/values-sw720dp/dimens.xml      (800x1280)
      res/values-xlarge-xhdpi/dimens.xml (2560x1600 - Nexus 10")
      res/values-large-xhdpi/dimens.xml  (1200x1920 - Nexus 7"(latest))
      

For further information:

  1. Refer to Supporting Multiple Screens.

  2. See Page# 77 of Google IO Pdf for Design device density. In that, you will find the way to handle dimens.xml for different different devices.

  3. Getting Your Apps Ready for Nexus 6 and Nexus 9.

Excerpt from Supporting Multiple Screens:

The density-independent pixel is equivalent to one physical pixel on a 160 dpi screen, which is the baseline density assumed by the system for a "medium" density screen. At runtime, the system transparently handles any scaling of the dp units, as necessary, based on the actual density of the screen in use. The conversion of dp units to screen pixels is simple: px = dp * (dpi / 160). For example, on a 240 dpi screen, 1 dp equals 1.5 physical pixels. You should always use dp units when defining your application's UI, to ensure proper display of your UI on screens with different densities.

Denims answered 4/6, 2013 at 5:44 Comment(15)
So theres is really no need to implement any code? just create the dimensions and the app will automatically check which dim to apply?Dicks
Yes its one of the way throw which we can create application compatible with all devices.Denims
always try to prefer textAppearanceDenims
for tablet layout please check this link developer.android.com/guide/practices/…Denims
+1 : Don't forget that you can support all devices by using layouts.Percuss
I downloaded google Nexsus 10 - 4.4.2 2560*1600 Genymotion, when I run my layout on virtual device,it use layout-sw720dp instead of layout-xlarge-xhdpi ! why? :-?Percuss
@Percuss For Tablet: 1024X600 (layout-large-mdpi) 800X1280 (layout-large-tvdpi) 1200X1920 (layout-large-xhdpi) 1280X800 (layout-xlarge-mdpi) 2560X1600 (layout-xlarge-xhdpi) please check in device rather than simulator.Denims
please also check this below link may be its help you. #14151621Denims
#12242611Denims
@BhaveshJethani ok for example Nexus 6 will fall into this res/drawable-xxxhdpi/ with graphic 1440X2560 pixels. Then in photoshop which resolution to use? I must use 500 ppi? Because Nexus 6 has 493 ppi densitySeka
@BhaveshJethani I have some confusion regrading xxhdpi launcher icon size. you said for xxhdpi app icon should be 144x144 but as per the android developer guidelines they wrote for extra-extra-high-density app icon should be 180x180 with android developer guidelines. Please suggest me where is gapHebephrenia
@Ajit 144X144 for more detail you can take check this link iconhandbook.co.uk/reference/chart/androidDenims
@BhaveshJethani why there is no mipmap-ldpi?Everywhere
@shreyansjain now a days no one going to give support to very small devices :p ... but still you can use itDenims
this line is what i'm looking for res/values-xxxhdpi/dimens.xml (1440X2560 - Nexus 6,Samsung S6edge).Impartial
I
25

First you create the different values folders for different screens.and put the size according to the screens in res->values->dimens.xml file and call the simple font size using "@dimen/text_size".

res/values/dimens.xml    
res/values-small/dimens.xml    
res/values-normal/dimens.xml    
res/values-xlarge/dimens.xml

//for small    
<?xml version="1.0" encoding="utf-8"?>
<resources>
   <dimen name="text_size">15sp</dimen>
</resources>

//for normal    
<?xml version="1.0" encoding="utf-8"?>
<resources>
   <dimen name="text_size">20sp</dimen>
</resources>

//for large    
<?xml version="1.0" encoding="utf-8"?>
<resources>
   <dimen name="text_size">30sp</dimen>
</resources>

//for xlarge    
<?xml version="1.0" encoding="utf-8"?>
<resources>
   <dimen name="text_size">40sp</dimen>
</resources>

and retrieve the font size in TextView as given below.

<TextView
    android:id="@+id/lblHeader"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"           
    android:textSize="@dimen/text_size"
    android:textStyle="bold"
    android:typeface="serif" />
Invasive answered 4/6, 2013 at 11:52 Comment(2)
so how u have given the dimensions here for diff layouts?like u used any ratios (1:1.5:2:3:4)-(mdpi-hdpi:xhdpi:xxhdpi:xxxhdpi)-(2sp:3sp:4sp:6sp:8sp) like this?I am confused..!Aranda
@AsifSb if you going to give it by ratio you have to set it programatically.Otherwise you have to put dimentions in static way in different diemens.xml in value foldersInvasive
J
9

To avoid the problems of different screen resolutions and different densities, I size and position everything based on the percentage width and height of the screen. If text is resized based on the percentage width or height of the screen, the font will be the correct size on all devices and all resolutions. To get the correct font size based on a width and height of its space, simply use this function:

private float SetTextSize(String text, int width, int height)
{
    Paint paint = new Paint();
    float textWidth = paint.measureText(text);
    float textSize = (int) ((width / textWidth) * paint.getTextSize());
    paint.setTextSize(textSize);

    textWidth = paint.measureText(text);
    textSize = (int) ((width / textWidth) * paint.getTextSize());

    // Re-measure with font size near our desired result
    paint.setTextSize(textSize);

    // Check height constraints
    FontMetricsInt metrics = paint.getFontMetricsInt();
    float textHeight = metrics.descent - metrics.ascent;
    if (textHeight > height)
    {
        textSize = (int) (textSize * (height / textHeight));
        paint.setTextSize(textSize);
    }
    return textSize;
}

Here's the code to get the width and height of the screen:

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB_MR2)
{
    Point size = new Point();
    getWindowManager().getDefaultDisplay().getSize(size);
    screenWidth = size.x;
    screenHeight = size.y; 
}
else
{
    Display display = getWindowManager().getDefaultDisplay(); 
    screenWidth = display.getWidth(); 
    screenHeight = display.getHeight(); 
}

To get the font size you want, simply make up an area based on the screen width and screen height and tweak it until the font size looks right. Once you get it looking right, it should look right on all devices.

float textSize = SetTextSize("text", (int) (screenWidth * 0.1), (int) (screenHeight * 0.15));

I hope this helps you

Journey answered 4/6, 2013 at 19:21 Comment(1)
Re ".. percentage width/height of screen". NOTE: This strategy is perfect for screens with fixed number of items; on a screen that displays a scrolling list of items, for large phones I prefer a compromise between "larger" and "show more rows". A possible formula is to multiply all font sizes by sqrt(phoneWidthInches / defaultWidthInches), where defaultWidthInches is the original phone size you design for. So 2x larger phone would be 1.4x larger fonts. (instead use height or diagonal formula as appropriate). Important: DO NOT USE width in pixels. inches = pixels / dpi.Migraine
G
8

Basically you need to create a Text Style something like this:

<style name="CodeFont">
    <item name="android:textSize">30sp</item>
</style>

read more about it here http://developer.android.com/guide/topics/ui/themes.html

And using the android support for different screens guide to create the different sizes you want for different screens in the right res folders as described in: http://developer.android.com/guide/practices/screens_support.html

Side note: I don't really understand in what situation would you want to do that, using SP units for font sizes will scale the fonts to look more or less the same size on different phones.

Gonococcus answered 2/6, 2013 at 14:33 Comment(0)
C
4

First your application design for one resolution .

example : suppose your mobile resolution 380*480

       mobile screen width:380

       textView size is 80dp   
       Assume : if width is 380dp then 100 % then

               textview width 80dp then how many %(per).

            ower answer is: 25 %

find screen size programmatically using belove formula

    DisplayMetric  displaymetrics = new DisplayMetrics();
    getWindowManager().getDefaultDisplay().getMetrics(displaymetrics);
    ScreenHeight = displaymetrics.heightPixels;
    ScreenWidth = displaymetrics.widthPixels;
        txt_height = (int)((ScreenHeight*14.58)/100);
    txt_width = (int)((ScreenWidth*37.5)/100);


    LinearLayout.LayoutParams normal_param = new LinearLayout.LayoutParams(txt_height ,txt_width );

    txt_Name.setLayoutParams(normal_param);
Chambliss answered 23/5, 2013 at 6:33 Comment(3)
i want to give text size .. for different device size.Denims
@BhaveshJethani calculate textsize percentage using above code ,try it code is work for me .Chambliss
i am talking about Font size.. not textview sizeDenims
H
3

I think this is a good answer:

Text size and different android screen sizes

But here how you can do it with screen resolution :

You can create "values" resource directory for each resolution like

values-wWIDTHp-hHEIGHTdp (you can also use values-wWIDTHp or values-hHEIGHTdp)
for example: 320*480 will be values-w320p-h480dp

In each dir (including default values dir) create a file named "dimens.xml" with content:

 for exmaple (the value related to the resolution):
 <dimen name="def_font_size">10sp</dimen>

Now you can use the "@dimen/def_font_size" or create a style in the default values directory.

Add this to the "styles.xml":

<style name="FontSize">
    <item name="android:textSize">@dimen/def_font_size</item>
</style>
Huppert answered 3/6, 2013 at 9:7 Comment(0)
F
1

I have created a function which convert size of dp to the size according to screen size and it is working well for me. Any one having problem with text size according to screen should give this a try.

public float convertFromDp(int input) {
    final float scale = getResources().getDisplayMetrics().density;
    return ((input - 0.5f) / scale);
}

simple give the value given by it to the text view size programically as below

tvTextView1.setTextSize(convertFromDp(24));
Furfur answered 19/11, 2014 at 5:37 Comment(1)
this answer working for me. reduce work load & calculationLorica
H
1

For nexus 6 device support , create drawable-560dpi folder and put all images in it.

Haustellum answered 21/7, 2015 at 6:9 Comment(3)
I think its not necessary and good to make a particular layout like that, However drawable-xxxhdpi will be even more easier and helpfulMelatonin
it will not for nexus 6 . Because nexus 6 having 560dpi resolution. If you are not declaring 560dpi folder , than it will use images of xxxhdpi folder.Haustellum
Yes to make it simple and not pin point nexus 6 alone I suggested that. images will not differ that much so xxxhdpi is easier.Melatonin

© 2022 - 2024 — McMap. All rights reserved.