CODEWITHSUNDEEP
androidxmlandroid-layoutandroid-studiolayout
Matheus Ariel
Matheus Ariel

Reputation: 105

how to make buttons of the same size

this is my xml, and this is the result, but would like the 3 buttons above (together) occupy the same size of the largest button, something like that image, where should I change my layout?

This is what I have:

this is the result

And this is what I want:

but I would like to stay so

My xml:

<?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:background="@android:color/transparent"
              android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:background="#FFA500"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_margin="10dp"
            android:background="#FFA500"
            android:orientation="vertical">

            <TextView
                android:id="@+id/textoPoup1"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
                android:textColor="@android:color/white"/>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal">

                <Button
                    android:id="@+id/nota0"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="0"/>

                <Button
                    android:id="@+id/nota40"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="50"/>

                <Button
                    android:id="@+id/nota80"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="90"/>
            </LinearLayout>


            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal">

                <Button
                    android:id="@+id/nota120"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="110"/>

                <Button
                    android:id="@+id/nota160"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="170"/>

                <Button
                    android:id="@+id/nota200"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="300"/>
            </LinearLayout>

            <Button
                android:id="@+id/proxima1"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="Next"/>
        </LinearLayout>
    </LinearLayout>
</LinearLayout>

Upvotes: 5

Views: 15157

Answers (3)

Vucko
Vucko

Reputation: 7479

This can be done easily using layout_weight for each of the buttons like this:

<Button
        android:id="@+id/nota0"
        android:layout_width="0"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="0"/>

This way, each button will take exactly 1/3 of the width of it's parent, which takes up the whole screen width. You can still play with the margins and the padding to make the spacing between the buttons as you wish.

Edit

You can do the same thing with ConstraintLayout much more easily without nesting, using chains and applying horizontal or vertical weights like app:layout_constraintHorizontal_weight="1"

Upvotes: 13

Rohit Patil
Rohit Patil

Reputation: 1068

In linearlayout we can give layout_weight attribute which is used for weightage of size for each child element in linearlayout, if layout_width="0dp" it will calculate width of that element on basis of weight or if layout_height="0dp" it will calculate height of that element on basis of weight.

It take average of weight of total element i.e if all element have layout_weight="1" it will assign 1/3 of the width of it's parent.

So in your case you want equally button size so need to assign same weight to all element and layout_width="0dp"

<?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:background="@android:color/transparent"
          android:orientation="vertical">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="10dp"
    android:background="#FFA500"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="10dp"
        android:background="#FFA500"
        android:orientation="vertical">

        <TextView
            android:id="@+id/textoPoup1"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
            android:textColor="@android:color/white"/>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <Button
                android:id="@+id/nota0"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:text="0"/>

            <Button
                android:id="@+id/nota40"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:text="50"/>

            <Button
                android:id="@+id/nota80"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:text="90"/>
        </LinearLayout>


        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <Button
                android:id="@+id/nota120"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:text="110"/>

            <Button
                android:id="@+id/nota160"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:text="170"/>

            <Button
                android:id="@+id/nota200"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:text="300"/>
        </LinearLayout>

        <Button
            android:id="@+id/proxima1"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="Next"/>
    </LinearLayout>
</LinearLayout>
</LinearLayout>

Upvotes: 2

Embydextrous
Embydextrous

Reputation: 1661

In the LinearLayout with 3 buttons add

android:orientation="horizontal"

Now, for all three buttons set this:

android:layout_width="0dp"
android:layout_weight="1"

Something like this:

<LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <Button
                android:id="@+id/nota0"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:text="0"/>

            <Button
                android:id="@+id/nota40"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:text="50"/>

            <Button
                android:id="@+id/nota80"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:text="90"/>
        </LinearLayout>

Then you can add proper margins:

For first button only add leftMargin as xdp and rightMargin as x/2dp. For second button add both left and right margin as xdp. For third button add left margin as x/2dp and right margin as xdp.

Upvotes: 2

Related Questions