Floating Action Button, Snackbar

Floating Action Button

Floating Action Button은 앱에서 유용하게 사용되어 온 버튼입니다.

가장 쉽게 볼 수 있는 곳이 문자메세지 앱에 보면 있습니다.

Floating Action Button은 좁은 화면을 효율적으로 활용할 수 있는 훌륭한 UI입니다.

구현은 간단합니다.

먼저 Main이 될 activity xml입니다.

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    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:fitsSystemWindows="true"
    tools:context="com.answerofgod.floating.MainActivity">
    <include layout="@layout/content_main" />
    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        android:src="@android:drawable/btn_star" />
</android.support.design.widget.CoordinatorLayout> 

Line 2, Line 17: 레이아웃은 'android.support.design.widget.CoordinatorLayout'으로

만들어 줘야 합니다.

Line 9 : 실제 사용할 레이아웃입니다.

Line 10~16 : Floating Action Button입니다. 특히 Line 16에서 버튼 모양을 넣어줄 수 있습니다.

※ 참고로 액션 툴바는 별로 좋아하지 않아 뺏습니다;;

이제 실제로 화면에 보여질 레이아웃입니다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.answerofgod.floating.MainActivity"
    tools:showIn="@layout/activity_main">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:text="This is Floating Action Button Example"
        android:gravity="center"/>
    <Button
        android:layout_height="0dp"
        android:layout_width="match_parent"
        android:layout_weight="1"
        android:text="Floating Action button invisiable"
        android:id="@+id/changeBtn"
    />
</LinearLayout>

전체적으로 리니어레이아웃으로 하였고, 그안에 TextView(11~16)와 Button(17~23)으로 구성했습니다.

이런식의 레이아웃이 잡혀집니다.

이제 Main JAVA 코드입니다.

public class MainActivity extends Activity implements View.OnClickListener{
    FloatingActionButton fab;
    Button changeBtn;
    boolean fabVisiable=true;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        changeBtn=(Button)findViewById(R.id.changeBtn);
        changeBtn.setOnClickListener(this);
        fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(this);
    }

우선 초기화 부분입니다.

Line 2 : Floating Action button입니다.

Line 3 : 위 레이아웃에서 아래 버튼입니다.

Line 4 : Floating Action button을 숨기고 나타나게 하기 위한 boolean 변수입니다.

Line 9~12 : 버튼에 Onclicklistener를 연결해 줍니다.

OnClick Listener부분입니다.

@Override
public void onClick(View v) {
    switch(v.getId()){
        case R.id.fab:
            Snackbar.make(v, "This is snackbar", Snackbar.LENGTH_INDEFINITE)
                    .setAction("Close", new View.OnClickListener() {
                        @Override
                        public void onClick(View view) {
                            Snackbar.make(view, "snackbar is closing", Snackbar.LENGTH_SHORT).show();
                        }
                    }).show();
            break;
        case R.id.changeBtn:
            if(fabVisiable) {
                fab.hide();
                fabVisiable=false;
                changeBtn.setText("Floating Action button visiable");
            }else {
                fab.show();
                fabVisiable=true;
                changeBtn.setText("Floating Action button invisiable");
            }
            break;
    }

Line 4~12 : Floating Action Button에 대한 부분입니다.

Line 5~11 : Floating Action Button을 누르면 Snackbar를 만들도록 했습니다.

Snackbar.make(부모 뷰, 메세지, 스낵바 노출시간)

Snackbar.setAction(버튼뷰 메세지, 버튼뷰 리스너)

※SnackBar의 노출시간중 LENGTH_INDEFINITE를 선택하게 되면 snackbar가 별다른 액션없이는

사라지지 않습니다.

Line 6~10 : Snackbar에서 버튼을 누르면 또하나의 Snackbar가 나타납니다.

Line 13~23 : Floating Action Button이 나타나고 사라지고 하게하는 버튼입니다.

구현모습입니다.

앱을 처음 실행하면 위와 같은 모습이 보여집니다.

Floating Action Button을 누르면 아래에 메시지와 함께 SnackBar가 올라옵니다.

Close 버튼을 누르면 또다른 SnackBar가 올라오고 잠시후 사라집니다.

그리고 UI상 아래의 버튼을 클릭하면 FLOATING ACTION BUTTON이 사라졌다 나타났다 합니다.

이런식으로요^^