[Android] [당근마켓 클론 코딩] 메인페이지 구현3 - 커스텀 Floating Button (RecyclerView/ AlphaAnimation)

✏️ TIL(Today I Learned)

커스텀한 플로팅 버튼을 누르면 스크롤이 최상단으로 이동되도록 했다.

fade 효과를 넣어, 버튼이 나타나고 사라지는 것을 자연스럽게 만들었다.

 

// activity_main.xml

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/btn_floating"
    style="@style/floatingButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginEnd="@dimen/floatingButton_margin"
    android:layout_marginBottom="@dimen/floatingButton_margin"
    android:src="@drawable/ic_arrow_up"
    android:adjustViewBounds="true"
    android:clickable="true"
    android:visibility="invisible"
    app:rippleColor="@drawable/selector_btn_floating"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent" />

 

Floating Button은 원하는대로 커스텀하려면 style을 적용하면된다.

RoundedShapeAppearanceOverlay를 사용해 원형으로 모양을 바꿨고,

backgroundTint로 버튼의 색상을, tint로 버튼안의 이미지의 색상을 적용해줬다.

<style name="floatingButton" parent="Widget.MaterialComponents.FloatingActionButton">
    <item name="backgroundTint">@color/main</item>
    <item name="tint">@color/white</item>
    <item name="shapeAppearanceOverlay">@style/RoundedShapeAppearanceOverlay</item>
</style>
<style name="RoundedShapeAppearanceOverlay" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">50%</item>
</style>

 

클릭시 색 변화가 생기도록 했는데, selector_btn_floating.xml을 사용했다.

 

이를 app:rippleColor 속성에 넣어줬는데,

rippleColor는 버튼이 클릭되거나 터치될 때, 버튼 주변에 나타나는 애니메이션 효과의 색상을 지정한다.

 

평소처럼 app:background 속성을 사용하면 아래와 같이 적용이 되지 않으므로 주의해야한다.

app:background   /   app:rippleColor 

 

그리고, MainActivity는 아래와 같이 만들었다.

// 플로팅 버튼 클릭 시, 리사이클러뷰의 첫번째(0)아이템으로 이동
binding.btnFloating.setOnClickListener {
    binding.recyclerView.smoothScrollToPosition(0)
}

// 플로팅 버튼 fade 효과 & visibility 설정
val fadeIn = AlphaAnimation(0f, 1f).apply { duration = 600 }
val fadeOut = AlphaAnimation(1f, 0f).apply { duration = 400 }
var isTop = true

binding.recyclerView.addOnScrollListener(object: RecyclerView.OnScrollListener() {
    override fun onScrollStateChanged(recyclerView: RecyclerView, newState: Int) {
        super.onScrollStateChanged(recyclerView, newState)
        if(!binding.recyclerView.canScrollVertically(-1) && newState == RecyclerView.SCROLL_STATE_IDLE) {
            binding.btnFloating.startAnimation(fadeOut)
            binding.btnFloating.visibility = View.GONE
            isTop = true
        } else if(isTop) {
            binding.btnFloating.visibility = View.VISIBLE
            binding.btnFloating.startAnimation(fadeIn)
            isTop = false
        }
    }
})