【安卓基础重点知识7】ConstraintLayout ConstraintLayout（约束布局）是一个 ViewGr

1. 前言

ConstraintLayout（约束布局）是一个 ViewGroup，它的出现是为了解决复杂布局时，布局嵌套过多导致绘制界面所需的时间增多的问题。它可以根据同级视图和父布局的约束条件为每个视图定义位置。

除可以直接在 XML 中编写属性以外，ConstraintLayout 支持直接在布局编辑器中拖动控件、添加约束，XML 布局中就会自动生成对应的属性。其中生成的一些属性，有可能并不是必须需要的，所以在生成后，还需要手动检查、清理。

2. 约束

要在 ConstraintLayout 中定义 View 的位置，必须为该 View 添加至少一个水平和一个垂直约束（否则该 View 就会在左上角绘制）。该约束对象可以是另一个视图，父布局（也就是 ConstraintLayout），或者是不可见的 Guideline 等

3. 使用

3.1 palette

左侧palette直接拖拽即可

3.2 添加约束

3.2.1 位置约束

基本方向

简单的布局要求，即将组件添加到布局中，然后拖拽即可自动生成

//Bottom底、End、Start、Top上
<!-- 我的什么位置在谁的什么位置 -->
app:layout_constraintTop_toTopOf=""           我的顶部和谁的顶部对齐
app:layout_constraintBottom_toBottomOf=""     我的底部和谁的底部对齐
app:layout_constraintLeft_toLeftOf=""         我的左边和谁的左边对齐
app:layout_constraintRight_toRightOf=""       我的右边和谁的右边对齐
app:layout_constraintStart_toStartOf=""       我的开始位置和谁的开始位置对齐
app:layout_constraintEnd_toEndOf=""           我的结束位置和谁的结束位置对齐
 
app:layout_constraintTop_toBottomOf=""        我的顶部位置在谁的底部位置
app:layout_constraintStart_toEndOf=""         我的开始位置在谁的结束为止
<!-- ...以此类推 -->

基线对齐

layout_constraintBaseline_toBaselineOf

角度对齐

ConstraintLayout 还支持圆型定位，将一个控件的中心以一定的角度和距离约束到另一个控件的中心上，相当于在一个圆上放置一个控件

圆形定位主要通过以下三个属性值来控制

layout_constraintCircle：引用另一个控件的 id。
layout_constraintCircleRadius：到另一个控件中心的距离。
layout_constraintCircleAngle：控件的角度（顺时针，0 - 360 度）。

百分比布局

ConstraintLayout 还支持控件的尺寸按照父布局尺寸的百分比来设置

app:layout_constraintWidth_percent 宽度占父布局百分比比例
app:layout_constraintHeight_percent 高度占父布局百分比比例

//必须将对应的height或者width设置为0才能生效
android:layout_width="0dp"
android:layout_height="0dp"

3.2.2 控件内边距、外边距、GONE Margin

<!--  外边距  -->
android:layout_margin="0dp"
android:layout_marginStart="0dp"
android:layout_marginLeft="0dp"
android:layout_marginTop="0dp"
android:layout_marginEnd="0dp"
android:layout_marginRight="0dp"
android:layout_marginBottom="0dp"
 
<!--  内边距  -->
android:padding="0dp"
android:paddingStart="0dp"
android:paddingLeft="0dp"
android:paddingTop="0dp"
android:paddingEnd="0dp"
android:paddingRight="0dp"
android:paddingBottom="0dp" 

当依赖的目标view隐藏时会生效的属性，例如A被B依赖约束，当A隐藏时A会缩成一个点，
自身的margin效果失效，A设置的GONE Margin就会生效，属性如下
<!--  GONE Margin  -->
app:layout_goneMarginBottom="0dp"
app:layout_goneMarginEnd="0dp"
app:layout_goneMarginLeft="0dp"
app:layout_goneMarginRight="0dp"
app:layout_goneMarginStart="0dp"
app:layout_goneMarginTop="0dp"

当A没有隐藏时，app:layout_goneMarginStart="20dp"没有生效

当A隐藏时，才生效

3.2.3 控件尺寸

尺寸限制

限制最大、最小宽高度，这些属性只有在给出的宽度或高度为wrap_content时才会生效，具体的属性如下：

android:minWidth=""   设置view的最小宽度
android:minHeight=""  设置view的最小高度
android:maxWidth=""   设置view的最大宽度
android:maxHeight=""  设置view的最大高度

0dp(MATCH_CONSTRAINT)

0dp的作用会根据设置的类型而产生不同的作用，进行设置类型的属性是layout_constraintWidth_default和layout_constraintHeight_default，取值可为spread、percent、wrap。具体的属性及示例如下：

app:layout_constraintWidth_default="spread|percent|wrap"
app:layout_constraintHeight_default="spread|percent|wrap"

    spread：占用所有的符合约束的空间（默认）
    percent：自身view的尺寸是父布局尺寸的一定比例（50%，取值是0-1的小数）
             配合layout_constraintWidth_percent=“0.5”，写了这个，
             app:layout_constraintHeight_default="percent"可以省略
    wrap：匹配内容大小但不超过约束限制

效果对比

<TextView
    android:id="@+id/A"
    android:layout_width="wrap_content"
    android:layout_height="60dp"
    android:layout_marginStart="100dp"
    android:layout_marginTop="50dp"
    android:layout_marginEnd="100dp"
    android:background="@color/red"
    android:gravity="center"
    android:text="AAAAAAAAAAAAAAAAAA"
    android:textColor="@color/black"
    android:textSize="25sp"
    android:textStyle="bold"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintWidth_default="spread" />

<!--  宽度设置为0dp wrap模式  -->
<TextView
    android:id="@+id/B"
    android:layout_width="0dp"
    android:layout_height="60dp"
    android:layout_marginStart="100dp"
    android:layout_marginTop="150dp"
    android:layout_marginEnd="100dp"
    android:background="@color/green"
    android:gravity="center"
    android:text="BBBBBBBBBBBBBBBBBBBBBBB"
    android:textColor="@color/black"
    android:textSize="25sp"
    android:textStyle="bold"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintWidth_default="wrap" />

设置宽高比例

当宽高至少有一项设置为 0dp 时（也就是 Match Constraints），那么我们就可以为该视图设置宽高比例。

layout_constraintDimensionRatio="3:1"

当height和width都设置为0dp，则在比率前面添加字母 W（用于限制宽度）或 H（用于限制高度），用逗号分隔：

app:layout_constraintDimensionRatio = "h,3:1"

3.3 chain

是一种特定的约束，一个链包含了多个视图，它允许链中的视图共享空间，并控制可用空间在它们之间如何分配

3.3.1 链式模式

layout_constraintHorizontal_chainStyle //横向
layout_constraintVertical_chainStyle   //纵向

spread：将可用空间以均匀分布的方式将视图放置在链中（默认模式）：

spread_inside：将链中最外面的视图对齐到外边缘，然后在可用空间内均匀的放置链中的其他视图：

packed：将链中的视图紧紧的放在一起（可以提供边距让其分开），然后让其居中在可用空间内：

3.3.2 权重

Chains 还能对链中单独的视图控件设置 Weiget。因为目前并不支持在编辑器当中设置 Weiget，所以我们只能在布局中进行设置

layout_constraintHorizontal_weight
layout_constraintVertical_weight

将第一个Button填充剩余区域

android:layout_width="0dp"
app:layout_constraintHorizontal_weight="1"

3.4 辅助类

3.4.1 Guidelines

一条对实际显示界面不可见的线。用处是帮助我们的控件增加约束

通过Vertical Guideline或Horizontal Guideline添加垂直或水平的guideline

比如我们想让某个控件处在页面垂直位置的中间

Guidelines 可以切换百分比，或者是实际的距离

3.4.2 Barrier

Barrier和Guideline 一样，本身不可见，用户辅助布局。

假如有个这样的需求，页面中有个两个Button1和Button2，一个TextView3 ，现在需要让TextView3 处于Button1或Button2的右边，对齐Button1和Button2中较宽的控件。

如果将TextView3 的左边约束的加在Button1上，当Button2较宽时会挡住TextView3 ，在不用Barrier时，需要通过再增加一层布局将Button1和Button2放到布局中才能实现该需求。

新建一个垂直方向的barrier（Vertical Barrier）

将Barrier的barrierDerection属性设置成right,right属性表示其他控件对齐barrier控件中的靠右的控件

3.4.3 Group

Group 可以对一组的控件同时设置其可见性的值Visible、Invisible或者Gone

3.4.4 Placeholder（占位符）

Placeholder的作用就是占位，它可以在布局中占好位置，通过app:content=""属性，或者动态调用setContent()设置内容，来让某个控件移动到此占位符中

3.4.5 Flow（流式虚拟布局）

Flow是用于构建链的新虚拟布局，当链用完时可以缠绕到下一行甚至屏幕的另一部分。当不确定容器在运行时的大小，可以使用它来根据应用程序中的动态尺寸（例如旋转时的屏幕宽度）构建布局。

使用

<?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:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".ConstraintLayoutActivity">

    <TextView
        android:id="@+id/A"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:background="@color/red"
        android:gravity="center"
        android:text="A"
        android:textColor="@color/black"
        android:textSize="25sp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/B"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:background="@color/green"
        android:gravity="center"
        android:text="B"
        android:textColor="@color/black"
        android:textSize="25sp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/C"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:background="@color/red"
        android:gravity="center"
        android:text="C"
        android:textColor="@color/black"
        android:textSize="25sp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/D"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:background="@color/green"
        android:gravity="center"
        android:text="D"
        android:textColor="@color/black"
        android:textSize="25sp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/E"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:background="@color/red"
        android:gravity="center"
        android:text="E"
        android:textColor="@color/black"
        android:textSize="25sp"
        android:textStyle="bold" />
    <TextView
        android:id="@+id/F"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:background="@color/red"
        android:gravity="center"
        android:text="F"
        android:textColor="@color/black"
        android:textSize="25sp"
        android:textStyle="bold" />
    <TextView
        android:id="@+id/G"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:background="@color/red"
        android:gravity="center"
        android:text="G"
        android:textColor="@color/black"
        android:textSize="25sp"
        android:textStyle="bold" />
    <TextView
        android:id="@+id/H"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:background="@color/red"
        android:gravity="center"
        android:text="H"
        android:textColor="@color/black"
        android:textSize="25sp"
        android:textStyle="bold" />
    <TextView
        android:id="@+id/I"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:background="@color/red"
        android:gravity="center"
        android:text="I"
        android:textColor="@color/black"
        android:textSize="25sp"
        android:textStyle="bold" />

    <androidx.constraintlayout.helper.widget.Flow
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:constraint_referenced_ids="A,B,C,D,E,F,G,H,I"
        app:layout_constraintTop_toTopOf="parent"
        app:flow_wrapMode="aligned"/>

</androidx.constraintlayout.widget.ConstraintLayout>

链约束

Flow的constraint_referenced_ids关联的控件是没有设置约束的，这一点和普通的链是不一样的(控件可以以一种更灵活的方式排列，而不需要为每个控件单独设置具体的约束。这种排列方式允许控件根据Flow的规则自动调整位置，从而实现更动态和响应式的布局)

app:flow_wrapMode="none | chian | aligned" //设置排列方式

//当flow_wrapMode的值是chian或aligned时，
//我们还可以针对不同的链进行配置，这里就不一一展示效果了，具体的属性如下：
app:flow_horizontalStyle="packed｜spread｜spread_inside"  所有水平链的配置
app:flow_verticalStyle="packed｜spread｜spread_inside"    所有垂直链的配置
 
app:flow_firstHorizontalStyle="packed｜spread｜spread_inside" 第一条水平链的配置，其他条不生效
app:flow_firstVerticalStyle="packed｜spread｜spread_inside"   第一条垂直链的配置，其他条不生效
app:flow_lastHorizontalStyle="packed｜spread｜spread_inside"  最后一条水平链的配置，其他条不生效 
app:flow_lastVerticalStyle="packed｜spread｜spread_inside"    最后一条垂直链的配置，其他条不生效     
    
flow_horizontalGap   //设置水平方向的间隔
flow_verticalGap     //设置垂直方向的间隔

none（默认值）：所有引用的view形成一条链，水平居中，超出屏幕两侧的view不可见

chian：所引用的view形成一条链，超出部分会自动换行，同行的view会平分宽度

aligned：所引用的view形成一条链，但view会在同行同列

对齐约束

上面展示的都是相同大小的view，那么不同大小view的对齐方式，Flow也提供了相应的属性进行配置，(flow_wrapMode="aligned"时，我试着没有效果)

horizontal 水平排列，四种：center、bottom、top、baseline

app:flow_verticalAlign="center"

   app:flow_verticalAlign="bottom"

   app:flow_verticalAlign="top"

app:flow_verticalAlign="baseline"

vertical水平排列，三种：end、start、center

app:flow_horizontalAlign="end"

app:flow_horizontalAlign="center"

app:flow_horizontalAlign="start"

数量约束

当flow_wrapMode属性为aligned和chian时，通过flow_maxElementsWrap属性控制每行最大的子View数量

app:flow_maxElementsWrap="3"

3.4.6 Layer

Layer继承自ConstraintHelper，常用来增加背景，或者共同动画，图层 (Layer) 在布局期间会调整大小，其大小会根据其引用的所有视图进行调整，代码的先后顺序也会决定着它的位置

<androidx.constraintlayout.helper.widget.Layer
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white"
    android:padding="10dp"
    app:constraint_referenced_ids="AndroidImg,NameTv" />

<ImageView
    android:id="@+id/AndroidImg"
    android:layout_width="200dp"
    android:layout_height="200dp"
    android:src="@drawable/rabbit"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<TextView
    android:id="@+id/NameTv"
    android:layout_width="100dp"
    android:layout_height="40dp"
    android:gravity="center"
    android:text="rabbit"
    android:textColor="@color/black"
    android:textSize="25sp"
    android:textStyle="bold"
    app:layout_constraintEnd_toEndOf="@id/AndroidImg"
    app:layout_constraintStart_toStartOf="@id/AndroidImg"
    app:layout_constraintTop_toBottomOf="@id/AndroidImg" />

当控件写在Layer以后，则控件显示在layer上面，反之，Layer在最上面，进行了覆盖

3.4.7 ImageFilterButton & ImageFilterView

ImageFilterButton和ImageFilterView是两个控件，他们之间的关系就和ImageButton与ImageView是一样的。它们的大致作用有两部分，一是可以用来做圆角图片，二是可以叠加图片资源进行混合过滤。

圆角图片

<androidx.constraintlayout.helper.widget.Layer
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@color/red"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:constraint_referenced_ids="rabbit"/>

<androidx.constraintlayout.utils.widget.ImageFilterView
    android:id="@+id/rabbit"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:src="@drawable/rabbit"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:roundPercent="1" />
    
<!--    圆角 app:round，取值0-50dp，默认0，就是方形，
设置50就是圆形图片，超过50没其他意义，还是圆形图片。-->
<!--    圆角比例 app:roundPercent，取值0-1之间，默认0就是方形，1是圆形图片，
同上，超过1按照1处理，还是圆形图片。-->

叠加图片资源进行混合

ImageFilterButton和ImageFilterView不但可以使用src来设置图片资源，还可以使用altSrc来设置第二个图片资源，altSrc提供的资源将会和src提供的资源通过crossfade属性形成交叉淡化效果，默认情况下，crossfade=0，altSrc所引用的资源不可见，取值在0-1

<androidx.constraintlayout.utils.widget.ImageFilterView
    android:id="@+id/view1"
    android:layout_width="80dp"
    android:layout_height="80dp"
    android:src="@drawable/rabbit"
    app:altSrc="@drawable/cat"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:crossfade="0.5"/>

除此之外，warmth属性可以用来调节色温，brightness属性用来调节亮度，saturation属性用来调节饱和度，contrast属性用来调节对比度

     <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="色温分别设置0、5、9"
        app:layout_constraintBottom_toTopOf="@+id/view2"
        app:layout_constraintTop_toTopOf="parent" />
        
    <androidx.constraintlayout.utils.widget.ImageFilterView
        android:id="@+id/view1"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:src="@drawable/rabbit"
        app:layout_constraintBottom_toBottomOf="@id/view2"
        app:layout_constraintEnd_toStartOf="@+id/view2"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@id/view2"
        app:warmth="0" />
        
    <androidx.constraintlayout.utils.widget.ImageFilterView
        android:id="@+id/view2"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:src="@drawable/rabbit"
        app:layout_constraintBottom_toTopOf="@+id/view5"
        app:layout_constraintEnd_toStartOf="@+id/view3"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/view1"
        app:layout_constraintTop_toTopOf="parent"
        app:warmth="5" />
        
    <androidx.constraintlayout.utils.widget.ImageFilterView
        android:id="@+id/view3"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:src="@drawable/rabbit"
        app:layout_constraintBottom_toBottomOf="@id/view2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0"
        app:layout_constraintStart_toEndOf="@+id/view2"
        app:layout_constraintTop_toTopOf="@id/view2"
        app:warmth="9"
        tools:layout_editor_absoluteY="0dp" />
        
    <!--    亮度app:brightness=""-->
    <TextView
        android:id="@+id/textView8"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="亮度分别设置0、5、9"
        app:layout_constraintBottom_toTopOf="@+id/view5"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/view2" />

    <androidx.constraintlayout.utils.widget.ImageFilterView
        android:id="@+id/view4"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:src="@drawable/rabbit"
        app:brightness="0"
        app:layout_constraintBottom_toBottomOf="@id/view5"
        app:layout_constraintEnd_toStartOf="@+id/view5"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@id/view5"
        tools:layout_editor_absoluteY="136dp" />

    <androidx.constraintlayout.utils.widget.ImageFilterView
        android:id="@+id/view5"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:src="@drawable/rabbit"
        app:brightness="5"
        app:layout_constraintBottom_toTopOf="@+id/view8"
        app:layout_constraintEnd_toStartOf="@+id/view6"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/view4"
        app:layout_constraintTop_toBottomOf="@+id/view2" />

    <androidx.constraintlayout.utils.widget.ImageFilterView
        android:id="@+id/view6"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:src="@drawable/rabbit"
        app:brightness="9"
        app:layout_constraintBottom_toBottomOf="@id/view5"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/view5"
        app:layout_constraintTop_toTopOf="@id/view5"
        tools:layout_editor_absoluteY="136dp" />

<!--    饱和度 app:saturation-->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="饱和度分别设置0、5、9"
        app:layout_constraintBottom_toTopOf="@+id/view8"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/view5" />

    <androidx.constraintlayout.utils.widget.ImageFilterView
        android:id="@+id/view7"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:src="@drawable/rabbit"
        app:layout_constraintBottom_toBottomOf="@id/view8"
        app:layout_constraintEnd_toStartOf="@+id/view8"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@id/view8"
        app:saturation="0"
        tools:layout_editor_absoluteY="285dp" />

    <androidx.constraintlayout.utils.widget.ImageFilterView
        android:id="@+id/view8"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:src="@drawable/rabbit"
        app:layout_constraintBottom_toTopOf="@+id/view11"
        app:layout_constraintEnd_toStartOf="@+id/view9"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/view7"
        app:layout_constraintTop_toBottomOf="@+id/view5"
        app:saturation="5" />

    <androidx.constraintlayout.utils.widget.ImageFilterView
        android:id="@+id/view9"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:src="@drawable/rabbit"
        app:layout_constraintBottom_toBottomOf="@id/view8"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/view8"
        app:layout_constraintTop_toTopOf="@id/view8"
        app:saturation="9"
        tools:layout_editor_absoluteY="296dp" />

<!--    对比度app:contrast-->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="饱和度分别设置0、5、9"
        app:layout_constraintBottom_toTopOf="@+id/view11"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/view8" />

    <androidx.constraintlayout.utils.widget.ImageFilterView
        android:id="@+id/view10"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:src="@drawable/rabbit"
        app:contrast="0"
        app:layout_constraintBottom_toBottomOf="@id/view11"
        app:layout_constraintEnd_toStartOf="@+id/view11"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@id/view11"
        tools:layout_editor_absoluteY="437dp" />

    <androidx.constraintlayout.utils.widget.ImageFilterView
        android:id="@+id/view11"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:src="@drawable/rabbit"
        app:contrast="5"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/view12"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/view10"
        app:layout_constraintTop_toBottomOf="@+id/view8" />

    <androidx.constraintlayout.utils.widget.ImageFilterView
        android:id="@+id/view12"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:src="@drawable/rabbit"
        app:contrast="9"
        app:layout_constraintBottom_toBottomOf="@id/view11"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/view11"
        app:layout_constraintTop_toTopOf="@id/view11"
        tools:layout_editor_absoluteY="437dp" />