如何使用约束布局使卡片视图始终位于一个地方?
How to use constraint layout so the card views are always in one place?
我在其中使用约束布局和卡片视图,但在不同的屏幕尺寸上,卡片视图不在同一个位置。我认为约束的想法是你只需要安排一次卡片视图,它会自动对齐到不同的设备尺寸。第一张图片显示了我希望在每种设备尺寸上都有的屏幕,另一张图片显示了不同尺寸的结果,其中 CardViews 显然不在正确的位置。
我已经尝试使用指南,但没有帮助。还是使用像 RelativeLayout 这样的其他 Layout 更好?但是 ConstraintLayout 的意义何在?
Design as it should be
Result with different size
感谢您的帮助!
这是我的 XML:
<?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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".spielen_uebersicht">
<TextView
android:id="@+id/spieler_suche"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:text="Spieler suchen:"
android:textSize="20sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.484"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.cardview.widget.CardView
android:id="@+id/cardView3"
android:layout_width="match_parent"
android:layout_height="55dp"
android:layout_margin="8dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:foreground="?android:attr/selectableItemBackground"
app:cardCornerRadius="20dp"
app:cardElevation="7dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/spieler_suche">
<SearchView
android:id="@+id/searchView_spieler_suchen"
android:layout_width="match_parent"
android:layout_height="50dp"
android:clickable="true"
android:focusable="true"
android:gravity="center"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:queryBackground="@android:color/transparent" />
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:id="@+id/zufälliger_spieler"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_marginStart="36dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:clickable="true"
android:focusable="true"
android:foreground="?android:attr/selectableItemBackground"
app:cardCornerRadius="20dp"
app:cardElevation="7dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/cardView3"
app:layout_constraintVertical_bias="0.198">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:text="Zufälliger Spieler"
android:textAlignment="center"
android:textSize="20sp" />
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="center"
android:layout_marginTop="25dp"
android:src="@mipmap/zufaelliger_spieler" />
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:id="@+id/cardView"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_marginStart="32dp"
android:layout_marginTop="8dp"
android:clickable="true"
android:focusable="true"
android:foreground="?android:attr/selectableItemBackground"
app:cardCornerRadius="20dp"
app:cardElevation="7dp"
app:layout_constraintBottom_toBottomOf="@+id/zufälliger_spieler"
app:layout_constraintStart_toEndOf="@+id/zufälliger_spieler"
app:layout_constraintTop_toBottomOf="@+id/cardView3"
app:layout_constraintVertical_bias="1.0">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:text="Freunde einladen"
android:textAlignment="center"
android:textSize="20sp" />
<ImageView
android:id="@+id/imageView"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="center"
android:layout_marginTop="25dp"
android:src="@mipmap/freunde_einladen" />
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:id="@+id/cardViewFreundesübersicht"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_marginStart="32dp"
android:layout_marginTop="36dp"
android:clickable="true"
android:focusable="true"
android:foreground="?android:attr/selectableItemBackground"
app:cardCornerRadius="20dp"
app:cardElevation="7dp"
app:layout_constraintStart_toEndOf="@+id/cardView2"
app:layout_constraintTop_toBottomOf="@+id/cardView">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="5dp"
android:text="Freundes-\nübersicht"
android:textAlignment="center"
android:textSize="20sp" />
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="center"
android:layout_marginTop="25dp"
android:src="@mipmap/freundes_uebersicht" />
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:id="@+id/cardView2"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_marginStart="36dp"
android:layout_marginTop="36dp"
android:clickable="true"
android:focusable="true"
android:foreground="?android:attr/selectableItemBackground"
app:cardCornerRadius="20dp"
app:cardElevation="7dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/zufälliger_spieler">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="5dp"
android:text="Anfragen"
android:textAlignment="center"
android:textSize="20sp" />
<ImageView
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_gravity="center"
android:layout_marginTop="25dp"
android:src="@mipmap/freundes_anfragen" />
</androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>```
您在不同的 phone 上看不到相同的布局,因为您的卡片视图尺寸是固定大小,为什么不好?
不同的 phone 有不同的屏幕尺寸,在您的布局中,您在视图上使用固定尺寸(例如,固定尺寸为 50dp
)结果是,在一个屏幕(您的 android 工作室预览屏幕)上可能看起来不错的内容在另一个屏幕(您的实际 phone)上可能看起来不太好。
如何修复:
您可以在您的卡片视图上使用 app:layout_constraintWidth_percent
和 app:layout_constraintHeight_percent
来根据屏幕给出以百分比表示的大小。
像这样:
<?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:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="@+id/button7"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:text="Button"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintWidth_percent=".5"
app:layout_constraintHeight_percent=".5"
app:layout_constraintBottom_toTopOf="@+id/button3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="@+id/guideline"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="@+id/button"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:text="Button"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintWidth_percent=".5"
app:layout_constraintHeight_percent=".5"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/guideline"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/button2" />
<Button
android:id="@+id/button2"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:text="Button"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintWidth_percent=".5"
app:layout_constraintHeight_percent=".5"
app:layout_constraintBottom_toTopOf="@+id/button"
app:layout_constraintEnd_toStartOf="@+id/guideline"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="@+id/button3"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:text="Button"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintWidth_percent=".5"
app:layout_constraintHeight_percent=".5"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="@+id/guideline"
app:layout_constraintTop_toBottomOf="@+id/button7" />
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="20dp"
app:layout_constraintGuide_percent=".5" />
</androidx.constraintlayout.widget.ConstraintLayout>
在此示例中,我有 4 个按钮代表您的 cardView。
它们的大小都相等,并且会响应所有屏幕尺寸。
此布局将如下所示(箭头指向指南,使其更易于理解):
对于 Future Visitors,在尝试模拟线性布局形式时,链是一个神奇的词。如 Tamir Abutbul 所述,使用水平链和垂直链以及使用动态视图大小应该是最佳实践。
<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:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/textView24"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="32dp"
android:gravity="center"
android:text="Title"
android:textColor="@android:color/black"
android:textSize="?android:attr/actionBarSize"
android:textStyle="bold"
app:layout_constraintTop_toTopOf="parent" />
<com.google.android.material.button.MaterialButton
android:id="@+id/btn1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableBottom="@android:drawable/ic_media_play"
android:text="text 4"
android:textSize="24sp"
android:padding="50dp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="@+id/btn3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="@+id/btn3"
app:layout_constraintTop_toTopOf="@+id/btn3" />
<com.google.android.material.button.MaterialButton
android:id="@+id/btn2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableBottom="@android:drawable/ic_media_play"
android:text="text 2"
android:textStyle="bold"
android:textSize="24sp"
android:padding="50dp"
app:layout_constraintBottom_toBottomOf="@+id/btn4"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="@+id/btn4"
app:layout_constraintTop_toTopOf="@+id/btn4" />
<com.google.android.material.button.MaterialButton
android:id="@+id/btn3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableBottom="@android:drawable/ic_media_play"
android:text="text 3"
android:textStyle="bold"
android:textSize="24sp"
android:padding="50dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="@+id/btn4"
app:layout_constraintEnd_toStartOf="@+id/btn1"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/btn4" />
<com.google.android.material.button.MaterialButton
android:id="@+id/btn4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableBottom="@android:drawable/ic_media_play"
android:text="text 1"
android:textStyle="bold"
android:textSize="24sp"
android:padding="50dp"
app:layout_constraintBottom_toTopOf="@+id/btn3"
app:layout_constraintEnd_toStartOf="@+id/btn2"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/textView24"/></androidx.constraintlayout.widget.ConstraintLayout>
祝你好运;)
我在其中使用约束布局和卡片视图,但在不同的屏幕尺寸上,卡片视图不在同一个位置。我认为约束的想法是你只需要安排一次卡片视图,它会自动对齐到不同的设备尺寸。第一张图片显示了我希望在每种设备尺寸上都有的屏幕,另一张图片显示了不同尺寸的结果,其中 CardViews 显然不在正确的位置。
我已经尝试使用指南,但没有帮助。还是使用像 RelativeLayout 这样的其他 Layout 更好?但是 ConstraintLayout 的意义何在?
Design as it should be
Result with different size
感谢您的帮助!
这是我的 XML:
<?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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".spielen_uebersicht">
<TextView
android:id="@+id/spieler_suche"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:text="Spieler suchen:"
android:textSize="20sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.484"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.cardview.widget.CardView
android:id="@+id/cardView3"
android:layout_width="match_parent"
android:layout_height="55dp"
android:layout_margin="8dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:foreground="?android:attr/selectableItemBackground"
app:cardCornerRadius="20dp"
app:cardElevation="7dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/spieler_suche">
<SearchView
android:id="@+id/searchView_spieler_suchen"
android:layout_width="match_parent"
android:layout_height="50dp"
android:clickable="true"
android:focusable="true"
android:gravity="center"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:queryBackground="@android:color/transparent" />
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:id="@+id/zufälliger_spieler"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_marginStart="36dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:clickable="true"
android:focusable="true"
android:foreground="?android:attr/selectableItemBackground"
app:cardCornerRadius="20dp"
app:cardElevation="7dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/cardView3"
app:layout_constraintVertical_bias="0.198">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:text="Zufälliger Spieler"
android:textAlignment="center"
android:textSize="20sp" />
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="center"
android:layout_marginTop="25dp"
android:src="@mipmap/zufaelliger_spieler" />
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:id="@+id/cardView"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_marginStart="32dp"
android:layout_marginTop="8dp"
android:clickable="true"
android:focusable="true"
android:foreground="?android:attr/selectableItemBackground"
app:cardCornerRadius="20dp"
app:cardElevation="7dp"
app:layout_constraintBottom_toBottomOf="@+id/zufälliger_spieler"
app:layout_constraintStart_toEndOf="@+id/zufälliger_spieler"
app:layout_constraintTop_toBottomOf="@+id/cardView3"
app:layout_constraintVertical_bias="1.0">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:text="Freunde einladen"
android:textAlignment="center"
android:textSize="20sp" />
<ImageView
android:id="@+id/imageView"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="center"
android:layout_marginTop="25dp"
android:src="@mipmap/freunde_einladen" />
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:id="@+id/cardViewFreundesübersicht"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_marginStart="32dp"
android:layout_marginTop="36dp"
android:clickable="true"
android:focusable="true"
android:foreground="?android:attr/selectableItemBackground"
app:cardCornerRadius="20dp"
app:cardElevation="7dp"
app:layout_constraintStart_toEndOf="@+id/cardView2"
app:layout_constraintTop_toBottomOf="@+id/cardView">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="5dp"
android:text="Freundes-\nübersicht"
android:textAlignment="center"
android:textSize="20sp" />
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="center"
android:layout_marginTop="25dp"
android:src="@mipmap/freundes_uebersicht" />
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:id="@+id/cardView2"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_marginStart="36dp"
android:layout_marginTop="36dp"
android:clickable="true"
android:focusable="true"
android:foreground="?android:attr/selectableItemBackground"
app:cardCornerRadius="20dp"
app:cardElevation="7dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/zufälliger_spieler">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="5dp"
android:text="Anfragen"
android:textAlignment="center"
android:textSize="20sp" />
<ImageView
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_gravity="center"
android:layout_marginTop="25dp"
android:src="@mipmap/freundes_anfragen" />
</androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>```
您在不同的 phone 上看不到相同的布局,因为您的卡片视图尺寸是固定大小,为什么不好?
不同的 phone 有不同的屏幕尺寸,在您的布局中,您在视图上使用固定尺寸(例如,固定尺寸为 50dp
)结果是,在一个屏幕(您的 android 工作室预览屏幕)上可能看起来不错的内容在另一个屏幕(您的实际 phone)上可能看起来不太好。
如何修复:
您可以在您的卡片视图上使用 app:layout_constraintWidth_percent
和 app:layout_constraintHeight_percent
来根据屏幕给出以百分比表示的大小。
像这样:
<?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:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="@+id/button7"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:text="Button"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintWidth_percent=".5"
app:layout_constraintHeight_percent=".5"
app:layout_constraintBottom_toTopOf="@+id/button3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="@+id/guideline"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="@+id/button"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:text="Button"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintWidth_percent=".5"
app:layout_constraintHeight_percent=".5"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/guideline"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/button2" />
<Button
android:id="@+id/button2"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:text="Button"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintWidth_percent=".5"
app:layout_constraintHeight_percent=".5"
app:layout_constraintBottom_toTopOf="@+id/button"
app:layout_constraintEnd_toStartOf="@+id/guideline"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="@+id/button3"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:text="Button"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintWidth_percent=".5"
app:layout_constraintHeight_percent=".5"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="@+id/guideline"
app:layout_constraintTop_toBottomOf="@+id/button7" />
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="20dp"
app:layout_constraintGuide_percent=".5" />
</androidx.constraintlayout.widget.ConstraintLayout>
在此示例中,我有 4 个按钮代表您的 cardView。
它们的大小都相等,并且会响应所有屏幕尺寸。
此布局将如下所示(箭头指向指南,使其更易于理解):
对于 Future Visitors,在尝试模拟线性布局形式时,链是一个神奇的词。如 Tamir Abutbul 所述,使用水平链和垂直链以及使用动态视图大小应该是最佳实践。
<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:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/textView24"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="32dp"
android:gravity="center"
android:text="Title"
android:textColor="@android:color/black"
android:textSize="?android:attr/actionBarSize"
android:textStyle="bold"
app:layout_constraintTop_toTopOf="parent" />
<com.google.android.material.button.MaterialButton
android:id="@+id/btn1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableBottom="@android:drawable/ic_media_play"
android:text="text 4"
android:textSize="24sp"
android:padding="50dp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="@+id/btn3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="@+id/btn3"
app:layout_constraintTop_toTopOf="@+id/btn3" />
<com.google.android.material.button.MaterialButton
android:id="@+id/btn2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableBottom="@android:drawable/ic_media_play"
android:text="text 2"
android:textStyle="bold"
android:textSize="24sp"
android:padding="50dp"
app:layout_constraintBottom_toBottomOf="@+id/btn4"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="@+id/btn4"
app:layout_constraintTop_toTopOf="@+id/btn4" />
<com.google.android.material.button.MaterialButton
android:id="@+id/btn3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableBottom="@android:drawable/ic_media_play"
android:text="text 3"
android:textStyle="bold"
android:textSize="24sp"
android:padding="50dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="@+id/btn4"
app:layout_constraintEnd_toStartOf="@+id/btn1"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/btn4" />
<com.google.android.material.button.MaterialButton
android:id="@+id/btn4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableBottom="@android:drawable/ic_media_play"
android:text="text 1"
android:textStyle="bold"
android:textSize="24sp"
android:padding="50dp"
app:layout_constraintBottom_toTopOf="@+id/btn3"
app:layout_constraintEnd_toStartOf="@+id/btn2"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/textView24"/></androidx.constraintlayout.widget.ConstraintLayout>
祝你好运;)