Multiple layouts for tablet and phone

Question

I am developing an android app for tablet and phone. So to achieve that I created two folders on for phone(layout) and one for tablet layouts(layout-sw600dp).

As per my previous questions comment I assumed that only tablets would pick up layouts from layout-sw600dp. But it does not seem to work.

For nexus 4, nexus 5, nexus 6, nexus 7 devices it is taking layout-sw600dp layout.

What am I missing here? How do I calculate phone/tablet size to proper DP layouts?

Required designs for tablet and phone:

Another retirement to use two separate layouts:

Phone design:

Tab design:

In response to the answered post belowanswer, I have a linear layout like this:

  <LinearLayout
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/linearLayouttest">
    <TextView
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:layout_gravity="center_horizontal"
        android:textColor="@color/black"
        android:gravity="left"
        android:text="LabelFirstName"
        android:layout_marginTop="@dimen/_8sdp"
        android:textSize="@dimen/_13sdp"
        android:id="@+id/firstNameLabel"
        android:layout_marginLeft="@dimen/_15sdp"
        android:layout_marginRight="@dimen/_15sdp" />
    <EditText
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:id="@+id/firstName"
        android:layout_marginTop="@dimen/_3sdp"
        android:background="@drawable/edt_bg"
        android:textColor="@color/black"
        android:layout_marginRight="@dimen/_15sdp"
        android:layout_marginLeft="@dimen/_15sdp"
        android:padding="@dimen/_5sdp"
        android:textSize="@dimen/_14sdp"
        android:textColorHint="@color/textColor" />
    <TextView
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:layout_gravity="center_horizontal"
        android:textColor="@color/black"
        android:gravity="left"
        android:text="LabelLastName"
        android:layout_marginTop="@dimen/_3sdp"
        android:textSize="@dimen/_13sdp"
        android:id="@+id/lastNameLabel"
        android:layout_marginLeft="@dimen/_15sdp"
        android:layout_marginRight="@dimen/_15sdp" />
    <EditText
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:id="@+id/lastName"
        android:layout_marginTop="@dimen/_3sdp"
        android:background="@drawable/edt_bg"
        android:textColor="@color/black"
        android:layout_marginRight="@dimen/_15sdp"
        android:layout_marginLeft="@dimen/_15sdp"
        android:padding="@dimen/_5sdp"
        android:textSize="@dimen/_14sdp"
        android:textColorHint="@color/textColor" />
</LinearLayout>

When I change the orientation the textviews are not visible. Any solution to this?

instead of creating multiple layout you can achieve that thing by using different dimens file..Try [this](https://stackoverflow.com/questions/47524010/can-we-make-one-layout-type-for-all-screen-size/47524265#47524265). — Harshad Prajapati, Dec 13 '17 at 04:36
I tried that, but it would not work because I have different designs for phone and table. Please check my edited question. — Arti, Dec 13 '17 at 04:54

score 2 · Answer 1 · 2017-12-14T05:16:11.223

You can use https://github.com/intuit/sdp library to set view dimensions as per all devices (phone & tablet). It will automatically resize as per device screen size. set it as below :

<TextView
    android:id="@+id/tv_username"
    android:layout_width="@dimen/_45sdp"
    android:layout_height="@dimen/_45sdp"
    android:text="@string/chat"
    android:textColor="@color/colorPrimary"/>

UPDATE

First Check device is whether a phone or tablet using Determine if the device is a smartphone or tablet?

or you can use below method to determine

public boolean isTablet() {
try {
    // Compute screen size
    DisplayMetrics dm = context.getResources().getDisplayMetrics();
    float screenWidth  = dm.widthPixels / dm.xdpi;
    float screenHeight = dm.heightPixels / dm.ydpi;
    double size = Math.sqrt(Math.pow(screenWidth, 2) + Math.pow(screenHeight, 2));
    // Tablet devices should have a screen size greater than 6 inches
    return size >= 6;

} catch(Exception e) {
    e.printStackTrace();
    return false;
}

}

Then set parent LinearLayout orientation programatically as below :

boolean tabletSize = getResources().getBoolean(R.bool.isTablet);
if (tabletSize) {
    LinearLayout ll = (LinearLayout) findViewById(R.id.linearLayout);
    ll.setLayoutParams(LinearLayout.WRAP_CONTENT, LinearLayout.WRAP_CONTENT);
    ll.setOrientation(LinearLayout.HORIZONTAL);
} else {
    LinearLayout ll = (LinearLayout) findViewById(R.id.linearLayout);
    ll.setLayoutParams(LinearLayout.WRAP_CONTENT, LinearLayout.WRAP_CONTENT);
    ll.setOrientation(LinearLayout.VERTICAL);
}

XML CORRECTION

Your layout must like below:

<LinearLayout
    android:id="@+id/linearLayouttest"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <LinearLayout
        android:id="@+id/linearLayout1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <TextView
            android:id="@+id/firstNameLabel"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_marginLeft="@dimen/_15sdp"
            android:layout_marginRight="@dimen/_15sdp"
            android:layout_marginTop="@dimen/_8sdp"
            android:gravity="left"
            android:text="LabelFirstName"
            android:textColor="@color/black"
            android:textSize="@dimen/_13sdp" />

        <EditText
            android:id="@+id/firstName"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="@dimen/_15sdp"
            android:layout_marginRight="@dimen/_15sdp"
            android:layout_marginTop="@dimen/_3sdp"
            android:background="@drawable/edt_bg"
            android:padding="@dimen/_5sdp"
            android:textColor="@color/black"
            android:textColorHint="@color/black"
            android:textSize="@dimen/_14sdp" />

    </LinearLayout>

    <LinearLayout
        android:id="@+id/linearLayout2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <TextView
            android:id="@+id/lastNameLabel"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_marginLeft="@dimen/_15sdp"
            android:layout_marginRight="@dimen/_15sdp"
            android:layout_marginTop="@dimen/_3sdp"
            android:gravity="left"
            android:text="LabelLastName"
            android:textColor="@color/black"
            android:textSize="@dimen/_13sdp" />

        <EditText
            android:id="@+id/lastName"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="@dimen/_15sdp"
            android:layout_marginRight="@dimen/_15sdp"
            android:layout_marginTop="@dimen/_3sdp"
            android:background="@drawable/edt_bg"
            android:padding="@dimen/_5sdp"
            android:textColor="@color/black"
            android:textColorHint="@color/black"
            android:textSize="@dimen/_14sdp" />

    </LinearLayout>
</LinearLayout>

Please check my edited question. I need different design for phone and tablet — Arti, Dec 13 '17 at 05:01
Lets guess you are set 25sdp of editText textSize for HDPI device then It will automatically resize your layouts as per other device size — , Dec 13 '17 at 05:39
Thanks for the answer but what if I have two textviews? If in a phone layout the textvies should line one below other center aligned and in tab layout one has to align at left and one to right? — Arti, Dec 13 '17 at 10:59
please check new update "XML CORRECTION" for your XML file correction — , Dec 14 '17 at 05:17

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

0

Basically xxhdpi and xhdpi is for 5" to 5"5' devices. For Tablets you can use

sw600dp

sw600dp-tvdpi

sw720dp

sw720dp-mdpi

sw720dp-xhdpi

. I have been working on this and these are the values which tabs takes. Try once. hope it will work.

edited Jun 20 '20 at 09:12

Community

1
1

answered Dec 13 '17 at 05:22

Abhishek Charismatic

366
1
3
19

Does that mean I have to create sw600dp,sw600dp-tvdpi,sw720dp,sw720dp-mdpi,sw720dp-xhdpi folders? – Arti Dec 13 '17 at 11:15
yes you have to create directory like values-sw600dp-tvdpi,values-sw600dp etc. and then you have to put dimens... – Abhishek Charismatic Dec 13 '17 at 11:22
one more thing these values directory must be created under res directory, not under values or layout. – Abhishek Charismatic Dec 13 '17 at 11:23
I am confused. I need to create dimens xml in all these folders? That I have created already. My question was for tablet layout which folder I need to put layout? – Arti Dec 13 '17 at 11:33
listen you need to create dimen.xml under all this folder. suppose in your value's folder dimen you have a key like 150dp , then put same key on every dimen.xml which you are using in rest of the dimen.xml and set the values accordig to your need – Abhishek Charismatic Dec 13 '17 at 11:40

Multiple layouts for tablet and phone

2 Answers2