[Android 예제] ExtendedFloatingActionButton 사용하기

안녕하세요, Wooa Story입니다.

Android 코드를 오늘 처음으로 올려보네요. 부족한 실력이지만 포스팅을 하면서 공부한 내용을 정리할 수도 있고 어쩌면 저와 같은 어려움을 겪으실 분들께 도움을 드리고자 함입니다. 얼마나 도움을 드릴 수 있을진 모르겠지만요.ㅎㅎ 앞으로도 공부해서 도움을 드릴 수 있는 내용들은 정리해서 포스팅하도록 하겠습니다.

 

오늘 알아볼 내용은 ExtendedFloatingActionButton입니다. 이름에서 부터 FloatingActionButton의 확장형임이 느껴집니다. FloatingActionButton은 앱에 흔히 사용되는 위젯으로 화면 레이어상 최상단에 떠있는 버튼을 의미합니다. 기본적으로 FloatingActionButton은 이미지 1개로 구현이 됩니다. 그래서 Text를 함께 표현하고 싶을 때 Custom으로 구현해야 하는 수고(?)가 발생을 하죠. 그런데 이제 요 ExtendedFloatingActionButton이 그런 수고로움을 덜어주게 되었습니다. 이미지 + 텍스를를 FloatingActionButton에 같이 사용할 수 있게 된 거죠. 그럼 아래 예제를 통해서 자세히 알아보도록 하죠.

 

 

1. ExtendedFloatingActionButton 예

 

왼쪽 : ExtendedFloatingActionButton , 오른쪽 : FloatingActionButton(삼성 기본 문자 앱)

ExtendedFloatingActionButton과 FloatingActionButton의 차이를 알 수 있죠? 왼쪽이 ExtendedFloatingActionButton이고 오른쪽이 FloatingActionButton입니다. ExtendedFloatingActionButton는 이미지와 텍스트를 같이 보여주고 싶을 때 사용을 하고 FloatingActionButton에서는 이미지로 표현을 할 때 사용합니다.

 

2. Gradle에 라이브러리 추가

ExtendedFloatingActionButton을 사용하기 위해서는 Gradle에 라이브러리를 추가를 해야 합니다. Material Components로 관련된 라이브러리를 추가해 줍니다. 현재는 1.2.0-alpha05가 최신 버전이네요.

build.gradle (Module:app)

dependencies {
    implementation 'com.google.android.material:material:1.2.0-alpha05'
}

 

3. 레이아웃 작성

다음으로 layout 파일에서 ExtendedFloatingActionButton을 정의합니다.

activity_main.xml

<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:theme="@style/MaterialTheme"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_marginBottom="20dp"
        android:layout_marginRight="20dp"
        android:text="Test"
        app:icon="@drawable/share" />

저는 MainActivity에서 사용을 하였기 때문에 activity_main.xml에서 정의하였는데 다른 곳에서 쓰실 분들은 쓰고자하는 xml에서 사용하시면 되겠습니다. 몇몇 설정값들에 대해서는 아래에 설명을 하였습니다.

 

<<설정값 설명>>

layout_alignParentButtom, layout_alignParentRight

 - 저는 화면에서 우하단에 버튼을 위치시키기 위해서 위와 같이 사용했는데 다른 layout 속성을 이용해서 본인이 원하는 위치로 이동이 가능합니다.

 

layout_marginBottom, layout_marginRight

 - 버튼이 우하단 끝에서 살짝 떨어져 보이게 하기 위해 margin값을 추가하였습니다. 보기 편하시도록 숫자를 바로 썼으나 실제 개발하실 때는 dimens.xml 에 넣어놓고 하시는 게 편하겠죠.

 

android:text

 - 사용하고자 하는 텍스트를 입력. 이 설정 값이 기존 FloatingActionButton에는 없던 값이죠.

(이것도 strings.xml에 넣고 이용하시면 되겠죠.)

 

app:icon

 - 여기에 이미지를 넣어주시면 됩니다.

 

android:theme

 - ExtendedFloatingActionButton을 사용하기 위해 꼭 필요한 값입니다. theme값이 제대로 입력되지 않으면 ExtendedFloatingActionButton이 정상적으로 출력되지 않습니다. 아래에 코드가 있으니 참고해주세요.

 

* 추가로 몇가지 더 말씀을 드리면..

 

app:backgroundTint

 - 버튼 전체의 색을 변경할 수 있습니다.

 

android:textColor

 - 텍스트 색을 변경할 때 이용하면 됩니다.

 

app:iconTint

 - 이미지의 색을 변경할 때 사용

 

android:alpha

 - 버튼의 투명도를 조절할 때 이용하시면 됩니다.

 

나머지 설정 값들은 안드로이드 개발자 사이트를 참고해 주세요!

 

4. styles.xml에 theme 적용

styles.xml

<style name="MaterialTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="android:windowContentOverlay">@null</item>
    </style>

ExtendedFloatingActionButton을 이용하기 위해서 Material 테마를 적용을 해야 합니다. 저는 위와 같이 적용을 하였구요. 컬러 값들은 원하시는 대로 사용을 하시면 되겠네요.(저 컬러 값들은 colors.xml에 정의되어 있습니다.)

이렇게 적용을 하면 화면에서 ExtendedFloatingActionButton을 만나실 수 있을거에요!

 

5. MainActivity에서 사용

MainActivity.java

ExtendedFloatingActionButton fab = (ExtendedFloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                // to do
            }
        });

클릭을 받았을 때 동작은 MainActivity에서 적용을 해주시면 됩니다.

---

 

간단하게 ExtendedFloatingActionButton 사용법에 대해서 알아보았습니다. FAB를 쓰고 싶은데 글자도 같이 보여주고 싶으시다면 ExtendedFloatingActionButton을 활용해 보세요:)

 

이번 포스팅은 이만 마무리하겠습니다. 오늘도 행복한 시간 보내세요:)