Search code examples
androidxmlandroid-layout

How do I make the XML Layout as in the image which I want?

Consider my semi-circle.xml file:

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/semicircle"/>
    <size
        android:width="10dp"
        android:height="5dp"/>
    <corners
        android:bottomLeftRadius="20dp"
        android:bottomRightRadius="20dp"/>
</shape>

and moreover, for the buttons I have the_two_buttons.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/semicircle"/> <!-- Button background color -->
    <corners android:radius="25dp"/> <!-- Corner radius -->
    <padding
        android:left="8dp"
        android:top="8dp"
        android:right="8dp"
        android:bottom="8dp"/>
</shape>

This is the XML code that I have written:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@drawable/semi_circle">

                <ImageView
                    android:id="@+id/profile_avatar"
                    android:layout_width="10dp"
                    android:layout_height="5dp"
                    android:layout_marginTop="50dp"
                    android:src="@drawable/semi_circle" />

                <TextView
                    android:id="@+id/textView"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerHorizontal="true"
                    android:text="@string/intellij_clicker"
                    android:textSize="30.sp"
                    android:textStyle="bold"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintHorizontal_bias="0.5"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent"
                    app:layout_constraintVertical_bias="0.07" />
            </RelativeLayout>

        <Button
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="16dp"
            android:background="@drawable/the_two_buttons"
            android:paddingStart="16dp"
            android:paddingEnd="16dp"
            android:text="Button 1"
            android:textColor="@android:color/white"
            android:textColorHighlight="#B1D18A"
            android:textColorHint="#B1D18A"
            android:textColorLink="#B1D18A"
            android:textCursorDrawable="#B1D18A"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
    </LinearLayout>

    <LinearLayout android:layout_height="match_parent"
    android:layout_width="match_parent"
    android:orientation="vertical">

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 2"
        android:background="@drawable/the_two_buttons"
        android:textColor="@android:color/white"
        android:paddingStart="16dp"
        android:paddingEnd="16dp"
        android:layout_marginTop="16dp"
        app:layout_constraintTop_toBottomOf="@id/button1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

This is what I have expected:

The Predicted XML But the scenario is different: My Layout What's wrong here? Since I am new in XML android layout, I am eager to learn. Thanks. I am confused regarding when to use RelativeLayout and LinearLayout. Any kind of suggestions would be highly appreciated.

Solution

  • Use ConstraintLayout, which is a more flexible layout compared to RelativeLayout and LinearLayout for complex UI designs.

    <!-- half_circle.xml -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <corners
        android:bottomLeftRadius="1000dp"
        android:bottomRightRadius="1000dp"
        android:topLeftRadius="0dp"
        android:topRightRadius="0dp" />
    <solid android:color="#A3D178" />
</shape>

    Screen UI

    <?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <RelativeLayout
        android:id="@+id/header"
        android:layout_width="0dp"
        android:layout_height="200dp"
        android:background="@drawable/semi_circle"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHeight_percent="0.3"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_percent="1">

        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="@string/intellij_clicker"
            android:textColor="@android:color/black"
            android:textSize="30sp"
            android:textStyle="bold" />
    </RelativeLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:orientation="vertical"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <Button
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="16dp"
            android:backgroundTint="#A3D178"
            android:paddingStart="16dp"
            android:paddingEnd="16dp"
            android:text="@string/start"
            android:textColor="@android:color/black"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/header"
            app:layout_constraintWidth_percent="0.5" />

        <Button
            android:id="@+id/button2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="16dp"
            android:backgroundTint="#A3D178"
            android:paddingStart="16dp"
            android:paddingEnd="16dp"
            android:text="@string/settings"
            android:textColor="@android:color/black"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/button1"
            app:layout_constraintWidth_percent="0.5" />
    </LinearLayout>


</androidx.constraintlayout.widget.ConstraintLayout>

    enter image description here