간단한 메시지를 보여주기 위해 사용되는 Snackbar와 Toast의 동작을 비교해보는 예제 코드입니다.
Toast는 지정한 일정시간이 지나야 화면에서 사라지지만 Snackbar의 경우에는 사용자의 입력에 반응하여 바로 사라지게 할 수 있습니다.
Toast
Snackbar
Snackbar with Action
전체 소스 코드 1. build.gradle 2. activity_main.xml 3. MainActivity.java
참고
|
실행결과를 보며 간단히 비교해보겠습니다. 앱을 실행시키면 다음처럼 3개의 버튼을 보여줍니다.
Toast
TOAST 버튼을 선택하면 하단에 메시지를 보여주며 지정해준 일정시간이 지나면 화면에서 사라집니다.
사용자에게 메시지를 보여주는 역할만 할 수 있습니다.
Toast를 화면에 보여주려면 Context가 필요하며 지정가능한 시간은 다음 두가지 입니다.
LENGTH_SHORT, LENGTH_LONG
Toast.makeText(getApplicationContext(), "Toast 메시지입니다. 잠시후 사라집니다.", Toast.LENGTH_LONG).show(); |
Snackbar
SNACKBAR 버튼을 선택해보면 화면 아래쪽에 메시지가 보이고 일정시간 지나면 사라집니다.
Snackbar도 앞에서 살펴본 Toast처럼 일정시간 화면에 보여주는 용도로 사용할 수 있습니다.
Snackbar를 화면에 보여주려면 View가 필요하며 지정가능한 시간은 다음 세가지 입니다.
LENGTH_INDEFINITE의 경우 사용자 입력이 있을 때까지 계속 화면에 메시지를 보여주는 용도로 사용가능합니다. 다음에 설명할 Snackbar with Action에서 사용됩니다.
LENGTH_SHORT, LENGTH_LONG, LENGTH_INDEFINITE
Snackbar.make(mainLayout, "Snackbar 메시지입니다. 잠시후 사라집니다.", Snackbar.LENGTH_LONG).show(); |
Snackbar with Action
SNACKBAR ACTION 버튼을 선택하면 메시지 오른쪽에 보이는 확인을 선택해주기 전까지 화면에 계속 보여집니다.
이 경우 메시지를 화면에 보여주는 시간을 LENGTH_INDEFINITE를 선택했기 때문에 자동으로 사라지지 않습니다.
확인을 선택할 경우에 Snackbar가 사라지도록 구현되어 있습니다.
final Snackbar snackbar = Snackbar.make(mainLayout, "Snackbar 메시지입니다.\n확인 누르면 사라집니다.", Snackbar.LENGTH_INDEFINITE);
snackbar.setAction("확인", new View.OnClickListener() {
@Override
public void onClick(View v) {
snackbar.dismiss();
}
});
snackbar.show(); |
전체 소스 코드
1. build.gradle
Toast는 바로 사용할 수 있지만 Snackbar의 경우에는 다음 두가지를 해줘야 합니다.
1-1. Snackbar 클래스를 사용하려면 build.gradle에 com.android.support:design을 추가해야 합니다.
dependencies {
implementation fileTree(dir: 'libs', include: ['*.jar'])
implementation 'com.android.support:appcompat-v7:27.1.1'
implementation 'com.android.support.constraint:constraint-layout:1.1.2'
testImplementation 'junit:junit:4.12'
androidTestImplementation 'com.android.support.test:runner:1.0.2'
androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
implementation 'com.android.support:design:27.1.1'
} |
1-2. 레이아웃 파일에서 Snackbar를 보여주려고 하는 View에 ID를 부여해줘야 합니다.
예제 코드에서는 activity_main.xml 파일의 ConstraintLayout에 ID를 부여해주었습니다.
레이아웃 파일의 전체 코드는 “2. activity_main.xml” 항목에 있습니다.
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/main_layout"
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"
tools:context=".MainActivity">
<Button |
2. activity_main.xml
테스트를 위해 사용할 3개의 버튼을 추가해놓았습니다.
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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:id="@+id/main_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<Button
android:id="@+id/button_main_toast"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Toast"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/button_main_snackbar"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="@+id/button_main_snackbar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Snackbar"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/button_main_snackbar_action"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="@+id/button_main_toast"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="@+id/button_main_snackbar_action"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Snackbar Action"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="@+id/button_main_snackbar"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout> |
3. MainActivity.java
3개의 버튼을 클릭시 Toast, Snackbar, Action이 추가된 Snackbar를 각각 호출하도록 작성되어 있습니다.
package com.tistory.webnautes.toastvssnackbar;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity {
private View mainLayout;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mainLayout = findViewById(R.id.main_layout);
Button buttonToast = findViewById(R.id.button_main_toast);
Button buttonSnackbar = findViewById(R.id.button_main_snackbar);
Button buttonSnackbarAction = findViewById(R.id.button_main_snackbar_action);
buttonToast.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(getApplicationContext(), "Toast 메시지입니다. 잠시후 사라집니다.", Toast.LENGTH_LONG).show();
}
});
buttonSnackbar.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Snackbar.make(mainLayout, "Snackbar 메시지입니다. 잠시후 사라집니다.", Snackbar.LENGTH_LONG).show();
}
});
buttonSnackbarAction.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
final Snackbar snackbar = Snackbar.make(mainLayout, "Snackbar 메시지입니다.\n확인 누르면 사라집니다.", Snackbar.LENGTH_INDEFINITE);
snackbar.setAction("확인", new View.OnClickListener() {
@Override
public void onClick(View v) {
snackbar.dismiss();
}
});
snackbar.show();
}
});
}
}
|
참고
https://developer.android.com/training/snackbar/
2018년 8월 11일에 마지막으로 업데이트 되었습니다. webnautes
