안녕하세요~ 챠니입니다! :)
오늘은 "material.bottomnavigation.BottomNavigationView"사용법에 대해서 알아보도록 하겠습니다.
어렵지 않으니 천천히 따라오시면 되겠습니다!
설명보다는 코드 위주로 보여드리겠습니다.
BottomNavigationView 예제
먼저 프로젝트 구조입니다.
필요하신 파일만 딱딱 가지고 사용하시면 되겠습니다.
다음은 BottomNavigationView를 만들기 위한 틀과 그 안에 들어가는 코드에 대해서 알아보겠습니다.
BottomNavigationView 예제 코드 - 1
* menu_item_color.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:color="#000000"/>
<item android:state_checked="false" android:color="#A6A6A6"/>
</selector>
* string.xml
<resources>
<string name="app_name">BottomNavigationViewExam</string>
<string name="bottom_item_share_name">공유</string>
<string name="bottom_item_main_name">메인</string>
<string name="bottom_item_recommend_name">추천</string>
</resources>
* menu_bottom_items.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/menu_share"
android:icon="@drawable/baseline_share_24"
android:title="@string/bottom_item_share_name" />
<item
android:id="@+id/menu_main"
android:icon="@drawable/baseline_menu_24"
android:title="@string/bottom_item_main_name" />
<item
android:id="@+id/menu_recommend"
android:icon="@drawable/baseline_thumb_up_24"
android:title="@string/bottom_item_recommend_name" />
</menu>
* baseline_menu_24.xml (drawable파일)
<vector android:height="24dp" android:tint="#000000"
android:viewportHeight="24" android:viewportWidth="24"
android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
<path android:fillColor="@android:color/white" android:pathData="M3,18h18v-2L3,16v2zM3,13h18v-2L3,11v2zM3,6v2h18L21,6L3,6z"/>
</vector>
* baseline_share_24.xml (drawable파일)
<vector android:height="24dp" android:tint="#000000"
android:viewportHeight="24" android:viewportWidth="24"
android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
<path android:fillColor="@android:color/white" android:pathData="M18,16.08c-0.76,0 -1.44,0.3 -1.96,0.77L8.91,12.7c0.05,-0.23 0.09,-0.46 0.09,-0.7s-0.04,-0.47 -0.09,-0.7l7.05,-4.11c0.54,0.5 1.25,0.81 2.04,0.81 1.66,0 3,-1.34 3,-3s-1.34,-3 -3,-3 -3,1.34 -3,3c0,0.24 0.04,0.47 0.09,0.7L8.04,9.81C7.5,9.31 6.79,9 6,9c-1.66,0 -3,1.34 -3,3s1.34,3 3,3c0.79,0 1.5,-0.31 2.04,-0.81l7.12,4.16c-0.05,0.21 -0.08,0.43 -0.08,0.65 0,1.61 1.31,2.92 2.92,2.92 1.61,0 2.92,-1.31 2.92,-2.92s-1.31,-2.92 -2.92,-2.92z"/>
</vector>
* baseline_thumb_up_24.xml (drawable파일)
<vector android:height="24dp" android:tint="#000000"
android:viewportHeight="24" android:viewportWidth="24"
android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
<path android:fillColor="@android:color/white" android:pathData="M1,21h4L5,9L1,9v12zM23,10c0,-1.1 -0.9,-2 -2,-2h-6.31l0.95,-4.57 0.03,-0.32c0,-0.41 -0.17,-0.79 -0.44,-1.06L14.17,1 7.59,7.59C7.22,7.95 7,8.45 7,9v10c0,1.1 0.9,2 2,2h9c0.83,0 1.54,-0.5 1.84,-1.22l3.02,-7.05c0.09,-0.23 0.14,-0.47 0.14,-0.73v-2z"/>
</vector>
BottomNavigationView 예제 코드 - 2
여기부터는 Activity 및 Fragment 관련된 코드 입니다.
[Activity]
* MainActivity.kt
package com.example.bottomnavigationviewexam
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.fragment.app.FragmentManager
import androidx.fragment.app.FragmentTransaction
import com.google.android.material.bottomnavigation.BottomNavigationView
class MainActivity : AppCompatActivity() {
private val fragmentManager: FragmentManager = supportFragmentManager
private val fragmentBottomShareFragment: BottomShareFragment = BottomShareFragment()
private val fragmentBottomMenuFragment: BottomMenuFragment = BottomMenuFragment()
private val fragmentBottomRecommendFragment: BottomRecommendFragment = BottomRecommendFragment()
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
//Fragment 설정
val transaction: FragmentTransaction = fragmentManager.beginTransaction()
transaction.replace(R.id.menu_frame_layout, fragmentBottomMenuFragment).commitAllowingStateLoss()
//BottomNavigation 지정
val bottomNavigationView = findViewById<BottomNavigationView>(R.id.menu_bottom_navigation)
bottomNavigationView.setOnItemSelectedListener {
val transaction: FragmentTransaction = fragmentManager.beginTransaction()
when (it.itemId) {
R.id.menu_share -> {
transaction.replace(R.id.menu_frame_layout, fragmentBottomShareFragment)
.commitAllowingStateLoss()
}
R.id.menu_main -> {
transaction.replace(R.id.menu_frame_layout, fragmentBottomMenuFragment)
.commitAllowingStateLoss()
}
R.id.menu_recommend -> {
transaction.replace(R.id.menu_frame_layout, fragmentBottomRecommendFragment)
.commitAllowingStateLoss()
}
}
return@setOnItemSelectedListener true
}
//기본 페이지 mainFragment 지정
bottomNavigationView.selectedItemId = R.id.menu_main
}
}
* activity_main.xml
<?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/menu_frame_layout"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="@+id/menu_bottom_navigation"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/menu_bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:itemIconTint="@drawable/menu_item_color"
app:itemTextColor="@drawable/menu_item_color"
app:labelVisibilityMode="labeled"
app:layout_constraintBottom_toBottomOf="parent"
app:menu="@menu/menu_bottom_items" />
</androidx.constraintlayout.widget.ConstraintLayout>
[Fragment]
* BottomMenuFragment.kt
class BottomMenuFragment : Fragment() {
override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?, ): View? {
return inflater.inflate(R.layout.fragment_bottom_menu, container, false)
}
}* fragment_bottom_menu.xml
<?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=".BottomMenuFragment">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/bottom_item_main_name"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
* BottomRecommnedFragment.kt
class BottomRecommendFragment : Fragment() {
override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?, ): View? {
return inflater.inflate(R.layout.fragment_bottom_recommend, container, false)
}
}* fragment_bottom_recommend.xml
<?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=".BottomRecommendFragment">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/bottom_item_recommend_name"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
* BottomShareFragment.kt
class BottomShareFragment : Fragment() {
override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?, ): View? {
return inflater.inflate(R.layout.fragment_bottom_share, container, false)
}
}* fragment_bottom_share.xml
<?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=".BottomShareFragment">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/bottom_item_share_name"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout
질문 또는 궁굼한 부분은 댓글을 남겨주세요! 친절하게 답변드리겠습니다!
응원의 댓글은 저에게 큰 힘이 된답니다! :)
즐거운 하루되세요!
깃허브 보러 놀러오세요 👇 (맞팔환영)
https://github.com/younminchan
younminchan - Overview
안드로이드 2년차 개발자 •⚽️/🎤/🥁/🖥/🏃♂️/🚴♂️/🤟 TechBlog⬇️ minchanyoun.tistory.com - younminchan
github.com
'🖥 Programming > 📱 Android (Kotlin)' 카테고리의 다른 글
| [Android] 앱 아이콘 변경 방법 (logo, icon) (2) | 2023.08.24 |
|---|---|
| [Android][kotlin] 이미지 1:1 비율 동일하게 맞추기 (0) | 2023.08.21 |
| [Android] 다크모드 비활성화 하는 방법 (0) | 2023.08.17 |
| [Android] com.google.android.gms.permission.AD_ID 이슈 해결 (7) | 2023.07.25 |
| [Android][kotlin] 화면 켜짐/꺼짐 유지(앱 실행 중) (0) | 2023.05.26 |
| [Android] (해결방법)인앱 리뷰(InAppReview)개발 - 2번이상 테스트하는방법 (0) | 2023.05.23 |
| [Android] (해결방법) Task 'prepareKotlinBuildScriptModel' not found in project ':library'. (0) | 2023.05.22 |
| [Android][kotlin] Android <-> Google Login 연동방법 (0) | 2023.05.20 |
