[Android] NaviagionBar (하단바) 생성 & 상단 모서리 둥글게

이렇게 하단바를 생성하고, 상단 모서리를 둥글게 하려고 한다면! 아래와 같은 순서로 진행해주면 된다! 

 

1. menu_nav_bar.xml 생성

우선 menu.xml 파일을 만들어준다.

 

item 은 메뉴 하나당 아이템이다. icon이랑 title을 지정해주고, showAsAction을 Always로 해주어야 화면에 나온다!!!

 

<?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/menu_main_btm_nav_home"
        android:icon="@drawable/home_icon"
        app:showAsAction="always"
        android:enabled="true"
        android:checkable="true"
        android:title="홈" />

    <item
        android:id="@+id/menu_main_btm_nav_review"
        android:icon="@drawable/review_icon"
        app:showAsAction="always"
        android:enabled="true"
        android:title="리뷰" />

    <item
        android:id="@+id/menu_main_btm_nav_map"
        android:icon="@drawable/map_icon"
        app:showAsAction="always"
        android:enabled="true"
        android:title="지도" />

    <item
        android:id="@+id/menu_main_btm_nav_my_page"
        android:icon="@drawable/mypage_icon"
        app:showAsAction="always"
        android:enabled="true"
        android:title="마이페이지" />

</menu>

 

2. 표시할 xml에 BottomNavigation 추가

com.google.android.material.bottomnavigation.BottomNavigationView

 

를 추가해서 아까 만들어두었던 menu랑 연결해준다! 

 

<?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=".src.main.MainActivity">

    <FrameLayout
        android:id="@+id/main_fragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </FrameLayout>

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/main_btm_nav"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/radius"
        app:labelVisibilityMode="labeled"
        app:itemIconTint="@drawable/main_btm_nav_item_color"
        app:itemTextColor="@drawable/main_btm_nav_item_color"
        app:layout_constraintBottom_toBottomOf="parent"
        app:menu="@menu/menu_main_bottom_nav" />


</androidx.constraintlayout.widget.ConstraintLayout>

3. 모서리 둥글게 만들기

위에 보면 background가 radius로 지정되어있다!

배경을 radius.xml로 따로 빼서 둥글게 만들어주었다.

 

https://velog.io/@kuronuma_daisy/Android-%EC%95%84%EC%9D%B4%ED%85%9C-%EB%AA%A8%EC%84%9C%EB%A6%AC-%EB%91%A5%EA%B8%80%EA%B2%8C-%EB%A7%8C%EB%93%A4%EA%B8%B0-Radius

[Android] 아이템 모서리 둥글게 만들기 Radius

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

    <solid
        android:color="#ffffff"
        ></solid>
    <corners
        android:topLeftRadius="20dp"
        android:topRightRadius="20dp"></corners>
</shape>

4. main 에서 가져와서 활용

주로 하단바를 사용하는거는 fragment를 활용하려고 하기 때무니다.

히히 id로 menu를 찾고 해당 id 를 클릭했을 때 그에 맞는 fragment로 연결해주면 된다! 

binding.mainBtmNav.setOnItemSelectedListener{ item ->
            when (item.itemId) {
                R.id.menu_main_btm_nav_home -> {
                    supportFragmentManager.beginTransaction()
                        .replace(R.id.main_fragment, HomeFragment())
                        .commitAllowingStateLoss()
                }
                R.id.menu_main_btm_nav_review -> {
                    supportFragmentManager.beginTransaction()
                        .replace(R.id.main_fragment, ReviewFragment())
                        .commitAllowingStateLoss()
                }
                R.id.menu_main_btm_nav_map -> {
                    supportFragmentManager.beginTransaction()
                        .replace(R.id.main_fragment, MapFragment())
                        .commitAllowingStateLoss()
                }
                R.id.menu_main_btm_nav_my_page -> {
                    supportFragmentManager.beginTransaction()
                        .replace(R.id.main_fragment, MyPageFragment())
                        .commitAllowingStateLoss()
                }
            }
            true
        }