Bottom Navigation View
하단 탭으로 화면을 이동할 수 있는 기능은 카카오톡, 유튜브 등 여러 앱에서 쉽게 볼 수 있습니다.
이 기능은 "Bottom Navigation View"을 이용해 구현할 수 있습니다.
이번 포스팅에서는 Bottom Navigation View을 이용해 탭을 누르면 화면 이동이 되는 앱을 만들어 보겠습니다.
예재 프로젝트
https://github.com/Yujeongju/blogExample/tree/2021-07-25-bottomNavigationView
BottomNavigationView | Android 개발자 | Android Developers
developer.android.com
1. 시작하기
app build.gradle 에 아래 정의를 추가합니다.
* material의 경우 이미 추가된 경우가 많습니다.
* design의 버전은 25 이상으로 사용해야 합니다.
//bottom navigation view
implementation 'com.google.android.material:material:1.4.0.'
implementation 'com.android.support:design:29.0.0'
2. 탭 메뉴 생성
탭 아이콘 추가
탭에 사용될 아이콘을 drawable에 추가해 주세요.
탭은 반드시 3개 이상을 권장합니다! 3개 미만인 경우 하단 탭의 가로가 줄어듭니다.
저는 탭을 4개 만들 것이므로 4개의 png 파일을 추가했습니다.
이미지는 무료 아이콘 이미지 사이트인 flaticon(https://www.flaticon.com/)에서 다운로드하였습니다.
메뉴 xml 파일 작성
res에 menu xml 파일을 추가합니다.
New > Android Resource File 선택
파일 이름 입력, Resource type을 Menu로 선택하고 OK를 입력하세요.
만들어진 xml 파일에 아래 코드를 작성해 주세요.
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/tab_home"
android:enabled="true"
android:icon="@drawable/ic_home"
android:title="홈"/>
<item
android:id="@+id/tab_dog"
android:enabled="true"
android:icon="@drawable/ic_dog"
android:title="개발새발"/>
<item
android:id="@+id/tab_user"
android:enabled="true"
android:icon="@drawable/ic_user"
android:title="유저"/>
<item
android:id="@+id/tab_settings"
android:enabled="true"
android:icon="@drawable/ic_settings"
android:title="설정"/>
</menu>id는 탭 터치 이벤트를 발생시킬 때 사용됩니다.
icon 속성은 탭 아이콘을 설정할 수 있습니다. 위에서 추가한 이미지 파일을 각 탭에 맞춰 추가해 주세요.
title 속성은 탭 이름을 설정할 수 있습니다.
enabled 속성은 default가 true이기 때문에 추가하지 않아도 됩니다. enabled 속성을 false로 바꾸면 터치가 되지 않습니다.
3. 레이아웃 XML 작성
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:id="@+id/home_ly"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_weight="1"
/>
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/bottomNavigationView"
android:layout_width="match_parent"
android:layout_height="56dp"
app:menu="@menu/btm_navi_menu"
app:itemBackground="@android:color/white"
app:itemIconTint="@color/tab_selection_color"
app:itemTextColor="@color/tab_selection_color">
</com.google.android.material.bottomnavigation.BottomNavigationView>
</LinearLayout>id가 home_ly인 레이아웃에 보여줄 화면을 설정해 주세요.
화면 아래쪽에 탭이 배치됩니다.
BottomNavigationView는 저희가 만들고 있는 하단 탭입니다.
menu 속성으로 위에서 만든 menu xml 파일을 설정해 주세요.
itemBackground 속성으로 탭 background를 변경할 수 있습니다.
itemIconTint 속성은 아이템 색상을 설정합니다.
itemTextColor 속성은 탭 이름 색상을 설정합니다.
선택/미선택 색상을 다르게 주고 싶으면 selector xml을 아래와 같이 만들면 됩니다.
* color 디렉토리가 없을 경우 : res > New > Android Resourse Directory > 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="#0095FF" />
<item android:color="#858585" />
</selector>
4. 화면 Fragment 생성
빈 Fragment를 추가하겠습니다.
이름을 입력해주고 Finish를 눌러줍니다.
각 탭의 화면은 fragment로 만들어야 합니다.
탭 아이콘을 누를 때마다 탭 화면의 fragment를 보여주게 됩니다.
4개의 탭이 있으므로 fragment도 4개를 만들어 줍니다.
4. 자바 코드 작성
public class MainActivity extends AppCompatActivity {
final String TAG = this.getClass().getSimpleName();
LinearLayout home_ly;
BottomNavigationView bottomNavigationView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Log.d(TAG, "개발새발(https://jeong9216.tistory.com/) 블로그 좋아요!");
init(); //객체 정의
SettingListener(); //리스너 등록
//맨 처음 시작할 탭 설정
bottomNavigationView.setSelectedItemId(R.id.home);
}
private void init() {
home_ly = findViewById(R.id.home_ly);
bottomNavigationView = findViewById(R.id.bottomNavigationView);
}
private void SettingListener() {
//선택 리스너 등록
bottomNavigationView.setOnNavigationItemSelectedListener(new TabSelectedListener());
}
class TabSelectedListener implements BottomNavigationView.OnNavigationItemSelectedListener{
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
switch (menuItem.getItemId()) {
case R.id.tab_home: {
getSupportFragmentManager().beginTransaction()
.replace(R.id.home_ly, new HomeFragment())
.commit();
return true;
}
case R.id.tab_dog: {
getSupportFragmentManager().beginTransaction()
.replace(R.id.home_ly, new DogFragment())
.commit();
return true;
}
case R.id.tab_user: {
getSupportFragmentManager().beginTransaction()
.replace(R.id.home_ly, new UserFragment())
.commit();
return true;
}
case R.id.tab_settings: {
getSupportFragmentManager().beginTransaction()
.replace(R.id.home_ly, new SettingsFragment())
.commit();
return true;
}
}
return false;
}
}
}* 완성
탭을 클릭하면 화면이 바뀌는 것을 볼 수 있습니다.
감사합니다!!
아직은 초보 개발자입니다.
더 효율적인 코드 훈수 환영합니다!
공감과 댓글 부탁드립니다.