The size of the buttons depending on the screen resolution

Question

I have LinearLayout with 6 buttons. At resolutions of 4.7" size buttons are almost perfect. But on devices with higher resolution they do not occupy the entire screen, and on devices with lower resolution not all are visible. Could you please explain how can I make the button appear the same on devices with different screen resolutions?

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/mainbackground">

    <TextView
        android:id="@+id/tvBody"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/tv_company"
        android:layout_marginLeft="30dp"
        android:textColor="#002060"
        android:layout_marginTop="20dp"
        android:textSize="15sp"
        >
    </TextView>
    <Button
        android:id="@+id/button_operations"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/gradient_blue"
        android:drawableLeft="@drawable/ic_purchase"
        android:paddingLeft="10dp"
        android:paddingTop="5dp"
        android:paddingBottom="5dp"
        android:gravity="left|center"
        android:text=" oper1"
        android:layout_marginTop="15dp"
        android:layout_marginLeft="30dp"
        android:layout_marginRight="30dp"
        android:textColor="#001B51"
        android:textSize="30sp"
        android:textStyle="bold"
        />

    ....... //4 more buttons

    <Button
        android:id="@+id/button_exit"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/gradient_blue"
        android:paddingLeft="10dp"
        android:drawableLeft="@drawable/ic_exit"
        android:gravity="left|center"
        android:text="  Exit"
        android:paddingTop="5dp"
        android:paddingBottom="5dp"
        android:layout_marginTop="10dp"
        android:layout_marginLeft="30dp"
        android:layout_marginRight="30dp"
        android:textColor="#001B51"
        android:textSize="30sp"
        android:textStyle="bold"/>
</LinearLayout>

use different dimens.xml and add to the respective resolution resource folder — rahul.ramanujam, Jun 05 '15 at 14:51

score 2 · Accepted Answer · edited May 23 '17 at 10:26

If you want each one to take up an equal portion of the remaining height after the first TextView, try using the LinearLayout's layout_weight attribute and set the height of each Button to fill_parent like so:

<Button
    android:id="@+id/button_exit"
    android:layout_width="match_parent"
    android:layout_height="fill_parent"
    android:layout_weight="1"
    ... />

If each Button has an equal layout_weight, they will each fill up the same portion of the available space. Since the TextView is unweighted, it will take up it's desired space first, and the weighted buttons will fill the remaining space together.

You may also want to specify different text sizes based on the screen's density (and probably also use styles to reduce the duplication of all your Button's layout params), but that's a bit beyond the scope of your original question.

Edit: To answer your question in the comments on how to provide different text sizes for different densities using different resources...

Go into values/dimens.xml and add <dimen name="main_button_text_size">30sp</dimen> on a new line.

Now go into the resources folder for a larger screen size, say values-sw720dp/dimens.xml (note: create the folder/file in the root of your res directory if it doesn't exist), and add <dimen name="main_button_text_size">40sp</dimen> on a new line.

Now, in your main layout file, set the textSize attribute on your buttons to be @dimen/main_button_text_size.

You've now just effectively set different values for the same TextView based on the size of the screen it's being displayed on.

There are other values folder as well, https://stackoverflow.com/a/21324209/1426565 gives a pretty good explanation if you want to learn more.

_You may also want to specify different text sizes based on the screen's density_ - how can i do this? — Andrew Efremov, Jun 05 '15 at 15:14

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

If you are using Android Studio, there is an option called:

Preview All Screen Sizes on Preview of Android Studio top of the toolbar preview.

So, here is what you need:

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

Range of screens supported:

Starting with Android 1.6 (API Level 4), Android provides support for multiple screen sizes and densities, reflecting the many different screen configurations that a device may have. You can use features of the Android system to optimize your application's user interface for each screen configuration and ensure that your application not only renders properly, but provides the best user experience possible on each screen.

ldpi (low) ~120dpi
mdpi (medium) ~160dpi
hdpi (high) ~240dpi
xhdpi (extra-high) ~320dpi
xxhdpi (extra-extra-high) ~480dpi
xxxhdpi (extra-extra-extra-high) ~640dpi

Finaly Answer: http://developer.android.com/guide/practices/screens_support.html#support

you should create an Layout file exactly like below picture for each API's:

enter image description here

res/layout/layout.xml
res/layout-small/layout.xml
res/layout-large/layout.xml
res/layout-xlarge/layout.xml
res/layout-land/layout.xml
res/layout-small-land/layout.xml
res/layout-large-land/layout.xml
res/layout-xlarge-land/layout.xml

and you need to design for every Screens.

score 1 · Answer 3 · answered Jun 05 '15 at 15:53

1

change all buttons to zero height

android:layout_height=0dp"

and add weight to them

android:layout_weight="1"

that will make all the views (buttons) scale equally to occuppy the whole LinearLayout.

ps.: ignore all those talks about using different layouts, or different dimensions.

answered Jun 05 '15 at 15:53

Budius

39,391
16
102
144

_ps.: ignore all those talks about using different layouts, or different dimensions._ - one can not ignore the different dimensions of text size – Andrew Efremov Jun 08 '15 at 08:10
@AndrewEfremov those are important tool for android developers but irrelevant for your main question. – Budius Jun 08 '15 at 08:18

score 0 · Answer 4 · answered Nov 27 '19 at 03:22

If you have different of dimension, You can switch match_parent and layout_weight by calling dimension property

==> layout_width= -1 (match_parent)
==> layout_width= 100dp ( fixed width )

==> layout_weight= 1 (setting weight)
==> layout_weight= 0 (Ignore weight)

Example: Suppose, We have three type of screen ( small, medium, large ) and you want to keep match_parent and layout_weight for small and medium to adjust automatically according to device size but for large device we want fixed width. You can do as follows ...

Here three screen type

1. values ( dimens.xml )
<dimen name="layout_width_value">-1dp</dimen> (android:layout_width=match_parent)
<dimen name="layout_weight_value">1</dimen> (layout_weight=1)

2. values-sw375dp ( dimens.xml )
<dimen name="layout_width_value">-1dp</dimen> (android:layout_width=match_parent)
<dimen name="layout_weight_value">1</dimen> (layout_weight=1)

3. values-sw600dp ( dimens.xml )
<dimen name="layout_width_value">370dp</dimen> (android:layout_width=370dp)
<dimen name="layout_weight_value">0</dimen> (layout_weight=0)

No 3 is different then No1 and No2 because for number 3 it's fixed width and no layout_weight. No1 and No2 is flexible width auto adjust according to screen size.

The size of the buttons depending on the screen resolution

4 Answers4

Linked