Android Floating Action Button 사용하기

안녕하세요 오늘은 안드로이드에서 자주 ? 사용하는 Floating Action Button에 대해 설명하도록 하겠습니다. 

 

보통 플로팅 액션 버튼은 예전 카카오톡이나 , 지도 등에 많이 사용 하고 있습니다. 

 

 

 

 

 

지도에서는 보통 현재 카메라를 현재 위치로 이동시킬때 주로 사용되는데요 빈 액티비티에 연결시켜서 사용해보도록 하겠습니다. 

 

1. FloatingActionButton 이라는 프로젝트를 하나 생성하도록 하겠습니다.

 

2. Gradle Scripts - build.gradle(Module: app)에 

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

추가를 해주셔야 ActionButton 사용가능합니다. 

 

3. 그 이후에 activity_main.xml 에서 floating을 치시면 

 

 

이런 문구를 확인하실 수 있습니다. 

 

    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

 

간단한 설정을 해주고 Design에 가서 확인을 해보도록 하겠습니다. 

 

 

이런식으로 상단에 플로팅 액션버튼이 추가된 것을 확인 하실 수 있습니다. 하지만 저희가 생각했던 그런 이미지와는 조금 다르기 때문에 

이제부터 속성을 넣어서 원래 사용하는 버튼으로 만들어 보도록 하겠습니다. 

 

 

 

<FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"> 
 
        <android.support.design.widget.FloatingActionButton
            android:id="@+id/Floating1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|right"
            android:src="@drawable/ic_near_me"
            app:backgroundTint="@color/design_default_color_primary"/> 
    </FrameLayout>

 

4. 버튼 클릭을 사용할 수 있도록 id 지정을 해주시고 

 

여기서 제가 사용한 이미지는 

https://romannurik.github.io/AndroidAssetStudio/index.html

이쪽에서 주로 아이콘 이미지를 가져와서 사용합니다 !! 

 

버튼을 하나더 만들어서 배치해 보겠습니다. 

 

<?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"
    tools:context=".MainActivity">
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
 
        <android.support.design.widget.FloatingActionButton
            android:id="@+id/Floating1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|right"
            android:src="@android:drawable/ic_dialog_map"
            app:backgroundTint="@color/design_default_color_primary"
            android:layout_marginBottom="70dp"/>
 
        <android.support.design.widget.FloatingActionButton
            android:id="@+id/Floating2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|right"
            android:src="@drawable/ic_near_me"
            app:backgroundTint="@color/design_default_color_primary"
            android:layout_marginBottom="10dp"/>
        
    </FrameLayout>
</LinearLayout>

 

android: src -  이미지 배경을 집어넣을때 주로 사용합니다. (기본아이콘은 @android:drawable/ic_로 사용하시면 됩니다.)

app:backgroundTint - 플로팅 버튼의 배경 색을 조절할 때 사용합니다. 

 

구현 화면입니다. 

 

 

위의 xml 처럼 구현하셨다면 이런식으로 우측 하단에 버튼이 이쁘게 만들어진 것을 확인할 수 있습니다. 

이제 Acitivty에 직접적인 기능을 구현해보도록 하겠습니다. 

 

오늘 구현할 기능은 버튼 intent 와 snackbar을 구현해보도록 하겠습니다. 

 

public void flo_btn(View v){
    Intent intent = new Intent(getApplicationContext(), Main2Activity.class);
    startActivity(intent);
}

이런식으로 위의 플로팅 버튼을 눌렀을 때 화면이 전환되는 기능을 구현하였습니다. 

 

Main2Activity를 하나 생성하시고 테스트 해보시면 됩니다 ! 

 

 

 

Snackbar를 이용한 이벤트 입니다. 

 

public void flo_btn2(View v){
Snackbar.make(v,"플로팅 버튼 클릭 이벤트" , Snackbar.LENGTH_LONG)
.setAction("Action", new View.OnClickListener() {
@Override
public void onClick(View v) {
Intent intent = new Intent(getApplicationContext(), Main2Activity.class);
startActivity(intent);
}
}).show();
}

이렇게 구현하시면 플로팅 버튼을 클릭시에 Snackbar가 나오는 모습을 확인하실 수 있습니다. 

구현 사진입니다. 

아래 ACTION 텍스트를 클릭하시면 Main2Activity로 이동하는 모습도 확인할 수 있습니다. 

 

 

오늘 포스팅은 여기까지입니다. 질문이나 필요하신 사항이 있으시면 댓글에 남겨주시면 감사하겠습니다. 

다음번에는 이런 플로팅버튼을 이용하여 Fragment에서 MapView를 사용하고 현재위치를 받아서 플로팅 액션버튼에 그 기능을 넣어보도록 하겠습니다. 

봐주셔서 감사합니다. ~