Home > Software engineering >  How to reduce spaces between buttons in MDC-Android
How to reduce spaces between buttons in MDC-Android

Time:01-22

I am learning to create UI in XML now, and I'm struggling with such a problem.

I create UI which looks like this: UI in Android Studio

And on the phone it looks like this: How it looks in reality (screenshot from a phone)

How to reduce these vertical spaces? I want to get rid of this: These marked spaces

This is LinearLayout, and these are much bigger than I want them to be.

Here's my XML code for this UI:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp">


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


        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="101dp"
            android:layout_marginBottom="10dp"
            android:layout_weight="0"
            android:orientation="horizontal">

            <TextView
                android:id="@ id/textView3"
                android:layout_width="wrap_content"
                android:layout_height="80dp"
                android:layout_marginTop="16dp"
                android:layout_marginRight="10dp"
                android:layout_marginBottom="16dp"
                android:layout_weight="1"
                android:paddingTop="16dp"
                android:text="Yooooo"
                android:textAlignment="textEnd"
                android:textSize="50sp" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="80dp"
            android:layout_weight="0"
            android:layout_marginTop="10dp"
            android:orientation="horizontal">
            <Button
                android:layout_marginTop="16dp"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:textColor="@color/md_theme_dark_error"
                android:text="CLEAR ALL"
                android:backgroundTint="@color/md_theme_dark_onPrimary"
                android:textStyle="bold"
                android:textSize="20sp"/>
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:layout_weight="1"
            android:orientation="horizontal">

            <Button
                android:layout_width="0dp"
                android:layout_height="75dp"
                android:layout_marginLeft="5dp"
                android:layout_marginTop="10dp"
                android:layout_marginRight="5dp"
                android:layout_weight="1"
                android:backgroundTint="@color/md_theme_dark_onPrimary"
                android:gravity="center"
                android:text="/"
                android:textAlignment="center"
                android:textColor="@color/md_theme_dark_primary"
                android:textSize="20sp"
                android:textStyle="bold" />

            <Button
                android:layout_width="0dp"
                android:layout_height="75dp"
                android:layout_marginLeft="5dp"
                android:layout_marginTop="10dp"
                android:layout_marginRight="5dp"
                android:layout_weight="1"
                android:backgroundTint="@color/md_theme_dark_onPrimary"
                android:gravity="center"
                android:text="*"
                android:textAlignment="center"
                android:textColor="@color/md_theme_dark_primary"
                android:textSize="20sp"
                android:textStyle="bold" />

            <Button
                android:layout_width="0dp"
                android:layout_height="75dp"
                android:layout_marginLeft="5dp"
                android:layout_marginTop="10dp"
                android:layout_marginRight="5dp"
                android:layout_weight="1"
                android:backgroundTint="@color/md_theme_dark_onPrimary"
                android:gravity="center"
                android:text=" "
                android:textAlignment="center"
                android:textColor="@color/md_theme_dark_primary"
                android:textSize="20sp"
                android:textStyle="bold" />

            <Button
                android:layout_width="0dp"
                android:layout_height="75dp"
                android:layout_marginLeft="5dp"
                android:layout_marginTop="10dp"
                android:layout_marginRight="5dp"
                android:layout_weight="1"
                android:backgroundTint="@color/md_theme_dark_onPrimary"
                android:gravity="center"
                android:text="-"
                android:textAlignment="center"
                android:textColor="@color/md_theme_dark_primary"
                android:textSize="20sp"
                android:textStyle="bold" />

            <Button
                android:layout_width="0dp"
                android:layout_height="75dp"
                android:layout_marginLeft="5dp"
                android:layout_marginTop="10dp"
                android:layout_marginRight="5dp"
                android:layout_weight="1"
                android:backgroundTint="@color/md_theme_dark_onPrimary"
                android:gravity="center"
                android:text="="
                android:textAlignment="center"
                android:textColor="@color/md_theme_dark_primary"
                android:textSize="20sp"
                android:textStyle="bold" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="250dp"
            android:layout_weight="1"
            android:orientation="horizontal">

            <Button
                android:layout_marginTop="1dp"
                android:layout_width="1dp"
                android:layout_height="120dp"
                android:layout_marginRight="5dp"
                android:layout_weight="1"
                android:backgroundTint="@color/md_theme_dark_onPrimary"
                android:gravity="center"
                android:text="7"
                android:textAlignment="center"
                android:textSize="30sp"
                android:textStyle="bold" />

            <Button
                android:layout_width="0dp"
                android:layout_height="120dp"
                android:layout_marginLeft="5dp"
                android:layout_marginRight="5dp"
                android:layout_weight="1"
                android:backgroundTint="@color/md_theme_dark_onPrimary"
                android:gravity="center"
                android:text="8"
                android:textAlignment="center"
                android:textSize="30sp"
                android:textStyle="bold"
                android:layout_marginTop="1dp"/>

            <Button
                android:layout_width="0dp"
                android:layout_height="120dp"
                android:layout_marginLeft="5dp"
                android:layout_marginRight="5dp"
                android:layout_weight="1"
                android:backgroundTint="@color/md_theme_dark_onPrimary"
                android:gravity="center"
                android:text="9"
                android:textAlignment="center"
                android:textSize="30sp"
                android:textStyle="bold"
                android:layout_marginTop="1dp"/>

        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="245dp"
            android:layout_weight="1"
            android:orientation="horizontal">

            <Button
                android:layout_width="1dp"
                android:layout_height="120dp"
                android:layout_marginRight="5dp"
                android:layout_weight="1"
                android:backgroundTint="@color/md_theme_dark_onPrimary"
                android:text="4"
                android:textSize="30sp"
                android:textStyle="bold"
                android:layout_marginTop="1dp"/>

            <Button
                android:layout_width="0dp"
                android:layout_height="120dp"
                android:layout_marginLeft="5dp"
                android:layout_marginRight="5dp"
                android:layout_weight="1"
                android:backgroundTint="@color/md_theme_dark_onPrimary"
                android:gravity="center"
                android:text="5"
                android:textAlignment="center"
                android:textSize="30sp"
                android:textStyle="bold"
                android:layout_marginTop="1dp"/>

            <Button
                android:layout_width="0dp"
                android:layout_height="120dp"
                android:layout_marginLeft="5dp"
                android:layout_marginRight="5dp"
                android:layout_weight="1"
                android:backgroundTint="@color/md_theme_dark_onPrimary"
                android:gravity="center"
                android:text="6"
                android:textAlignment="center"
                android:textSize="30sp"
                android:textStyle="bold"
                android:layout_marginTop="1dp"/>
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="265dp"
            android:layout_weight="1"
            android:orientation="horizontal">
            <Button
                android:layout_width="1dp"
                android:layout_height="120dp"
                android:layout_marginRight="3dp"
                android:layout_weight="1"
                android:backgroundTint="@color/md_theme_dark_onPrimary"
                android:gravity="center"
                android:text="1"
                android:textAlignment="center"
                android:textSize="30sp"
                android:textStyle="bold"
                android:layout_marginTop="1dp"/>

            <Button
                android:layout_width="0dp"
                android:layout_height="120dp"
                android:layout_marginLeft="5dp"
                android:layout_marginRight="5dp"
                android:layout_weight="1"
                android:backgroundTint="@color/md_theme_dark_onPrimary"
                android:gravity="center"
                android:text="2"
                android:textAlignment="center"
                android:textSize="30sp"
                android:textStyle="bold"
                android:layout_marginTop="1dp"/>

            <Button
                android:layout_width="0dp"
                android:layout_height="120dp"
                android:layout_marginLeft="5dp"
                android:layout_marginRight="5dp"
                android:layout_weight="1"
                android:backgroundTint="@color/md_theme_dark_onPrimary"
                android:gravity="center"
                android:text="6"
                android:textAlignment="center"
                android:textSize="30sp"
                android:textStyle="bold"
                android:layout_marginTop="1dp"/>
        </LinearLayout>

    </LinearLayout>
    </LinearLayout>

Thanks very much for every helpful hint/answer!!!

I tried changing the weight, reducing DPI spaces, and setting the android:layout_marginTop/Bottom to 10 dpi, I thought it would stop it from increasing the spaces.

CodePudding user response:

You need to reduce the layout_height property for the Linear Layout and for the Button . And as an advice if you want to learn UI creation using XML just try playing around with the editor and test different things it will be much easier to learn & memorise this way.

  • Related