[UMC] Android 2주차 워크북 (Layout) - 당근마켓

📌 구상 과정

첫 번째로 생각한 앱 화면은 당근 마켓이다!

빨간색 ImageView, 파란색 TextView, 초록색은 Button, 중간에 있는 회색 구분선은 View를 사용하여 구현하고자 한다!

📌 직접 구현하기

 

 

📌 Layout 설명

• Header - Constraint Layout 안에 Linear Layout 중첩
• Body - Constraint Layout
• Footer - Linear Layout

📌 새롭게 알게 된 점

1. View를 사용하여 구분선을 그릴 수 있다.

2. drawable 폴더에 shape_button.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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <!-- Header -->
    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/header"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_marginTop="40dp"
        android:layout_marginLeft="25dp"
        android:layout_marginRight="25dp"
        android:orientation="horizontal"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent">
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:text="@string/title"
                android:textColor="@color/black"
                android:textSize="20dp"
                android:textStyle="bold" />

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_marginLeft="5dp"
                android:src="@drawable/arrow" />
        </LinearLayout>
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent">
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:src="@drawable/search" />
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:src="@drawable/list"
                android:layout_marginLeft="7dp"
                android:layout_marginRight="7dp"/>
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:src="@drawable/bell"/>
        </LinearLayout>
    </androidx.constraintlayout.widget.ConstraintLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="@color/lightgray"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        app:layout_constraintTop_toBottomOf="@+id/header"
        app:layout_constraintBottom_toTopOf="@+id/content1"/>

    <!-- Body -->
    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/content1"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:orientation="horizontal"
        android:layout_marginTop="25dp"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        app:layout_constraintTop_toBottomOf="@+id/header">

        <ImageView
            android:id="@+id/img1"
            android:layout_width="90dp"
            android:layout_height="90dp"
            android:src="@drawable/img1"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"/>
        <TextView
            android:id="@+id/text1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="@string/text1"
            android:textSize="18dp"
            android:textColor="@color/black"
            android:layout_marginLeft="12dp"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toEndOf="@+id/img1"/>
        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="당근마켓"
            android:textColor="@color/gray"
            android:textSize="12dp"
            android:layout_marginLeft="12dp"
            android:layout_marginTop="4dp"
            app:layout_constraintTop_toBottomOf="@+id/text1"
            app:layout_constraintStart_toEndOf="@+id/img1" />
    </androidx.constraintlayout.widget.ConstraintLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="@color/lightgray"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        app:layout_constraintTop_toBottomOf="@+id/content1"
        app:layout_constraintBottom_toTopOf="@+id/content2"/>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/content2"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:orientation="horizontal"
        android:layout_marginTop="25dp"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        app:layout_constraintTop_toBottomOf="@+id/content1">

        <ImageView
            android:id="@+id/img2"
            android:layout_width="90dp"
            android:layout_height="90dp"
            android:src="@drawable/img2"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"/>
        <TextView
            android:id="@+id/text2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="@string/text2"
            android:textSize="18dp"
            android:textColor="@color/black"
            android:layout_marginLeft="12dp"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toEndOf="@+id/img2"/>
        <TextView
            android:id="@+id/subtext2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="원미동 1초 전"
            android:textColor="@color/gray"
            android:textSize="12dp"
            android:layout_marginLeft="12dp"
            android:layout_marginTop="4dp"
            app:layout_constraintTop_toBottomOf="@+id/text2"
            app:layout_constraintStart_toEndOf="@+id/img2" />
        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="5,000원"
            android:textColor="@color/black"
            android:textStyle="bold"
            android:layout_marginLeft="12dp"
            android:layout_marginTop="7dp"
            app:layout_constraintTop_toBottomOf="@+id/subtext2"
            app:layout_constraintStart_toEndOf="@+id/img2" />
    </androidx.constraintlayout.widget.ConstraintLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="@color/lightgray"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        app:layout_constraintTop_toBottomOf="@+id/content2"
        app:layout_constraintBottom_toTopOf="@+id/content3"/>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/content3"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:orientation="horizontal"
        android:layout_marginTop="25dp"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        app:layout_constraintTop_toBottomOf="@+id/content2">

        <ImageView
            android:id="@+id/img3"
            android:layout_width="90dp"
            android:layout_height="90dp"
            android:src="@drawable/img3"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"/>
        <TextView
            android:id="@+id/text3"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="@string/text3"
            android:textSize="18dp"
            android:textColor="@color/black"
            android:layout_marginLeft="12dp"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toEndOf="@+id/img3"/>
        <TextView
            android:id="@+id/subtext3"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="괴안동 끌오로 10초 전"
            android:textColor="@color/gray"
            android:textSize="12dp"
            android:layout_marginLeft="12dp"
            android:layout_marginTop="4dp"
            app:layout_constraintTop_toBottomOf="@+id/text3"
            app:layout_constraintStart_toEndOf="@+id/img3" />
        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="60,000원"
            android:textColor="@color/black"
            android:textStyle="bold"
            android:layout_marginLeft="12dp"
            android:layout_marginTop="7dp"
            app:layout_constraintTop_toBottomOf="@+id/subtext3"
            app:layout_constraintStart_toEndOf="@+id/img3" />
    </androidx.constraintlayout.widget.ConstraintLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="@color/lightgray"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        app:layout_constraintTop_toBottomOf="@+id/content3"
        app:layout_constraintBottom_toTopOf="@+id/content4"/>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/content4"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:orientation="horizontal"
        android:layout_marginTop="25dp"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        app:layout_constraintTop_toBottomOf="@+id/content3">

        <ImageView
            android:id="@+id/img4"
            android:layout_width="90dp"
            android:layout_height="90dp"
            android:src="@drawable/img4"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"/>
        <TextView
            android:id="@+id/text4"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="@string/text4"
            android:textSize="18dp"
            android:textColor="@color/black"
            android:layout_marginLeft="12dp"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toEndOf="@+id/img4"/>
        <TextView
            android:id="@+id/subtext4"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="구로구 오류제1동 52초 전"
            android:textColor="@color/gray"
            android:textSize="12dp"
            android:layout_marginLeft="12dp"
            android:layout_marginTop="4dp"
            app:layout_constraintTop_toBottomOf="@+id/text4"
            app:layout_constraintStart_toEndOf="@+id/img4" />
        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="490,000원"
            android:textColor="@color/black"
            android:textStyle="bold"
            android:layout_marginLeft="12dp"
            android:layout_marginTop="7dp"
            app:layout_constraintTop_toBottomOf="@+id/subtext4"
            app:layout_constraintStart_toEndOf="@+id/img4" />
    </androidx.constraintlayout.widget.ConstraintLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="@color/lightgray"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        app:layout_constraintTop_toBottomOf="@+id/content4"
        app:layout_constraintBottom_toTopOf="@+id/content5"/>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/content5"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:orientation="horizontal"
        android:layout_marginTop="25dp"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        app:layout_constraintTop_toBottomOf="@+id/content4">

        <ImageView
            android:id="@+id/img5"
            android:layout_width="90dp"
            android:layout_height="90dp"
            android:src="@drawable/img5"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"/>
        <TextView
            android:id="@+id/text5"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="@string/text5"
            android:textSize="18dp"
            android:textColor="@color/black"
            android:layout_marginLeft="12dp"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toEndOf="@+id/img5"/>
        <TextView
            android:id="@+id/subtext5"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="중동 광고"
            android:textColor="@color/gray"
            android:textSize="12dp"
            android:layout_marginLeft="12dp"
            android:layout_marginTop="4dp"
            app:layout_constraintTop_toBottomOf="@+id/text5"
            app:layout_constraintStart_toEndOf="@+id/img5" />
        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="월급 2,900,000원"
            android:textColor="@color/black"
            android:textStyle="bold"
            android:layout_marginLeft="12dp"
            android:layout_marginTop="7dp"
            app:layout_constraintTop_toBottomOf="@+id/subtext5"
            app:layout_constraintStart_toEndOf="@+id/img5" />

        <androidx.appcompat.widget.AppCompatButton
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:background="@drawable/shape_button"
            android:text="+"
            android:textSize="30sp"
            android:textColor="@color/white"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"/>
    </androidx.constraintlayout.widget.ConstraintLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="@color/lightgray"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        app:layout_constraintTop_toBottomOf="@+id/content5"
        app:layout_constraintBottom_toTopOf="@+id/footer"/>

    <!-- Footer -->
    <LinearLayout
        android:id="@+id/footer"
        android:layout_width="match_parent"
        android:layout_height="35dp"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:layout_marginBottom="25dp"
        android:gravity="center_horizontal"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintBottom_toBottomOf="parent">

        <ImageView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:src="@drawable/home" />
        <ImageView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:src="@drawable/article" />
        <ImageView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:src="@drawable/pin" />
        <ImageView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:src="@drawable/chat" />
        <ImageView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:src="@drawable/man" />
    </LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>