Layout issues on different screens

Question

I developed and tested my application the whole time on my 5.2 inch device (LG G2).

Only just I started the application on a bigger 5.5 inch device (OnePlus 3T) and it looks not good as you can see below:

This is the main Activity:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
          xmlns:app="http://schemas.android.com/apk/res-auto"
          android:id="@+id/layout_main_menu"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:background="#b2b2b2"
          android:orientation="vertical">

<!-- android:layout_height="wrap_content" -->
<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    android:fitsSystemWindows="true"
    android:minHeight="?attr/actionBarSize"
    android:padding="2dp"
    app:titleMarginStart="20dp"
    app:titleTextAppearance="@style/MyMaterialTheme.Base.TitleTextStyle"
    app:titleTextColor="@color/textColorPrimary">

    <TextView
        android:id="@+id/toolbar_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:textColor="@android:color/white"
        android:textStyle="bold|italic"/>

</android.support.v7.widget.Toolbar>


<!--android:columnWidth="160dp"-->
<GridView
    android:id="@+id/grid_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="10dp"
    android:gravity="center"
    android:horizontalSpacing="20dp"
    android:numColumns="2"
    android:stretchMode="columnWidth"
    android:verticalSpacing="20dp"></GridView>

</LinearLayout>

And this is the layout xml for the sub items:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/item"
android:layout_width="300dp"
android:layout_height="100dp"
android:layout_gravity="center_horizontal"
android:background="#FFFFFFFF"
android:gravity="center_horizontal"
android:orientation="horizontal"
tools:context="de.dk.masterfitness.ActMain" >

<!-- PART I. -->
<!-- THIS IS THE BAR ON THE LEFT -->

<TextView
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_weight="2"
    android:background="@android:color/holo_green_light" />

<!-- PART II. -->
<!-- THIS IS THE MIDDLE WITH TEXTS AND LINE -->

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_weight="6"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginBottom="5dp"
        android:layout_marginTop="5dp"
        android:layout_weight="2"
        android:background="#FFFFFFFF"
        android:orientation="horizontal" >

        <!-- ViewGroup with texts -->

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="10dp"
            android:layout_marginTop="5dp"
            android:layout_weight="2"
            android:background="#FFFFFFFF"
            android:orientation="vertical" >

            <!-- First is fitted with triangle -->

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="horizontal" >

                <ImageView
                    android:id="@+id/iv_training"
                    android:layout_width="20dp"
                    android:layout_height="20dp"
                    android:rotation="90.0"
                    android:src="@drawable/triangle" />

                <TextView
                    android:id="@+id/tv_header"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textAppearance="?android:attr/textAppearanceMedium"
                    android:textColor="@android:color/black"
                    android:textStyle="bold" />
            </LinearLayout>

            <TextView
                android:id="@+id/tv_text"
                android:layout_width="200dp"
                android:layout_height="70dp"
                android:paddingLeft="20dp"
               android:textAppearance="?android:attr/textAppearanceSmall" />
        </LinearLayout>

        <!-- nothing more than single vertical line -->

        <View
            android:layout_width="1dp"
            android:layout_height="match_parent"
            android:background="#F1999999" >
        </View>
    </LinearLayout>
</LinearLayout>

<!-- PART III. -->
<!-- BUTTON ON THE RIGHT -->

<TextView
    android:layout_width="10dp"
    android:layout_height="match_parent"
    android:layout_weight="6"
    android:gravity="center"
    android:text=">"
    android:textAlignment="gravity"
    android:textColor="@android:color/holo_green_light"
    android:textSize="40dp"
    android:textStyle="bold" />
</LinearLayout>

What I'm doing wrong here?

EDIT:

I searched a little bit and found a solution to set the minimum height of the GridView dynamically with following code:

DisplayMetrics metrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(metrics);

int width = metrics.widthPixels;
int height = metrics.heightPixels;

In addition I added these lines of code to my Adapter:

gridView = inflater.inflate(R.layout.act_main_menu_sub, null);
gridView.setMinimumHeight(ActMainMenu.height/2);

In my case I have to divide the screen height through 2 because there are 2 rows. If I do this the result looks like this:

The View becomes scrollable now and the items have the same size. But it doesn't fit on the screen.

If I divide the height through 3 it looks better on my 5.5 device:

But I don't like this solution and I don't understand why it looks better if I choose 3 instead of 2.

Fubsy

So now where you want to change in layout? – Nessy

It beacause u use textApperance in place of text size, use textSize= "22dp", or use as its sute ur requirement, remember to use the dp not sp for defining ur textsize. this will help I'm sure. – Lichi

Check this #15261588 – Dissect

Answer 1

You can use PercentageRelativeLayout for better result.

Here is some Referral Link of it, Hope it helps you

https://developer.android.com/reference/android/support/percent/PercentRelativeLayout.html

https://inthecheesefactory.com/blog/know-percent-support-library/en

Oosperm

Answer 2

1.Use multi layouts and create different uis https://developer.android.com/guide/practices/screens_support.html

2.Go for a solution based on ratio like you are trying to do

This is how I do;

First I get a model. My model is with 1920 px in height and 1080 in width (Normally its an HDTV resolution,16:9 aspect ratio)

In that image I know where the views positioned

Then for any view/any other screen I use the same ratio to position them using LayoutParams

Here is a linear LayoutParam example that I used to position a view:

        DisplayMetrics displaymetrics = new DisplayMetrics();
        getWindowManager().getDefaultDisplay().getMetrics(displaymetrics);
        height = displaymetrics.heightPixels;
        width = displaymetrics.widthPixels;

    LinearLayout.LayoutParams topLenP= new LinearLayout.LayoutParams(300 * width / 1080, 400 * width / 1920); 
        //topLenP.topMargin = x* height / 1920;
        //topLenP.leftMargin = y* width / 1080;
    myView.setLayoutParams(topLenP);

What actually I did here,as I said in my model view this view takes 300 width , 400 in height so adjust that sizes for my currant screen based on the ratio (using currant screen size) and then I set that values to this myView.

Income

Answer 3

Use your initial layout xml and drop it in these layout directories (use same filename):

res/layout-sw320dp
res/layout-sw480dp
res/layout-sw600dp
res/layout-sw720dp

Then create emulators using the AVD which are configured for each of the screen dimensions. Since it's not always obvious which emulator configuration satisfies which screen size (can't necessarily use the AVD dimensions), add this to your application class for debug purposes to verify which screen dimension layout is being used:

    DisplayMetrics displayMetrics = getResources().getDisplayMetrics();
    float dpHeight = displayMetrics.heightPixels / displayMetrics.density;
    float dpWidth = displayMetrics.widthPixels / displayMetrics.density;
    Log.e(TAG,"dpHeight= "+dpHeight+" dpWidth="+dpWidth);
    Log.e(TAG,"Selected configuration = "+getString(R.string.selected_configuration));

It will display as an example:

dpHeight= 592.0 dpWidth=384.0
Selected configuration = sw320dp

Finally, tinker with each layout configuration such that it looks satisfactory for each emulated device / screen dimension.

Fara

Answer 4

For this you need to get Aspect Ratio of cell of Grid View from your 5.2 device.

(Height and Width of cell)

Ratio = Width/Height 

If your UI always has two columns then you need to get columns width and then Calculate height for your GridView Cell .

Then pass into Grid View Child Layoutparams from get view of Adapter.

Also if you are using weight for child layout then it is best way to maintain your layout same in all screen size phones.

For all this you have to do some calculation to get Aspect Ratio and then calculate actual Layoutparams values for child layout.

Gibson

Answer 5

Change Your layout.xml i mean layout xml for the sub items:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:id="@+id/item"
              android:layout_width="match_parent"
              android:layout_height="100dp"
              android:layout_gravity="center_horizontal"
              android:background="#FFFFFFFF"
              android:weightSum="10"
              android:orientation="horizontal">

    <!-- PART I. -->
    <!-- THIS IS THE BAR ON THE LEFT -->

    <TextView
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="@android:color/holo_green_light" />

    <!-- PART II. -->
    <!-- THIS IS THE MIDDLE WITH TEXTS AND LINE -->

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_weight="8"
        android:orientation="vertical" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginBottom="5dp"
            android:layout_marginTop="5dp"
            android:layout_weight="2"
            android:background="#FFFFFFFF"
            android:orientation="horizontal" >

            <!-- ViewGroup with texts -->

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginRight="10dp"
                android:layout_marginTop="5dp"
                android:layout_weight="2"
                android:background="#FFFFFFFF"
                android:orientation="vertical" >

                <!-- First is fitted with triangle -->

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal" >

                    <ImageView
                        android:id="@+id/iv_training"
                        android:layout_width="20dp"
                        android:layout_height="20dp"
                        android:src="@drawable/triangle"                         
                        android:rotation="90.0"/>

                    <TextView
                        android:id="@+id/tv_header"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:textAppearance="?android:attr/textAppearanceMedium"
                        android:textColor="@android:color/black"
                        android:textStyle="bold" />
                </LinearLayout>

                <TextView
                    android:id="@+id/tv_text"
                    android:layout_width="200dp"
                    android:layout_height="70dp"
                    android:paddingLeft="20dp"
                    android:textAppearance="?android:attr/textAppearanceSmall" />
            </LinearLayout>

            <!-- nothing more than single vertical line -->

            <View
                android:layout_width="1dp"
                android:layout_height="match_parent"
                android:background="#F1999999" >
            </View>
        </LinearLayout>
    </LinearLayout>

    <!-- PART III. -->
    <!-- BUTTON ON THE RIGHT -->

    <TextView
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text=">"
        android:textAlignment="gravity"
        android:textColor="@android:color/holo_green_light"
        android:textSize="40dp"
        android:layout_weight="1"
        android:textStyle="bold" />
</LinearLayout>

Disguise

Answer 6

Hope this will help
See the code below for sub item layout.
What i have done is, i minimize the usage of layout_weight attribute, changed text size to use dimen in unit sp and change in gravity and layout_gravity value.

Note:- It is always a good idea to make minimum use of layout_weight and nested layout_weight should be avoided.

`

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/item"
    android:layout_width="300dp"
    android:layout_height="100dp"
    android:layout_gravity="center_horizontal"
    android:background="#FFFFFFFF"
    android:gravity="center_vertical"
    android:orientation="horizontal"
     >

    <!-- PART I. -->
    <!-- THIS IS THE BAR ON THE LEFT -->

    <TextView
        android:layout_width="10dp"
        android:layout_height="match_parent"
        android:background="@android:color/holo_green_light" />

    <!-- PART II. -->
    <!-- THIS IS THE MIDDLE WITH TEXTS AND LINE -->

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:orientation="vertical" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#FFFFFFFF"
            android:layout_marginBottom="5dp"
            android:layout_marginTop="5dp"
            android:orientation="horizontal" >

            <!-- ViewGroup with texts -->

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginRight="10dp"
                android:layout_marginTop="5dp"
                android:background="#FFFFFFFF"
                android:orientation="horizontal" >

                <!-- First is fitted with triangle -->
                <ImageView
                    android:id="@+id/iv_training"
                    android:layout_width="20dp"
                    android:layout_height="20dp"
                    android:rotation="90.0"
                    android:src="@drawable/triangle" />

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="5dp"
                    android:orientation="vertical" >

                    <TextView
                        android:id="@+id/tv_header"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:textAppearance="?android:attr/textAppearanceMedium"
                        android:textColor="@android:color/black"
                        android:text="Header text"
                        android:textStyle="bold" />
                    <TextView
                        android:id="@+id/tv_text"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="4dp"
                        android:text="This is Description Text\nDescription text"
                        android:textAppearance="?android:attr/textAppearanceSmall" />
                </LinearLayout>


            </LinearLayout>

            <!-- nothing more than single vertical line -->


        </LinearLayout>
    </LinearLayout>

    <!-- PART III. -->
    <!-- BUTTON ON THE RIGHT -->
    <View
        android:layout_width="1dp"
        android:layout_height="match_parent"
        android:layout_marginBottom="5dp"
        android:layout_marginTop="5dp"
        android:background="#F1999999" >
    </View>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:padding="10dp"
        android:text=">"
        android:textColor="@android:color/holo_green_light"
        android:textSize="40sp"
        android:textStyle="bold" />
</LinearLayout>

`

Juryrig

Answer 7

you have to learn how to make layout that support multiple screen size please got through the link

https://developer.android.com/guide/practices/screens_support.html

Fraunhofer