There is a layout application, running the application on three screens with the same resolution and different dpi - I got this picture. My question is how to make it look the same on all screens.

enter image description here

activity.xml

<?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:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/colorBackgroundGrey" > <android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:theme="@style/AppTheme.AppBarOverlay" android:id="@+id/appBarLayout" android:background="@drawable/header_button_shape_baground"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" app:popupTheme="@style/AppTheme.PopupOverlay" /> </android.support.design.widget.AppBarLayout> <android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/pager" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_below="@+id/appBarLayout" android:layout_alignParentBottom="true" /> <Button android:id="@+id/btnNext" android:text="NEXT" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginLeft="16dp" android:layout_marginRight="16dp" android:layout_alignParentBottom="true" android:paddingTop="25dp" android:paddingBottom="25dp" android:layout_marginBottom="10dp" android:textSize="20sp" android:background="@color/colorWhite"/> </RelativeLayout>

fragment.xml

 <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center_horizontal|center_vertical" android:background="@color/colorBackgroundGrey" xmlns:android="http://schemas.android.com/apk/res/android" > <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/relativeLayout" android:layout_alignParentTop="true" android:layout_alignParentLeft="true" android:layout_alignParentStart="true" android:background="@color/colorWhite" > <TextView style="?android:textAppearanceMedium" android:lineSpacingMultiplier="1.2" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Lorem ipsum" android:id="@+id/mainWord" android:gravity="center_horizontal" android:layout_marginLeft="16dp" android:layout_marginRight="16dp" android:layout_alignParentTop="true" android:layout_alignParentLeft="true" android:layout_alignParentStart="true" android:paddingTop="102.5dp" android:textColor="@color/colorBlack" android:textSize="44sp" /> <TextView android:id="@+id/translateWord" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="sunt in culpa qui officia deserunt mollit anim id est laborum" android:gravity="center_horizontal" android:layout_below="@+id/mainWord" android:layout_alignParentRight="true" android:layout_alignParentEnd="true" android:layout_marginLeft="16dp" android:layout_marginRight="16dp" android:paddingTop="29dp" android:paddingBottom="50dp" android:textSize="20sp" /> </RelativeLayout> <LinearLayout android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_below="@+id/relativeLayout" android:layout_marginTop="46dp" android:layout_marginBottom="46dp" android:layout_marginLeft="16dp" android:layout_marginRight="16dp"> <TextView android:id="@+id/textViewExample1" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua" android:textSize="16sp" /> <TextView android:id="@+id/textViewExample2" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Ut enim ad minim veniam, quis nostrud exercitation." android:textSize="16dp" android:layout_below="@+id/textViewExample1" android:layout_marginTop="16dp" /> </LinearLayout> </RelativeLayout>
  • Do you mean that you want a white field to always take a strictly defined percentage of the height of the screen? - Yuriy SPb ♦
  • If you do not describe much for what you need, it will be easier for you to help. Now the feeling that you want something very strange and wrong. Usually they ask, on the contrary, how to make it look the same at different resolutions. - xkor
  • @Yuriy SPb yes, you understood correctly! how to implement it!? - Kirill Stoianov
  • @xkor thing is that if you take for example a different resolution and also on different densities, then the picture will be about the same. Depending on the resolution, the design is whiter than white, but with different densities this problem arises - Kirill Stoianov

1 answer 1

If you want to make the white area and the gray area be distributed over the height by percentages and not by the size of their contents, then replace RelativeLayout with LinearLayout and set the android:layout_weight for these elements and set the height to 0.

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/colorBackgroundGrey" android:gravity="center_horizontal|center_vertical" android:orientation="vertical"> <RelativeLayout android:id="@+id/relativeLayout" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" android:background="@color/colorWhite"> <TextView android:id="@+id/mainWord" style="?android:textAppearanceMedium" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_alignParentStart="true" android:layout_alignParentTop="true" android:layout_marginLeft="16dp" android:layout_marginRight="16dp" android:gravity="center_horizontal" android:lineSpacingMultiplier="1.2" android:paddingTop="102.5dp" android:text="Lorem ipsum" android:textColor="@color/colorBlack" android:textSize="44sp" /> <TextView android:id="@+id/translateWord" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentEnd="true" android:layout_alignParentRight="true" android:layout_below="@+id/mainWord" android:layout_marginLeft="16dp" android:layout_marginRight="16dp" android:gravity="center_horizontal" android:paddingBottom="50dp" android:paddingTop="29dp" android:text="sunt in culpa qui officia deserunt mollit anim id est laborum" android:textSize="20sp" /> </RelativeLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" android:orientation="vertical" android:paddingBottom="46dp" android:paddingLeft="16dp" android:paddingRight="16dp" android:paddingTop="46dp"> <TextView android:id="@+id/textViewExample1" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua" android:textSize="16sp" /> <TextView android:id="@+id/textViewExample2" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="16dp" android:text="Ut enim ad minim veniam, quis nostrud exercitation." android:textSize="16dp" /> </LinearLayout> </LinearLayout>