[Android, Custom Snackbar] 커스텀 스낵바 만들기

안녕하세요. 블랙진입니다.

지난 포스팅에 이어 스낵바를 커스텀 마이징 하는 법을 확인해보겠습니다.

Custom Dialog Fragment 만들기 

Custom Toast 만들기 

Custom SnackBar 만들기 (현재)

스낵바

토스트와 마찬가지로 화면에 자동으로 보였다가 사라지는 팝업입니다. 하지만 윈도우의 최상단이 아닌 부모 뷰에 보여지기 때문에 화면 전환이 이뤄지면 사라지게 됩니다.

토스트 보다 다양한 기능을 사용할 수 있는데요.

사용법은 아래와 같습니다.

Snackbar.make(container,  "Welcome to blackjin Tistory", 3000)

make 함수를 살펴보겠습니다.

public static Snackbar make(
    @NonNull View view, @NonNull CharSequence text, @Duration int duration)

make 함수는 3가지 파라미터를 가지고 있습니다.

1. View

첫 번째 파라비터로 View를 받아 아래와 같이 do, while문을 돌려 부모뷰를 찾아서 동작됩니다.

private static ViewGroup findSuitableParent(View view) {
  ViewGroup fallback = null;
  do {
    // find parent view
  } while (view != null);

  // If we reach here then we didn't find a CoL or a suitable content view so we'll fallback
  return fallback;
}

그래서 해당 파라미터에는 화면에 보이는 아무 뷰만 입력해도 잘 동작 되지만 그래도 parent view를 입력해 주면 더 좋겠죠?

2 .text

두 번째 파라미터는 스낵바에 보여줄 text 입니다.

3. duration

세 번째 파라미터인 duration에서는 화면에 보여지는 시간을 정합니다. 

토스트의 경우 Short, Long 두 가지만 보여줄 수 있는것에 비해 스낵바에서는 더욱 넓게 선택할 수 가 있네요!

버튼 기능 추가 하기

토스트에서는 버튼을 사용할 수 없지만 스낵바에서는버튼을 추가할 수 있습니다.

val snackbar = Snackbar.make(container,  "Welcome to blackjin Tistory", 10000)
snackbar.setAction("ok", object : View.OnClickListener {
    override fun onClick(v: View?) {
        //do something..
    }
})
snackbar.show()

코드는 위와 같습니다.

Custom SnackBar 만들기

직접 레이아웃을 입힌 스낵바를 만들어 보겠습니다. 먼저 구현 결과물은 아래와 같습니다.

1. layout 만들기 (snackbar_sample.xml)

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <androidx.cardview.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:cardBackgroundColor="#2B353E"
        app:cardCornerRadius="12dp"
        app:cardElevation="3dp">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:paddingStart="16dp"
            android:paddingEnd="16dp">

            <TextView
                android:id="@+id/tvSample"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginEnd="20dp"
                android:text="Hello World!"
                android:textColor="@android:color/white"
                android:textSize="15dp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@mipmap/ic_launcher"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toStartOf="@id/btnSample"
                app:layout_constraintTop_toTopOf="parent" />

            <Button
                android:id="@+id/btnSample"
                android:layout_width="60dp"
                android:layout_height="40dp"
                android:text="GO"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintTop_toTopOf="parent" />
        </androidx.constraintlayout.widget.ConstraintLayout>
    </androidx.cardview.widget.CardView>
</layout>

2. 공용으로 사용할 SampleSnackBar object 만들기

class SampleSnackBar(view: View, private val message: String) {

    companion object {

        fun make(view: View, message: String) = SampleSnackBar(view, message)
    }

    private val context = view.context
    private val snackbar = Snackbar.make(view, "", 5000)
    private val snackbarLayout = snackbar.view as Snackbar.SnackbarLayout

    private val inflater = LayoutInflater.from(context)
    private val snackbarBinding: SnackbarSampleBinding = DataBindingUtil.inflate(inflater, R.layout.snackbar_sample, null, false)

    init {
        initView()
        initData()
    }

    private fun initView() {
        with(snackbarLayout) {
            removeAllViews()
            setPadding(0, 0, 0, 0)
            setBackgroundColor(ContextCompat.getColor(context, android.R.color.transparent))
            addView(snackbarBinding.root, 0)
        }
    }

    private fun initData() {
        snackbarBinding.tvSample.text = message
        snackbarBinding.btnSample.setOnClickListener {
            // do something..
        }
    }

    fun show() {
        snackbar.show()
    }
}

3. 사용하기

SampleSnackBar.make(container, "Welcome to blackjin Tistory").show()