Android:: RelativeLayout 과 ConstraintLayout의 차이

● ConstraintLayout 

RelativeLayout의 "상대적 위치 관계에 따른 배치" 특성 +

LinearLayout의 "가중치(weight)가 가진 장점" +

chain 사용으로 다른 레이아웃 없이 "요소들을 그룹화" 

 

- ConstraintLayout는 성능향상을 얻을 수 있다 → 슈평적인 구조를 이룰 수 있기 때문에!

- ConstraintLayout는 레이아웃에 배치되는 뷰들에 여러 제약(Constraint)을 적용하여 각 뷰의 위치와 크기를 결정

 

 

● ConstraintLayout속성 및 설명

속성	설명
layout_constraintLeft_toLeftOf	뷰의 왼쪽 사이드를 대상 뷰의 왼쪽 사이드에 맞춤
layout_constraintLeft_toRightOf	뷰의 왼쪽 사이드를 대상 뷰의 오른쪽 사이드에 맞춤
layout_constraintRight_toLeftOf	뷰의 오른쪽 사이드를 대상 뷰의 왼쪽 사이드에 맞춤
layout_constraintRight_toRightOf	뷰의 오른쪽 사이드를 대상 뷰의 오른쪽 사이드에 맞춤
layout_constraintTop_toTopOf	뷰의 위쪽 사이드를 대상 뷰의 위쪽 사이드에 맞춤
layout_constraintTop_toBottomOf	뷰의 위쪽 사이드를 대상 뷰의 아래쪽 사이드에 맞춤
layout_constraintBottom_toTopOf	뷰의 아래쪽 사이드를 대상 뷰의 위쪽 사이드에 맞춤
layout_constraintBottom_toBottomOf	뷰의 아래쪽 사이드를 대상 뷰의 아래쪽 사이드에 맞춤
layout_constraintBaseLine_toBaselineOf	뷰의 텍스트 Baseline을 대상 뷰의 텍스트 Baseline에 맞춤
layout_constraintStart_toEndOf	뷰의 시작 사이드를 대상 뷰의 끝 사이드에 맞춤
layout_constraintStart_toStartOf	뷰의 시작 사이드를 대상 뷰의 시작 사이드에 맞춤
layout_constraintEnd_toStartOf	뷰의 끝 사이드를 대상 뷰의 시작 사이드에 맞춤
layout_constraintEnd_toEndOf	뷰의 끝 사이드를 대상 뷰의 끝 사이드에 맞춤
layout_goneMarginLeft	뷰 위젯의 왼쪽 사이드 대상 뷰가 View.GONE 상태일 때 여백 설정
layout_goneMarginTop	뷰 위젯의 위 사이드 대상 뷰가 View.GONE 상태일 때 여백 설정
layout_goneMarginRight	뷰 위젯의 오른쪽 사이드 대상 뷰가 View.GONE 상태일 때 여백 설정
layout_goneMarginBottom	뷰 위젯의 아래쪽 사이드 대상 뷰가 View.GONE 상태일 때 여백 설정
layout_goneMarginStart	뷰 위젯의 시작 사이드 대상 뷰가 View.GONE 상태일 때 여백 설정
layout_goneMarginEnd	뷰 위젯의 끝 사이드 대상 뷰가 View.GONE 상태일 때 여백 설정
layout_constraintHorizontal_bias	수평 방향(Left/Right || Start/End) 사이드 제약시, 양 사이드 간 위치 비율
layout_constraintVertical_bias	수직 방향(Top/Bottom) 사이드 제약 시, 양 사이드 간 위치 비율
layout_constraintCircle	원형 위치 지정에 사용될 대상 뷰 ID 지정
layout_constraintCircleRadius	원형 위치 지정 시, 뷰 위젯과 대상 뷰 위젯 중심 사이의 거리
layout_constraintCircleAngle	원형 위치 지정 시, 원 둘레에서 뷰 위젯이 배치될 각도

 

● RelativeLayout

레이아웃 내의 자식(Children) 뷰 위젯들이 서로 간의 상대적(Relative) 위치 관계에 따라

최종적으로 표시될 영역을 결정하도록 만드는 레이아웃

＊배치 관련 속성 값을 주지 않은채로 뷰위젯을 추가하면, RelativeLayout의 (Left,Top)에 표시된다.  // 몇개든 오버랩.

 

● RelativeLayout 속성 및 설명

	속성	설명
뷰와 기준 뷰의 상대적 위치 ( 뒤에 of 가 붙어있는,  above/ below 있긴 있다.)	layout_toLeftOf	뷰를 기준 뷰의 왼쪽에 배치
	layout_above	뷰를 기준 뷰의 위에 배치
	layout_toRightOf	뷰를 기준 뷰의 오른쪽에 배치
	layout_below	뷰를 기준 뷰의 아래에 배치
	layout_toStartOf	뷰를 기준 뷰의 시작에 배치
	layout_toEndOf	뷰를 기준 뷰의 끝에 배치
뷰와 부모 뷰의 상대적 위치 (alignParent~  식으로 된 이름 centervertical/horizontal 도 있긴 있다.)	layout_alignParentLeft	뷰를 부모 영역 내에서 왼쪽에 배치
	layout_alignParentTop	뷰를 부모 영역 내에서 위쪽에 배치
	layout_alignParentRight	뷰를 부모 영역 내에서 오른쪽에 배치
	layout_alignParentBottom	뷰를 부모 영역 내에서 아래쪽에 배치
	layout_centerHorizontal	뷰를 부모 영역 내에서 가로 방향 가운데에 배치
	layout_centerVertical	뷰를 부모 영역 내에서 세로 방향 가운데에 배치
	layout_centerInParent	뷰를 부모 영역 내에서 정 중앙에 배치
	layout_alignParentStart	뷰를 부모 영역 내에서 시작 지점에 배치
	layout_alignParentEnd	뷰를 부모 영역 내에서 끝 지점에 배치
뷰의 ???쪽 과 기존 뷰의 ???쪽을 맞추기 (align ~식의 이름)	layout_alignLeft	뷰의 왼쪽을 기존 뷰의 왼쪽에 맞춤
	layout_alignTop	뷰의 위쪽을 기존 뷰의 위쪽에 맞춤
	layout_alignRight	뷰의 오른쪽을 기존 뷰의 오른쪽에 맞춤
	layout_alignBottom	뷰의 아래쪽을 기존 뷰의 아래에 맞춤
	layout_alignBaseline	뷰의 폰트 기준선을 기준 뷰의 폰트 기준선에 맞춤

 

---

↓ ConstraintLayout 을 constraint라고, RelativeLayout을 relative

 

- constraint에서는 parent랑 매치하고 싶으면  "parent"라는 식으로 값을 주는데, relative에서는   "true"/"false" 값을 준다. 

 

- realative에서는 뷰와 기준뷰 사이에 below, above라는게 쓰인다. (constraint에는 below랑 above가 들어가는게 없다. )

두가지 모두를 사용한 후, constraint layout이 좀더 편리 했다.

 

- constraint에서 Left_toLeftOf="parent", 하고 Right_toRightOf="parent"하면 양 옆을 잡아 당기는 힘처럼 작용해서 해당 뷰는 가로 축 기준 center에 위치하게 된다.

 

- relative 에서 align 속성은 해당 사이드 영역에 나란히 배치 시키는 의미.constraint에선 side constraint 특성은 단순 algin 시키는 의미는 아니다. 각 side 영역을 정의하는 의미까지 가지고 있다.RelativeLayout은 성능면에서 우수하지만 View 배치 속성이 많고 복잡하다는 단점이 있다.

 

- constraint는 다른 레이아웃들에 비해서 더 좋다. 더 빠르고, 쉽고, 유연하고, 아이템이 사라질때 문제를 해결하고, 다른 화면 유형에 더 잘 부합하며 긴 중첩 반복문을 사용하지 않는다. 

 

- constraint에서는 기존의 Relative에서 불가능했던 뷰간의 상호관계 정의가 가능하다. LinearLayout을 써야만 했던 뷰 비율 조정도 간단하게 가능하다.(depth 깊어지는 것 방지)

 

- 뷰 계층을 간단하게 구성하여 유지보수, 성능 향상

 

- 구글이 기존의 많은 layout 기능을 더 이상 사용하지 않음

---

● ConstraintLayout 사용해서 App View 모방하기

추가 : 앱바 삭제, 상태바 색상 변경, 스크롤 뷰 적용

<?xml version="1.0" encoding="utf-8"?>

<!--suppress AndroidElementNotAllowed -->
<ScrollView
    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:orientation="vertical"
    android:layout_height="wrap_content">

    <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="wrap_content"
        tools:ignore="RedundantNamespace">

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="100dp"
            android:layout_height="30dp"
            app:srcCompat="@drawable/logo"
            tools:layout_editor_absoluteX="2dp"
            tools:layout_editor_absoluteY="6dp"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            tools:ignore="ContentDescription" />

        <ImageButton
            android:id="@+id/imageButton1"
            android:layout_width="30dp"
            android:layout_height="30dp"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:srcCompat="@drawable/person"
            tools:ignore="ContentDescription" />

        <ImageButton
            android:id="@+id/imageButton2"
            android:layout_width="30dp"
            android:layout_height="30dp"
            app:srcCompat="@drawable/ic_search_black_24dp"

            app:layout_constraintRight_toLeftOf="@id/imageButton1"
            app:layout_constraintTop_toTopOf="parent"
            tools:layout_editor_absoluteX="307dp"
            tools:layout_editor_absoluteY="13dp"
            tools:ignore="ContentDescription,VectorDrawableCompat" />

        <ImageButton
            android:id="@+id/imageButton3"
            android:layout_width="30dp"
            android:layout_height="30dp"
            app:srcCompat="@drawable/ic_videocam_black_24dp"
            app:layout_constraintRight_toLeftOf="@id/imageButton2"
            app:layout_constraintTop_toTopOf="parent"
            tools:layout_editor_absoluteX="288dp"
            tools:layout_editor_absoluteY="2dp"
            tools:ignore="ContentDescription,MissingConstraints,VectorDrawableCompat" />

        <ImageButton
            android:id="@+id/imageButton4"
            android:layout_width="30dp"
            android:layout_height="30dp"
            app:layout_constraintRight_toLeftOf="@id/imageButton3"
            app:layout_constraintTop_toTopOf="parent"
            app:srcCompat="@drawable/ic_cast_connected_black_24dp"
            tools:layout_editor_absoluteX="258dp"
            tools:ignore="ContentDescription,VectorDrawableCompat" />

        <ImageButton
            android:id="@+id/imageButton5"
            android:layout_width="25dp"
            android:layout_height="25dp"
            app:srcCompat="@drawable/musiclogo"
            app:layout_constraintTop_toBottomOf="@id/imageView"
            app:layout_constraintLeft_toLeftOf="parent"
            tools:layout_editor_absoluteX="4dp"
            tools:layout_editor_absoluteY="34dp"
            tools:ignore="ContentDescription,MissingConstraints" />

        <Button
            android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="25dp"
            android:text="Music app"
            android:textSize="7dp"
            app:layout_constraintLeft_toRightOf="@id/imageButton5"
            app:layout_constraintTop_toBottomOf="@id/imageView"
            tools:layout_editor_absoluteX="37dp"
            tools:layout_editor_absoluteY="29dp"
            tools:ignore="HardcodedText,SpUsage" />

        <ImageButton
            android:id="@+id/imageButton7"
            android:layout_width="25dp"
            android:layout_height="25dp"
            android:layout_marginLeft="10dp"
            app:srcCompat="@drawable/ic_movie_black_24dp"
            app:layout_constraintLeft_toRightOf="@id/button"
            app:layout_constraintTop_toBottomOf="@id/imageView"
            tools:layout_editor_absoluteX="193dp"
            tools:layout_editor_absoluteY="34dp"
            tools:ignore="ContentDescription,RtlHardcoded,VectorDrawableCompat" />

        <Button
            android:id="@+id/button2"
            android:layout_width="wrap_content"
            android:layout_height="25dp"
            android:text="Originals"
            android:textSize="7dp"
            app:layout_constraintLeft_toRightOf="@+id/imageButton7"
            app:layout_constraintTop_toBottomOf="@id/imageView"
            tools:layout_editor_absoluteX="134dp"
            tools:layout_editor_absoluteY="23dp"
            tools:ignore="HardcodedText,SpUsage" />

        <FrameLayout
            android:id="@+id/frame01"
            android:layout_width="match_parent"
            android:layout_height="200dp"
            app:layout_constraintTop_toBottomOf="@id/imageButton5"
            >
            <VideoView
                android:id="@+id/videoView"
                android:layout_width="match_parent"
                android:layout_height="200dp"
                tools:layout_editor_absoluteX="189dp"
                tools:layout_editor_absoluteY="194dp" />
            <TextView
                android:id="@+id/textView6"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom|end"
                android:layout_marginBottom="10dp"
                android:layout_marginEnd="8dp"
                android:background="#111111"
                android:text=" 20:52 "
                android:textColor="#ffffff"
                tools:ignore="HardcodedText,RtlCompat" />
        </FrameLayout>

        <ImageButton
            android:id="@+id/imageButton8"
            android:layout_width="25dp"
            android:layout_height="25dp"
            app:srcCompat="@drawable/uploader"
            app:layout_constraintLeft_toLeftOf="parent"
            android:layout_marginTop="5dp"
            app:layout_constraintTop_toBottomOf="@id/frame01"
            tools:layout_editor_absoluteX="6dp"
            tools:layout_editor_absoluteY="258dp"
            tools:ignore="ContentDescription" />

        <TextView
            android:id="@+id/textView2"
            android:layout_width="330dp"
            android:layout_height="wrap_content"
            android:text=" ENG SUB) 보살 PICK 찐 맛집 (feat.비룡 브금) 충격과 반전의 상호명? [무엇이든 물어보살 66화]"
            android:textColor="#111111"
            android:layout_marginTop="3dp"
            app:layout_constraintTop_toBottomOf="@id/frame01"
            app:layout_constraintLeft_toRightOf="@id/imageButton8"
            android:layout_marginLeft="5dp"
            tools:layout_editor_absoluteX="36dp"
            tools:layout_editor_absoluteY="269dp"
            tools:ignore="HardcodedText,RtlHardcoded" />

        <ImageButton
            android:id="@+id/imageButton9"
            android:layout_width="25dp"
            android:layout_height="25dp"
            app:srcCompat="@drawable/ic_more_vert_black_24dp"
            app:layout_constraintTop_toTopOf="@+id/textView2"
            app:layout_constraintRight_toRightOf="parent"
            tools:layout_editor_absoluteX="347dp"
            tools:layout_editor_absoluteY="254dp"
            tools:ignore="ContentDescription,VectorDrawableCompat" />

        <TextView
            android:id="@+id/textView3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="MYSTIC TV"
            android:textSize="10dp"
            app:layout_constraintLeft_toLeftOf="@id/textView2"
            app:layout_constraintTop_toBottomOf="@id/textView2"
            tools:layout_editor_absoluteX="32dp"
            tools:layout_editor_absoluteY="296dp"
            tools:ignore="HardcodedText,SpUsage" />

        <TextView
            android:id="@+id/textView4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="조회수 4.7천회"
            android:textSize="10dp"
            android:layout_marginLeft="5dp"
            app:layout_constraintLeft_toRightOf="@id/textView3"
            app:layout_constraintTop_toBottomOf="@id/textView2"
            tools:layout_editor_absoluteX="32dp"
            tools:layout_editor_absoluteY="296dp"
            tools:ignore="HardcodedText,RtlHardcoded,SpUsage" />

        <TextView
            android:id="@+id/textView5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="1일 전"
            android:textSize="10dp"
            android:layout_marginLeft="5dp"
            app:layout_constraintLeft_toRightOf="@id/textView4"
            app:layout_constraintTop_toBottomOf="@id/textView2"
            tools:layout_editor_absoluteX="32dp"
            tools:layout_editor_absoluteY="296dp"
            tools:ignore="HardcodedText,RtlHardcoded,SpUsage" />

        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="30dp"
            android:layout_height="30dp"
            app:srcCompat="@drawable/logo2"
            tools:layout_editor_absoluteX="3dp"
            android:layout_marginTop="10dp"
            android:layout_marginLeft="10dp"
            app:layout_constraintTop_toBottomOf="@id/textView5"
            app:layout_constraintLeft_toLeftOf="parent"
            tools:layout_editor_absoluteY="331dp"
            tools:ignore="ContentDescription,HardcodedText,RtlHardcoded,SpUsage"/>

        <TextView
            android:id="@+id/textView7"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="YouTube로 #집에서함께라이브봐요"
            android:textColor="#000000"
            app:layout_constraintTop_toTopOf="@id/imageView2"
            app:layout_constraintLeft_toRightOf="@id/imageView2"
            android:layout_marginLeft="10dp"
            tools:layout_editor_absoluteX="37dp"
            tools:layout_editor_absoluteY="327dp"
            tools:ignore="HardcodedText,RtlHardcoded,SpUsage"/>

        <TextView
            android:id="@+id/textView8"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text=" 추천 "
            android:textColor="#ffffff"
            android:textSize="13dp"
            android:background="@color/colorBlue"
            android:layout_marginTop="5dp"
            app:layout_constraintTop_toBottomOf="@id/textView7"
            app:layout_constraintLeft_toLeftOf="@id/textView7"
            tools:layout_editor_absoluteX="34dp"
            tools:layout_editor_absoluteY="345dp"
            tools:ignore="HardcodedText,RtlHardcoded,SpUsage"/>
        <ImageButton
            android:id="@+id/imageButton10"
            android:layout_width="25dp"
            android:layout_height="25dp"
            app:srcCompat="@drawable/ic_more_vert_black_24dp"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="@id/textView8"
            tools:layout_editor_absoluteX="350dp"
            tools:layout_editor_absoluteY="320dp"
            tools:ignore="ContentDescription,VectorDrawableCompat" />
        <VideoView
            android:id="@+id/videoView2"
            android:layout_width="130dp"
            android:layout_height="75dp"
            app:layout_constraintLeft_toLeftOf="@id/imageView2"
            app:layout_constraintTop_toBottomOf="@id/textView8"
            android:layout_marginTop="15dp"
            tools:layout_editor_absoluteX="38dp"
            tools:layout_editor_absoluteY="378dp" />

        <TextView
            android:id="@+id/textView9"
            android:layout_width="110dp"
            android:layout_height="wrap_content"
            app:layout_constraintLeft_toLeftOf="@id/videoView2"
            android:layout_marginTop="3dp"
            app:layout_constraintTop_toBottomOf="@id/videoView2"
            android:text="HONNE- no song without you live stream"
            android:textSize="9dp"
            android:textColor="#111111"
            tools:layout_editor_absoluteX="11dp"
            tools:layout_editor_absoluteY="455dp"
            tools:ignore="HardcodedText,RtlHardcoded,SpUsage"/>

        <TextView
            android:id="@+id/textView10"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintLeft_toLeftOf="@id/videoView2"
            app:layout_constraintTop_toBottomOf="@id/textView9"
            android:text="H O N N E"
            android:textSize="8dp"
            tools:layout_editor_absoluteX="11dp"
            tools:layout_editor_absoluteY="455dp"
            tools:ignore="HardcodedText,SpUsage" />

        <TextView
            android:id="@+id/textView11"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintLeft_toLeftOf="@id/videoView2"
            app:layout_constraintTop_toBottomOf="@id/textView10"
            android:text="조회수 37만회 스트리밍..."
            android:textSize="7dp"
            tools:layout_editor_absoluteX="11dp"
            tools:layout_editor_absoluteY="455dp"
            tools:ignore="HardcodedText,SpUsage" />

        <ImageButton
            android:id="@+id/imageButton11"
            android:layout_width="12dp"
            android:layout_height="12dp"
            app:layout_constraintRight_toRightOf="@id/videoView2"
            app:layout_constraintTop_toTopOf="@id/textView9"
            app:srcCompat="@drawable/ic_more_vert_black_24dp"
            tools:layout_editor_absoluteX="123dp"
            tools:layout_editor_absoluteY="452dp"
            tools:ignore="ContentDescription,VectorDrawableCompat" />


        <VideoView
            android:id="@+id/videoView3"
            android:layout_width="130dp"
            android:layout_height="75dp"
            app:layout_constraintLeft_toRightOf="@id/videoView2"
            android:layout_marginLeft="15dp"
            app:layout_constraintTop_toBottomOf="@id/textView8"
            android:layout_marginTop="15dp"
            tools:layout_editor_absoluteX="38dp"
            tools:layout_editor_absoluteY="378dp"
            tools:ignore="RtlHardcoded" />
        <TextView
            android:id="@+id/textView12"
            android:layout_width="110dp"
            android:layout_height="wrap_content"
            app:layout_constraintLeft_toLeftOf="@id/videoView3"
            android:layout_marginTop="3dp"
            app:layout_constraintTop_toBottomOf="@id/videoView3"
            android:text="OnlyOneOfLive | 비오는 날 밤"
            android:textSize="9dp"
            android:textColor="#111111"
            tools:layout_editor_absoluteX="11dp"
            tools:layout_editor_absoluteY="455dp"
            tools:ignore="HardcodedText,RtlHardcoded,SpUsage"/>

        <TextView
            android:id="@+id/textView13"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintLeft_toLeftOf="@id/videoView3"
            app:layout_constraintTop_toBottomOf="@id/textView9"
            android:text="OnlyOneOf official"
            android:textSize="8dp"
            tools:layout_editor_absoluteX="11dp"
            tools:layout_editor_absoluteY="455dp"
            tools:ignore="HardcodedText,SpUsage" />

        <TextView
            android:id="@+id/textView14"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintLeft_toLeftOf="@id/videoView3"
            app:layout_constraintTop_toBottomOf="@id/textView10"
            android:text="조회수 22만회 스트리밍..."
            android:textSize="7dp"
            tools:layout_editor_absoluteX="11dp"
            tools:layout_editor_absoluteY="455dp"
            tools:ignore="HardcodedText,SpUsage" />

        <ImageButton
            android:id="@+id/imageButton12"
            android:layout_width="12dp"
            android:layout_height="12dp"
            app:layout_constraintRight_toRightOf="@id/videoView3"
            app:layout_constraintTop_toTopOf="@id/textView9"
            app:srcCompat="@drawable/ic_more_vert_black_24dp"
            tools:layout_editor_absoluteX="123dp"
            tools:layout_editor_absoluteY="452dp"
            tools:ignore="ContentDescription,VectorDrawableCompat" />
        <VideoView
            android:id="@+id/videoView4"
            android:layout_width="130dp"
            android:layout_height="75dp"
            app:layout_constraintLeft_toRightOf="@id/videoView3"
            android:layout_marginLeft="15dp"
            app:layout_constraintTop_toBottomOf="@id/textView8"
            android:layout_marginTop="15dp"
            tools:layout_editor_absoluteX="38dp"
            tools:layout_editor_absoluteY="378dp"
            tools:ignore="RtlHardcoded" />

        <TextView
            android:id="@+id/textView15"
            android:layout_width="110dp"
            android:layout_height="wrap_content"
            app:layout_constraintLeft_toLeftOf="@id/videoView4"
            android:layout_marginTop="3dp"
            app:layout_constraintTop_toBottomOf="@id/videoView4"
            android:text="[sub] Live풀버전 | 99즈의 '미도와 파라솔' 밴드..."
            android:textSize="9dp"
            android:textColor="#111111"
            tools:layout_editor_absoluteX="11dp"
            tools:layout_editor_absoluteY="455dp"
            tools:ignore="HardcodedText,SpUsage" />

        <TextView
            android:id="@+id/textView16"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintLeft_toLeftOf="@id/videoView4"
            app:layout_constraintTop_toBottomOf="@id/textView9"
            android:text="채널 십오야"
            android:textSize="8dp"
            tools:layout_editor_absoluteX="11dp"
            tools:layout_editor_absoluteY="455dp"
            tools:ignore="HardcodedText,SpUsage" />

        <TextView
            android:id="@+id/textView17"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintLeft_toLeftOf="@id/videoView4"
            app:layout_constraintTop_toBottomOf="@id/textView10"
            android:text="조회수 199만회 3주전"
            android:textSize="7dp"
            tools:layout_editor_absoluteX="11dp"
            tools:layout_editor_absoluteY="455dp"
            tools:ignore="HardcodedText,SpUsage" />
        <ImageButton
            android:id="@+id/imageButton13"
            android:layout_width="12dp"
            android:layout_height="12dp"
            app:layout_constraintRight_toRightOf="@id/videoView4"
            app:layout_constraintTop_toTopOf="@id/textView9"
            app:srcCompat="@drawable/ic_more_vert_black_24dp"
            tools:layout_editor_absoluteX="123dp"
            tools:layout_editor_absoluteY="452dp"
            tools:ignore="ContentDescription,VectorDrawableCompat" />

        <FrameLayout
            android:id="@+id/frame02"
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:layout_marginTop="10dp"
            app:layout_constraintTop_toBottomOf="@id/textView17"
            >
            <VideoView
                android:id="@+id/videoView5"
                android:layout_width="match_parent"
                android:layout_height="200dp"
                tools:layout_editor_absoluteX="189dp"
                tools:layout_editor_absoluteY="194dp" />

            <TextView
                android:id="@+id/textView18"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="#111111"
                android:text=" 20:52 "
                android:textColor="#ffffff"
                android:layout_gravity="bottom|end"
                android:layout_marginBottom="10dp"
                android:layout_marginEnd="8dp"
                tools:ignore="HardcodedText,RtlCompat" />
        </FrameLayout>

        <ImageButton
            android:id="@+id/imageButton14"
            android:layout_width="25dp"
            android:layout_height="25dp"
            app:srcCompat="@drawable/uploader"
            app:layout_constraintLeft_toLeftOf="parent"
            android:layout_marginTop="5dp"
            app:layout_constraintTop_toBottomOf="@id/frame02"
            tools:layout_editor_absoluteX="6dp"
            tools:layout_editor_absoluteY="258dp"
            tools:ignore="ContentDescription" />

        <TextView
            android:id="@+id/textView19"
            android:layout_width="330dp"
            android:layout_height="wrap_content"
            android:text=" ENG SUB) 보살 PICK 찐 맛집 (feat.비룡 브금) 충격과 반전의 상호명? [무엇이든 물어보살 66화]"
            android:textColor="#111111"
            android:layout_marginTop="3dp"
            app:layout_constraintTop_toBottomOf="@id/frame02"
            app:layout_constraintLeft_toRightOf="@id/imageButton14"
            android:layout_marginLeft="5dp"
            tools:layout_editor_absoluteX="36dp"
            tools:layout_editor_absoluteY="269dp"
            tools:ignore="HardcodedText,RtlHardcoded" />

        <ImageButton
            android:id="@+id/imageButton15"
            android:layout_width="25dp"
            android:layout_height="25dp"
            app:srcCompat="@drawable/ic_more_vert_black_24dp"
            app:layout_constraintTop_toTopOf="@+id/textView19"
            app:layout_constraintRight_toRightOf="parent"
            tools:layout_editor_absoluteX="347dp"
            tools:layout_editor_absoluteY="254dp"
            tools:ignore="ContentDescription,VectorDrawableCompat" />

        <TextView
            android:id="@+id/textView20"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="MYSTIC TV"
            android:textSize="10dp"
            app:layout_constraintLeft_toLeftOf="@id/textView19"
            app:layout_constraintTop_toBottomOf="@id/textView19"
            tools:layout_editor_absoluteX="32dp"
            tools:layout_editor_absoluteY="296dp"
            tools:ignore="HardcodedText,SpUsage" />

        <TextView
            android:id="@+id/textView21"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="조회수 4.7천회"
            android:textSize="10dp"
            android:layout_marginLeft="5dp"
            app:layout_constraintLeft_toRightOf="@id/textView20"
            app:layout_constraintTop_toBottomOf="@id/textView19"
            tools:layout_editor_absoluteX="32dp"
            tools:layout_editor_absoluteY="296dp"
            tools:ignore="HardcodedText,RtlHardcoded,SpUsage"/>

        <TextView
            android:id="@+id/textView555"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="1일 전"
            android:textSize="10dp"
            android:layout_marginLeft="5dp"
            app:layout_constraintLeft_toRightOf="@id/textView21"
            app:layout_constraintTop_toBottomOf="@id/textView19"
            tools:layout_editor_absoluteX="32dp"
            tools:layout_editor_absoluteY="296dp"
            tools:ignore="HardcodedText,RtlHardcoded,SpUsage" />
    </androidx.constraintlayout.widget.ConstraintLayout>

</ScrollView>

 

 

● RealativeLayout 사용해서 App View 모방하기

추가 : 앱바 삭제, 상태바 색상 변경, 스크롤 뷰 적용

<?xml version="1.0" encoding="utf-8"?>

<ScrollView
    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:orientation="vertical"
    android:layout_height="wrap_content">

    <RelativeLayout
        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">

        <ImageView
            android:id="@+id/imageView3"
            android:layout_width="100dp"
            android:layout_height="30dp"
            app:srcCompat="@drawable/logo"
            tools:ignore="ContentDescription" />

        <ImageButton
            android:id="@+id/imageButton"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:layout_alignParentTop="true"
            android:layout_alignParentRight="true"
            android:layout_marginTop="-1dp"
            android:layout_marginRight="0dp"
            app:srcCompat="@drawable/uploader"
            tools:ignore="ContentDescription,RtlHardcoded" />


        <ImageButton
            android:id="@+id/imageButton1"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:layout_alignParentTop="true"
            android:layout_toLeftOf="@id/imageButton"
            app:srcCompat="@drawable/ic_search_black_24dp"
            tools:ignore="ContentDescription,RtlHardcoded,VectorDrawableCompat" />

        <ImageButton
            android:id="@+id/imageButton2"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:layout_alignParentTop="true"
            android:layout_toLeftOf="@id/imageButton1"
            app:srcCompat="@drawable/ic_videocam_black_24dp"
            tools:ignore="ContentDescription,RtlHardcoded,VectorDrawableCompat" />

        <ImageButton
            android:id="@+id/imageButton3"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:layout_alignParentTop="true"
            android:layout_toLeftOf="@id/imageButton2"
            app:srcCompat="@drawable/ic_cast_connected_black_24dp"
            tools:ignore="ContentDescription,RtlHardcoded,VectorDrawableCompat" />

        <Button
            android:id="@+id/button"
            android:layout_marginTop="15dp"
            android:layout_marginLeft="7dp"
            android:layout_width="180dp"
            android:layout_height="40dp"
            android:layout_below="@id/imageView3"
            android:text="인기"
            tools:ignore="HardcodedText,RtlHardcoded" />
        <Button
            android:id="@+id/button1"
            android:layout_marginLeft="7dp"
            android:layout_marginStart="20dp"
            android:layout_width="180dp"
            android:layout_height="40dp"
            android:layout_toRightOf="@id/button"
            android:layout_alignTop="@id/button"
            android:text="음악"
            tools:ignore="HardcodedText,RtlHardcoded" />

        <Button
            android:id="@+id/button2"
            android:layout_marginTop="15dp"
            android:layout_marginLeft="7dp"
            android:layout_width="180dp"
            android:layout_height="40dp"
            android:layout_below="@id/button"
            android:text="게임"
            tools:ignore="HardcodedText,RtlHardcoded" />

        <Button
            android:id="@+id/button3"
            android:layout_marginTop="15dp"
            android:layout_marginLeft="7dp"
            android:layout_width="180dp"
            android:layout_height="40dp"
            android:layout_marginStart="20dp"
            android:layout_toRightOf="@id/button2"
            android:layout_below="@id/button1"
            android:text="영화"
            tools:ignore="HardcodedText,RtlHardcoded" />

        <Button
            android:id="@+id/button4"
            android:layout_marginTop="15dp"
            android:layout_marginLeft="7dp"
            android:layout_width="180dp"
            android:layout_height="40dp"
            android:layout_below="@id/button2"
            android:text="학습"
            tools:ignore="HardcodedText,RtlHardcoded" />

        <TextView
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="15dp"
            android:layout_marginLeft="7dp"
            android:layout_below="@id/button4"
            android:text="인기 급상승 동영상"
            android:textColor="#000000"
            tools:ignore="HardcodedText,RtlHardcoded" />

        <VideoView
            android:id="@+id/videoView6"
            android:layout_width="wrap_content"
            android:layout_height="230dp"
            android:layout_marginTop="10dp"
            android:layout_below="@+id/textView2"/>

        <ImageButton
            android:id="@+id/imageButton4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:srcCompat="@drawable/person"
            android:layout_below="@+id/videoView6"
            tools:ignore="ContentDescription" />

        <TextView
            android:id="@+id/textView23"
            android:layout_width="270dp"
            android:layout_height="wrap_content"
            android:layout_below="@+id/videoView6"
            android:layout_marginLeft="10dp"
            android:layout_toRightOf="@+id/imageButton4"
            android:text="이제야 제대로 보여지는 AOA 지민의 과거 행동들"
            android:textColor="#000000"
            tools:ignore="HardcodedText,RtlHardcoded" />

        <TextView
            android:id="@+id/textView24"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="해군 수달 죄호수 199만회 1일전"
            android:layout_marginLeft="10dp"
            android:textSize="10dp"
            android:layout_toRightOf="@+id/imageButton4"
            android:layout_below="@+id/textView23"
            tools:ignore="HardcodedText,RtlHardcoded,SpUsage" />

        <ImageButton
            android:id="@+id/imageButton5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_below="@+id/videoView6"
            android:layout_marginRight="5dp"
            app:srcCompat="@drawable/ic_more_vert_black_24dp"
            tools:ignore="ContentDescription,RtlHardcoded,VectorDrawableCompat" />

        <VideoView
            android:id="@+id/videoView7"
            android:layout_width="wrap_content"
            android:layout_height="230dp"
            android:layout_below="@+id/textView24"
            android:layout_marginTop="7dp" />

        <TextView
            android:id="@+id/textView22"
            android:layout_width="450dp"
            android:layout_height="55dp"
            android:background="#ffffff"
            android:layout_alignParentLeft="true"
            android:layout_alignParentBottom="true"
            android:text=""
            tools:ignore="HardcodedText" />

        <ImageButton
            android:id="@+id/imageButton6"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_alignParentStart="true"
            android:layout_alignParentBottom="true"
            android:layout_marginStart="-1dp"
            android:layout_marginBottom="-1dp"
            app:srcCompat="@drawable/ic_home_black_24dp"
            tools:ignore="ContentDescription,RtlCompat,VectorDrawableCompat" />

        <ImageButton
            android:id="@+id/imageButton7"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_alignParentBottom="true"
            android:layout_marginLeft="39dp"
            android:layout_toRightOf="@id/imageButton6"
            app:srcCompat="@drawable/ic_search_black_24dp"
            tools:ignore="ContentDescription,RtlCompat,RtlHardcoded,VectorDrawableCompat" />

        <ImageButton
            android:id="@+id/imageButton8"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true"

            app:srcCompat="@drawable/ic_subscriptions_black_24dp"
            tools:ignore="ContentDescription,RtlCompat,VectorDrawableCompat" />

        <ImageButton
            android:id="@+id/imageButton9"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_alignParentBottom="true"
            android:layout_marginLeft="39dp"
            android:layout_toRightOf="@id/imageButton8"
            app:srcCompat="@drawable/ic_mail_black_24dp"
            tools:ignore="ContentDescription,RtlCompat,RtlHardcoded,VectorDrawableCompat" />

        <ImageButton
            android:id="@+id/imageButton10"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_alignParentBottom="true"
            android:layout_alignParentEnd="true"
            app:srcCompat="@drawable/ic_video_library_black_24dp"
            tools:ignore="ContentDescription,RtlCompat,VectorDrawableCompat" />




    </RelativeLayout>

</ScrollView>

 

●  FrameLayout

- 위에서 Videoview 위에 textview를 보일 수 있게 하기 위해서, frameLayout을 사용하였다.

- framelayour에 여러 개의 자식을 추가하면, 가장 마지막에 추가된 뷰가 젤 전면에 표시된다.

 

 

<참고 자료>

recipes4dev.tistory.com/127

recipes4dev.tistory.com/158

recipes4dev.tistory.com/126

abandonia.tistory.com/1

www.masterqna.com/android/63155/%EC%A2%8C%EC%9A%B0-%EC%8A%A4%ED%81%AC%EB%A1%A4-ui%EA%B4%80%EB%A0%A8-%EC%A7%88%EB%AC%B8%EB%93%9C%EB%A6%BD%EB%8B%88%EB%8B%A4.

 

// 스크롤 뷰 

https://yollo.tistory.com/6

// 색상 바 색상 변경

https://xopenpro.tistory.com/21

// 앱바 삭제

https://tristan91.tistory.com/82