[안드로이드] 플로팅액션버튼(FloatingActionButton)에 카운터(Counter) 기능 쉽게 넣는 방법

이번 시간에는 플로팅액션버튼(FloatingActionButton)에

카운터 기능 쉽게 넣는 방법에 대하여 알아보겠습니다.

---

목차

1. 실행 화면

2. 라이브러리 등록

3. 메인 화면 구성 activity_main.xml

4. 메인 코드 구현 MainActivity.java

---

1. 실행 화면

 

2. 라이브러리 등록

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

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

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

참조 문서

https://github.com/andremion/CounterFab

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

 

 

3. 메인 화면 구성 activity_main.xml

 - 속성 -

 badgeBackgroundColor

 - 배지 배경 색상

 badgePosition

 - 배지 위치(LeftTop, RightTop, LeftBottom, RightBottom)

 badgeTextColor

 - 배지 텍스트 색상

<?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/black"
        android:src="@drawable/ic_add"
        app:badgeBackgroundColor="@color/pink_200"
        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>

색상 res -> values -> colors.xml

<color name="black">#FF000000</color>
<color name="white">#FFFFFFFF</color>
<color name="pink_200">#F48FB1</color>

 아이콘 res -> drawable

ic_remove.xml

0.00MB

ic_add.xml

0.00MB

 

4. 메인 코드 구현 MainActivity.java

 - 설명 -

 1. 증가 상태 변수를 만든다.

 2. 스위치 버튼을 통해 증가 상태

 변수의 값과 counterFAB 이미지를 변경한다.

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

 4. counterFAB는 증가 상태 변수의 값에 따라

 증가할지, 하락할지를 결정한다.

public class MainActivity extends AppCompatActivity {

    boolean increase = true; //증가 상태

    SwitchCompat changeSwitch;

    CounterFab counterFab;

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

        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

} //MainActivity

2022.02.13 - [안드로이드] - [안드로이드] 가로형(Horizontal) 달력(Calendar) 쉽게 만드는 방법

[안드로이드] 가로형(Horizontal) 달력(Calendar) 쉽게 만드는 방법

2022.02.12 - [안드로이드] - [안드로이드] 그라데이션(Gradation) 애니메이션(Animation) 효과 쉽게 주는 방법

[안드로이드] 그라데이션(Gradation) 애니메이션(Animation) 효과 쉽게 주는 방법

2022.02.11 - [안드로이드] - [안드로이드] View(뷰) 애니메이션(Animation) 쉽게 적용하는 방법

[안드로이드] View(뷰) 애니메이션(Animation) 쉽게 적용하는 방법