본문 바로가기
안드로이드 코틀린

[Kotlin][Android] 안드로이드 - 스낵바(snackbar)

by teamnova 2021. 5. 10.

안녕하세요.~

 

이번시간에는 안드로이드 코틀린으로 스낵바를 만들어보겠습니다.

 

스틱코드 (stickode.com/mainlogin.html)

이번에도 역시 빠르게 만들기 위해 스틱코드 플러그인을 사용해서 만들어보겠습니다.

 

스틱코드는 자주쓰는 코드를 저장해서 쉽고 빠르게 사용할 수 있고,

다른사람들의 코드도 즐겨찾기를 통해 쉽게 내코드로 등록하여 사용할 수 있어 사용하는 사람이 늘어나고, 

좋은 코드가 쌓일수록 강력해지는 플러그인 입니다.

 

프로젝트 생성

새로운 프로젝트를 생성 했고,

XML 파일 설정 (레이아웃)

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    android:id="@+id/const_layout"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/snackbar_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:backgroundTint="@color/purple_200"
        android:text="스낵바"
        android:textColor="@color/black"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/snackbar_btn2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:backgroundTint="@color/purple_200"
        android:text="스낵바2"
        android:textColor="@color/black"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/snackbar_btn" />




</androidx.constraintlayout.widget.ConstraintLayout>

스낵바를 호출하기위한 버튼두개를 생성해줍니다.

 

메인 액티비티 셋팅

 

스낵바를 호출하기위한 버튼 설정을 해주도록 하겠습니다.

 

뷰를 선언하고, 클릭 리스너를 추가합니다.

class MainActivity : AppCompatActivity() {


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

        var const_layout = findViewById<ConstraintLayout>(R.id.const_layout)
        var snackbar_btn = findViewById<Button>(R.id.snackbar_btn)
        var snackbar_btn2 = findViewById<Button>(R.id.snackbar_btn2)

        snackbar_btn.setOnClickListener {


        }
        snackbar_btn2.setOnClickListener {

        }

    }
}

 

스틱코드를 사용하여 스낵바 코드를 완성해보겠습니다.

 

 

스틱코드를 통해 완성된 코드를 확인 할 수 있습니다.

이제 준비가 완료되었습니다. 

 

mainActivity 전문입니다.

package com.example.examplesnackbar

import android.graphics.Color
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button
import androidx.constraintlayout.widget.ConstraintLayout
import com.google.android.material.snackbar.Snackbar

class MainActivity : AppCompatActivity() {


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

        var const_layout = findViewById<ConstraintLayout>(R.id.const_layout)
        var snackbar_btn = findViewById<Button>(R.id.snackbar_btn)
        var snackbar_btn2 = findViewById<Button>(R.id.snackbar_btn2)

        snackbar_btn.setOnClickListener {
            var snackbar = Snackbar.make(const_layout, "기본 스낵바 메시지 입니다.", Snackbar.LENGTH_LONG)
            snackbar.show()

        }
        snackbar_btn2.setOnClickListener {
            var snackbar1 = Snackbar.make(const_layout, "스낵바 메시지 입니다." , Snackbar.LENGTH_LONG)
                .setAction("확인", {
                    var snackbar2 = Snackbar.make(const_layout, "확인 스낵바 메시지 입니다.", Snackbar.LENGTH_LONG)
                    snackbar2.show()
                })
            snackbar1.show()
        }

    }
}




 

두개의 스낵바를 보여드리면서 마치도록 하겠습니다.

 

잘동작하네요~

 

이렇게 스틱코드를 사용해 스낵바를 구현해보았습니다.

 

 

이 예제에서 사용된 스틱코드

출처 : stickode.com/detail.html?no=2108 - 코틀린 스낵바 (SnackBar) 만들기

 

감사합니다.