[안드로이드] Material app bars bottom 쉽게 만드는 방법

이번 시간에는 Material app bars bottom에 대해서 알아보겠습니다.

1. 라이브러리 등록

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

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

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

 

2. 테마 수정 themes.xml

( res -> value -> themes)

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

app bar를 만들어야 하기 때문에 noActionBar를 통해 액션바를 없애줘야 합니다.

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

2020.12.19 - [안드로이드] - [안드로이드]라이브러리 찾아 등록하는 방법

[안드로이드]라이브러리 찾아 등록하는 방법

 

3. 메뉴 만들기 bottom_app_bar.xml

app -> New -> Android Resource File

 

File name : bottom_app_bar

Resource type: Menu 로 하시면 됩니다. 

 

<?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/search"
        android:icon="@drawable/ic_search"
        android:title="search"
        app:actionViewClass="androidx.appcompat.widget.SearchView"
        app:showAsAction="always" />

    <item
        android:id="@+id/app_bar_menu1"
        android:title="menu1" />

    <item
        android:id="@+id/app_bar_menu2"
        android:title="menu2" />
</menu>

 

아이콘 res -> drawable

ic_add.xml

0.00MB

ic_search.xml

0.00MB

ic_menu.xml

0.00MB

 

 

 

4. 메인화면 구성 activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
    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">

    <androidx.coordinatorlayout.widget.CoordinatorLayout
        android:id="@+id/container_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent">

        <com.google.android.material.bottomappbar.BottomAppBar
            android:id="@+id/bottom_app_bar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:backgroundTint="@color/teal_200"
            app:fabAlignmentMode="end"
            app:fabAnimationMode="slide"
            app:fabCradleMargin="8dp"
            app:fabCradleRoundedCornerRadius="32dp"
            app:hideOnScroll="true"
            app:navigationIcon="@drawable/ic_menu" />

        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:backgroundTint="@color/purple_200"
            android:src="@drawable/ic_add"
            app:layout_anchor="@id/bottom_app_bar" />
    </androidx.coordinatorlayout.widget.CoordinatorLayout>
    
</androidx.constraintlayout.widget.ConstraintLayout>

 

색상 res -> values -> colors.xml

<color name="teal_200">#FF03DAC5</color>

<color name="purple_200">#FFBB86FC</color>

 

5. 메인코드 기능구현 MainActivity.java

import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.Toast;
import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.Toolbar;
import com.google.android.material.bottomappbar.BottomAppBar;


public class MainActivity extends AppCompatActivity {

    private BottomAppBar bottomAppBar;

    private int bottomAppBarState = 0;

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


        bottomAppBar = findViewById(R.id.bottom_app_bar);
        setSupportActionBar(bottomAppBar);

        // appBar 아이콘 눌렀을 때 발생하는 이벤트
        bottomAppBar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

                bottomAppBarState = bottomAppBar.getFabAlignmentMode();

                if (bottomAppBarState == 0) { //센터라면
                    bottomAppBar.setFabAlignmentMode(bottomAppBar.FAB_ALIGNMENT_MODE_END);

                } else { //센터 아니면
                    bottomAppBar.setFabAlignmentMode(bottomAppBar.FAB_ALIGNMENT_MODE_CENTER);
                }
            }
        });

        // appbar 메뉴 눌렀을 때 발생하는 이벤트
        bottomAppBar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
            @Override
            public boolean onMenuItemClick(MenuItem item) {

                switch (item.getItemId()) {
                    case R.id.app_bar_menu1:
                        Toast.makeText(getApplicationContext(), "menu1", Toast.LENGTH_SHORT).show();
                        return true;
                    case R.id.app_bar_menu2:
                        Toast.makeText(getApplicationContext(), "menu2", Toast.LENGTH_SHORT).show();
                        return true;
                }
                return true;
            }
        });

    }

    //메뉴 추가
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        super.onCreateOptionsMenu(menu);
        getMenuInflater().inflate(R.menu.bottom_app_bar, menu);
        return true;
    }
}

 

6. 실행화면

 

2021.12.16 - [안드로이드] - [안드로이드] Material tabs [Fixed tabs, Scrollable tabs] 쉽게 만드는 방법

[안드로이드] Material tabs [Fixed tabs, Scrollable tabs] 쉽게 만드는 방법

2021.12.17 - [안드로이드] - [안드로이드] Material Tabs Custom 하는 방법

[안드로이드] Material Tabs Custom 하는 방법