Android UI 개선하기: BottomNavigationView 활용법

안드로이드 앱 개발에서 사용자 경험(UX)을 향상시키기 위한 다양한 UI 컴포넌트가 있습니다. 그 중에서도 "BottomNavigationView"는 탭 기반 네비게이션을 쉽게 구현할 수 있는 유용한 컴포넌트입니다. 이번 포스팅에서는 BottomNavigationView를 활용하여 사용자에게 쉽게 탐색할 수 있는 UI를 제공하는 방법을 알아보겠습니다.

BottomNavigationView란?

BottomNavigationView는 화면 하단에 탭 형식으로 여러 메뉴 항목을 제공하여 사용자가 원하는 화면으로 쉽게 이동할 수 있게 해주는 컴포넌트입니다. 보통 3~5개의 주요 화면을 네비게이션할 때 사용됩니다. 각 메뉴 항목은 아이콘과 라벨로 구성되어 사용자에게 직관적인 네비게이션 경험을 제공합니다.

프로젝트 설정하기

BottomNavigationView를 사용하기 위해서는 Android 프로젝트에 필요한 의존성을 추가해야 합니다. 우선, build.gradle 파일에 아래와 같이 종속성을 추가합니다:

dependencies {
    implementation 'com.google.android.material:material:1.10.0'
}

이 종속성은 Material Design 컴포넌트를 사용하기 위한 것이며, BottomNavigationView도 포함되어 있습니다.

레이아웃 구성하기

이제 BottomNavigationView를 XML 레이아웃 파일에 추가하여 화면을 구성해 보겠습니다.

아래는 activity_main.xml 파일의 레이아웃 코드입니다.

<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"
    tools:context=".MainActivity">

    <FrameLayout
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@id/bottom_navigation" />

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        app:menu="@menu/bottom_navigation_menu" />

</RelativeLayout>

위 코드에서 FrameLayout은 각 탭의 콘텐츠를 표시할 영역이며, BottomNavigationView는 화면 하단에 배치됩니다. app:menu 속성을 사용하여 메뉴 리소스를 지정합니다.

메뉴 리소스 추가하기

BottomNavigationView에 표시할 메뉴 항목을 정의하기 위해 res/menu 디렉터리에 bottom_navigation_menu.xml 파일을 추가합니다.

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/navigation_home"
        android:icon="@drawable/ic_home"
        android:title="Home" />

    <item
        android:id="@+id/navigation_dashboard"
        android:icon="@drawable/ic_dashboard"
        android:title="Dashboard" />

    <item
        android:id="@+id/navigation_notifications"
        android:icon="@drawable/ic_notifications"
        android:title="Notifications" />
</menu>

위 메뉴 파일에는 Home, Dashboard, Notifications 세 가지 항목이 정의되어 있습니다. 각각의 항목에는 아이콘과 제목이 포함되어 있습니다.

MainActivity에서 BottomNavigationView 설정하기

이제 MainActivity에서 BottomNavigationView를 설정하여 메뉴 항목 클릭 시 적절한 화면을 표시하도록 구성해 보겠습니다. 아래는 MainActivity.kt 파일의 코드입니다.

package com.example.bottomnavigationexample

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.activity_main)

        val bottomNavigationView: BottomNavigationView = findViewById(R.id.bottom_navigation)

        // 초기 화면 설정
        loadFragment(HomeFragment())

        bottomNavigationView.setOnNavigationItemSelectedListener { item ->
            when (item.itemId) {
                R.id.navigation_home -> {
                    loadFragment(HomeFragment())
                    true
                }
                R.id.navigation_dashboard -> {
                    loadFragment(DashboardFragment())
                    true
                }
                R.id.navigation_notifications -> {
                    loadFragment(NotificationsFragment())
                    true
                }
                else -> false
            }
        }
    }

    private fun loadFragment(fragment: Fragment) {
        val transaction = supportFragmentManager.beginTransaction()
        transaction.replace(R.id.container, fragment)
        transaction.commit()
    }
}

위 코드에서는 BottomNavigationView의 setOnNavigationItemSelectedListener 메서드를 사용하여 사용자가 메뉴 항목을 선택할 때 적절한 Fragment를 로드하도록 설정했습니다. 초기 화면은 HomeFragment로 설정되어 있으며, 각 메뉴 항목에 대해 다른 Fragment를 로드합니다.

Fragment 작성하기

이제 각 메뉴 항목에 대해 간단한 Fragment를 작성해 보겠습니다. 예를 들어, HomeFragment를 작성하는 방법은 다음과 같습니다.

package com.example.bottomnavigationexample

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

class HomeFragment : Fragment() {

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        // 레이아웃을 Inflate하여 Fragment의 뷰를 생성합니다.
        return inflater.inflate(R.layout.fragment_home, container, false)
    }
}

위와 같이 Fragment를 작성하고, 각 Fragment마다 layout 파일을 추가하여 원하는 UI를 구성할 수 있습니다. 예를 들어, fragment_home.xml 파일에 원하는 UI 요소를 추가하면 됩니다.

요약 및 마무리

이렇게 해서 BottomNavigationView를 이용하여 간단한 하단 네비게이션을 구현하는 방법을 알아보았습니다. BottomNavigationView는 사용자 경험을 향상시키기 위해 간편하고 직관적인 방법으로 주요 화면들을 네비게이션할 수 있도록 도와줍니다.

이번 포스팅에서는 세 가지 주요 항목(Home, Dashboard, Notifications)을 구성하고, 각 항목을 클릭할 때 서로 다른 Fragment를 로드하는 방법을 알아보았습니다. 이를 활용하여 여러분의 안드로이드 애플리케이션에 더 나은 네비게이션 경험을 제공해 보세요!

다음 포스팅에서는 ViewPager와의 연동을 통해 스와이프 제스처로도 화면을 전환할 수 있는 방법을 알아보겠습니다. 기대해 주세요!"