如何使用 MaterialCardView 獲得基本布局？

Question

我正在嘗試實現以下布局：

所以我寫了以下代碼：

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

但我得到的是：

我真的很難理解如何實現這種基本布局。 我究竟做錯了什么？

Answer 1

試試這個方法

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