[Android] FloatingActionButton 사용하기

오늘 주제는 FloatingActionButton입니다.

뭔지 잘 모르시겠다구요? FloatingActionButton이 무엇인지, 어떻게 사용하는지 하나하나 설명 드릴테니, 잘 따라오시기바랍니다.

그럼 포스팅 시작하도록 하겠습니다.

---

   

FloatingActionButton 사용 예

앱을 사용하시다 보면 위와 같은 버튼을 보신 적 있으실 텐데요, 위의 버튼을 FloatingActionButton(이하 fab)이라고 합니다. 특히나 리스트뷰 같은 구조에서 많이 사용되는데요, 화면이 움직이더라도 fab 버튼은 화면의 최상위에 고정되어 떠있는 것을 보실 수 있습니다.

그럼 fab 버튼을 추가하고, 위의 사진에서처럼 서브 버튼이 나타났다가 사라지도록 구성하는 방법에 대해 예제를 통해 알아보도록 하겠습니다.

Gradle에 라이브러리 추가하기

FloationgActionButton은 Support Design Library에 소속되어 있으므로, Gradle에 라이브러리를 추가해주어야 합니다.

build.gradle (Module: app)

dependencies {

    implementation 'com.android.support:design:26.1.0'

}

이제 fab버튼을 사용하실 수 있습니다. 이어서 MainActivity의 레이아웃을 구성하도록 하겠습니다.

레이아웃 작성하기

우선, 레이아웃부터 작성하도록 하겠습니다.

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="rebuild.com.floatingactionbutton.MainActivity">

    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_centerInParent="true"

        android:text="숲속의 작은이야기 입니다.\nhttp://re-build.tistory.com"

        android:textAlignment="center"

        android:textColor="#000000"

        android:textSize="20dp" />

    <android.support.design.widget.FloatingActionButton

        android:id="@+id/fab_sub1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_above="@+id/fab_sub2"

        android:layout_alignParentRight="true"

        android:layout_marginBottom="15dp"

        android:layout_marginRight="20dp"

        android:backgroundTint="#ffffff"

        android:src="@drawable/ic_camera"

        android:visibility="invisible"

        app:borderWidth="0dp"

        app:fabSize="normal" />

    <android.support.design.widget.FloatingActionButton

        android:id="@+id/fab_sub2"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_above="@+id/fab_main"

        android:layout_alignParentRight="true"

        android:layout_marginBottom="15dp"

        android:layout_marginRight="20dp"

        android:backgroundTint="#ffffff"

        android:src="@drawable/ic_map"

        android:visibility="invisible"

        app:borderWidth="0dp"

        app:fabSize="normal" />

    <android.support.design.widget.FloatingActionButton

        android:id="@+id/fab_main"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignParentBottom="true"

        android:layout_alignParentRight="true"

        android:layout_marginBottom="20dp"

        android:layout_marginRight="20dp"

        android:backgroundTint="#009688"

        android:src="@drawable/ic_add"

        app:borderWidth="0dp"

        app:fabSize="normal" />

</RelativeLayout>

우측 하단에 fab 버튼을 배치하고 버튼을 눌렀을 때, 나올 서브 fab 버튼들을 위쪽으로 배치했습니다. fab 버튼을 사용하실 때 많이 사용하게 되는 옵션들이 몇 가지 있습니다.

• src

- fab 버튼의 아이콘을 지정할 수 있습니다.

• backgroundTint

- fab 버튼의 색상을 변경 할 수 있습니다.

  기본적으로 fab 버튼의 색상은 colors.xml에 정의된 colorAccent의 색상으로 지정되어있습니다. 

• fabSize

- fab버튼의 사이즈를 선택할 수 있습니다.

	"mini"	fab 버튼의 사이즈를 mini 사이즈로 지정합니다.
	"normal"	fab 버튼의 사이즈를 normal 사이즈로 지정합니다.
	"auto"	fab 버튼의 사이즈를 화면 사이즈에 맞추어 자동으로 mini 또는 normal롤 지정합니다.

• borderWidth

- fab 버튼의 테두리 두께를 지정합니다.

이외의 다른 옵션들도 적용해보면서 어떤 효과를 내는지 알아두시면 좋을 것 같습니다.

애니메이션 정의하기

이어서 fab 버튼이 나타나고 사라지는 효과를 주기 위해 애니메이션을 만들어 보겠습니다.

fab_open.xml

<?xml version="1.0" encoding="utf-8"?>

<set xmlns:android="http://schemas.android.com/apk/res/android"

    android:fillAfter="true">

    <scale

        android:duration="300"

        android:fromXScale="0.0"

        android:fromYScale="0.0"

        android:interpolator="@android:anim/linear_interpolator"

        android:pivotX="50%"

        android:pivotY="50%"

        android:toXScale="0.8"

        android:toYScale="0.8" />

    <alpha

        android:duration="300"

        android:fromAlpha="0.0"

        android:interpolator="@android:anim/accelerate_interpolator"

        android:toAlpha="1.0" />

</set>

fab_close.xml

<?xml version="1.0" encoding="utf-8"?>

<set xmlns:android="http://schemas.android.com/apk/res/android"

    android:fillAfter="true">

    <scale

        android:duration="300"

        android:fromXScale="0.8"

        android:fromYScale="0.8"

        android:interpolator="@android:anim/linear_interpolator"

        android:pivotX="50%"

        android:pivotY="50%"

        android:toXScale="0.0"

        android:toYScale="0.0" />

    <alpha

        android:duration="300"

        android:fromAlpha="1.0"

        android:interpolator="@android:anim/accelerate_interpolator"

        android:toAlpha="0.0" />

</set>

애니메이션에 관한 내용은 다음 포스팅에서 다룰 예정이니 자세한 설명은 생략하도록 하겠습니다.

이제 모든 준비가 끝났으니, Activity에서 fab 버튼의 동작을 정의하도록 하겠습니다.

FloatingActionButton 사용하기

작성 된 애니메이션을 적용하여, fab 버튼의 동작을 정의하도록 하겠습니다.

MainActivity.java

package rebuild.com.floatingactionbutton;

import android.content.Context;

import android.os.Bundle;

import android.support.design.widget.FloatingActionButton;

import android.support.v7.app.AppCompatActivity;

import android.view.View;

import android.view.animation.Animation;

import android.view.animation.AnimationUtils;

import android.widget.Toast;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    private Context mContext;

    private FloatingActionButton fab_main, fab_sub1, fab_sub2;

    private Animation fab_open, fab_close;

    private boolean isFabOpen = false;

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        mContext = getApplicationContext();

        fab_open = AnimationUtils.loadAnimation(mContext, R.anim.fab_open);

        fab_close = AnimationUtils.loadAnimation(mContext, R.anim.fab_close);

        fab_main = (FloatingActionButton) findViewById(R.id.fab_main);

        fab_sub1 = (FloatingActionButton) findViewById(R.id.fab_sub1);

        fab_sub2 = (FloatingActionButton) findViewById(R.id.fab_sub2);

        fab_main.setOnClickListener(this);

        fab_sub1.setOnClickListener(this);

        fab_sub2.setOnClickListener(this);

    }

    @Override

    public void onClick(View v) {

        switch (v.getId()) {

            case R.id.fab_main:

                toggleFab();

                break;

            case R.id.fab_sub1:

                toggleFab();

                Toast.makeText(this, "Camera Open-!", Toast.LENGTH_SHORT).show();

                break;

            case R.id.fab_sub2:

                toggleFab();

                Toast.makeText(this, "Map Open-!", Toast.LENGTH_SHORT).show();

                break;

        }

    }

    private void toggleFab() {

        if (isFabOpen) {

            fab_main.setImageResource(R.drawable.ic_add);

            fab_sub1.startAnimation(fab_close);

            fab_sub2.startAnimation(fab_close);

            fab_sub1.setClickable(false);

            fab_sub2.setClickable(false);

            isFabOpen = false;

        } else {

            fab_main.setImageResource(R.drawable.ic_close);

            fab_sub1.startAnimation(fab_open);

            fab_sub2.startAnimation(fab_open);

            fab_sub1.setClickable(true);

            fab_sub2.setClickable(true);

            isFabOpen = true;

        }

    }

}

fab 버튼 클릭 시에 toggleFab() 메서드를 실행시켜 애니메이션 효과를 시작하도록 정의하였습니다. 어려운 내용은 없으니, 따라 해보신다면 바로 이해가 되실거라 생각 됩니다.

여기까지 하셨다면 실행시켜 결과를 확인해 보시면 되겠습니다.

---

간단하게 FloatingActionButton에 대해 알아보았는데요, 도움이 되셨나요?

요즘은 Fab 버튼이 많이 사라지고 있는 추세이긴 하나, 특정 상황에서는 꽤 쓸모 있게 사용이 가능한 유용한 기능입니다.

하나하나 알아둘수록 차후에 UI 설계등에서도 시야가 넓어지지 않을까요?ㅎ 

이번 포스팅은 여기서 마치도록 하겠습니다. 읽어주셔서 감사합니다.