Android Studio Material Design 그외 6(BottomAppBar)

 

<최종 실행 화면>

가운데 카드 버튼을 누르면, 오른쪽으로 이동된다.

위로 스크롤 시 메뉴바가 아래로 숨겨진다.

SHOW SNACKBAR 버튼을 누르면, 스낵바가 나타난다.

우선 material 라이브러리를 추가해준다. 

material 이 추가된 것을 확인할 수 있다.

제목을 없애자

아래 녹색바 색이 예제에서는 예제용 휴대폰에는 안되서 흰색이다.(옛날 휴대폰이라..)

 

현재까지 실행 화면

흰색 메뉴바에 보일 아이콘을 추가하자.

같은 방법으로 favorite도 추가

화면과 달리 색을 #AA5A5A 색으로 바꿨다.

화면과 달리 색을 #AA5A5A 색으로 바꿨다.

이제 메뉴 레이아웃을 만들자.

미리보기에선 우측 상단에 보이지만, 실제 앱 화면에는 Bottombar를 밑에 놓았기 때문에 밑에 보인다.

 

 

카트를 누를때 오른쪽으로 이동 된다.

 

이제 화면 구성에 BottomAppBar 위에 NestedScrollView를놓을것이다.

NestedScrollView 안에는 LinearLayout이 있고 

LinearLayout 안에는 TextView 3개를 넣고 배경색을 줘서 스크롤이 되는 것 확인할 것이다.

 

BottomAppBar에 hideOnScroll를 true로 주면 스크롤시 숨겨진다.

이제 버튼을 추가해보자. snack bar를 띄우는 역할

FloatingActionButton 밑에 CoordinatorLaout 추가

MainActivity.java로 가서 버튼 기능 코드 기입

<최종 실행 화면>

가운데 카드 버튼을 누르면, 오른쪽으로 이동된다.

위로 스크롤 시 메뉴바가 아래로 숨겨진다.

SHOW SNACKBAR 버튼을 누르면, 스낵바가 나타난다.

activity_main.xml 코드

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent">
 
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">
 
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="show SnackBar"
                android:layout_margin="100dp"
                android:layout_gravity="center_horizontal"
                android:onClick="clickBtn"/>
 
            <TextView
                android:layout_width="match_parent"
                android:layout_height="250dp"
                android:background="#FF0000"/>
            <TextView
                android:layout_width="match_parent"
                android:layout_height="250dp"
                android:background="#00FF00"/>
            <TextView
                android:layout_width="match_parent"
                android:layout_height="250dp"
                android:background="#0000FF"/>
 
        </LinearLayout>
 
 
    </androidx.core.widget.NestedScrollView>
 
<!--    BottomAppBar는 CoordinatorLayout-->
    <com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/bab"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:backgroundTint="@color/colorPrimary"
        app:hideOnScroll="true">
    </com.google.android.material.bottomappbar.BottomAppBar>
 
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:backgroundTint="@color/colorAccent"
        app:fabSize="normal"
        app:layout_anchor="@id/bab"
        android:src="@drawable/ic_action_cart"
        android:theme="@style/AppTheme.BAB"
        android:onClick="clickFab"/>
 
    <androidx.coordinatorlayout.widget.CoordinatorLayout
        android:id="@+id/snackbar_container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:layout_marginBottom="88dp">
    </androidx.coordinatorlayout.widget.CoordinatorLayout>
 
</androidx.coordinatorlayout.widget.CoordinatorLayout>
 

 

bab_option.xml 코드

<?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/menu_search"
        android:title="search"
        android:icon="@drawable/ic_search_white_24dp"
        app:showAsAction="always">
    </item>
    <item android:id="@+id/menu_fav"
        android:title="favorite"
        android:icon="@drawable/ic_favorite_white_24dp"
        app:showAsAction="always">
    </item>
 
    <item android:id="@+id/menu_aa"
        android:title="aa">
    </item>
    <item android:id="@+id/menu_bb"
        android:title="bb">
    </item>
 
</menu>

MainActivity.java 코드

package com.lcw.ex58bottomappbar;
 
import androidx.appcompat.app.AppCompatActivity;
 
import android.os.Bundle;
import android.view.Menu;
import android.view.View;
 
import com.google.android.material.bottomappbar.BottomAppBar;
import com.google.android.material.snackbar.Snackbar;
 
public class MainActivity extends AppCompatActivity {
 
    BottomAppBar bab;
    boolean isCenter=true;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        bab=findViewById(R.id.bab);
        setSupportActionBar(bab);
 
        getSupportActionBar().setDisplayHomeAsUpEnabled(true); //제목줄 옆에 [<-] 기호
    }
 
    //옵션메뉴 만드는 메소드
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.bab_option,menu);
        return super.onCreateOptionsMenu(menu);
    }
 
    public void clickFab(View view) {
        isCenter= !isCenter;
 
        if(isCenter) bab.setFabAlignmentMode(BottomAppBar.FAB_ALIGNMENT_MODE_CENTER);
        else bab.setFabAlignmentMode(BottomAppBar.FAB_ALIGNMENT_MODE_END);
    }
 
    public void clickBtn(View view) {
        Snackbar.make(findViewById(R.id.snackbar_container),"This is snack bar",Snackbar.LENGTH_INDEFINITE).setAction("OK", new View.OnClickListener() {
            @Override
            public void onClick(View view) {
 
            }
        }).show();
    }
}