Question 128431 in Android Studio Question posted in
The official documentation can be found here.

Android Studio – How to improve my XML design so it will look better

Right know I have two designs of my android app, but it is annoying me that the buttons are not perfectly alligned. First of all I used 3 layers of Linear Layout, but my Enter button does not look good.

Then I decided to use Relative Layout, but the problem here is that middle buttons becomes bigger than its neighbors. Even thought my Enter button looks good I can not properly fit my button #3 and button #1. I tried to make Clear button

layout_toEndOf = button #1

But my whole design is disappearing after this.

I will be appreciate with any advice or tips!!!

Linear Layout Design:

Linear Layout design

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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">

    <FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/layerOne"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:layout_alignParentEnd="true">

        <TextView
            android:id="@+id/resultText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal|center_vertical"
            android:text="@string/result"/>
    </FrameLayout>

    <LinearLayout
        android:id="@+id/layerOne"
        android:layout_width="match_parent"
        android:layout_height="70dp"
        android:layout_alignParentStart="true"
        android:layout_alignParentEnd="true"
        android:orientation="horizontal"
        android:layout_above="@id/layerTwo">

        <Button
            android:id="@+id/buttonZero"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_marginStart="5dp"
            android:layout_marginEnd="5dp"
            android:layout_weight="1"
            android:onClick="pressedZero"
            android:text="@string/_0" />

        <Button
            android:id="@+id/buttonOne"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_marginStart="5dp"
            android:layout_marginEnd="5dp"
            android:text="@string/_1"
            android:layout_weight="1"
            android:onClick="pressedOne"/>

        <Button
            android:id="@+id/buttonClear"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_marginStart="5dp"
            android:layout_marginEnd="5dp"
            android:layout_weight="1"
            android:text="@string/clear"
            android:onClick="pressedClear"/>
    </LinearLayout>

    <LinearLayout
        android:id="@+id/layerTwo"
        android:layout_width="match_parent"
        android:layout_height="70dp"
        android:layout_alignParentStart="true"
        android:layout_alignParentEnd="true"
        android:orientation="horizontal"
        android:layout_above="@id/layerThree">

        <Button
            android:id="@+id/buttonTwo"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_marginStart="5dp"
            android:layout_marginEnd="5dp"
            android:text="@string/_2"
            android:layout_weight="1"
            android:onClick="pressedTwo"/>

        <Button
            android:id="@+id/buttonThree"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_marginStart="5dp"
            android:layout_marginEnd="5dp"
            android:text="@string/_3"
            android:layout_weight="1"
            android:onClick="pressedThree"/>

        <Button
            android:id="@+id/buttonPlus"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_marginStart="5dp"
            android:layout_marginEnd="5dp"
            android:layout_weight="1"
            android:text="@string/plus"
            android:onClick="pressedPlus"/>
    </LinearLayout>

    <LinearLayout
        android:id="@+id/layerThree"
        android:layout_width="match_parent"
        android:layout_height="70dp"
        android:layout_alignParentStart="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentBottom="true"
        android:orientation="horizontal">

        <Button
            android:id="@+id/buttonEnter"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_marginStart="5dp"
            android:layout_marginEnd="5dp"
            android:layout_weight="2"
            android:text="@string/enter"
            android:onClick="pressedEnter"/>

        <Button
            android:id="@+id/buttonStar"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_marginStart="5dp"
            android:layout_marginEnd="5dp"
            android:layout_weight="1"
            android:text="@string/star"
            android:onClick="pressedStar"/>

    </LinearLayout>

</RelativeLayout>

Relative Layout Design

Relative Layout

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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">

    <FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/buttonClear"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:layout_alignParentEnd="true">

        <TextView
            android:id="@+id/resultText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal|center_vertical"
            android:text="@string/result" />
    </FrameLayout>

    <Button
        android:id="@+id/buttonZero"
        android:layout_width="wrap_content"
        android:layout_height="70dp"
        android:layout_above="@id/buttonTwo"
        android:layout_alignParentStart="true"
        android:layout_marginStart="5dp"
        android:layout_marginEnd="5dp"
        android:onClick="pressedZero"
        android:text="@string/_0" />

    <Button
        android:id="@+id/buttonTwo"
        android:layout_width="wrap_content"
        android:layout_height="70dp"
        android:layout_above="@id/buttonEnter"
        android:layout_alignParentStart="true"
        android:layout_marginStart="5dp"
        android:layout_marginEnd="5dp"
        android:onClick="pressedTwo"
        android:text="@string/_2" />

    <Button
        android:id="@+id/buttonClear"
        android:layout_width="wrap_content"
        android:layout_height="70dp"
        android:layout_above="@id/buttonPlus"
        android:layout_alignParentEnd="true"
        android:layout_marginStart="5dp"
        android:layout_marginEnd="5dp"
        android:onClick="pressedClear"
        android:text="@string/clear" />

    <Button
        android:id="@+id/buttonThree"
        android:layout_width="wrap_content"
        android:layout_height="70dp"
        android:layout_above="@id/buttonEnter"
        android:layout_marginStart="5dp"
        android:layout_marginEnd="5dp"
        android:layout_toStartOf="@id/buttonPlus"
        android:layout_toEndOf="@id/buttonTwo"
        android:onClick="pressedThree"
        android:text="@string/_3" />

    <Button
        android:id="@+id/buttonOne"
        android:layout_width="wrap_content"
        android:layout_height="70dp"
        android:layout_above="@id/buttonThree"
        android:layout_marginStart="5dp"
        android:layout_marginEnd="5dp"
        android:layout_toStartOf="@id/buttonClear"
        android:layout_toEndOf="@id/buttonZero"
        android:onClick="pressedOne"
        android:text="@string/_1" />

    <Button
        android:id="@+id/buttonPlus"
        android:layout_width="wrap_content"
        android:layout_height="70dp"
        android:layout_above="@id/buttonStar"
        android:layout_alignParentEnd="true"
        android:layout_marginStart="5dp"
        android:layout_marginEnd="5dp"
        android:onClick="pressedPlus"
        android:text="@string/plus" />

    <Button
        android:id="@+id/buttonStar"
        android:layout_width="wrap_content"
        android:layout_height="70dp"
        android:layout_alignParentEnd="true"
        android:layout_alignParentBottom="true"
        android:layout_marginStart="5dp"
        android:layout_marginEnd="5dp"
        android:onClick="pressedStar"
        android:text="@string/star" />

    <Button
        android:id="@+id/buttonEnter"
        android:layout_width="wrap_content"
        android:layout_height="70dp"
        android:layout_alignParentStart="true"
        android:layout_alignParentBottom="true"
        android:layout_marginStart="5dp"
        android:layout_marginEnd="5dp"
        android:layout_toStartOf="@id/buttonStar"
        android:onClick="pressedEnter"
        android:text="@string/enter" />

</RelativeLayout>
Tags:

2

Answers


  1. 0

    Your mistake is using wrap_content for the button widths alongside layout_weight. The layout weight will allocate all extra space to the buttons, so by starting with wrap_content you affect that calculation of "extra" space: the word "Enter" takes up more space than the number "0", so you have less space left over to distribute around.

    Change all of your layout_width="wrap_content" attributes to layout_width="0dp" (wherever you’re using layout_weight). That will ensure that the text contents of the buttons don’t affect their final widths.

    Login or Signup to reply.
  2. 0

    Assuming you want the first two to have 3 equally sized buttons- set the layout_width to 0dp and set the layout_weight to 1. That will make the LinearLayout divide it into 3 evenly sized pieces.

    For the bottom row, set the layout_width to 0dp and the layout_weight to 2 on the first button and 1 on the second. That will make the first layout take twice the amount of space as the second, making it equal to the 2 buttons above.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search