Display widgets on screens with different densities (dpi)

Question

There is an application layout for sizes 720x1280 px

The application on different densities looks different, which is in principle understandable.

In the case of drawable elements, you need to create folders with the necessary density of type res / drawable-mdpi / and the sizes of elements in pixels multiply but the corresponding factor.

In the case of the layout, I understand you need to do the same, folding the layout for the desired size - in the right

res/layout/my_layout.xml // layout for normal screen size ("default") res/layout-large/my_layout.xml // layout for large screen size res/layout-xlarge/my_layout.xml // layout for extra-large screen size

or

 res/layout-sw600dp/ минимальная ширина res/layout-h600dp/ минимальная высота

Here http://developer.android.com/intl/ru/guide/practices/screens_support.html says that the second option is preferable.

There is a mess in my head, but I can understand where to start and what to build on! How to determine this minimum width, and how to proceed from this layout if the layout is in pixels, how to translate them into (dp).

Before that, I just took the size from the layout in pixels and divided it into two, but something tells me that it was wrong.

activity_main.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" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" tools:context=".activities.MainActivity" android:background="@color/colorWhite"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" android:id="@+id/linearLayout" android:layout_below="@+id/appBarLayout" android:layout_alignParentLeft="true" android:layout_alignParentStart="true" android:background="@drawable/header_button_shape_baground" > <Button android:text="НАЧАТЬ" android:id="@+id/btnStart" android:layout_width="300dp" android:layout_height="40dp" android:layout_marginTop="10dp" android:layout_marginBottom="10dp" android:layout_marginLeft="32dp" android:layout_marginRight="32dp" android:textColor="@color/colorWhite" android:background="@drawable/button_start_background" android:textStyle="bold" /> </LinearLayout> <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent" android:layout_below="@+id/linearLayout" android:layout_alignParentBottom="true"> <ListView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/listView" android:divider="@android:color/transparent" android:dividerHeight="5dp" android:focusable="false" /> </RelativeLayout> </RelativeLayout>

item_list.xml

 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:custom="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="97dp" android:orientation="horizontal" android:background="@color/colorWhite"> <!-- android:background="@drawable/item_shape_baground"--> <!-- ListRow Left sied Progress Bar --> <RelativeLayout android:id="@+id/progressbar" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_alignParentStart="true" android:gravity="center_vertical" android:paddingLeft="16dp" > <com.github.lzyzsd.circleprogress.CircleProgress android:id="@+id/donut_progress" android:layout_width="40dp" android:layout_height="40dp" android:layout_alignParentLeft="true" android:layout_alignParentStart="true" android:layout_centerVertical="true" custom:donut_progress="70" custom:circle_text_size="14sp" custom:circle_finished_color="@color/colorGreen" custom:circle_unfinished_color="@color/colorBackgroundDarckGrey" /> </RelativeLayout> <!-- Title of package--> <RelativeLayout android:id="@+id/titleDescription" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_below="@+id/linearLayoutTop" android:layout_centerVertical="true" android:layout_toRightOf="@+id/progressbar" android:gravity="center_vertical" android:orientation="horizontal" android:paddingLeft="16dp" > <TextView android:id="@+id/title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:text="Rihanna Love the way" android:textColor="@color/colorFontBlue" android:textSize="16sp" android:typeface="sans" /> <TextView android:id="@+id/description" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/title" android:layout_marginTop="6dp" android:singleLine="false" android:text="Just gona stand there and ..." android:textColor="#535353" android:textSize="13sp" /> </RelativeLayout> <!--Buy and about--> <RelativeLayout android:id="@+id/buyCase" android:layout_width="231dp" android:layout_height="match_parent" android:layout_centerVertical="true" android:gravity="center_vertical|right" android:paddingRight="16dp" android:layout_alignParentEnd="true" android:layout_alignParentRight="true" > <!-- Buy button --> <Button android:id="@+id/btnBuy" android:layout_width="62.5dp" android:layout_height="26dp" android:background="@drawable/button_board_baground" android:text="4.99 $" android:textColor="@color/colorFontBlue" /> <!-- Short description about package --> <TextView android:id="@+id/count" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerVertical="true" android:text="230 words" android:textSize="12dp" /> </RelativeLayout> <!-- SHADOWS --> <LinearLayout android:id="@+id/shadowLayoutBottom" android:layout_width="match_parent" android:layout_height="5dp" android:layout_alignParentBottom="true" android:background="@drawable/shadow_bottom" android:orientation="horizontal" /> <LinearLayout android:id="@+id/linearLayoutTop" android:layout_width="match_parent" android:layout_height="1.7dp" android:layout_alignParentTop="true" android:background="@drawable/shadow_top" android:orientation="vertical" /> </RelativeLayout>

activity_learn.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_above="@+id/btnNext" /> <Button android:id="@+id/btnNext" android:text="NEXT" android:layout_width="match_parent" android:layout_height="83dp" android:layout_marginLeft="16dp" android:layout_marginRight="16dp" android:layout_alignParentBottom="true" android:layout_marginBottom="10dp" android:textSize="20dp" android:background="@color/colorWhite"/> </RelativeLayout>

fragment_learn_activity.xml

  <ScrollView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/content" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/colorBackgroundGrey" > <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" android:gravity="center_horizontal|center_vertical" > <View android:layout_width="match_parent" android:layout_height="326dp" android:id="@+id/backView" android:background="@color/colorWhite" android:layout_alignParentTop="true" android:layout_alignParentRight="true" android:layout_alignParentEnd="true" /> <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_alignParentTop="true" android:layout_alignParentLeft="true" android:layout_alignParentStart="true" android:layout_marginTop="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="dolor sit amet" android:gravity="center_horizontal" android:layout_below="@+id/mainWord" android:layout_alignParentRight="true" android:layout_alignParentEnd="true" android:layout_marginTop="29dp" android:textSize="20sp" /> <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:layout_below="@+id/backView" android:layout_alignParentLeft="true" android:layout_alignParentStart="true" android:layout_marginTop="46dp" android:layout_marginLeft="16dp" android:layout_marginRight="16dp" android:textSize="16dp" /> <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:layout_below="@+id/textViewExample1" android:layout_alignParentLeft="true" android:layout_marginTop="16dp" android:layout_marginLeft="16dp" android:layout_marginRight="16dp" android:textSize="16dp" /> </RelativeLayout> </ScrollView>

Community spirit ♦ one · Accepted Answer · 2016-01-18T05:15:42

It will take a bunch of pages to explain everything on this topic (See also this answer and the official manual ). Briefly.

The layout in some resolution in this case is just a picture, as a rule, according to which you will build the actual layout, if it is made according to the guidelines of the design of the android application, then almost nothing needs to be translated, all relative dimensions for most typical layouts are already specified in the specifications design in dp . If your self-taught designer and guideline did not read, then you should send it to read and redo everything. If the client is a petty tyrant and he is not worried about the guidelines, but he wants it as it is drawn, then read this answer on the translation from the layout in dp

The decision whether a new layout is required for any type of device is made from whether another layout of widgets is required on the screen for this device. For example, the tablet has a large screen size and the layout for the phone looks too bulky on it, so you should place the widgets differently.

Usually, only TWO layout is required (not including markup for landscape mode, if this is different from portrait mode) - for all phones and for tablets (if you are not going to include smart watches and TVs in the list of supported devices). Recently, however, they also distinguish two separate markings for tablets - for 7-8 inches and for 9-10 inches separately. If you plan to place widgets on a 10 "tablet differently, for a better view or to display more information, use this division.

So, to support portrait mode on the following devices: phones, tablets 7-8 ", tablets 9-10" you will need three markup:

  res/layout/ <-телефоны some_layout.xml res/layout-sw600dp/ <-планшеты 7-8" some_layout.xml res/laiout-sw820dp/ <-планшеты 9-10" some_layout.xml

Widgets on the markup are scaled to the current resolution and density, their sizes are set, as a rule, relative to the screen size, and not in absolute values, through the parameters of relative sizes:

wrap_content - occupy only the required size for displaying content in the widget
match_parent - occupy the entire width (height) of the parent container
layout_weight - set the size relative to the "weight" of the element. Used for proportional separation of sizes, the greater the "weight" of each individual element relative to the others with the "weight", the more space it takes
layout_gravity - positioning to any edge or center of the parent container
gravity - positioning the content inside the widget to some edge or in the center

We should also mention such a powerful adaptive layout tool as the ConstraintLayout container ( use case ) recently developed by Google and included as a separate library. The container has very large opportunities for positioning and linking markup elements, and the final screen will look the same on all devices. Among the disadvantages is the relative complexity and current status of the beta version.

Grouping is also used with the help of “classic” layout containers: FrameLayout , LinearLayout , TableLayout , RelativeLayout ( more about containers ). A very powerful layout tool - TableLayout - almost everything can be put into a table of one kind or another, the container allows you to place everything relative to each other and the entire screen in relative values.

In some cases, for certain densities of the screen, you need to specify different sizes, for example, indents (margins or paddings) - for example, on a device with a MDPI density, a margin of 8dp will look defiantly wasteful.
For such cases, the indication of different sizes depending on the screen density is used - the file dimens.xml .
The / res / values / folders with qualifiers of the corresponding permissions ( res / values-mdpi /) are created, in which the dimensions for the parameters specified dynamically, depending on the density, are specified in the file dias.xml .
The markup does not indicate an absolute value, but a link to a file with dimensions:

res / values-mdpi / dimens.xml - margin for MDPI density

 <resources> <dimen name="margin_button_left">4dp</dimen> </resources>

res / values / dimens.xml - for all other screen densities

 <resources> <dimen name="margin_button_left">8dp</dimen> </resources>

In the markup:

 <Button android:layout_margin="@dimen/margin_button_left" />

Separately about the size of the text.

Text size is specified in sp , which is independent of scaling (for example, android:textSize="26sp" ).

In general, the system offered several default options:

@android:style/TextAppearance.Small - small font
@android:style/TextAppearance.Medium - medium and so on.

It is recommended to use them, as a rule, this indication of the font size looks correctly on all devices.

The AppCompat library offers a more extended list of font sizes: Body, Subhead, Headline, Display, Title, etc. ( font guidelines )

Finally.
It will be a very good practice to figure out how this or that application, released by professionals, is put together. For example, the incoming call screen in the Android system. On GitHub, there are also a lot of source codes of excellent applications for Android, it will be very useful to study the experience of "senior comrades".

Examples

The following markup will look the same on all screens:

Three buttons in a row horizontally across the entire width of the screen (button guidelines ):

Via LinearLayout:

 <LinearLayout android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="wrap_content"> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="button" android:id="@+id/button" android:layout_weight="1" android:layout_margin="8dp" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="button" android:id="@+id/button2" android:layout_weight="1" android:layout_margin="8dp" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="button" android:id="@+id/button3" android:layout_weight="1" android:layout_margin="8dp" /> </LinearLayout>

Via TableLayout:

 <TableLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:stretchColumns="*"> <TableRow android:layout_width="match_parent" android:layout_height="match_parent"> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="button" android:id="@+id/button" android:layout_margin="8dp" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="button" android:id="@+id/button2" android:layout_margin="8dp" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="button" android:id="@+id/button3" android:layout_margin="8dp" /> </TableRow> </TableLayout>

2. A list in full screen, with a button below the list, which is always visible when scrolling through the list:

 <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <ListView android:id="@+id/listView" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" > </ListView> <Button android:id="@+id/button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="0" android:text="Button" /> </LinearLayout>

There are many such examples. If you are interested in more specific layouts (only on grouping of individual elements, and not how to impose, as in Google Play), write in the comments, add a couple of pieces

It turns out that if the designer does everything according to the guidelines, for most components and indents it is enough to use only one values file with values?
@iamtihonov is logical to assume that instead of using ONE file, the values can be “hard-coded” in the markup - why should the device work too much.
If you refuse small screens (-ldpi -mdpi), which you cannot find now, then it makes sense to make a file with indentation values only if the main markup is used for the tablet, and not its own.
markings on phones in the range -hdpi -xxxhdpi, as a rule, look quite adequate without density adjustments.
But you need to look at the specific markup naturally, if there is a need - to enter other values.
Text size is specified in sp - density, not dependent on scaling.
In general, the system offers several default options - @android:style/TextAppearance.Small - small font, @android:style/TextAppearance.Medium - medium, etc. It is recommended to use them, as a rule, this indication of the font size looks correctly on all devices.
And correctly, I understood that you should not specify the size, for example, of a list item in dp, but it is better to specify how wrap_content + marginTop \ marginBottom

pavlofff pavlofff 33.6k five 32 94 · Answer 2 · 2016-01-18T09:21:22

In the comment all will not enter. This "answer" is comments on the specific markup in the question. If the community believes that such comments are not appropriate, I will delete them, after reading the question by the author.

by activity_main.xml

The root container RelativeLayout - your markup - two vertical elements, here this container is more than not appropriate, requires a vertical LinearLayout.
ListView wrapped in a RelativeLayout container. Containers are used to build MULTIPLE widgets. ONE widget in the container does not make sense. Widgets have their own positioning attributes in sufficient quantities.
The dimensions of the button are absolute. You should specify wrap_content and place it in the right place through layout_margin and layout_gravity
The horizontal size of the ListView, as a rule, match_parent - occupy the entire width.

by item_list.xml:

Fixed height. On different screens, this approach will give the result that some of the widgets will not be visible or free space will remain.
RelativeLayout has no android: orientation attribute
CircleProgress is one in the container, the same as point 3 above.
container titleDescription, here is a fairly vertical LinearLayout
The  section is the absolute values of the elements, their size may differ significantly on different screens. Use wrap_content
Text size is specified in sp, not dp
For the entire item, it’s more appropriate to roll into one TableLayout

by ctivity_learn.xml:

The height of the button is absolute. Use wrap_content. On different devices, its size will be different. Use margin and padding to give it the desired height.
Text size is specified in sp, not dp

by fragment_learn_activity.xml:

One tableLayout is more appropriate
Text size is specified in sp, not dp

This is of course not all, but just immediately catches the eye.

True with CircleProgress it was not possible to do as with a button, probably because a third-party library.

Display widgets on screens with different densities (dpi)

2 answers 2

More articles: