Make 2 buttons with variable content the same size Android

Viewed 27

I am trying in a constraint layout to make two buttons take the same size as the one with more text.

This is what I have enter image description here

This is what I want enter image description here

Playing with the height attribute of the buttons, setting it to "0" you can get one button to follow the other, but the other does not do the same

here is the code

<androidx.constraintlayout.widget.ConstraintLayout
                    android:id="@+id/tools_ly_first_buttons"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginStart="@dimen/margin_bubble_answer_buttons"
                    android:layout_marginEnd="@dimen/margin_bubble_answer_buttons"
                    android:layout_marginBottom="2dp"
                    android:visibility="visible"
                    app:layout_constraintEnd_toEndOf="@+id/tools_btn_1"
                    app:layout_constraintStart_toEndOf="@+id/tools_btn_1"
                    tools:visibility="visible">

                    <Button
                        android:id="@+id/tools_btn_1"
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:background="@drawable/btn_round_confirmation_yes"
                        android:fontFamily="@font/calibri_regular"
                        android:textAllCaps="false"
                        android:textColor="@color/white"
                        android:layout_marginEnd="1dp"
                        android:textSize="14sp"
                        android:padding="@dimen/padding_bubble_answer_buttons_text"
                        tools:text="Perfect asdasdas."
                        app:layout_constraintEnd_toStartOf="@+id/tools_btn_2"
                        app:layout_constraintStart_toStartOf="parent"
                        app:layout_constraintTop_toTopOf="@id/tools_ly_first_buttons"
                        app:layout_constraintBottom_toBottomOf="@id/tools_ly_first_buttons"/>

                    <Button
                        android:id="@+id/tools_btn_2"
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:background="@drawable/btn_round_confirmation_yes"
                        android:fontFamily="@font/calibri_regular"
                        android:textAllCaps="false"
                        android:textColor="@color/white"
                        android:padding="@dimen/padding_bubble_answer_buttons_text"
                        android:layout_marginStart="1dp"
                        android:textSize="14sp"
                        app:layout_constraintEnd_toEndOf="parent"
                        app:layout_constraintStart_toEndOf="@+id/tools_btn_1"
                        app:layout_constraintTop_toTopOf="parent"
                        app:layout_constraintBottom_toBottomOf="parent"
                        tools:text="Perfect Perfect square trition. Perfect Perfect square trition. Perfect Perfect square trition. Perfect Perfect square trition. Perfect Perfect square trition. Perfect Perfect square trition." />

                </androidx.constraintlayout.widget.ConstraintLayout>
1 Answers

You can do this by wrapping the two buttons into a LinearLayout (or another ConstraintLayout) and setting their heights both to match_parent while setting the height of the container view to wrap_content.

If your ConstraintLayout is already a container to be nested in other views, than the extra nesting is not necessary. Just set the button heights to match_parent and they will fill the container.

<androidx.constraintlayout.widget.ConstraintLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <LinearLayout
        android:id="@+id/button_container"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <Button
            android:id="@+id/btnLeft"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:text="Short Text"
            android:layout_weight="1.0"
            android:layout_margin="4dp"
            />

        <Button
            android:id="@+id/btnRight"
            android:text="Long Text Taking Up Many Many Many Lines of Space and More than One Line Definitely"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1.0"
            android:layout_margin="4dp"
            />

    </LinearLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

Here's what this produces - doesn't matter which button has the long text.

example layout

Note In the XML you shared, the parent ConstraintLayout appears to be constrained to one of its child views (tools_btn_1). This is probably not valid.

Related