[Android][Java] FloatingActionButton에 카운터 기능 추가하기

안녕하세요.

오늘은

https://github.com/andremion/CounterFab

GitHub - andremion/CounterFab: A FloatingActionButton subclass that shows a counter badge on right top corner

위 링크의 CounterFab 라이브러리를 사용해 간단하게 FloatingActionButton에 카운터 기능을 추가해보겠습니다.

 

먼저 gradle에 라이브러리를 등록해줍니다.

 

build.gradle(Module:프로젝트명:app)
dependencies 괄호 안에 아래 코드를 넣어주세요.

implementation 'com.github.andremion:counterfab:1.2.2'

 

다음으로 레이아웃(xml 파일) 입니다.

 

counter_fab.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">

    <com.andremion.counterfab.CounterFab
        android:id="@+id/counter_fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_alignParentBottom="true"
        android:layout_marginEnd="16dp"
        android:layout_marginBottom="20dp"
        android:backgroundTint="@color/design_default_color_primary"
        android:src="@drawable/ic_add"
        app:badgePosition="LeftTop"
        app:badgeTextColor="@color/white" />

    <androidx.appcompat.widget.SwitchCompat
        android:id="@+id/change_switch"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="상승"
        android:textSize="25sp" />

</RelativeLayout>

ic_add.xml

0.00MB

ic_remove.xml

0.00MB

위 xml 파일을 다운로드 받아 res->drawable 폴더에 넣은 후에 진행해주세요.

 

우측 하단에 FloatingActionButton이 있고, 화면의 가운데에는 카운터를 상승/하락 상태로 변경할 수 있는 스위치를 만들었습니다.

 

다음으로 자바 파일입니다.

 

CounterFabActivity.java

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

import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.SwitchCompat;

import com.andremion.counterfab.CounterFab;

public class CounterFabActivity extends AppCompatActivity {

    boolean increase = true; //증가 상태

    SwitchCompat changeSwitch;

    CounterFab counterFab;

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

        counterFab =  findViewById(R.id.counter_fab);
        counterFab.setCount(0); //기본설정

        counterFab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

                if(increase){
                    counterFab.increase();//상승
                }else{
                    counterFab.decrease();//하락
                }
            }
        });

        //스위치버튼 이벤트
        changeSwitch = findViewById(R.id.change_switch);
        changeSwitch.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton compoundButton, boolean isChecked) {

                if(isChecked){
                    increase = false;
                    changeSwitch.setText("하락");
                    counterFab.setImageDrawable(getDrawable(R.drawable.ic_remove));
                }else{
                    increase = true;
                    changeSwitch.setText("상승");
                    counterFab.setImageDrawable(getDrawable(R.drawable.ic_add));
                }
            }
        });
    }//onCreate

} //CounterFabActivity

코드의 흐름은 다음과 같습니다.

 1. 증가 상태 변수 생성

 2. 스위치 버튼을 통해 증가 상태 변수의 값과 counterFAB 이미지 변경

 3. 기본값은 true(증가), 반대는 false(하락)

 4. counterFAB는 증가 상태 변수의 값에 따라 증가할지, 하락할지 결정

 

실행화면 입니다.

 

오늘 준비한 내용은 여기까지 입니다.

궁금한 점은 언제든 댓글로 남겨주세요.

감사합니다!