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?

Could you share me your layout? It will be better to look at that and modify accordingly — Vinay Jayaram, Dec 02 '19 at 06:45
I deleted it because it didn't work, but all I did was set layout weight of the (pink)button to 4 and all others to one in a linear layout. The things that are not possible with this are: adjusting the centers horizontally as shown above and not having the buttons become rectangular on bigger screensizes(even they scale acc. to their layout weight they still would get rectangular if the screen size is arbitrarily increased.) — juztcode, Dec 02 '19 at 08:03

score 2 · Accepted Answer · answered Dec 02 '19 at 09:43

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>

I think layout_gravity was the trick ! I searched up about the dimens(I don't know how to use it yet, will look up later) but it seems you'll have to manage 20+ folder and dimen file(?) for it. Is it a better idea to calculate the screen width and assisgn a percentage of value to the buttons instead of relying on the dimen? — juztcode, Dec 02 '19 at 09:59
(1) Not 20+ 4-5 size of dimens is enough. (2)Yes calculating percentage upon screen size is an good idea. (3)Using Constraint Layout is another way for multi size screen. (4)You can also use a simple library instead of multiple dimens folder. — Arnold Brown, Dec 02 '19 at 10:05
For this design width is not a issue - split with weight will work fine on all devices- you can check it in design preview by changing device model. Only height you have to manage. — Arnold Brown, Dec 02 '19 at 10:09

score 1 · Answer 2 · answered Dec 02 '19 at 07:15

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

thank you for the answer, but I mentioned I had tried this in the question , if we use a fixed width for button it's going to get problematic if the app is used in bigger screen sizes, the button may appear smaller or larger on smaller screensizes. — juztcode, Dec 02 '19 at 07:58
as every screen has its own ``resolution``; hence you can use multiple ``dimen`` as of ``hdpi``, ``mdpi``, ``xhdpi``, ``xxhdpi``,``xxxhdpi`` — Ashish, Dec 02 '19 at 08:20
could you please explain this a bit more or like how it works such that it helps in maintaining UI consistency? — juztcode, Dec 02 '19 at 08:34
you can refer this question https://stackoverflow.com/questions/32860815/how-to-define-dimens-xml-for-every-different-screen-size-in-android — Ashish, Dec 02 '19 at 08:42

adjusting button size to a certain proportion

2 Answers2