How to improve my XML design so it will look better-CodePudding

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:

<?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

<?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>

CodePudding user response：

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.

CodePudding user response：

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.

CodePudding user response：

I would like to suggest moving JetPack Compose for design and If you wanna stay in XML to design that you must move to Constraint layout Constraint layout has tones of features that help us to make the design the most robust and perfect way. the Inbuild features like chaining and flat hierarchy help to develop UI as you want.