MotionLayout这么好用,就决定拿这个申请加薪了

本文链接：https://blog.csdn.net/Double1010/article/details/123502980

上一篇MotionLayout文章:学习使我快乐

项目实战上线用法很多,这个是我突发奇想写的Demo
简略版代码被完整版覆盖了,就不写了
视频录制不卡,转成gif就有点卡了

简略版gif效果图

简略版

完整版gif效果图

完整版
先上 fragment_dashboard_scene.xml 文件

<?xml version="1.0" encoding="utf-8"?>
<MotionScene xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">


    <Transition
        app:constraintSetStart="@layout/start_layout"
        app:constraintSetEnd="@layout/end_layout"
        app:duration="6000">
        <KeyFrameSet>
<!--1-->
            <KeyPosition
                app:framePosition="1"
                app:motionTarget="@id/text1"
                app:keyPositionType="parentRelative"
                app:percentY="1"
                app:percentX="0.5" />
            <KeyPosition
                app:framePosition="11"
                app:motionTarget="@id/text1"
                app:keyPositionType="parentRelative"
                app:percentY="0.6"
                app:percentX="0.3" />
            <KeyPosition
                app:framePosition="21"
                app:motionTarget="@id/text1"
                app:keyPositionType="parentRelative"
                app:percentY="0.7"
                app:percentX="0.25" />
            <KeyPosition
                app:framePosition="31"
                app:motionTarget="@id/text1"
                app:keyPositionType="parentRelative"
                app:percentY="0.76"
                app:percentX="0.45" />
            <KeyPosition
                app:framePosition="41"
                app:motionTarget="@id/text1"
                app:keyPositionType="parentRelative"
                app:percentY="0.76"
                app:percentX="0.65" />
            <KeyPosition
                app:framePosition="51"
                app:motionTarget="@id/text1"
                app:keyPositionType="parentRelative"
                app:percentY="0.6"
                app:percentX="0.85" />

            <KeyPosition
                app:framePosition="61"
                app:motionTarget="@id/text1"
                app:keyPositionType="deltaRelative"
                app:percentY="1"
                app:percentX="1" />
<!--            <KeyPosition-->
<!--                app:framePosition="61"-->
<!--                app:motionTarget="@id/text1"-->
<!--                app:keyPositionType="parentRelative"-->
<!--                app:percentY="0.3"-->
<!--                app:percentX="0.5" />-->
<!--            <KeyPosition-->
<!--                app:framePosition="71"-->
<!--                app:motionTarget="@id/text1"-->
<!--                app:keyPositionType="parentRelative"-->
<!--                app:percentY="0.4"-->
<!--                app:percentX="0.4" />-->
<!--            <KeyPosition-->
<!--                app:framePosition="81"-->
<!--                app:motionTarget="@id/text1"-->
<!--                app:keyPositionType="parentRelative"-->
<!--                app:percentY="0.6"-->
<!--                app:percentX="0.6" />-->

<!--            <KeyPosition-->
<!--                app:framePosition="98"-->
<!--                app:motionTarget="@id/text1"-->
<!--                app:keyPositionType="deltaRelative"-->
<!--                app:percentY="1"-->
<!--                app:percentX="1" />-->

<!--2-->
            <KeyPosition
                app:framePosition="3"
                app:motionTarget="@id/text2"
                app:keyPositionType="parentRelative"
                app:percentY="1"
                app:percentX="0.5" />

            <KeyPosition
                app:framePosition="13"
                app:motionTarget="@id/text2"
                app:keyPositionType="parentRelative"
                app:percentY="0.6"
                app:percentX="0.3" />
            <KeyPosition
                app:framePosition="23"
                app:motionTarget="@id/text2"
                app:keyPositionType="parentRelative"
                app:percentY="0.7"
                app:percentX="0.25" />
            <KeyPosition
                app:framePosition="33"
                app:motionTarget="@id/text2"
                app:keyPositionType="parentRelative"
                app:percentY="0.76"
                app:percentX="0.45" />
            <KeyPosition
                app:framePosition="43"
                app:motionTarget="@id/text2"
                app:keyPositionType="parentRelative"
                app:percentY="0.76"
                app:percentX="0.65" />
            <KeyPosition
                app:framePosition="53"
                app:motionTarget="@id/text2"
                app:keyPositionType="parentRelative"
                app:percentY="0.6"
                app:percentX="0.85" />
            <KeyPosition
                app:framePosition="63"
                app:motionTarget="@id/text2"
                app:keyPositionType="deltaRelative"
                app:percentY="1"
                app:percentX="1" />

<!--3-->
            <KeyPosition
                app:framePosition="6"
                app:motionTarget="@id/text3"
                app:keyPositionType="parentRelative"
                app:percentY="1"
                app:percentX="0.5" />

            <KeyPosition
                app:framePosition="16"
                app:motionTarget="@id/text3"
                app:keyPositionType="parentRelative"
                app:percentY="0.6"
                app:percentX="0.3" />

            <KeyPosition
                app:framePosition="26"
                app:motionTarget="@id/text3"
                app:keyPositionType="parentRelative"
                app:percentY="0.7"
                app:percentX="0.25" />
            <KeyPosition
                app:framePosition="36"
                app:motionTarget="@id/text3"
                app:keyPositionType="parentRelative"
                app:percentY="0.76"
                app:percentX="0.45" />
            <KeyPosition
                app:framePosition="46"
                app:motionTarget="@id/text3"
                app:keyPositionType="parentRelative"
                app:percentY="0.76"
                app:percentX="0.65" />
            <KeyPosition
                app:framePosition="56"
                app:motionTarget="@id/text3"
                app:keyPositionType="parentRelative"
                app:percentY="0.6"
                app:percentX="0.85" />
            <KeyPosition
                app:framePosition="66"
                app:motionTarget="@id/text3"
                app:keyPositionType="deltaRelative"
                app:percentY="1"
                app:percentX="1" />

<!--4-->
            <KeyPosition
                app:framePosition="9"
                app:motionTarget="@id/text4"
                app:keyPositionType="parentRelative"
                app:percentY="1"
                app:percentX="0.5" />

            <KeyPosition
                app:framePosition="19"
                app:motionTarget="@id/text4"
                app:keyPositionType="parentRelative"
                app:percentY="0.6"
                app:percentX="0.3" />

            <KeyPosition
                app:framePosition="29"
                app:motionTarget="@id/text4"
                app:keyPositionType="parentRelative"
                app:percentY="0.7"
                app:percentX="0.25" />
            <KeyPosition
                app:framePosition="39"
                app:motionTarget="@id/text4"
                app:keyPositionType="parentRelative"
                app:percentY="0.76"
                app:percentX="0.45" />
            <KeyPosition
                app:framePosition="49"
                app:motionTarget="@id/text4"
                app:keyPositionType="parentRelative"
                app:percentY="0.76"
                app:percentX="0.65" />
            <KeyPosition
                app:framePosition="59"
                app:motionTarget="@id/text4"
                app:keyPositionType="parentRelative"
                app:percentY="0.6"
                app:percentX="0.85" />
            <KeyPosition
                app:framePosition="69"
                app:motionTarget="@id/text4"
                app:keyPositionType="deltaRelative"
                app:percentY="1"
                app:percentX="1" />
<!--5-->
            <KeyPosition
                app:framePosition="12"
                app:motionTarget="@id/text5"
                app:keyPositionType="parentRelative"
                app:percentY="1"
                app:percentX="0.5" />

            <KeyPosition
                app:framePosition="22"
                app:motionTarget="@id/text5"
                app:keyPositionType="parentRelative"
                app:percentY="0.6"
                app:percentX="0.3" />

            <KeyPosition
                app:framePosition="32"
                app:motionTarget="@id/text5"
                app:keyPositionType="parentRelative"
                app:percentY="0.7"
                app:percentX="0.25" />
            <KeyPosition
                app:framePosition="42"
                app:motionTarget="@id/text5"
                app:keyPositionType="parentRelative"
                app:percentY="0.76"
                app:percentX="0.45" />
            <KeyPosition
                app:framePosition="52"
                app:motionTarget="@id/text5"
                app:keyPositionType="parentRelative"
                app:percentY="0.76"
                app:percentX="0.65" />
            <KeyPosition
                app:framePosition="62"
                app:motionTarget="@id/text5"
                app:keyPositionType="parentRelative"
                app:percentY="0.6"
                app:percentX="0.85" />
            <KeyPosition
                app:framePosition="72"
                app:motionTarget="@id/text5"
                app:keyPositionType="deltaRelative"
                app:percentY="1"
                app:percentX="1" />
 <!--6-->
            <KeyPosition
                app:framePosition="15"
                app:motionTarget="@id/text6"
                app:keyPositionType="parentRelative"
                app:percentY="1"
                app:percentX="0.5" />
            <KeyPosition
                app:framePosition="25"
                app:motionTarget="@id/text6"
                app:keyPositionType="parentRelative"
                app:percentY="0.6"
                app:percentX="0.3" />

            <KeyPosition
                app:framePosition="35"
                app:motionTarget="@id/text6"
                app:keyPositionType="parentRelative"
                app:percentY="0.7"
                app:percentX="0.25" />
            <KeyPosition
                app:framePosition="45"
                app:motionTarget="@id/text6"
                app:keyPositionType="parentRelative"
                app:percentY="0.76"
                app:percentX="0.45" />
            <KeyPosition
                app:framePosition="55"
                app:motionTarget="@id/text6"
                app:keyPositionType="parentRelative"
                app:percentY="0.76"
                app:percentX="0.65" />
            <KeyPosition
                app:framePosition="65"
                app:motionTarget="@id/text6"
                app:keyPositionType="parentRelative"
                app:percentY="0.6"
                app:percentX="0.85" />
            <KeyPosition
                app:framePosition="75"
                app:motionTarget="@id/text6"
                app:keyPositionType="deltaRelative"
                app:percentY="1"
                app:percentX="1" />


 <!--7-->
            <KeyPosition
                app:framePosition="18"
                app:motionTarget="@id/text7"
                app:keyPositionType="parentRelative"
                app:percentY="1"
                app:percentX="0.5" />

            <KeyPosition
                app:framePosition="28"
                app:motionTarget="@id/text7"
                app:keyPositionType="parentRelative"
                app:percentY="0.6"
                app:percentX="0.3" />

            <KeyPosition
                app:framePosition="38"
                app:motionTarget="@id/text7"
                app:keyPositionType="parentRelative"
                app:percentY="0.7"
                app:percentX="0.25" />
            <KeyPosition
                app:framePosition="48"
                app:motionTarget="@id/text7"
                app:keyPositionType="parentRelative"
                app:percentY="0.76"
                app:percentX="0.45" />
            <KeyPosition
                app:framePosition="58"
                app:motionTarget="@id/text7"
                app:keyPositionType="parentRelative"
                app:percentY="0.76"
                app:percentX="0.65" />
            <KeyPosition
                app:framePosition="68"
                app:motionTarget="@id/text7"
                app:keyPositionType="parentRelative"
                app:percentY="0.6"
                app:percentX="0.85" />
            <KeyPosition
                app:framePosition="78"
                app:motionTarget="@id/text7"
                app:keyPositionType="deltaRelative"
                app:percentY="1"
                app:percentX="1" />
<!--8-->
            <KeyPosition
                app:framePosition="21"
                app:motionTarget="@id/text8"
                app:keyPositionType="parentRelative"
                app:percentY="1"
                app:percentX="0.5" />

            <KeyPosition
                app:framePosition="31"
                app:motionTarget="@id/text8"
                app:keyPositionType="parentRelative"
                app:percentY="0.6"
                app:percentX="0.3" />

            <KeyPosition
                app:framePosition="41"
                app:motionTarget="@id/text8"
                app:keyPositionType="parentRelative"
                app:percentY="0.7"
                app:percentX="0.25" />
            <KeyPosition
                app:framePosition="51"
                app:motionTarget="@id/text8"
                app:keyPositionType="parentRelative"
                app:percentY="0.76"
                app:percentX="0.45" />
            <KeyPosition
                app:framePosition="61"
                app:motionTarget="@id/text8"
                app:keyPositionType="parentRelative"
                app:percentY="0.76"
                app:percentX="0.65" />
            <KeyPosition
                app:framePosition="71"
                app:motionTarget="@id/text8"
                app:keyPositionType="parentRelative"
                app:percentY="0.6"
                app:percentX="0.85" />
            <KeyPosition
                app:framePosition="81"
                app:motionTarget="@id/text8"
                app:keyPositionType="deltaRelative"
                app:percentY="1"
                app:percentX="1" />
<!-- 9-->
            <KeyPosition
                app:framePosition="24"
                app:motionTarget="@id/text9"
                app:keyPositionType="parentRelative"
                app:percentY="1"
                app:percentX="0.5" />

            <KeyPosition
                app:framePosition="34"
                app:motionTarget="@id/text9"
                app:keyPositionType="parentRelative"
                app:percentY="0.6"
                app:percentX="0.3" />

            <KeyPosition
                app:framePosition="44"
                app:motionTarget="@id/text9"
                app:keyPositionType="parentRelative"
                app:percentY="0.7"
                app:percentX="0.25" />
            <KeyPosition
                app:framePosition="54"
                app:motionTarget="@id/text9"
                app:keyPositionType="parentRelative"
                app:percentY="0.76"
                app:percentX="0.45" />
            <KeyPosition
                app:framePosition="64"
                app:motionTarget="@id/text9"
                app:keyPositionType="parentRelative"
                app:percentY="0.76"
                app:percentX="0.65" />
            <KeyPosition
                app:framePosition="74"
                app:motionTarget="@id/text9"
                app:keyPositionType="parentRelative"
                app:percentY="0.6"
                app:percentX="0.85" />
            <KeyPosition
                app:framePosition="84"
                app:motionTarget="@id/text9"
                app:keyPositionType="deltaRelative"
                app:percentY="1"
                app:percentX="1" />
<!--10-->
            <KeyPosition
                app:framePosition="30"
                app:motionTarget="@id/text10"
                app:keyPositionType="parentRelative"
                app:percentY="1"
                app:percentX="0.5" />

            <KeyPosition
                app:framePosition="40"
                app:motionTarget="@id/text10"
                app:keyPositionType="parentRelative"
                app:percentY="0.6"
                app:percentX="0.3" />

            <KeyPosition
                app:framePosition="50"
                app:motionTarget="@id/text10"
                app:keyPositionType="parentRelative"
                app:percentY="0.7"
                app:percentX="0.25" />
            <KeyPosition
                app:framePosition="60"
                app:motionTarget="@id/text10"
                app:keyPositionType="parentRelative"
                app:percentY="0.76"
                app:percentX="0.45" />
            <KeyPosition
                app:framePosition="70"
                app:motionTarget="@id/text10"
                app:keyPositionType="parentRelative"
                app:percentY="0.76"
                app:percentX="0.65" />
            <KeyPosition
                app:framePosition="80"
                app:motionTarget="@id/text10"
                app:keyPositionType="parentRelative"
                app:percentY="0.6"
                app:percentX="0.85" />
            <KeyPosition
                app:framePosition="98"
                app:motionTarget="@id/text10"
                app:keyPositionType="deltaRelative"
                app:percentY="1"
                app:percentX="1" />


        </KeyFrameSet>
        <OnClick
            app:clickAction="toggle"
            app:targetId="@id/text1" />

    </Transition>
</MotionScene>

再上 fragment_dashboard.xml 文件

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.motion.widget.MotionLayout 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"
    app:layoutDescription="@xml/fragment_dashboard_scene">
    <TextView
        android:id="@+id/text10"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:text="10"
        android:background="#8787BB"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

    <TextView
        android:id="@+id/text9"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:text="9"
        android:background="#EEEE11"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

    <TextView
        android:id="@+id/text8"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:text="8"
        android:background="#cceecc"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

    <TextView
        android:id="@+id/text7"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:text="7"
        android:background="#ECD60E"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

    <TextView
        android:id="@+id/text6"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:text="6"
        android:background="#aa3123"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

    <TextView
        android:id="@+id/text5"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:text="5"
        android:background="#da3eee"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

    <TextView
        android:id="@+id/text4"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:text="4"
        android:background="#3fdAA3"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

    <TextView
        android:id="@+id/text3"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:text="3"
        android:background="#158731"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

    <TextView
        android:id="@+id/text2"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:text="2"
        android:background="#EE11EE"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

    <TextView
        android:id="@+id/text1"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:text="1"
        android:background="#a3f3e1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

</androidx.constraintlayout.motion.widget.MotionLayout>

再上 start_layout.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:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:id="@+id/text10"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:text="10"
        android:background="#8787BB"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

    <TextView
        android:id="@+id/text9"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:text="9"
        android:background="#EEEE11"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

    <TextView
        android:id="@+id/text8"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:text="8"
        android:background="#cceecc"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

    <TextView
        android:id="@+id/text7"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:text="7"
        android:background="#ECD60E"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

    <TextView
        android:id="@+id/text6"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:text="6"
        android:background="#aa3123"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

    <TextView
        android:id="@+id/text5"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:text="5"
        android:background="#da3eee"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

    <TextView
        android:id="@+id/text4"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:text="4"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

    <TextView
        android:id="@+id/text3"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:text="3"
        android:background="#158731"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

    <TextView
        android:id="@+id/text2"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:text="2"
        android:background="#EE11EE"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

    <TextView
        android:id="@+id/text1"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:text="1"
        android:background="#a3f3e1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

最后 end_layout.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:layout_width="match_parent"
    android:layout_height="match_parent">


    <TextView
        android:id="@+id/text1"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:text="1"
        android:background="#1312dd"
        android:rotation="80"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/text2" />

    <TextView
        android:id="@+id/text2"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:text="2"
        android:alpha="0.8"
        android:background="#158731"
        android:rotation="60"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/text3"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:text="3"
        android:rotation="10"
        android:background="#a3f3e1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toEndOf="@+id/text2" />

    <TextView
        android:id="@+id/text4"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:text="4"
        android:background="#3fdAA3"
        app:layout_constraintEnd_toStartOf="@id/text5"
        app:layout_constraintTop_toBottomOf="@+id/text1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintBottom_toTopOf="@id/text7" />


    <TextView
        android:id="@+id/text5"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:text="5"
        android:background="#da3eee"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/text2"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintBottom_toTopOf="@id/text7" />

    <TextView
        android:id="@+id/text6"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:text="6"
        android:background="#aa3123"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/text3"
        app:layout_constraintStart_toEndOf="@id/text5"
        app:layout_constraintBottom_toTopOf="@id/text7" />

    <TextView
        android:id="@+id/text7"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:text="7"
        android:background="#ECD60E"
        app:layout_constraintEnd_toStartOf="@id/text8"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintBottom_toTopOf="@id/text10"
        app:layout_constraintTop_toBottomOf="@+id/text4" />

    <TextView
        android:id="@+id/text8"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:text="8"
        android:background="#cceecc"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintBottom_toTopOf="@id/text10"
        app:layout_constraintTop_toBottomOf="@+id/text4" />

    <TextView
        android:id="@+id/text9"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:text="9"
        android:background="#EEEE11"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/text8"
        app:layout_constraintBottom_toTopOf="@id/text10"
        app:layout_constraintTop_toBottomOf="@+id/text4" />

    <TextView
        android:id="@+id/text10"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:text="10"
        android:background="#8787BB"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/text7" />


</androidx.constraintlayout.widget.ConstraintLayout>