개발일지

Android in A..Z - Constraint Layout 본문

Android (안드로이드)

Android in A..Z - Constraint Layout

강태종 2021. 8. 4. 11:13

Constraint Layout

RelativeLayout를 상속받은 Layout으로 Constraint를 통해 RelativeLayout의 기능을 모두 사용할 수 있고, Chain 기능을 사용하여 LinearLayout의 기능, Radio, Percent 기능을 사용하여 PercentLayout의 기능을 사용할 수 있습니다.

ConstraintLayout이 다양한 기능을 제공하기 때문에 중첩 Layout을 사용해야 구현할 수 있던 상황에도 ConstraintLayout을 통해 Layout의 수와 Depth를 줄일 수 있기 때문에 성능면에서도 우수합니다.

dependencies

implementation 'androidx.constraintlayout:constraintlayout:2.0.4'

Constraint / Circle

Constraint를 통해 RelativeLayout처럼 관계로 뷰의 위치를 표현할 수 있고, Top & Bottom, Start & End 등 제약을 설정하면서 View를 가운데로 위치 시킬 수 있다.

Circle을 통해 기준 View와 거리, 각도 등으로 View를 위치시킬 수 있다.

Constraint, Circle

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

    <data>

    </data>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">


        <com.google.android.material.textview.MaterialTextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TextView"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <com.google.android.material.textview.MaterialTextView
            app:layout_constraintCircle="@id/textView1"
            app:layout_constraintCircleRadius="100dp"
            app:layout_constraintCircleAngle="0"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TextView" />

        <com.google.android.material.textview.MaterialTextView
            app:layout_constraintCircle="@id/textView1"
            app:layout_constraintCircleRadius="100dp"
            app:layout_constraintCircleAngle="120"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            android:id="@+id/textView3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TextView" />

        <com.google.android.material.textview.MaterialTextView
            app:layout_constraintCircle="@id/textView1"
            app:layout_constraintCircleRadius="100dp"
            app:layout_constraintCircleAngle="240"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            android:id="@+id/textView4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TextView" />

    </androidx.constraintlayout.widget.ConstraintLayout>

</layout>

Guide Line

가상의 Guide Line을 만들어서 Constraint를 더욱 자유롭게 정할 수 있고, Guide Line의 위치를 Start, End 뿐만 아니라 Percent를 통해 비율로 정할 수 있습니다.

Guide Line

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

    <data>

    </data>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <androidx.constraintlayout.widget.Guideline
            android:id="@+id/guideline"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            app:layout_constraintGuide_percent="0.3" />

        <TextView
            android:id="@+id/textView1"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@color/black"
            android:gravity="center"
            android:text="30%"
            android:textColor="@color/white"
            android:textStyle="bold"
            app:layout_constraintBottom_toTopOf="@+id/guideline"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/textView2"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@color/white"
            android:gravity="center"
            android:text="70%"
            android:textColor="@color/black"
            android:textStyle="bold"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="@+id/guideline" />
    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

Chain

Chain설정을 통해 View를 더욱 자유롭게 위치할 수 있고, Chain과 Weight를 통해 LinearLayout과 비슷한 배치를 할 수 있습니다.

Constraint Chain

<?xml version="1.0" encoding="utf-8"?>
<layout 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">

    <data>

    </data>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@color/black"
            android:padding="5dp"
            android:text="Spread\nInside"
            android:textAlignment="center"
            android:textColor="@color/white"
            app:layout_constraintBottom_toTopOf="@id/guide_line_1"
            app:layout_constraintEnd_toStartOf="@id/textView2"
            app:layout_constraintHorizontal_chainStyle="spread_inside"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@color/black"
            android:padding="5dp"
            android:text="Spread\nInside"
            android:textAlignment="center"
            android:textColor="@color/white"
            app:layout_constraintBottom_toTopOf="@id/guide_line_1"
            app:layout_constraintStart_toEndOf="@id/textView1"
            app:layout_constraintEnd_toStartOf="@+id/textView3"
            app:layout_constraintHorizontal_chainStyle="spread_inside"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/textView3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@color/black"
            android:padding="5dp"
            android:text="Spread\nInside"
            android:textAlignment="center"
            android:textColor="@color/white"
            app:layout_constraintStart_toEndOf="@id/textView2"
            app:layout_constraintBottom_toTopOf="@id/guide_line_1"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_chainStyle="spread_inside"
            app:layout_constraintTop_toTopOf="parent" />

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

        <TextView
            android:id="@+id/textView4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@color/black"
            android:padding="5dp"
            android:text="Packed"
            android:textColor="@color/white"
            app:layout_constraintBottom_toTopOf="@id/guide_line_2"
            app:layout_constraintEnd_toStartOf="@+id/textView5"
            app:layout_constraintHorizontal_chainStyle="packed"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@id/guide_line_1" />

        <TextView
            android:id="@+id/textView5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@color/black"
            android:padding="5dp"
            android:text="Packed"
            android:textColor="@color/white"
            app:layout_constraintBottom_toTopOf="@id/guide_line_2"
            app:layout_constraintEnd_toStartOf="@+id/textView6"
            app:layout_constraintHorizontal_chainStyle="packed"
            app:layout_constraintStart_toEndOf="@id/textView4"
            app:layout_constraintTop_toBottomOf="@id/guide_line_1" />

        <TextView
            android:id="@+id/textView6"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@color/black"
            android:padding="5dp"
            android:text="Packed"
            android:textColor="@color/white"
            app:layout_constraintBottom_toTopOf="@id/guide_line_2"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_chainStyle="packed"
            app:layout_constraintStart_toEndOf="@id/textView5"
            app:layout_constraintTop_toBottomOf="@id/guide_line_1" />

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

        <TextView
            android:id="@+id/textView7"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@color/black"
            android:text="Spread"
            android:textColor="@color/white"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toStartOf="@+id/textView8"
            app:layout_constraintHorizontal_chainStyle="spread"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@id/guide_line_2"
            android:padding="5dp" />

        <TextView
            android:id="@+id/textView8"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@color/black"
            android:padding="5dp"
            android:text="Spread"
            android:textColor="@color/white"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toStartOf="@+id/textView9"
            app:layout_constraintHorizontal_chainStyle="spread"
            app:layout_constraintStart_toEndOf="@id/textView7"
            app:layout_constraintTop_toBottomOf="@id/guide_line_2" />

        <TextView
            android:id="@+id/textView9"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@color/black"
            android:padding="5dp"
            android:text="Spread"
            android:textColor="@color/white"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_chainStyle="spread"
            app:layout_constraintStart_toEndOf="@id/textView8"
            app:layout_constraintTop_toBottomOf="@id/guide_line_2" />
    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

Ratio

Ratio 기능을 통해 View의 width와 heigt의 비율을 정할 수 있다. Ratio 기능을 사용할 때, 최소한 match_constraint(0dp)가 하나 이상 존재해야 한다.

=> layout_width="100dp"를 정하고 layout_height="0dp"로 정하면 width는 100dp로 고정하고 height의 크기를 수정하며 비율을 맞춘다.

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

    <data>
        <import type="android.view.View" />

        <variable
            name="onOneToOne"
            type="View.OnClickListener" />

        <variable
            name="onFourToThree"
            type="View.OnClickListener" />

        <variable
            name="onThreeToFour"
            type="View.OnClickListener" />
    </data>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <com.google.android.material.button.MaterialButton
            android:onClick="@{onOneToOne}"
            android:id="@+id/button1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:insetTop="0dp"
            android:insetBottom="0dp"
            android:text="1:1"
            app:cornerRadius="0dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toStartOf="@id/button2"
            app:layout_constraintStart_toStartOf="parent" />

        <com.google.android.material.button.MaterialButton
            android:onClick="@{onFourToThree}"
            android:id="@+id/button2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="1dp"
            android:insetTop="0dp"
            android:insetBottom="0dp"
            android:text="4:3"
            app:cornerRadius="0dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toStartOf="@id/button3"
            app:layout_constraintStart_toEndOf="@+id/button1" />

        <com.google.android.material.button.MaterialButton
            android:onClick="@{onThreeToFour}"
            android:id="@+id/button3"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="1dp"
            android:insetTop="0dp"
            android:insetBottom="0dp"
            android:text="3:4"
            app:cornerRadius="0dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@+id/button2" />

        <TextView
            android:id="@+id/text_view"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@color/black"
            android:gravity="center"
            android:padding="20dp"
            android:text="1:1"
            android:textColor="@color/white"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintDimensionRatio="1:1"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

Place

bias와 goneMargin을 통해 좀 더 다이나믹한 상황에 Layout을 잘 표현할 수 있습니다.

bias를 통해 View의 위치를 Percent로 표현할 수 있고, goneMargin을 통해 Constraint 관계의 View가 GONE 상태일 때 margin을 새롭게 정할 수 있습니다.

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

    <data>
        <import type="android.view.View" />

        <variable
            name="onVisible"
            type="View.OnClickListener" />

        <variable
            name="onGone"
            type="View.OnClickListener" />

        <variable
            name="visible"
            type="Integer"/>
    </data>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <androidx.constraintlayout.widget.Group
            android:visibility="@{visible ?? View.VISIBLE}"
            app:constraint_referenced_ids="textView4,textView5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        <View
            android:id="@+id/view"
            android:layout_width="0dp"
            android:layout_height="1dp"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toBottomOf="@id/guide_line_1"
            app:layout_constraintBottom_toTopOf="@id/visible_button"/>

        <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@color/black"
            android:padding="5dp"
            android:text="Bias : 0.5"
            android:textColor="@color/white"
            app:layout_constraintBottom_toTopOf="@id/guide_line_1"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.5"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@color/black"
            android:padding="5dp"
            android:text="Bias : 0.2"
            android:textColor="@color/white"
            app:layout_constraintBottom_toTopOf="@id/guide_line_1"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.2"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/textView3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@color/black"
            android:padding="5dp"
            android:text="Bias : 0.8"
            android:textColor="@color/white"
            app:layout_constraintBottom_toTopOf="@id/guide_line_1"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.8"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

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


        <TextView
            android:id="@+id/textView4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="50dp"
            android:background="@color/black"
            android:padding="5dp"
            android:text="Content"
            android:textColor="@color/white"
            app:layout_constraintBottom_toTopOf="@id/view"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@id/guide_line_1" />

        <TextView
            android:id="@+id/textView5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="50dp"
            android:background="@color/black"
            android:padding="5dp"
            android:text="Content"
            android:textColor="@color/white"
            app:layout_constraintBottom_toTopOf="@id/visible_button"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@id/view" />

        <TextView
            android:id="@+id/textView6"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="10dp"
            android:background="@color/black"
            android:padding="5dp"
            android:text="No Gone Margin"
            android:textColor="@color/white"
            app:layout_constraintBottom_toTopOf="@id/view"
            app:layout_constraintStart_toEndOf="@id/textView4"
            app:layout_constraintTop_toBottomOf="@id/guide_line_1" />

        <TextView
            android:id="@+id/textView7"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="10dp"
            android:background="@color/black"
            android:padding="5dp"
            android:text="Yes Gone Margin"
            android:textColor="@color/white"
            app:layout_constraintBottom_toTopOf="@id/visible_button"
            app:layout_constraintStart_toEndOf="@id/textView5"
            app:layout_constraintTop_toBottomOf="@id/view"
            app:layout_goneMarginStart="50dp" />

        <com.google.android.material.button.MaterialButton
            android:onClick="@{onVisible}"
            android:id="@+id/visible_button"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:insetTop="0dp"
            android:insetBottom="0dp"
            android:text="Visible"
            app:cornerRadius="0dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toStartOf="@id/gone_button"
            app:layout_constraintStart_toStartOf="parent" />

        <com.google.android.material.button.MaterialButton
            android:onClick="@{onGone}"
            android:id="@+id/gone_button"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:insetTop="0dp"
            android:insetBottom="0dp"
            android:text="GONE"
            app:cornerRadius="0dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@id/visible_button" />


    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

Group

ConstraintLayout의 가장 큰 장점은 ConstraintLayout 하나로 복잡한 Layout을 구성할 수 있다는 점입니다. 그런데 여러 뷰를 그룹지어야 하는 상황이 생기면 Layout으로 감싸서 관리해야 하는데 그러면 ConstriantLayout의 장점이 사라집니다. 이러한 경우를 대비하여 ConstraintLayout은 Group 기능을 제공합니다.

 

constraint_referenced_ids를 통해 Group지을 View들의 Id를 설정하고 Visiblity같은 속성을 한번에 관리할 수 있습니다.

        <androidx.constraintlayout.widget.Group
            android:visibility="@{visible ?? View.VISIBLE}"
            app:constraint_referenced_ids="textView4,textView5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

TransitionManager

ConstraintSet와 TransitionManager을 사용하여 에니메이션을 줄 수 있다.

    private val animate = View.OnClickListener {
        TransitionManager.beginDelayedTransition(binding.constraint)

        val before = ConstraintSet().apply {
            load(this@MainActivity, R.layout.activity_main)
        }
        val after = ConstraintSet().apply {
            load(this@MainActivity, R.layout.activity_main_alt)
        }

        if (isChanged) {
            before
        } else {
            after
        }.applyTo(binding.constraint)

        isChanged = !isChanged
    }

xml파일 2개를 만든다.

=> view의 id가 같아야 animation이 제대로 작동한다.

=> visible, constraint의 변경을 파악하여 변하는 에니메이션을 준다.

=> color, size등 속성은 작동하지 않는다.

 

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<layout
    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">

    <data>
        <variable
            name="animate"
            type="android.view.View.OnClickListener" />
    </data>

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

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"

            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent" />

        <ImageView
            android:src="@drawable/iu"
            android:id="@+id/image"
            android:layout_width="0dp"
            android:layout_height="300dp"

            app:layout_constraintTop_toBottomOf="@id/toolbar"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintBottom_toTopOf="@id/button"/>

        <TextView
            android:id="@+id/description"
            android:text="IU"
            android:visibility="gone"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:gravity="center"
            app:layout_constraintTop_toBottomOf="@id/image"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"/>

        <Button
            android:text="Animate"
            android:onClick="@{animate}"
            android:id="@+id/button"
            android:layout_width="0dp"
            android:layout_height="wrap_content"

            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"/>
    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

 

activity_main_alt.xml

<?xml version="1.0" encoding="utf-8"?>
<layout
    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">

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

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"

            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent" />

        <ImageView
            android:src="@drawable/iu"
            android:id="@+id/image"
            android:layout_width="0dp"
            android:layout_height="300dp"

            app:layout_constraintTop_toBottomOf="@id/toolbar"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent" />

        <TextView
            android:id="@+id/description"
            android:text="IU"
            android:visibility="visible"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:gravity="center"
            app:layout_constraintTop_toBottomOf="@id/image"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"/>

        <Button
            android:text="Animate"
            android:id="@+id/button"
            android:layout_width="0dp"
            android:layout_height="wrap_content"

            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"/>
    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

Git (예제 코드)

https://github.com/KangTaeJong98/Example/tree/main/Android/ConstraintLayout

 

GitHub - KangTaeJong98/Example: My Example Code

My Example Code. Contribute to KangTaeJong98/Example development by creating an account on GitHub.

github.com

 

저작자표시

'Android (안드로이드)' 카테고리의 다른 글

Android in A..Z - Flow  (0) 2021.08.05
Android in A..Z - Context  (0) 2021.08.05
Android in A..Z - OnTouchListener, GestureEvent  (0) 2021.07.18
Android in A..Z - ActivityResultContract  (0) 2021.05.23
Android in A..Z - DataStore  (0) 2021.03.30
'Android (안드로이드)' Related Articles more
Comments