Search code examples
androidxmlandroid-layoutandroid-linearlayout

Android - How to remove unwanted gaps when using LinearLayout with weights

I have a vertical LinearLayout that contains 2 horizontal LinearLayouts. Below the vertical LL, I have another horizontal LL. Since I'm using the weight attribute, I've made either the height or width attributes of the layouts = 0dp.

Code -

   <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="0.2"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="0.5"
            android:orientation="horizontal">

            <Button
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="0.25"
                android:id="@+id/buttonBack"
                android:text="back" />

            <Button
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="0.25"
                android:id="@+id/buttonRefresh"
                android:text="refresh" />

        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="0.5"
            android:orientation="horizontal">

            <Button
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="0.25"
                android:id="@+id/buttonScore1"
                android:text="Score: " />

            <Button
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="0.25"
                android:id="@+id/buttonScore2"
                android:text="Score: " />

        </LinearLayout>

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="0.1"
        android:orientation="horizontal">

        <Button
            android:id="@+id/buttonPlayer1"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="0.25"
            android:text="P1"
        />

        <Button
            android:id="@+id/buttonPlayer2"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="0.25"
            android:text="P2" />

    </LinearLayout>

This is how it looks -

Unwanted gaps

As you can see, there are unwanted gaps (and rounded corners) between the elements. How do I remove the white spaces?

Solution

  • Replace All your buttons with material buttons

    app:cornerRadius="0dp" this will remove corners

    And android:background="#000000" this is for expand the buttons to full height

    <com.google.android.material.button.MaterialButton
android:layout_width="0dp"
app:cornerRadius="0dp" //
android:layout_height="match_parent"
android:layout_weight="0.25"
android:background="#000000"
android:id="@+id/buttonRefresh"
android:text="refresh" />