<안드로이드스튜디오> 하단 메뉴 만들기, 화면전환

<안드로이드 스튜디오>

chip-navigtion-bar를 사용하여 하단 메뉴를 만들었습니다.

결과는 글의 마지막 영상으로 확인하실 수 있습니다!

 

https://github.com/ismaeldivita/chip-navigation-bar

GitHub - ismaeldivita/chip-navigation-bar: An android navigation bar widget

 

https://github.com/riwltnchgo0625/JavaChipNavigationBar_test

GitHub - riwltnchgo0625/JavaChipNavigationBar_test

 

 

---

1. build.gradle에 implementation추가하기

chip-navigtion-bar사용을 위해서 implementation을 추가해줍니다.

//chip navigation bar
    implementation 'com.github.ismaeldivita:chip-navigation-bar:(버전)'
    implementation 'org.jetbrains.kotlin:kotlin-stdlib:(버전)'

---

2. 메뉴 xml생성

res -> new -> Android Resource File

 

File name => bottom_menu

Resource type => Menu로 변경 ->ok

 

bottom_menu.xml작성

5가지 메뉴로 구성해주었습니다.

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    app:cnb_unselectedColor = "#FFFFFF"
    xmlns:app="http://schemas.android.com/apk/res-auto">


    <item
        android:id="@+id/home"
        android:icon="@drawable/ic_baseline_home_1"
        android:title="Home"
        app:cnb_backgroundColor="#ff758b"
        app:cnb_iconColor="#fff"
        app:cnb_textColor="#fff"/>

    <item
        android:id="@+id/discover"
        android:icon="@drawable/ic_baseline_search_24"
        android:title="Discover"
        app:cnb_backgroundColor="#ff758b"
        app:cnb_iconColor="#fff"
        app:cnb_textColor="#fff"/>

    <item
        android:id="@+id/account"
        android:icon="@drawable/ic_baseline_account_circle_1"
        android:title="Account"
        app:cnb_backgroundColor="#ff758b"
        app:cnb_iconColor="#fff"
        app:cnb_textColor="#fff"/>

    <item
        android:id="@+id/start"
        android:icon="@drawable/ic_baseline_directions_run_24"
        android:title="Run"
        app:cnb_backgroundColor="#ff758b"
        app:cnb_iconColor="#fff"
        app:cnb_textColor="#fff"/>

    <item
        android:id="@+id/record"
        android:icon="@drawable/ic_baseline_access_alarm_24"
        android:title="Record"
        app:cnb_backgroundColor="#ff758b"
        app:cnb_iconColor="#fff"
        app:cnb_textColor="#fff"/>
</menu>

---

3. layout 구성

사용할 화면을 디자인합니다.

저는 총 5개의 화면을 사용할 것이기 때문에 5개의 xml을 만들었습니다.

 

3-1 activity_main

전체를 RelativeLayout으로 바꾼 후 아래와 같이 코드를 적었습니다. activity main은 바텀 네비게이션을 위한 xml입니다.

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

    <com.ismaeldivita.chipnavigation.ChipNavigationBar
        android:id="@+id/bottom_nav"
        android:layout_width="match_parent"
        android:layout_height="72dp"
        android:layout_alignParentBottom="true"
        android:background="@drawable/rounded"
        android:elevation="16dp"
        android:padding="8dp"
        app:cnb_menuResource="@menu/menu_bottom"
        />

 

3-2 fragment

본격적으로 자신이 사용할 화면을 구성해줍니다.

저는 home, account, start, record, discover 5가지 화면을 사용하기위해 5개의 fragment를 만들었습니다.

 

아래 코드는 home화면을 위한 코드입니다. 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    android:background="#ff364572"
    tools:context=".HomeFragment">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Home"
        android:textSize="26sp"
        android:textColor="#ffffff"
        android:layout_centerInParent="true"/>

</RelativeLayout>

 

각각 다른 화면 구성

---

4. 자바코드 작성

화면 디자인이 끝나면 자바 코드를 작성합니다.

 

 

반드시 각 layout과 연결되어있는 Fragment가 있어야합니다.

public class MainActivity extends AppCompatActivity {
    private static final String TAG = MainActivity.class.getSimpleName();
    ChipNavigationBar bottomNav;
    FragmentManager fragmentManager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        bottomNav = findViewById(R.id.bottom_nav);

        if (savedInstanceState == null){
            bottomNav.setItemSelected(R.id.home,true);
            fragmentManager = getSupportFragmentManager();
            HomeFragment homeFragment = new HomeFragment();
            fragmentManager.beginTransaction()
                    .replace(R.id.fragment_container, homeFragment)
                    .commit();
        }


        bottomNav.setOnItemSelectedListener(new ChipNavigationBar.OnItemSelectedListener() {
            @Override
            public void onItemSelected(int id) {
                Fragment fragment = null;
                switch (id){
                    case R.id.home:
                        fragment = new HomeFragment();
                    break;

                    case  R.id.discover:
                        fragment = new DiscoverFragment();
                        break;

                    case R.id.account:
                        fragment = new AccountFragment();
                        break;

                    case R.id.start:
                        fragment = new StartFragment();
                        break;

                    case R.id.record:
                        fragment = new RecordFragment();
                        break;
                }

                if (fragment!=null) {
                    fragmentManager = getSupportFragmentManager();
                    fragmentManager.beginTransaction()
                            .replace(R.id.fragment_container, fragment)
                            .commit();
                }else{
                    Log.e(TAG,"Error in creating fragment");
                }
            }
        });
    }
}

 

 

---

5. 결과물

https://tv.kakao.com/v/425537858