Automatic resizing of buttons in grid layout using xml(android studio)

Question

I'm currently creating simple android app(Calculator). I don't want excessive empty space below buttons(buttons need to cover the whole screen and resize automatically on various screen sizes).

Images:

Design: https://i.stack.imgur.com/CCMiF.jpg

XML: https://i.stack.imgur.com/Wpvsf.jpg

score 2 · Answer 1 · answered Apr 07 '18 at 08:03

try this

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

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="0"
        android:textStyle="bold"
        android:textSize="40sp"
        android:gravity="right"/>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        >
       <Button
           android:layout_width="0dp"
           android:layout_height="wrap_content"
           android:layout_weight="1"
           android:background="#D7F8D9"
           android:text="7"
           android:layout_margin="1dp"
           android:textSize="20sp"
           />
        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="#D7F8D9"
            android:text="8"
            android:layout_margin="1dp"
            android:textSize="20sp"
            />
        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="#D7F8D9"
            android:text="9"
            android:layout_margin="1dp"
            android:textSize="20sp"
            />
        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="#2AF9CD"
            android:text="+"
            android:layout_margin="1dp"
            android:textSize="20sp"
            />
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        >
        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="#D7F8D9"
            android:text="4"
            android:layout_margin="1dp"
            android:textSize="20sp"
            />
        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="#D7F8D9"
            android:text="5"
            android:layout_margin="1dp"
            android:textSize="20sp"
            />
        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="#D7F8D9"
            android:text="6"
            android:layout_margin="1dp"
            android:textSize="20sp"
            />
        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="#2AF9CD"
            android:text="-"
            android:layout_margin="1dp"
            android:textSize="20sp"
            />
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        >
        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="#D7F8D9"
            android:text="1"
            android:layout_margin="1dp"
            android:textSize="20sp"
            />
        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="#D7F8D9"
            android:text="2"
            android:layout_margin="1dp"
            android:textSize="20sp"
            />
        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="#D7F8D9"
            android:text="3"
            android:layout_margin="1dp"
            android:textSize="20sp"
            />
        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="#2AF9CD"
            android:text="*"
            android:layout_margin="1dp"
            android:textSize="20sp"
            />
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:weightSum="4"
        >
        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="3"
            android:background="#D7F8D9"
            android:text="0"
            android:layout_margin="1dp"
            android:textSize="20sp"
            />
        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="#2AF9CD"
            android:text="/"
            android:layout_margin="1dp"
            android:textSize="20sp"
            />
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        >
        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="#2AF9CD"
            android:text="."
            android:layout_margin="1dp"
            android:textSize="20sp"
            />
        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="#2AF9CD"
            android:text="C"
            android:layout_margin="1dp"
            android:textSize="20sp"
            />
        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="2"
            android:background="#2AF9CD"
            android:text="="
            android:layout_margin="1dp"
            android:textSize="20sp"
            />
    </LinearLayout>

</LinearLayout>

score 0 · Accepted Answer · answered Apr 02 '18 at 15:58

There are a few ways to do it.

Use Constraint Layout. It's more efficient and modern way. It requires some knowledge to use, but once you get it you'll be able to do any layout in a very efficient way. Here you can find how to do a grid layout with it. The main concepts you'll need to use are guidelines and barriers
You can use weight concept in the Grid Layout. GridLayout (not GridView) how to stretch all children evenly
Use a LinearLayout with layout_height=match_parent and vertical orientation. Inside it place 5 LinearLayouts with a horizontal orientation, layout_width=math_parent, and weight=1, each representing a row of buttons.

Automatic resizing of buttons in grid layout using xml(android studio)

2 Answers2