android android-layout android-fragments android-linearlayout android-screen-support

How to Supporting Multiple Screens (different distance button in three different device)

I'm trying to create an app that is suitable for any kind of screen.

I created 4 different layout types ( layout - sw320dp , 480dp , 600dp , 720dp )

I am currently proceeding for "step " and I started to create the layout for devices that fall within sw-720dp then average for devices from 10 "

This is the activity_main.xml file:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawer_layout"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:fitsSystemWindows="true"
    tools:openDrawer="start">

    <RelativeLayout
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" >

        <include layout="@layout/toolbar" />

        <FrameLayout
            android:layout_below="@+id/toolbar"
            android:id="@+id/fragment_container"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:foreground="@drawable/shadow_toolbar"/>
    </RelativeLayout>

    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/nav_header_main"
        app:menu="@menu/nav_body_main" />

</android.support.v4.widget.DrawerLayout>

Then I designed the layout for a fragment ... and I added a button and the floating action button to insert ourselves as social references ( facebook twitter etc ) . With the latter I gave the size in dp and increasingly distances dp in the one of the more

This is code.

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

    <Button
        android:id="@+id/button_vai_assistenza"
        android:layout_width="540dp"
        android:layout_height="65dp"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:background="@drawable/custom_button"
        android:text="INIZIA SUBITO!"
        android:textColor="@drawable/custom_textcolor_button"
        android:textSize="20dp" />

    <TextView
        android:id="@+id/textView_nome_app"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/imageView_logo"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:layout_marginTop="20dp"
        android:text="Assistenza Copyworld"
        android:textColor="#000000"
        android:textSize="35dp"
        android:textStyle="bold" />

    <ImageView
        android:id="@+id/imageView_logo"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:layout_marginTop="30dp"
        android:src="@drawable/logo_nav_grande" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/textView_copyright_benv"
        android:layout_alignStart="@+id/textView_copyright_benv"
        android:layout_below="@+id/button_vai_assistenza"
        android:layout_marginTop="122dp"
        android:text="www.copyworld.it"
        android:textSize="25dp" />

    <RelativeLayout
        android:id="@+id/RelativeLayout_social"
        android:layout_width="wrap_content"
        android:layout_height="95dp"
        android:layout_below="@+id/textView2"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:layout_marginTop="12dp"
        android:orientation="horizontal">

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/float_social_facebook"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:adjustViewBounds="false"
            android:src="@drawable/fb_icon_social"
            app:backgroundTint="@drawable/custom_floating_action_button" />

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/float_social_twitter"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_alignParentTop="true"
            android:layout_marginLeft="20dp"
            android:layout_toEndOf="@+id/float_social_facebook"
            android:layout_toRightOf="@+id/float_social_facebook"
            android:src="@drawable/tw_icon_social"
            app:backgroundTint="@drawable/custom_floating_action_button" />

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/float_social_linkedin"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_alignParentTop="true"
            android:layout_marginLeft="20dp"
            android:layout_toEndOf="@+id/float_social_twitter"
            android:layout_toRightOf="@+id/float_social_twitter"
            android:src="@drawable/li_icon_social"
            app:backgroundTint="@drawable/custom_floating_action_button" />

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/float_social_youtube"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_alignParentTop="true"
            android:layout_marginLeft="20dp"
            android:layout_toEndOf="@+id/float_social_linkedin"
            android:layout_toRightOf="@+id/float_social_linkedin"
            android:src="@drawable/yt_icon_social"
            app:backgroundTint="@drawable/custom_floating_action_button" />
    </RelativeLayout>

    <TextView
        android:id="@+id/textView_copyright_benv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:layout_marginBottom="22dp"
        android:text="Copyright © 2016 Copyworld srl " />

</RelativeLayout>

I then launched the app on the 3 tablet I have available .. (namely a galaxy tab 2 10.1, a galaxy tab A and galaxy tab E).

As soon as the app is open on the 3 devices I noticed this thing "abnormal" ...

The "social icons" and the TextView were at different distances between them ... ( in particular of the galaxy tab 2 10.1 and Galaxy Tab E,) while the Galaxy tab A icons and TextView are at the right distance as set in 'xml ...

How come the two devices distances not only equal to the right device ?? (The two devices have the text and view the icons at equal distances but different from the one on the Galaxy Tab A)

As for other components such as (image view with the app icon and the TextView with the name of the app) the dimensions and distances have been respected ...

How can I do to make everything in a "perfect adaptable layout" on all devices without each they assume proportions and distances different ??

I read the official guide to this topic, where he speaks of dp, its layout etc.

I leave the pictures attached of 3 devices.

Galaxy Tab E and 10.1

Galaxy Tab A

Solution

Create three different Layouts Folder in your res folder for all devices and use the dimensions accordingly.

Generic Layout Folders

res/layout-small
res/layout-normal
res/layout-large
res/layout-xlarge

After you are done with making your Normal/Medium Layouts follow these steps:

Convert the Normal Dimensions for other Screen Sizes.
Copy your Normal Layout xml files in to other Folders.
Change the suffix of the dimensions used according to the folder that you are in
Resize the Image Resources in your drawable folder (Width and Height - Same technique as we used for converting the dimens) and put them in their respective drawable folder (drawable-ldpi, drawable-mdpi, drawable-hdpi, drawable-xdpi and so on).
Then your Layouts should work on every device with correct positioning.

For converting Values

0.75 - ldpi  (small)   //mdpi dimens *0.75
1.0  - mdpi  (normal)  //First create these dimensions
1.5  - hdpi  (large)   //mdpi dimens *1.5
2.0  - xhdpi (xLarge)  //mdpi dimens *2.0

For Example

android:layout_width="66dip" //in normal
android:layout_width="100dip"//in large 66*1.5=100(approx)
android:layout_width="52dip" //in small 66*0.75=52(approx)

Also new Qualifier has been introduced - SmallestWidth - AvailableScreenWidth - AvailableScreenHeight

I hope this helps.