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.