[안드로이드] Material NavigationRailView 쉽게 만드는 방법

이번 시간에는 Material 컴포넌트 중

NavigationRailView 쉽게 만드는 방법에

대하여 알아보겠습니다.

---

목차

1. 실행화면

2. 라이브러리 등록

3. 테마 수정

4. 프래그먼트 만들기

5. 메뉴 만들기

6. 메인 화면 구성 activity_main.xml

7. 메인 코드 구현 MainActivity.java

---

1. 실행화면

2. 라이브러리 등록

build.gradle(Module:프로젝트명:app)

dependencies 괄호 안에 아래 코드를 넣어주시면 됩니다.

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

 

3. 테마 수정

테마 수정 themes.xml
( res -> value -> themes)

style 태그 속성 parent를 아래 코드로 변경해주시면 됩니다.

<style name="Theme.MaterialExam" parent="Theme.MaterialComponents.Light.DarkActionBar">

테마 등록 ( NavigationRailView 스타일)

resources 태그 안에 아래 코드를 등록하시면 됩니다.

<style name="Widget.App.NavigationRailView" parent="Widget.MaterialComponents.NavigationRailView.Colored">
    <item name="materialThemeOverlay">@style/ThemeOverlay.App.NavigationRailView</item>
</style>

<style name="ThemeOverlay.App.NavigationRailView" parent="">
    <item name="colorPrimary">@color/pink_50</item>
    <item name="colorOnPrimary">@color/black</item>
</style>

색상

 res -> values -> colors.xml

<color name="pink_50">#FCE4EC</color>
<color name="black">#FF000000</color>

 

 

4. 프래그먼트 만들기

java:  AlarmFm, ScheduleFm

xml: fragment_alarm_fm, fragment_schedule_fm

2022.01.08 - [안드로이드] - [안드로이드 스튜디오] 프래그먼트(Fragemnt) 만드는 방법

[안드로이드 스튜디오] 프래그먼트(Fragemnt) 만드는 방법

 

AlarmFm

public class AlarmFm extends Fragment {

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

 

ScheduleFm

public class ScheduleFm extends Fragment {


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

 

fragment_alarm_fm.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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=".AlarmFm">
    
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="Alarms"
        android:textSize="30sp" />

</FrameLayout>

 

fragment_schedule_fm.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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=".ScheduleFm">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="Schedule"
        android:textSize="30sp" />

</FrameLayout>

 

5. 메뉴 만들기

1. res 선택 -> 마우스 오른쪽 클릭 -> New -> Android Resource Directory

Resource type: menu 선택 -> Ok

2. menu 선택 -> 마우스 오른쪽 클릭 -> New -> Menu Resource File

File name: navigation_rail_menu -> Ok

navigation_rail_menu 

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/alarms"
        android:enabled="true"
        android:icon="@drawable/ic_alarms"

        android:title="alarm"/>
    <item
        android:id="@+id/schedule"
        android:enabled="true"
        android:icon="@drawable/ic_schedule"
        android:title="schedule"/>
    <item
        android:id="@+id/timer"
        android:enabled="true"
        android:icon="@drawable/ic_timer"
        android:title="send clock"/>
    <item
        android:id="@+id/stopwatch"
        android:enabled="true"
        android:icon="@drawable/ic_watch_later"
        android:title="stop watch"/>
</menu>

 아이콘 res-> drawable

ic_watch_later.xml

0.00MB

ic_timer.xml

0.00MB

ic_schedule.xml

0.00MB

ic_alarms.xml

0.00MB

 

6. 메인 화면 구성 activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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">

    <com.google.android.material.navigationrail.NavigationRailView
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        style="@style/Widget.App.NavigationRailView"
        android:id="@+id/navigation_rail"
        app:menu="@menu/navigation_rail_menu"/>

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

</RelativeLayout>

 

7. 메인 코드 구현 MainActivity.java

 - 설명 - 

1.  내비게이션 메뉴를 선택하면 해당 프래그먼트를 호출합니다.

public class MainActivity extends AppCompatActivity {

    AlarmFm alarmFm;
    ScheduleFm scheduleFm;

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

        alarmFm = new AlarmFm();
        scheduleFm = new ScheduleFm();

        //기본화면 설정
        getSupportFragmentManager().beginTransaction().replace(R.id.frame_layout, alarmFm).commit();

        NavigationBarView railView = findViewById(R.id.navigation_rail);
        railView.setOnItemSelectedListener(new NavigationBarView.OnItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {

                switch(item.getItemId()){

                    case R.id.alarms:
                        getSupportFragmentManager().beginTransaction().replace(
                                R.id.frame_layout, alarmFm).commit();
                        return true;

                    case R.id.schedule:
                        getSupportFragmentManager().beginTransaction().replace(
                                R.id.frame_layout, scheduleFm).commit();
                        return true;

                    case R.id.timer:
                        Toast.makeText(getApplicationContext(), "timer",
                                Toast.LENGTH_SHORT).show();
                        return true;

                    case R.id.stopwatch:
                        Toast.makeText(getApplicationContext(), "stopwatch",
                                Toast.LENGTH_SHORT).show();
                        return true;
                }


                return false;
            }
        });

    }//onCreate

}//MainActivity

2022.02.24 - [안드로이드] - [안드로이드] 그리드 레이아웃(GridLayout) 카드뷰(CardView) 디자인 꾸미는 방법

[안드로이드] 그리드레이아웃(GridLayout) 카드뷰(CardView) 디자인 꾸미는 방법

2022.02.23 - [안드로이드] - [안드로이드] 원형 메뉴(CircleMenu) 쉽게 만드는 방법

[안드로이드] 원형메뉴(CircleMenu) 쉽게 만드는 방법

2022.02.22 - [안드로이드] - [안드로이드] NavigationDrawer 쉽게 꾸미는 방법

[안드로이드] NavigationDrawer 쉽게 꾸미는 방법