adjusting button size to a certain proportion

Question

Consider the following diagram:

The blue buttons are buttons and the red is a textview. I am trying to place them side by side as shown in the diagram but am having confusion because the app should be compatible with different screen sizes and densities.

Basically I want all the buttons to be of the same sizes(square typically) and TextView larger and say when the screen gets bigger(e.g. rotating) only the middle(red) textView should expand and the button size should be the same while they stay in their positions.

what I have tried

• I tried using LinearLayout with layout_weight set accordingly but for bigger screensizes the buttons(blue) would also scale in proportion of their layout weight, and they'd not look square.
• It'd be easy doing this using constraint layout but, it requires hardcoding the button size(sizing the button in the design editor does this), which I don't think is a good idea because if screen get bigger button would be smaller.

I could also take a certain percentage of the screen width and apply it to the button size, but how do I make sure that icon for the button renders okay with the scaled buttons and the buttons are aligned as so:

i.e. their centers are aligned but different in height, equidistant from each other. also I'd have to do that programmatically instead of using the design editor or the xml.

So for this type of purposes what layout should I use and how should I set up my views?

Answer 1

If you want this design in xml, then try this

Note : Use the dimensions from dimens folder for different screen size. Here for LinearLayout of TextView Height use from dimens folder

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:orientation="horizontal"
    android:gravity="center"
    android:background="@color/colorPrimary"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:weightSum="0.9">

        <Button
            android:layout_width="0dp"
            android:background="@color/colorAccent"
            android:layout_weight="0.1"
            android:layout_height="wrap_content"
            android:layout_margin="2dp"/>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_weight="0.5"
            android:layout_height="100dp"
            android:layout_margin="2dp">
            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="#ff00ff" />
        </LinearLayout>

        <Button
            android:layout_width="0dp"
            android:background="@color/colorAccent"
            android:layout_weight="0.1"
            android:layout_height="wrap_content"
            android:layout_margin="2dp"/>
        <Button
            android:layout_width="0dp"
            android:background="@color/colorAccent"
            android:layout_weight="0.1"
            android:layout_height="wrap_content"
            android:layout_margin="2dp"/>
        <Button
            android:layout_width="0dp"
            android:background="@color/colorAccent"
            android:layout_weight="0.1"
            android:layout_height="wrap_content"
            android:layout_margin="2dp"/>

    </LinearLayout>

</LinearLayout>

Answer 2

Use linear layout and use layout_weight only to TextView and for Buttons give fix width e.g.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:orientation="horizontal"
android:layout_height="match_parent">
<Button
    android:layout_width="@dimen/length_50"
    android:background="@color/colorPrimary"
    android:layout_height="@dimen/length_50"/>
<TextView
    android:layout_width="0dp"
    android:layout_weight="1"
    android:background="@color/colorAccent"
    android:layout_height="@dimen/length_50"/>
<Button
    android:layout_width="@dimen/length_50"
    android:layout_marginEnd="@dimen/_10dp"
    android:background="@color/colorPrimary"
    android:layout_height="@dimen/length_50"/>
<Button
    android:layout_width="@dimen/length_50"
    android:layout_marginEnd="@dimen/_10dp"
    android:background="@color/colorPrimary"
    android:layout_height="@dimen/length_50"/>
<Button
    android:layout_width="@dimen/length_50"
    android:background="@color/colorPrimary"
    android:layout_height="@dimen/length_50"/>
</LinearLayout>

and result