3. 악보 검색 / 등록 페이지 제작 (1) - 바텀 네비게이션 추가

전에 샀던 Do It 안드로이드 프로그래밍 책 내용과

인터넷을 검색하면서 공부한 내용을 토대로 버텀 네비게이션을 추가하였다.

 

activity_main.xml 파일 코드는 다음과 같이 하였고,

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/container"
        android:layout_marginBottom="?attr/actionBarSize"
        android:background="@color/design_default_color_background"
        />

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottomNavigationView"
        android:layout_marginEnd="0dp"
        android:layout_marginStart="0dp"
        android:layout_gravity="bottom"
        android:background="@color/design_default_color_background"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:menu="@menu/bottom_nav_menu"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

하단 탭은 단순하게 '악보, 그룹, 마이페이지' 3개로 나누었다.

 

악보 탭에서는 악보의 작성과 검색을 할 수 있도록 만들고

그룹 탭에서는 같은 악보집을 공유할 유저들의 그룹을 만들 수 있고

마이페에지 탭에서는 내 정보와 내가 담은 악보, 나만의 악보집을 관리할 수 있도록 할 예정이다.

 

<?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:title="악보"
        android:id="@+id/tab1"
        app:showAsAction="always"
        android:enabled="true"/>
    <item
        android:title="그룹"
        android:id="@+id/tab2"
        app:showAsAction="always"
        android:enabled="true"/>
    <item
        android:title="마이페이지"
        android:id="@+id/tab3"
        app:showAsAction="always"
        android:enabled="true"/>
</menu>

그래서 res/menu 폴더에 들어있는 bottom_nav_menu.xml 파일의 코드는 다음과 같다.

 

아래는 현재까지의 코드를 적용했을 때의 실행결과이다.

하단 탭이 선택되지 않았을 때는 정보를 알 수 없다는 점,

하단 탭에 아이콘이 없다는 점,

상태표시줄의 색상이 뜬금없이 보라색이라는 점 등등

아직 고쳐야 할 것이 많다

 

디자인적인 부분은 차차 고치기로하고,

다음에는 이 탭에 악보를 추가하여 DB에 데이터를 추가하도록

프래그먼트를 작성할 것이다.