[안드로이드] Material Floating Action Button Animation 적용하는 방법

이번 시간에는 material floating action button에 animation 적용하는

방법을 알아보겠습니다.

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. 애니메이션 만들기 

Resource Manager -> +  -> Animation Resource File

 

파일명은 rotate_open_anim, rotate_close_anim, from_bottom_anim, to_bottom_anim

4개의 애니메이션을 만들 것입니다.

하나 만들고 복사 붙여 넣기 하고 파일명만 바꾸시면 금방 만드실 수 있습니다.

 

rotate_open_anim

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true">
    <rotate
        android:fromDegrees="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toDegrees="45"
        android:duration="300"/>
</set>

 

rotate_close_anim

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true">
    <rotate
        android:fromDegrees="45"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toDegrees="0"
        android:duration="300"/>
</set>

 

from_bottom_anim

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true">

    <translate
        android:duration="300"
        android:fromXDelta="100%"
        android:toXDelta="0%" />

    <scale
        android:pivotY="50%"
        android:pivotX="50%"
        android:toXScale="0.8"
        android:toYScale="0.8"/>

    <alpha
        android:duration="800"
        android:fromAlpha="0"
        android:toAlpha="1"/>
</set>

 

to_bottom_anim

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true">
    <translate
        android:duration="300"
        android:fromXDelta="0%"
        android:toXDelta="100%" />

    <scale
        android:pivotY="50%"
        android:pivotX="50%"
        android:fromYScale="0.8"
        android:fromXScale="0.8"
        android:toXScale="0.8"
        android:toYScale="0.8"/>

    <alpha
        android:duration="150"
        android:fromAlpha="1"
        android:toAlpha="0"/>
</set>

 

 

4. 메인화면 구성 (activity_main.xml)

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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">


    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fb_add_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="16dp"
        android:layout_marginBottom="24dp"
        android:clickable="true"
        android:focusable="true"
        android:backgroundTint="@color/white"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:srcCompat="@drawable/ic_add" />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fb_edit_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="16dp"
        android:clickable="true"
        android:focusable="true"
        android:visibility="invisible"
        android:backgroundTint="@color/white"
        app:layout_constraintBottom_toTopOf="@+id/fb_add_btn"
        app:layout_constraintEnd_toEndOf="@+id/fb_add_btn"
        app:srcCompat="@drawable/ic_edit" />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fb_image_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="16dp"
        android:clickable="true"
        android:focusable="true"
        android:visibility="invisible"
        android:backgroundTint="@color/white"
        app:layout_constraintBottom_toTopOf="@+id/fb_edit_btn"
        app:layout_constraintEnd_toEndOf="@+id/fb_edit_btn"
        app:srcCompat="@drawable/ic_image" />
</androidx.constraintlayout.widget.ConstraintLayout>

색상 res -> values -> colors.xml

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

아이콘 res -> drawable

ic_add.xml

0.00MB

ic_edit.xml

0.00MB

ic_image.xml

0.00MB

5. 메인코드 기능구현 (MainActivity.java)

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


public class MainActivity extends AppCompatActivity {

    private Animation rotateOpen;
    private Animation rotateClose;
    private Animation fromBottom;
    private Animation toBottom;

    FloatingActionButton fb_add_btn;
    FloatingActionButton fb_edit_btn;
    FloatingActionButton fb_image_btn;

    private boolean clicked = false;

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


        rotateOpen = AnimationUtils.loadAnimation(this, R.anim.rotate_open_anim);
        rotateClose = AnimationUtils.loadAnimation(this, R.anim.rotate_close_anim);
        fromBottom = AnimationUtils.loadAnimation(this, R.anim.from_bottom_anim);
        toBottom = AnimationUtils.loadAnimation(this, R.anim.to_bottom_anim);


        //추가 버튼
        fb_add_btn = findViewById(R.id.fb_add_btn);
        fb_add_btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                onAddButtonClicked();
            }
        });

        //쓰기 버튼
        fb_edit_btn = findViewById(R.id.fb_edit_btn);
        fb_edit_btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(getApplicationContext(), "edit btn clicked", Toast.LENGTH_SHORT).show();
            }
        });

        //이미지 버튼
       fb_image_btn = findViewById(R.id.fb_image_btn);
        fb_image_btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(getApplicationContext(), "image btn clicked", Toast.LENGTH_SHORT).show();
            }
        });
    }

    /**
     * 클릭 이벤트
     */
    private void onAddButtonClicked() {
        setVisibility(clicked);
        setAnimation(clicked);
        clicked = !clicked;
    }


    /**
     * 보여짐 사라짐
     * @param clicked 클릭여부
     */
    private void setVisibility(boolean clicked) {
        
        if(!clicked){ //보여진다
            fb_edit_btn.setVisibility(fb_add_btn.VISIBLE);
            fb_image_btn.setVisibility(fb_image_btn.VISIBLE);
            
        }else{ //숨긴다
            fb_edit_btn.setVisibility(fb_add_btn.INVISIBLE);
            fb_image_btn.setVisibility(fb_image_btn.INVISIBLE);
        }
    }

    /**
     * 애니메이션 효과
     * @param clicked 클릭여부
     */
    private void setAnimation(boolean clicked) {

        if(!clicked){
            fb_edit_btn.startAnimation(fromBottom);
            fb_image_btn.startAnimation(fromBottom);
            fb_add_btn.startAnimation(rotateOpen);

        }else{
            fb_edit_btn.startAnimation(toBottom);
            fb_image_btn.startAnimation(toBottom);
            fb_add_btn.startAnimation(rotateClose);
        }
    }
}

 

6 실행화면

 

 

2021.12.20 - [안드로이드] - [안드로이드] material floating action button 쉽게 만드는 방법

[안드로이드] material floating action button 쉽게 만드는 방법

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

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

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

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