[Android] SnackBar Custom Layout

스낵바를 이용하다 보면 텍스트와 버튼으로 이루어진 레이아웃이 아닌 다른 형식의 레이아웃을 이용하고 싶을 때가 있다.

 

이미지, 텍스트, 버튼으로 이루어진 커스텀 레이아웃을 적용하는 방법은 다음과 같다.

 

예시 코드

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        findViewById<Button>(R.id.btn_short).setOnClickListener {
            createSnackBar("message_short", Snackbar.LENGTH_SHORT).show()
        }

        findViewById<Button>(R.id.btn_long).setOnClickListener {
            createSnackBar("message_long", Snackbar.LENGTH_LONG).show()
        }

        findViewById<Button>(R.id.btn_indefinite).setOnClickListener {
            createSnackBar("message_indefinite", Snackbar.LENGTH_INDEFINITE).setAction("Check") {
                createSnackBar("Click Event", Snackbar.LENGTH_SHORT).apply {
                    setCustomLayout()
                }.show()
            }.show()
        }
    }

    private fun createSnackBar(message: String, duration: Int): Snackbar {
        return Snackbar.make(findViewById(R.id.root_const), message, duration)
    }

    private fun Snackbar.setCustomLayout() {
        val customLayout = layoutInflater.inflate(R.layout.custom_snackbar, null)

        val snackBarLayout = this.view as Snackbar.SnackbarLayout
        snackBarLayout.apply {
            setPadding(0, 0, 0, 0)
            addView(customLayout)
        }
    }

}

 

Xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <ImageView
        android:id="@+id/iv_content"
        android:layout_width="0dp"
        android:src="@drawable/ic_launcher_background"
        android:layout_height="match_parent"
        app:layout_constraintWidth_percent="0.2"
        app:layout_constraintLeft_toLeftOf="parent"/>

    <TextView
        android:id="@+id/tv_content"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:textColor="@color/white"
        android:text="커스텀 스낵바입니다."
        android:textStyle="bold"
        android:gravity="center"
        app:layout_constraintWidth_percent="0.6"
        app:layout_constraintLeft_toRightOf="@id/iv_content"
        app:layout_constraintRight_toLeftOf="@id/btn_action"/>

    <Button
        android:id="@+id/btn_action"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        app:layout_constraintLeft_toRightOf="@id/tv_content"
        app:layout_constraintRight_toRightOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

 

 

예시 화면