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>

Answer 1

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.

Answer 2

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.

Answer 3

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.

Answer 4

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:

• 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.