[Android Studio 05] Kotlin Bottom Navigation 01

💡 Bottom Navigation Bar

안드로이드 개발을 하다보면, 굉장히 많이 쓰게 되는 기능입니다.

하지만 이 기능의 단점이 있습니다. 5개 이상 쓰면 안됩니다.

자세한 설명 : https://material.io/components/bottom-navigation#behavior

 

💡 종속성 추가

implementation 'com.google.android.material:material:1.3.0'

 코드 : https://pastebin.com/1TNbDrhG

BottomNavigationView는 Material Design의 한 구성요소입니다.

💡 BottomNavigationView의 bottom_menu.xml 생성

BottomNavigaionView의 아이템들은 안드로이드의 리소스 중 menu로 정의됩니다.

res 폴더 > 마우스 우측 > Directory > menu 입력

menu 폴더 > 마우스 우측 > Menu Resource File 클릭

저는 bottom_menu.xml로 했습니다.

OK를 눌러주세요!

 

여기서 부터는 Code를 이용해서 레이아웃을 꾸밀 예정입니다. 

우측 상단 Code를 클릭해주세요.

<?xml version="1.0" encoding="utf-8"?>
    <menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <item
    android:id="@+id/main"
    app:showAsAction="ifRoom"
    android:enabled="true"
    android:icon="@drawable/main"
    android:title="코로나" />

    <item
        android:id="@+id/korea"
        app:showAsAction="ifRoom"
        android:enabled="true"
        android:icon="@drawable/corona"
        android:title="두번째" />

    <item
        android:id="@+id/world"
        app:showAsAction="ifRoom"
        android:enabled="true"
        android:icon="@drawable/"
        android:title="세번째" />
</menu>

코드 : https://pastebin.com/VZ5kfNYZ

제가 드린 코드 작성하시면 icon 부분에서 오류가 발생합니다. 

icon을 준비해볼까요? 

 

💡 Icon 준비

좌측 상단 File > New Vector Asset을 클릭합니다.

 

이런 화면이 나오면 Clip Art를 클릭하여 아이콘을 선택하실 수 있습니다.

저장된 파일은 res > drawable에서 확인 가능합니다.

저장되어 있을 때 아이콘 이름을 작성하시면 불러올 수 있는 레이아웃이 자동으로 뜹니다.

 

💡 Activity_main 준비하기

먼저 기존에 작업해둔 기능들은 모두 삭제해주세요! 

이렇게 빈 화면이 되었다면 검색기능을 이용해주세요.

 

FrameLayout / BottomNavigationView를 추가해주세요!

 

그 후 다음과 같이 작성을 해주세요.

 

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

    <FrameLayout
        android:id="@+id/flFragment"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintBottom_toTopOf="@+id/bottomNavigationView"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottomNavigationView"
        android:layout_width="match_parent"
        android:layout_height="75dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:menu="@menu/bottom_menu"/>

</androidx.constraintlayout.widget.ConstraintLayout>

 

코드 : https://pastebin.com/AsnJs752

레이아웃 설정이 끝났군요!

이제 다음 포스팅에서 코드를 작업하러 가볼까요?

코드 링크 : https://donggyu.tistory.com/7