How to create a layout in android which should support all the devices?

Question

This question might be asked more than 1000 times,I am still here confused,which will be the proper approach?As I Googled I found some related links link1 ,link2,link3 etc.Solution what i found is use Relative layouts in xml design.All layouts will be in layout-folder(if you are creating a phone app) and dimensions should be given in dimens.xml(which is in values-mdpi,hdpi,xhdpi,xxhdpi,xxxhdpi folders) to support all screen.

how can i give marginTop for an image view.I am doing calculation like this:in ratios (1:1.5:2:3:4)-(mdpi:hdpi:xhdpi:xxhdpi:xxxhdpi)-(10dp-15dp-20dp-30dp-40dp). Whether my approach is correct or?

I have given different images of different resolutions in drawable-(mdpi:hdpi:xhdpi:xxhdpi:xxxhdpi) folders.

My question is in values-mdpi/dimens.xml-margintop-10dp, values-hdpi/dimens.xml-margintop-15dp,values-xhdpi/dimens.xml-margintop-20dp etc.Giving dimension values for different screen in the ratios of (1 : 1.5 : 2 : 3 : 4) is correct? in Main.xml:

<RelativeLayout 
    android:id="@+id/rl_submain"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >


    <ImageView 
        android:id="@+id/iv_papa"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="@dimen/s_mtop"
        android:background="@drawable/papa1"
        android:gravity="center"/>

    <TextView 
            android:id="@+id/tv_power"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:layout_marginBottom="@dimen/s_mbot"
            android:textSize="12sp"
            android:textColor="@color/white"
            android:layout_alignParentBottom="true"
            android:text="@string/poweredby"/>

</RelativeLayout>



<resources>
<!--Splash-->mdpi
<dimen name="s_mtop">10dp</dimen>
<dimen name="s_mbot">2dp</dimen>

<resources>
<!--Splash-->hdpi
<dimen name="s_mtop">15dp</dimen>
<dimen name="s_mbot">3dp</dimen>

<resources>
<!--Splash-->xhdpi
<dimen name="s_mtop">20dp</dimen>
<dimen name="s_mbot">4dp</dimen>

 <resources>
<!--Splash-->xxhdpi
<dimen name="s_mtop">30dp</dimen>
<dimen name="s_mbot">6dp</dimen>

<resources>
<!--Splash-->xxxhdpi
<dimen name="s_mtop">40dp</dimen>
<dimen name="s_mbot">8dp</dimen>

Have you considered creating resources for the different screen sizes? For example layout-sw300dp, layoutsw400dp, layout-sw600dp? layout-sw800dp? It is then easy to see that 600 and 800 cover tablets — Eenvincible, Oct 19 '15 at 09:31
Possible duplicate of [Android Load Images from Drawable Efficiently](http://stackoverflow.com/questions/32665582/android-load-images-from-drawable-efficiently) — MurugananthamS, Oct 19 '15 at 09:35
@murugalonger I don't think this question relates to loading images from the drawables folder; it is about supporting all screen sizes/devices in layouts — Eenvincible, Oct 19 '15 at 09:38
@murugalonger..I am asking here,Whether my approach is correct or not.? — Asif Sb, Oct 19 '15 at 09:39
*Whether my approach is correct or?* no, it is not ... it's hard to understand where is your problem ... but ... if you are using **dp** you shouldn't depend the size on dpi ... it is done automatically ... you may make the margin depend on "device type" as Eenvincible stated in his first comment — Selvin, Oct 19 '15 at 09:41
@selvin..ok..i am giving the margin top dimension for image view say 10dp in values-mdpi/dimens.xml — Asif Sb, Oct 19 '15 at 09:43

Shadow Droid · Accepted Answer · 2015-10-19T10:51:30.380

how can i give marginTop for an image view.I am doing calculation like this:in ratios (1:1.5:2:3:4)-(mdpi:hdpi:xhdpi:xxhdpi:xxxhdpi)-(10dp-15dp-20dp-30dp-40dp). Whether my approach is correct or?

Dimension Ratio (1:1.5:2:3:4)-(mdpi:hdpi:xhdpi:xxhdpi:xxxhdpi) is correct but it not for dimension unit dp/dip...it is for px

dp :Density-independent Pixels - An abstract unit that is based on the physical density of the screen. These units are relative to a 160 dpi (dots per inch) screen, on which 1dp is roughly equal to 1px. When running on a higher density screen, the number of pixels used to draw 1dp is scaled up by a factor appropriate for the screen's dpi. Likewise, when on a lower density screen, the number of pixels used for 1dp is scaled down.

For more detail on different dimension unit refer doc

So as per your example let marginTop = 10dp then as per ratio (1:1.5:2:3:4)-(mdpi:hdpi:xhdpi:xxhdpi:xxxhdpi)-(10px-15px-20px-30px-40px)
than means you can also do marginTop =10px but it would remain 10px across all..so higher the dpi the marginTop would look small in this case..

For advantage of dip/dp over px you can refer here

sp is similar to dp; but it is used in context of font size for reason refer dimension unit doc

You can also refer the converter here

dimensions should be given in dimens.xml(which is in values-mdpi,hdpi,xhdpi,xxhdpi,xxxhdpi folders) to support all screen.

Coming to this again for dimension you should not do values-mdpi, hdpi...and so on.Because if you use unit dp then it is independent of density of screen as mentioned.
if you use unit px then you can go for values-mdpi, values-hpdi...and so on, but again this would become overhead of manual calculation and possibility of inducing error by getting unwanted value.

So it is better that dimesnion value would only defer in terms of screen size not in terms of screen density. so your layout or values folder can be as per Android OS(API) version, and screen size like normal, large or as mentioned in link1, link2 and in comment by Eenvicible

Updates BASED on Comments
If you go through Supporting Different Screens then you will realize that
for layout we have folder structure layout-normal, layout-large, layout-large-land...but again this might vary
In the same link you can see drawable-mdpi..and so on. Here images we use are generally not density independent so we need same image in different densities and we add it in accordingly in folder
for values we have folder structure like values, values-fr in case you Supporting Different Language
Regardingly values-mdpi,values-hpdi I already explained above.

Please go through each and every link properly..bcoz I am refering to OFFICAL DOC ONLY

I have gone through the all links already and converter is very useful here.but still confused here.Only way i can clear here my doubts through net.helpless.. — Asif Sb, Oct 19 '15 at 10:13
but then what is confusing you....from your question I could make out that you did not know difference between dp and px so based on that I answered — Shadow Droid, Oct 19 '15 at 10:15
the values which i have given in dimens.xml is wrong?then what I am doing wrong here?what is the best approach then? — Asif Sb, Oct 19 '15 at 10:19
@AsifSb Please check updated answer...And regarding values you gave in dimens is acceptable but it would not be consistent across all devices...since you have used different values with unit dp — Shadow Droid, Oct 19 '15 at 10:47
@AsifSb hope it clears your doubt...let me know if it is still confusing — Shadow Droid, Oct 19 '15 at 13:36

score 1 · Answer 2 · edited May 23 '17 at 10:27

1

Yes, the values in your dimens.xml file are completely wrong. Please delete all your different dimens.xml. The different densities are for the actual images when you edit them with your image editor.

If you want a margin around your image, use linear layouts with weights or relative layouts, but do not use dps. Weighted linear layouts or relative layouts are much more flexible.

But if you do choose dps, which again, I do not recommend, know that one set of measurements in your dimens.xml is enough.

Ideally, do not create more xml layout/dimens variations than you need. You can tweak those if you need to, but make sure that you're solving an actual problem before you start adding on more qualifiers.

edited May 23 '17 at 10:27

Community

1
1

answered Oct 19 '15 at 10:37

Stephan Branczyk

9,363
2
33
49

I think you got what i am try to say here..thank you. – Asif Sb Oct 19 '15 at 10:40
@stephen...U gave me the perfect solution but ShadowDroid gave me good explanation.. – Asif Sb Oct 20 '15 at 06:01

score 0 · Answer 3 · edited May 23 '17 at 12:03

Why dont you use weight for layout instead. Have one blank view above image and weight it according to your requirement it will stretch automatically. You can find example here

Or try like this. Give weight for space as per your need for blank layout

        <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
    >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:weightSum="1">
    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/holo_green_dark"
        android:layout_weight="0.2"
        android:id="@+id/view1" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageView"
       android:src="@drawable/ic_register"
        android:layout_weight="0.8"
       />
    </LinearLayout>
</RelativeLayout>

I have used relative layout instead.pls chk my edited ques – Asif Sb Oct 19 '15 at 10:42 — Asif Sb, Oct 19 '15 at 10:42

How to create a layout in android which should support all the devices?

3 Answers3