간단한 안드로이드 앱 만들기 (날씨 앱)

3. 프로젝트 시작 및 홈화면 UI 구성하기

리저브콜드브루 2025. 2. 5. 14:49
728x90
반응형

1. 프로젝트 시작하기

Android Studio > New Project > Empty Activity > Next 버튼 클릭
이름을 지정하고 적당한 API 레벨을 고른다 > finish 버튼 클릭

 

2. 메인 홈 UI 구성하기

  • 메인 xml (activity_main.xml) 추가

layout 폴더에 activity_main을 추가한다.

xml 추가하다가 알게 된 건 layout 폴더 위치가 아닌 다른 폴더에 xml이 위치해 있다면 오른쪽 Design 미리 보기를 지원하지 않는다는 것이었다.

 

  • 현재 위치 (TextView) 추가: 상단 가운데 위로 위치하도록 추가한다.
<?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"
    android:padding="16dp"
    tools:context=".MainActivity">

    <!-- 현재 위치 표시 -->
    <TextView
        android:id="@+id/textView_location"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="서울"
        android:textSize="20sp"
        android:textStyle="bold"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>

Design 모습

  • 카드뷰 (현재 온도, 날씨 이미지, 날씨 텍스트, 최고/최저 온도) 추가
    • 카드 뷰를 추가하여 자식 뷰를 추가할 영역 생성
    • ConstraintLayout을 만들어 아이템을 추가하고 생각한 디자인에 맞게 배치 및 크기 조절
    • 최고/최저 온도는 한줄에 텍스트 뷰 두 개로 표시하므로 LinearLayout으로 묶어주었다.
    • sunny.png 파일을 res/drawable 경로에 추가
<?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"
    android:padding="16dp"
    tools:context=".MainActivity">

    <!-- 현재 위치 표시 -->
    <TextView
        android:id="@+id/textView_location"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="서울"
        android:textSize="20sp"
        android:textStyle="bold"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>

    <androidx.cardview.widget.CardView
        android:id="@+id/card_weather"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        app:cardCornerRadius="8dp"
        app:layout_constraintTop_toBottomOf="@id/textView_location"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="16dp">

            <!-- 날씨 아이콘 -->
            <ImageView
                android:id="@+id/image_weather_icon"
                android:layout_width="80dp"
                android:layout_height="80dp"
                android:background="@drawable/sunny"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toStartOf="@id/textView_temparature"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintVertical_bias="0.2" />

            <!-- 현재 온도 -->
            <TextView
                android:id="@+id/textView_temparature"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="28℃"
                android:textSize="60sp"
                android:textStyle="bold"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintStart_toEndOf="@+id/image_weather_icon"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintVertical_bias="0.2" />

            <!-- 날씨 상태 -->
            <TextView
                android:id="@+id/textView_weather_status"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Sunny"
                android:textSize="20sp"
                android:textStyle="bold"
                app:layout_constraintTop_toBottomOf="@id/textView_temparature"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                android:layout_marginTop="8dp" />

            <!-- 최고/최저 온도 표시 -->
            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                app:layout_constraintTop_toBottomOf="@id/textView_weather_status"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                android:layout_marginTop="4dp">

                <TextView
                    android:id="@+id/textView_temp_max"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="최고: 30℃"
                    android:textSize="14sp" />

                <TextView
                    android:id="@+id/textView_temp_min"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="최저: 18℃"
                    android:textSize="14sp"
                    android:layout_marginStart="16dp" />
            </LinearLayout>

        </androidx.constraintlayout.widget.ConstraintLayout>
    </androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>

Design 모습

  • 기능을 추가하기 전에 다른 날씨 정보를 배치하기 위한 레이아웃을 추가할 예정

프로젝트에 사용한 날씨 아이콘을 공유합니다.

weather_icon.zip
0.09MB

 

728x90
반응형