본문 바로가기
안드로이드/Material-Design

Android Material Design 따라하기 8 - 스낵바 & 토스트(SnackBar &Toast)

by 프로나인 2020. 11. 1.

안녕하세요 프로나인 입니다.

요즘 제 블로그에 조회수가 조금 나고 있어서 기분이 좋네요 😁

신기하기도 하고, 앞으로 더 열심히 쓰고 싶다는 욕심도 생기는데 시간적 여유가... 😂

 

이번에는 많이들 알고 계시는 Toast메시지의 상위(?) 버전인 SnackBars를 알려드리고자 합니다!


메뉴 추가( layout , class )

❗️SnackBars의 정보만 얻고자 하시는 분은 조금만 밑으로 내려 Snack 부분을 봐주세요! 

 

koohee.tistory.com/17

 

Android Material Design 따라하기 6 - BottomNavigation

안녕하세요 프로나인입니다. 내일부터 길다면 길고 짧다면 짧은 추석 명절이 시작되는데요. 코로나 조심하시고 명절도 잘 보내시길 바랍니다! 😄 koohee.tistory.com/16 Android Material Design 따라하기 5

koohee.tistory.com

위에 게시글을 참조하시고 

<MunuList> 메뉴 리스트에 "Snackbars"를 추가해주세요

MenuList = new ArrayList();
MenuList.add("BottomNavigation");
MenuList.add("Snackbars");
MenuList.add("메뉴 3번가");
MenuList.add("메뉴 4번가");
MenuList.add("메뉴 5번가");
MenuList.add("메뉴 6번가");
MenuList.add("메뉴 7번가");
MenuList.add("메뉴 8번가");
MenuList.add("메뉴 9번가");
MenuList.add("메뉴 10번가");
MenuList.add("메뉴 11번가");
MenuList.add("메뉴 12번가");
MenuList.add("메뉴 13번가");
MenuList.add("메뉴 14번가");
MenuList.add("메뉴 15번가");
MenuList.add("메뉴 16번가");

intentmenu 메서드의 swich 문에 아래 case를 추가해주세요!

case "Snackbars" :
	Intent intent_snackbars = new Intent(MenuActivity.this, Menu_Snackbars.class);
	startActivity(intent_snackbars);
	break;

 

그리고 < snackbars.xml > layout을 추가해주세요!

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/btn_snack"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="스낵바"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/btn_toast"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/btn_toast"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="토스트"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/btn_snack"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />


</androidx.constraintlayout.widget.ConstraintLayout>

 

<Menu_Snackbars>의 클래스를 만들어주시고 꼭! Manifests에 activity를 추가해주셔야 합니다!!!

package 패키지명;

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;

import androidx.annotation.Nullable;
import androidx.appcompat.app.AppCompatActivity;

import com.google.android.material.snackbar.Snackbar;

public class Menu_Snackbars extends AppCompatActivity {
    private Button btn_toast, btn_snack;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.snackbars);
        btn_toast = (Button) findViewById(R.id.btn_toast);
        btn_snack = (Button) findViewById(R.id.btn_snack);
    }
}

SnackBar

스낵바를 만드는 방법은 상당히 간결합니다! 물론 커스텀을 하게 된다면 조금(?) 복잡할 수도 있고요!

btn_toast.setOnClickListener(new View.OnClickListener() {
	@Override
	public void onClick(View view) {
	Toast.makeText(Menu_Snackbars.this,"Toast메세지",Toast.LENGTH_SHORT).show();
	}
});

btn_snack.setOnClickListener(new View.OnClickListener() {
	@Override
	public void onClick(View view) {
	Snackbar.make(view,"SnackBars",Snackbar.LENGTH_SHORT).show();
	}
});

Toast 메시지와 Snackbar의 구성 코드는 상당히 비슷합니다.

이 둘의 차이점으로는 아래 표처럼 Context를 사용하냐 View를 사용하냐입니다.

타입 Toast Snackbar
요구 Context View

결과

결과처럼 Toast와 Snackbar의 화면 결과 차이점입니다. 

다음 시간에는 Snackbar를 커스텀해보며 좀 더 깊게 알아가도록 해보겠습니다👊

 


참조 - Material Design

material.io/develop/android/components/snackbars#using-snackbars

 

Material Design

Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences.

material.io

 

댓글