ConstraintLayoutを使ったタブレットとスマホに対応したレイアウトの書き方

基本的なConstraintLayoutのViewの配置方法としてAndroidにはdpという考え方があります。
dpを使った配置法はどのような端末でも同じ大きさで表示するという考え方です。
これはこれで有用なのですが、
タブレットとスマホ両方に適用できるレイアウトという方針では、タブレットにはスカスカに、スマホにはぎゅうぎゅうに表示されてしまい、いい感じのレイアウトができません。

そこで、レスポンシブUIの設計の為に、
<androidx.constraintlayout.widget.ConstraintLayoutと
<androidx.constraintlayout.widget.Guidelineを使った記法を紹介します。

書き方の例

item.xml

<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/constraint"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guidelinePercent01"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.5" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guidelinePercent10"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.9" />

</androidx.constraintlayout.widget.ConstraintLayout>

Guidelineは親のConstraintLayoutの縦横を100%として、縦横に比率でガイドを出すことができます。

そしてGuidelineはネストした子ConstraintLayoutに対しても設定することができます。

item2.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"
    android:id="@+id/constraint"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guidelinePercent01"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.1" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guidelinePercent10"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.2" />

    <androidx.cardview.widget.CardView
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:id="@+id/card"
        app:cardCornerRadius="10dp"
        app:layout_constraintDimensionRatio="5:1"
        app:layout_constraintVertical_bias="0"
        app:layout_constraintTop_toTopOf="@id/guidelinePercent10"
        app:layout_constraintStart_toStartOf="@id/guidelinePercent01"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/item_const"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <androidx.constraintlayout.widget.Guideline
                android:id="@+id/guidelinePercent001"
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:orientation="vertical"
                app:layout_constraintGuide_percent="0.08" />

            <androidx.constraintlayout.widget.Guideline
                android:id="@+id/guidelinePercent002"
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:orientation="vertical"
                app:layout_constraintGuide_percent="0.25" />

            <androidx.constraintlayout.widget.Guideline
                android:id="@+id/guidelinePercent101"
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:orientation="horizontal"
                app:layout_constraintGuide_percent="0.12" />

            <androidx.constraintlayout.widget.Guideline
                android:id="@+id/guidelinePercent102"
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:orientation="horizontal"
                app:layout_constraintGuide_percent="0.80" />

            <View
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:background="@color/black"
                app:layout_constraintTop_toTopOf="@id/guidelinePercent101"
                app:layout_constraintBottom_toBottomOf="@id/guidelinePercent102"
                app:layout_constraintStart_toStartOf="@id/guidelinePercent001"
                app:layout_constraintEnd_toEndOf="@id/guidelinePercent002" />

        </androidx.constraintlayout.widget.ConstraintLayout>

    </androidx.cardview.widget.CardView>

</androidx.constraintlayout.widget.ConstraintLayout>

親ConstraintLayoutに子ConstraintLayoutをネストさせ、その中にGuidelineを設定してみた例です。
子ConstraintLayoutの縦横に対する比率で黒色のViewを設定できていることがわかると思います。

また、この例で使用しているapp:layout_constraintDimensionRatioも非常に便利です。
縦の長さを確定するために横の長さの比として使用することができます。

android:layout_width="0dp"
android:layout_height="0dp"

補足）この行はmatch_constraintを示していて、widthはlayout_constraintStartとlayout_constraintEndとの間の制約を示しています。

御覧の通り、この記述方法を用いることでレイアウト中からほとんどdpでの大きさ定義を取り去ることができます。