Search code examples
androidxmllayoutscreen-resolution

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


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>


Solution

  • 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