android - Layout with 4 square buttons equally spaced and scale based on width of the screen

Question

Is there a way to have a layout with the 4 square buttons. The buttons should scale based on the width of the screen. I might have come across some ways of doing this dynamically in code, but is there a way to do it in the xml layout directly?

I'm new to the new ConstraintLayout in Android, but if it is possible using that, I'd appreciate being pointed to in the right direction to try it out. Thanks.

Answer 1

Take a look on these

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

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:orientation="horizontal"
    android:weightSum="2">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1">

        <Button
            android:layout_width="150dp"
            android:layout_height="150dp"
            android:layout_centerInParent="true"
            android:text="Button 1"
            android:textAllCaps="false"/>

    </RelativeLayout>


    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1">

        <Button
            android:layout_width="150dp"
            android:layout_height="150dp"
            android:layout_centerInParent="true"
            android:text="Button 2"
            android:textAllCaps="false"/>

    </RelativeLayout>

</LinearLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:orientation="horizontal"
    android:weightSum="2">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1">

        <Button
            android:layout_width="150dp"
            android:layout_height="150dp"
            android:layout_centerInParent="true"
            android:text="Button 3"
            android:textAllCaps="false"/>

    </RelativeLayout>


    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1">

        <Button
            android:layout_width="150dp"
            android:layout_height="150dp"
            android:layout_centerInParent="true"
            android:text="Button 4"
            android:textAllCaps="false"/>

    </RelativeLayout>

</LinearLayout>

Create different values folder (like values-small, values-large) and create dimens.xml file in appropriate folder put size (like 100dp for small) and use it where I used 150dp for button size.