[Android Studio]배달의 민족 하단바 구현하기 with splash page, fade out

저번 주에 했었던 네비게이션 바를 응용하여 배달의 민족 앱을 통해 연습을 해보았다!(참고로 그냥 화면 캡쳐해서 연습용임!!!) 

 

1단계: build.gradle에서 필요한 라이브러리 추가

 

implementation("com.google.android.material:material:1.10.0")

 

위와 같이 추가하면 된다. 추가하는 이유는 하단 네비게이션 바를 사용하려면 Material Components 라이브러리가 필요해. 이 라이브러리가 없으면 BottomNavigationView를 사용할 수 없기 때문이다.

 

2단계:activity_main.xml에BottomNavigationView추가하기

하단에 표시할 네비게이션 바를 화면에 표시할 UI를 만들어야 하기 때문! 나는 아래와 같이 구성했다.

• FrameLayout → Fragment가 표시될 영역
• BottomNavigationView → 하단 네비게이션 바 (메뉴를 @menu/bottom_nav_menu에서 가져옴)

 

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- Fragment를 표시할 영역 -->
    <FrameLayout
        android:id="@+id/fragment_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <!-- 하단 네비게이션 바 -->
    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        app:menu="@menu/bottom_nav_menu" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

 

3단계:menu폴더에 네비게이션 메뉴 파일 생성

📌 res/menu/bottom_nav_menu.xml 파일 만들

res/menu/bottom_nav_menu.xml 파일을 만들면 된다! 여기에 그 안에 bottom_nav_menu.xml 파일을 추가한다. 메뉴는 나같은 경우 폴더를 직접 추가해야 했다. 이때 추가하는 방법은 res -> 우클릭 -> new resource Directory를 해서 리로스 타입을 메뉴로 하면 된다!

 

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/nav_home"
        android:icon="@drawable/ic_home"
        android:title="Home" />
    <item
        android:id="@+id/nav_shopping"
        android:icon="@drawable/ic_shopping"
        android:title="Shopping" />

    <item
        android:id="@+id/nav_like"
        android:icon="@drawable/ic_like"
        android:title="Like" />
    <item
        android:id="@+id/nav_list"
        android:icon="@drawable/ic_list"
        android:title="List" />



    <item
        android:id="@+id/nav_mypage"
        android:icon="@drawable/ic_mypage"
        android:title="Mypage" />
</menu>

 

나는 참고로 아이콘을 만들기 귀찮아서(?) 그냥 drawable 우클릭 -> New -> Vector Asset에서 원하는 아이콘을 찾아서 추가했다. 나처럼 연습용이라면 이 방법을 추천하나, 프로젝트를 한다면 디자이너가 제작한 아이콘을 쓰는게 좋다(안그러면 기존 앱하고 디자인....이 같을 것이기에...)

 

4단계 : 하단바 각각의 layout 만들기

 

나는 홈, 쇼핑, 좋아요, 리스트, 마이페이지 총 5개의 하단바 아이콘이 있기에 각각 하나씩 제작하였다. 다 똑같고, 이미지만 다르기에 대표적으로 홈만 코드를 남기겠다! 참고로 배달의 민족 화면은 캡쳐한 이미지를 통해 제작했다. 오늘은 연습 용도이기 때문이다.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <ImageView
        android:id="@+id/myImageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/fragment_home_2"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />

</androidx.con

 

5 단계 : MainActivity.kt 에서 네비게이션 기능 구현

네비게이션 바에서 아이콘을 클릭하면 Fragment가 바뀌도록 만들어야 함. 사실은 당연한 내용임. 각각 홈, 등등 화면 각각이 프레그먼트라고 생각하면 돼!

 

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.fragment.app.Fragment
import com.google.android.material.bottomnavigation.BottomNavigationView

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.acitivity_main)
        supportActionBar?.hide() // 액티비티 제목 숨기기

        // 예시로 Fragment1에서 Fragment2로 이동할 때 슬라이드 효과 추가
        /*val fragmentTransaction = supportFragmentManager.beginTransaction()

        // 슬라이드 애니메이션
        fragmentTransaction.setCustomAnimations(
            android.R.anim.slide_in_left,   // 화면에 등장할 때 애니메이션
            android.R.anim.slide_out_right  // 화면에서 사라질 때 애니메이션
        )*/



        val bottomNavigationView = findViewById<BottomNavigationView>(R.id.bottom_navigation)

        // 앱 실행 시 기본으로 표시할 Fragment 설정
        if (savedInstanceState == null) {
            replaceFragment(HomeFragment())
        }

        bottomNavigationView.setOnItemSelectedListener { item ->
            when (item.itemId) {
                R.id.nav_home -> replaceFragment(HomeFragment())
                R.id.nav_shopping -> replaceFragment(ShoppingFragment())
                R.id.nav_like -> replaceFragment(LikeFragment())
                R.id.nav_list -> replaceFragment(ListFragment())
                R.id.nav_mypage -> replaceFragment(MypageFragment())
            }
            true
        }
    }

    // Fragment 교체 함수
    private fun replaceFragment(fragment: Fragment) {
        supportFragmentManager.beginTransaction()
            .setCustomAnimations(android.R.anim.fade_in, android.R.anim.fade_out) // 애니메이션 추가
            .replace(R.id.fragment_container, fragment) // 새로운 Fragment로 교체
            .commit() // 변경 사항 적용
        //페이드 아웃(fade out) 효과

    }
}

 

6단계: Fragment 파일들 생성하기

나는 5가지 있고, 모두 이미지 정도만 다르기에 대표적으로 홈만 코드를 올리겠다!

import android.os.Bundle
import androidx.fragment.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup

class HomeFragment : Fragment() {
    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        return inflater.inflate(R.layout.fragment_home, container, false)
    }
}

 

 

그런데 여기서 끝나면 심심하다. 배민을 지금 들어가면 홈화면 들어가기전 splash 화면이 뜬다. 오늘 이것도 한 번 추가적으로 구현해보자!

 

1단계: themes.xml에서 Splash 테마 만들기

기존 테마랑, 다른 테마를 사용해야하기 위해 스플래쉬 화면 전용 테마를 만든다고 생각하면 편하다!

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

    <!-- 기존 메인 테마 유지 -->
    <style name="Theme.Two_week" parent="android:Theme.Material.Light.NoActionBar">
        <item name="android:colorPrimary">#6200EE</item> <!-- 기존 색상 유지 -->

        <!-- 여기에 기존 설정 유지 -->
    </style>

    <!-- ✨ 새로운 스플래시 테마 추가 -->
    <style name="Theme.Splash" parent="Theme.Material3.DayNight.NoActionBar">
        <item name="android:windowBackground">@drawable/splash_screen</item>
    </style>
</resources>

 

 

2단계: 스플래시 화면 배경 만들기

배경은 res/drawable/splash_screen.xml여기로 만들어야 한다! 참고로 배경 생성시에는 drawble 우클릭 후 Root elements는 <layer-list> 이렇게 설정해야 한다! 배경색과 로고 이미지를 함께 표시하기 위해서이다. 그러나 나는 오늘 연습이기에 이미지는 그냥 캡쳐 이미지기에 이렇게까지 할 필요는 없지만, 실제 프로젝트에서는 이런 디테일 하나하나 중요하니 명심하기! 

 

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/white" /> <!-- 배경색 -->
    <item>
        <bitmap
            android:gravity="center"
            android:src="@drawable/logo" /> <!-- 앱 로고 -->
    </item>
</layer-list>

 

3단계: 스플래시 화면 전용SplashActivity만들기

 

앱 실행시 가장 먼저 실행될 액티비티를 만들어야 한다!

import android.content.Intent
import android.os.Bundle
import android.os.Handler
import android.os.Looper
import androidx.appcompat.app.AppCompatActivity

class SplashActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        /// 일정 시간 후 메인 액티비티로 이동
        Handler(Looper.getMainLooper()).postDelayed({
            startActivity(Intent(this, MainActivity::class.java)) // MainActivity로 이동
            finish() // 스플래시 액티비티 종료
        }, 2000) // 2초 후 실행 (2000 밀리초)
    }
}

 

4단계:AndroidManifest.xml에서 스플래시 화면을 기본 액티비티로 설정

앱 처음에 실행될 수 있도록 매니페스트에서 이를 조절할 수 있도록 해야 함!! 코드 일부만 발췌하겠다.

<!-- 🟢 SplashActivity를 시작 화면으로 지정 -->
        <activity
            android:name=".SplashActivity"
            android:exported="true"
            android:theme="@style/Theme.Splash">
            <intent-filter>
                <action android:name="android.intent.action.MAIN"/>
                <category android:name="android.intent.category.LAUNCHER"/>
            </intent-filter>
        </activity>

        <!-- 메인 액티비티 -->
        <activity
            android:name=".MainActivity"
            android:exported="true"
            android:theme="@style/Theme.AppCompat.Light">
        </activity>

 

 

5단계: 실행 후 스플래시 화면 확인하기!

스플래시 화면이 실행되고 다음 화면으로 넘어가는지 확인!!!

 

실행결과 : 페이드 아웃 효과를 사용했더니 확실히 네비게이션 바가 부드럽게 열린다! 다들 앱 특성에 맞게 효과를 부여하면 되겠다:)