[안드로이드] BottomNavigationView 하단 탭 쉽게 만드는 방법 1-1

2020.12.09 - [안드로이드] - [안드로이드] 탭(Tab) 만들어 보기

[안드로이드] 탭(Tab) 만들어 보기

 

2020.06.05 - [안드로이드] - [안드로이드]탭(TAB) 선택시 색상지정 setTabTextColors

[안드로이드]탭(TAB) 선택시 색상지정 setTabTextColors

 

2020.10.30 - [안드로이드] - [안드로이드] 밀어서 화면변경 뷰페이저(View Pager)

[안드로이드] 밀어서 화면변경 뷰페이저(View Pager)

 

 

 

 

위의 이미지에서 게임, 앱, 영화,도서라는 부분을  클릭하면

이름에 해당하는 화면으로 변경이 됩니다. 안드로이드에서는 저 부분을

BottomNavigationView를 통해서 구현할 수 있습니다.

앱의 하단에 위치하여 화면을 나누어 주는 기능을 하는 하단 탭을 만들어 보겠습니다.

1. 라이브러리 추가

Gradle Script -> build.gradle(Module:app)

dependencies 안에 아래 코드를 추가

implementation 'com.google.android.material:material:1.4.0'

 

2. 각 화면 추가(Fragment)

화면은 프레그먼트(Fragment)를 만들어서 메인화면(MainActivity)에 올립니다.

화면은 3개를 추가할 것입니다. 

2-1 프래그먼트 만드는 방법

app 클릭 -> 마우스 오른쪽 -> New -> Fragment -> Fragment(Blank)

 

2-2 프래그먼트 이름 입력 및 완료

각 화면의 Fragment Name은 HomeFragment, SettingFragment, InfoFragment를 입력해서 만드시면 됩니다.

위의 방법대로 만드시면 자동으로 화면(layout)도 자동으로 생성됩니다.

fragment_home.xml , fragment_setting.xml, fragment_info.xml

3. 프래그먼트(Fragment) 코드 및 화면

3-1 HomeFragment

import android.os.Bundle;
import androidx.fragment.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;


public class HomeFragment extends Fragment {
    
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_home, container, false);
    }
}

 

3-2 SettingFragment

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import androidx.fragment.app.Fragment;


public class SettingFragment extends Fragment {


    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_setting, container, false);
    }
}

 

3-3 InfoFragment

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import androidx.fragment.app.Fragment;


public class InfoFragment extends Fragment {


    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_info, container, false);
    }
}

 

3-4 fragment_home.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".HomeFragment">

    
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="30sp"
        android:layout_gravity="center"
        android:gravity="center_horizontal"
        android:text="Home Fragment" />

</LinearLayout>

 

3-5 fragment_setting.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".SettingFragment">


    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="30sp"
        android:layout_gravity="center"
        android:gravity="center_horizontal"
        android:text="Setting Fragment" />

</LinearLayout>

 

3-6 fragment_info.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".InfoFragment">


    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="30sp"
        android:layout_gravity="center"
        android:gravity="center_horizontal"
        android:text="Info Fragment" />

</LinearLayout>

 

2021.12.03 - [안드로이드] - [안드로이드]BottomNavigationView 하단 탭 쉽게 만드는 방법 1-2

[안드로이드]BottomNavigationView 하단탭 쉽게 만드는 방법 1-2

맘에 드셨다면 공감 부탁드려요 문의 댓글 환영합니다.