[안드로이드] Material Floating Action Button 쉽게 만드는 방법

이번 시간에는 material floating action button에 대해서 알아보겠습니다.

floating action button의 종류에는

1. 기본형(Regular), 2. 소형(Mini), 3. 확장형(Extended)이 있습니다.

 

이제 만들어보겠습니다. 

 

1. 라이브러리 등록

build.gradle(Module:프로젝트명:app)

dependencies 괄호 안에 아래 코드를 넣어주시면 됩니다.

  implementation 'com.google.android.material:material:1.4.0'

 

2. 테마 수정 themes.xml

( res -> value -> themes)

style 태그 속성 parent를 아래 코드로 변경해주시면 됩니다.

<style name="Theme.MaterialExam" parent="Theme.MaterialComponents.Light.DarkActionBar">

 

3. 메인화면 구성 activity_main.xml

 3-1 기본형(Regular)

<?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"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <!-- Regular FAB -->
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/floatingbtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|right"
        android:layout_margin="16dp"
        android:contentDescription="fab_contrent_desc"
        android:text="extended_fab_label"
        app:backgroundTint="@color/white"
        app:rippleColor="@color/pink500"
        app:srcCompat="@drawable/ic_add" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

 

 3-2 소형(Mini)

  fabSize를 통해서 크기를 소형으로 바꿔줍니다.

<?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"
    android:orientation="vertical"
    tools:context=".MainActivity">


    <!-- Mini FAB -->
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/floatingbtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|right"
        android:layout_margin="16dp"
        android:contentDescription="fab_contrent_desc"
        app:backgroundTint="@color/white"
        app:fabSize="mini"
        app:rippleColor="@color/pink500"
        app:srcCompat="@drawable/ic_add" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

 

 3-3 확장형(Extended)

  태그를 ExtendedFloatingActionButton으로 만듭니다.

<?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"
    android:orientation="vertical"
    tools:context=".MainActivity">


    <!-- Extended  Fab -->
    <com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
        android:id="@+id/floatingbtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|right"
        android:layout_margin="16dp"
        android:contentDescription="fab_contrent_desc"
        android:text="extended_fab_label"
        app:backgroundTint="@color/white"
        app:icon="@drawable/ic_add"
        app:rippleColor="@color/pink500" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

색상 res -> values -> colors.xml

<color name="white">#FFFFFFFF</color>
<color name="pink500">#E91E63</color>

아이콘 res -> drawable

ic_add.xml

0.00MB

 

 

4. 메인코드 기능 구현 MainActivity.java

 4-1 기본형, 소형

import android.os.Bundle;
import android.view.View;
import android.widget.Toast;
import androidx.appcompat.app.AppCompatActivity;
import com.google.android.material.floatingactionbutton.FloatingActionButton;


public class MainActivity extends AppCompatActivity {
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        FloatingActionButton fb = findViewById(R.id.floatbtn);
        fb.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(getApplicationContext(), "FloatingBtn 클릭", Toast.LENGTH_SHORT).show();
            }
        });
    }
}

 

 

4-2 확장형

import android.os.Bundle;
import android.view.View;
import android.widget.Toast;

import androidx.appcompat.app.AppCompatActivity;
import com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton;


public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        ExtendedFloatingActionButton fb = findViewById(R.id.floatingbtn);
        fb.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(getApplicationContext(), "FloatBtn 클릭", Toast.LENGTH_SHORT).show();
            }
        });
    }
}

 

5. 실행화면

5-1 기본형

5-2 소형

5-3 확장형

 

2021.12.18 - [안드로이드] - [안드로이드] Material app bars bottom 쉽게 만드는 방법

[안드로이드] Material app bars bottom 쉽게 만드는 방법

2021.12.19 - [안드로이드] - [안드로이드] Material app bars top 쉽게 만드는 방법

[안드로이드] Material app bars top 쉽게 만드는 방법

 

2021.12.16 - [안드로이드] - [안드로이드] Material tabs [Fixed tabs, Scrollable tabs] 쉽게 만드는 방법

[안드로이드] Material tabs [Fixed tabs, Scrollable tabs] 쉽게 만드는 방법