Problems with layouts on different screens

Question

I tested my application all the time on my 5.2-inch device (LG G2).

I just launched the application on a larger 5.5-inch device (OnePlus 3T), and it does not look very good, as you can see below:

This is the main action:

<?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 xml layout for the subitems:

 <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 am I doing wrong here?

EDIT:

I searched a bit and found a solution to set the minimum height of the GridView dynamically with the 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 height of the screen by 2, because there are 2 lines. If I do this, the result will look like this:

Now the view becomes scrollable and the elements are the same size. But it does not fit the screen.

If I divided the height by 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.

Answer 1

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

2.Go for a solution based on the ratio of how you are trying to make

Here is how I do it:

First I get a model. My model has a height of 1920 px and a width of 1080 (usually this is HDTV resolution, aspect ratio 16: 9).

In this image, I know where the points of view are located

Then for any view / any other screen, I use the same relation to place them using LayoutParams

Here is an example of a linear LayoutParam that I used to position the 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 I actually did here, as I said in my model view, this view is 300 wide, 400 high, so adjust the sizes for my currant screen based on the ratio (using the currant screen size), and then I set these values ​​to this is myView .

Answer 2

You can use PercentageRelativeLayout for a better result.

Here is a link to it, I hope this helps you

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

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

Answer 3

To do this, you need to get the aspect ratio of the Grid View cell from your device 5.2.

(Cell height and width)

 Ratio = Width/Height 

If your user interface always has two columns, you need to get the column width and then calculate the height for your GridView cell.

Then go to Layoutparams Layoutparams from the Grid View to get an idea of ​​the adapter.

Also, if you are using weight for a child’s layout, it’s best to maintain your layout on all phones with a screen size.

To do this, you need to do some calculations to get the aspect ratio, and then calculate the actual Layoutparams for the child layout.

Answer 4

Change your .xml layout, I mean the xml layout for the subitems:

 <?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> 

Answer 5

Hope this helps
See the code below for the layout of the subitem.
What I did, I minimize the use of the layout_weight attribute, resize the text to use dimen in the sp module and change the gravity and layout_gravity .

Note: - It is always recommended to avoid minimal use of layout_weight and nested layout_weight .

`

 <?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> 

`

Answer 6

Use your original xml layout and put it in these layout directories (use the same file name):

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

Then create emulators using AVDs that are customized for each of the screen sizes. Since it is not always obvious which emulator configuration suits the screen size (it is not necessary to use AVD sizes), add this to your application class for debugging purposes to check which screen size is 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 appear as an example:

 dpHeight= 592.0 dpWidth=384.0 Selected configuration = sw320dp 

Finally, tinker with each layout configuration to make it look satisfactory for each emulated device / screen dimension.

Answer 7

you need to learn how to make a layout that supports several screen sizes, follow the link

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