How to get a basic layout with MaterialCardView?

Question

I'm trying to acheive the following layout:

So I wrote the following code:

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

    <!-- Main title -->
    <TextView
        android:id="@+id/MainTitle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="110dp"
        android:gravity="center"
        android:singleLine="true"
        android:text="Tittle"
        android:textSize="10sp"
        android:textStyle="bold" />

    <!-- Login message -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="40dp"
        android:gravity="center"
        android:singleLine="true"
        android:text="Login as"
        android:textSize="6sp"
        android:textStyle="bold" />

    <!-- Buttons -->
    <com.google.android.material.card.MaterialCardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:cardCornerRadius="5dp"
        app:cardElevation="2dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:orientation="vertical"
            android:layout_margin="1dp"
            android:layout_height="wrap_content">

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="button 1" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="button 2" />
        </LinearLayout>
    </com.google.android.material.card.MaterialCardView>
</RelativeLayout>

But what I got is:

I'm really struggling to understand how achieve this basic layout. What am I doing wrong?

Answer 1

Try this way

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

    <!-- Main title -->
    <TextView
        android:id="@+id/MainTitle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:gravity="center"
        android:singleLine="true"
        android:text="Tittle"
        android:layout_marginTop="10dp"
        android:textSize="10sp"
        android:textStyle="bold" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:singleLine="true"
        android:text="Login as"
        android:layout_above="@id/bottomCardView"
        android:textSize="6sp"
        android:textStyle="bold" />


    <com.google.android.material.card.MaterialCardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:cardCornerRadius="5dp"
        android:id="@+id/bottomCardView"
        android:layout_alignParentBottom="true"
        app:cardElevation="2dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:orientation="vertical"
            android:layout_margin="10dp"
            android:layout_height="wrap_content">



            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="button 1" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="button 2" />
        </LinearLayout>
    </com.google.android.material.card.MaterialCardView>
</RelativeLayout>

OUTPUT