[Android Studio]Bottom Navigation View
ํ๋จ ๋ฉ๋ด๋ฅผ ์ ํํ์ฌ ๋ค๋ฅธ Fragment๋ฅผ ๋์ด์ฃผ๋ ์์
1. Bottom Navigation View ์ ๋ค์ด๊ฐ item ์ ์
ํ๋จ๋ฐ์ 4๊ฐ์ item์ด ๋ค์ด๊ฐ๋ ๊ฒ์ ๊ตฌํํ์๋ค.
- Smenu.xml
<?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/tab1"
app:showAsAction="always"
android:enabled="true"
android:icon="@drawable/home"
android:title="Home"/>
<item
android:id="@+id/tab2"
app:showAsAction="always"
android:enabled="true"
android:icon="@drawable/monitoring"
android:title="Monitoring"/>
<item
android:id="@+id/tab3"
app:showAsAction="always"
android:enabled="true"
android:icon="@drawable/gallery"
android:title="Gallery"/>
<item
android:id="@+id/tab4"
app:showAsAction="always"
android:enabled="true"
android:icon="@drawable/setting"
android:title="Setting"/>
</menu>
- android: id = "@+id/tab1"
๊ฐ ๋ฉ๋ด์ ๋ํ ์ด๋ฆ์ ์ง์ ํด์ค๋ค. ์ถํ์ id๋ฅผ ์ฌ์ฉํ๋ค.
- app : showAsAction = "always"
ํญ์ ํ๋จ ๋ฉ๋ด๊ฐ ๋ณด์ด๋๋ก ์ค์ ํ๋ค. ์ด ๊ฐ์ ๋ฐ๋ผ ๋ณด์ด์ง ์๋ ๊ฒฝ์ฐ๊ฐ ๋ฐ์ํ ์ ์๋ค.
-
android: enabled = "true"
์์คํ ์์ ์๋น์ค๋ฅผ ์ธ์คํด์คํํ ์ ์๋์ง ์ฌ๋ถ. ์ธ์คํด์คํํ ์ ์์ผ๋ฉด 'true'์ด๊ณ ์ธ์คํด์คํํ ์ ์์ผ๋ฉด 'false'์ด๋ค. ๊ธฐ๋ณธ๊ฐ์ 'true'์ด๋ค. -
android : icon = "@drawable/home"
ํ๋จ ๋ฉ๋ด์์ ํ ์คํธ๊ณผ ํจ๊ป ์์ด์ฝ์ ๋ณด์ฌ์ฃผ๊ณ ์ถ์ ๋ ์ฌ์ฉํ๋ ์ฝ๋๋ก, drawable ํ๋จ์ ์ด๋ฏธ์ง๋ฅผ ์ ์ฅํ๊ณ ๋ค์๊ณผ ๊ฐ์ด ์ฝ๋๋ฅผ ์์ฑํด์ค๋ค. -
android : title = "Home"
ํ๋จ ๋ฉ๋ด์ ๋ํ๋๋ ํ ์คํธ๋ฅผ ๋ํ๋ด๋ ์ฝ๋์ด๋ค.
2. Fragment ์์ฑ
4๊ฐ์ง Fragment๋ฅผ ์์ฑํ์๋ค. Fragment์์ฑ ์ Activity ์์ฑ๊ณผ ๋๊ฐ์ ๋จ๊ณ๋ก ์์ฑํ๋ฉด ๋๋ค. Fragment ์์ฑ์ java ํ์ผ๊ณผ xml ํ์ผ์ด ์์ฑ๋๋ค.
๋ค์๊ณผ ๊ฐ์ Fragment๋ฅผ ์์ฑํ์๋ค.
- HomeFragment
- Monitoring
- Gallery
- Setting
3. Fragment๊ฐ ์ฌ๋ผ๊ฐ MainActivity์ ์
- activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical">
<!--FrameLayout-->
<FrameLayout
android:id="@+id/main_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="?attr/actionBarSize"/>
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/bottomNavigationView"
android:layout_marginEnd="0dp"
android:layout_marginStart="0dp"
android:layout_gravity="bottom"
android:background="#ffffff"
app:menu="@menu/smenu"
app:labelVisibilityMode="labeled"
app:itemIconTint="@color/selectedcolor"
app:itemTextColor="@color/selectedcolor"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
- android:layout_marginBottom="?attr/actionBarSize"/>
FrameLayout์ ๋ค์ ์ฝ๋๋ฅผ ์ถ๊ฐํ์ฌ์ผ ํ๋จ ๋ฉ๋ด๋ฐ๋ฅผ ์์ฑํ ์ ์๋ค.
- app:menu="@menu/smenu"
์ด์ ์ ๋ง๋ค์ด๋ smenu๋ฅผ ์ฐ๊ฒฐ์ํจ๋ค.
-
app:itemIconTint="@color/selectedcolor"
app:itemTextColor="@color/selectedcolor"
๋ฉ๋ด์ ํ ์คํธ์ ์์ด์ฝ์ ๋ํ ์์ ์ง์ ์ด๋ค. ๋ง์ฝ, ์ง์ ํด์ฃผ๊ณ ์ถ๋ค๋ฉด color๋๋ ํฐ๋ฆฌ ๋ด์ ํ์ผ์ ๋ง๋ค์ด์ ์ง์ ํ๋ฉด ๋๋ค.<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <!--์์์ด ์ ํ๋์์ ๋ --> <item android:state_checked="true" android:color="#7EC341"/> <!--ํ์ ์์ --> <item android:color="#858585"/> </selector>
-
MainActivity.java
public class MainActivity extends AppCompatActivity {
//BottomNavigationView ์ ์ธ
BottomNavigationView bottomNavigationView;
//Fragment ์ ์ธ
HomeFragment homeFragment;
MonitoringFragment monitoringFragment;
GalleryFragment galleryFragment;
SettingFragment settingFragment;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//์ด๊ธฐ ์ธํ
init();
//bottomNavigation์ ์์ด์ฝ์ ์ ํํ์ ๋ ์ํ๋ ํ๋ ๊ทธ๋จผํธ๊ฐ ๋์ด์ง ์ ์๋๋ก ๋ฆฌ์ค๋๋ฅผ ์ถ๊ฐํ๋ค.
bottomNavigationView.setOnItemSelectedListener(new NavigationBarView.OnItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
switch (item.getItemId()) {
case R.id.tab1: {
getSupportFragmentManager().beginTransaction()
.replace(R.id.main_layout, new HomeFragment())
.commit();
return true;
}
case R.id.tab2: {
getSupportFragmentManager().beginTransaction()
.replace(R.id.main_layout, new MonitoringFragment())
.commit();
return true;
}
case R.id.tab3: {
getSupportFragmentManager().beginTransaction()
.replace(R.id.main_layout, new GalleryFragment())
.commit();
return true;
}
case R.id.tab4: {
getSupportFragmentManager().beginTransaction()
.replace(R.id.main_layout, new SettingFragment())
.commit();
return true;
}
}
return false;
}
});
}
private void init(){
//fragment ๊ฐ์ฒด ์์ฑ
homeFragment = new HomeFragment();
monitoringFragment = new MonitoringFragment();
galleryFragment = new GalleryFragment();
settingFragment = new SettingFragment();
//main.xml์์ bottomNavigationView ์ฐ๊ฒฐ
bottomNavigationView = findViewById(R.id.bottomNavigationView);
//์ ์ผ ์ฒ์ ๋์ด์ค ๋ทฐ ์ธํ
getSupportFragmentManager().beginTransaction().replace(R.id.main_layout,homeFragment).commitAllowingStateLoss();
}
}
- bottomNavigation View์ ๋ํ์ฌ tab1์ ํด๋นํ๋ ํด๋ฆญ์ด ๋ค์ด์ค๊ฒ ๋๋ฉด, main_layout์ homeFrament์ด ๋ํ๋๊ฒ ๋๋ค.
์ด์ ํ๋ก์ ํธ์์๋ ํ๋์ฉ ์์ด์ฝ๊ณผ ํ ์คํธ๋ฅผ ๋ฐฐ์นํ์ฌ ํ๋จ๋ฐ๋ฅผ ๋ง๋ค๊ณ , Activity์ ์ฐ๊ฒฐํ์ฌ ๋ฌด๊ฒ๊ณ , ๋๋ฆฌ๋ค๋ ๋๋์ ๋ฐ์๋๋ฐ ์๋๋ก์ด๋ ์คํ๋์ค์์ ์ ๊ณตํ๋ Bottom Navigation View๋ฅผ ์ฌ์ฉํ๋ ๊ฐ๋ณ๊ณ ๊ตฌํํ๊ธฐ์ ์ฌ์ ๋ค.
Author And Source
์ด ๋ฌธ์ ์ ๊ดํ์ฌ([Android Studio]Bottom Navigation View), ์ฐ๋ฆฌ๋ ์ด๊ณณ์์ ๋ ๋ง์ ์๋ฃ๋ฅผ ๋ฐ๊ฒฌํ๊ณ ๋งํฌ๋ฅผ ํด๋ฆญํ์ฌ ๋ณด์๋ค https://velog.io/@kdmstj/Android-StudioBottom-Navigation-View์ ์ ๊ท์: ์์์ ์ ๋ณด๊ฐ ์์์ URL์ ํฌํจ๋์ด ์์ผ๋ฉฐ ์ ์๊ถ์ ์์์ ์์ ์ ๋๋ค.
์ฐ์ํ ๊ฐ๋ฐ์ ์ฝํ ์ธ ๋ฐ๊ฒฌ์ ์ ๋ (Collection and Share based on the CC Protocol.)
์ข์ ์นํ์ด์ง ์ฆ๊ฒจ์ฐพ๊ธฐ
๊ฐ๋ฐ์ ์ฐ์ ์ฌ์ดํธ ์์ง
๊ฐ๋ฐ์๊ฐ ์์์ผ ํ ํ์ ์ฌ์ดํธ 100์ ์ถ์ฒ ์ฐ๋ฆฌ๋ ๋น์ ์ ์ํด 100๊ฐ์ ์์ฃผ ์ฌ์ฉํ๋ ๊ฐ๋ฐ์ ํ์ต ์ฌ์ดํธ๋ฅผ ์ ๋ฆฌํ์ต๋๋ค