Hướng dẫn và ví dụ Android SnackBar

Xem thêm các chuyên mục:

Các hướng dẫn lập trình Android

Android Snackbar
Ví dụ Snackbar
Ví dụ Snackbar (+CoordinatorLayout)

Nhóm phát triển của chúng tôi vừa ra mắt website langlearning.net học tiếng Anh, Nga, Đức, Pháp, Việt, Trung, Hàn, Nhật, ... miễn phí cho tất cả mọi người.
Là một website được viết trên công nghệ web Flutter vì vậy hỗ trợ rất tốt cho người học, kể cả những người học khó tính nhất.
Hiện tại website đang tiếp tục được cập nhập nội dung cho phong phú và đầy đủ hơn. Mong các bạn nghé thăm và ủng hộ website mới của chúng tôi.

Hãy theo dõi chúng tôi trên Fanpage để nhận được thông báo mỗi khi có bài viết mới.

Facebook

1- Android Snackbar

Android Snackbar là một thành phần giao diện nhỏ cung cấp một phản hồi ngắn gọn sau một thao tác của người dùng, nó xuất hiện ở phía dưới cùng (bottom) của màn hình, và tự động biến mất sau khi hết thời gian hoặc biến mất khi người dùng tương tác ở một nơi khác trên màn hình.

Snackbar cũng cung cấp một button như một tùy chọn để thực hiện một hành động. Chẳng hạn như hoàn tác (undo) hành động vừa thực hiện hoặc thử lại hành động vừa thực hiện nếu nó bị thất bại.

Snackbar with action button


Snackbar snackbar = Snackbar
        .make(baseView, "Message is deleted", Snackbar.LENGTH_LONG)
        .setAction("UNDO", new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                // Show another Snackbar.
                Snackbar snackbar1 = Snackbar.make(baseView, "Message is restored!", Snackbar.LENGTH_SHORT);
                snackbar1.show();
            }
        });

snackbar.show();

Snackbar không sẵn có trong Android SDK, vì vậy bạn phải khai báo thư viện này trong build.gradle (Module app):

build.gradle (Module: app)


...
dependencies {
    ...
    implementation 'com.google.android.material:material:1.0.0'
}

Và kiểm tra phiên bản mới hơn tại đây:

https://mvnrepository.com/artifact/com.google.android.material/material

2- Ví dụ Snackbar

OK, Bây giờ chúng ta sẽ tạo một ví project đơn giản sử dụng Snackbar. Với các ứng dụng phức tạp hơn có sự tham gia của Snackbar, FloatingActionButton,.. bạn nên sử dụng CoordinatorLayout. (Xem ví dụ thứ hai).

Xem trước ví dụ:

Snackbar (Default)

Snackbar with action button

Snackbar (Styling)

OK, Trên Android Studio tạo một project:

File > New > New Project > Empty Activity
- Name: SnackbarExample
- Package name: org.o7planning.snackbarexample
- Language: Java

Như đã đề cập ở trên, Snackbar không có sẵn trong Android SDK, vì vậy bạn cần phải khai báo thư viện sau vào project của bạn:

build.gradle (Module: app)


...
dependencies {
    ...
    implementation 'com.google.android.material:material:1.0.0'
}

Giao diện của ứng dụng:

activity_main.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:id="@+id/constraintLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">


    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="16dp"
        android:text="Snackbar (Default)"
        android:textAllCaps="false"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/button1"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="16dp"
        android:text="Snackbar with action button"
        android:textAllCaps="false"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button1" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/button2"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="16dp"
        android:text="Snackbar (Styling)"
        android:textAllCaps="false"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button2" />
</androidx.constraintlayout.widget.ConstraintLayout>

MainActivity.java


package org.o7planning.snackbarexample;

import androidx.appcompat.app.AppCompatActivity;

import android.graphics.Color;
import android.os.Build;
import android.os.Bundle;
import android.view.Gravity;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;

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

public class MainActivity extends AppCompatActivity {

    private View baseView;

    private Button button1;
    private Button button2;
    private Button button3;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // Container
        this.baseView = this.findViewById(R.id.constraintLayout);

        this.button1 = (Button) this.findViewById(R.id.button1);
        this.button2 = (Button) this.findViewById(R.id.button2);
        this.button3 = (Button) this.findViewById(R.id.button3);

        this.button1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                showSnackbarDefault();
            }
        });
        this.button2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                showSnackbarActionCall();
            }
        });
        this.button3.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                showSnackbarCustom();
            }
        });
    }

    private void showSnackbarDefault()  {
        Snackbar snackbar = Snackbar
                .make(this.baseView, "Install successful!", Snackbar.LENGTH_LONG);
        // Show
        snackbar.show();
    }

    private void showSnackbarActionCall() {

        Snackbar snackbar = Snackbar
                .make(this.baseView, "Message is deleted", Snackbar.LENGTH_LONG)
                .setAction("UNDO", new View.OnClickListener() {
                    @Override
                    public void onClick(View view) {
                        // Show another Snackbar.
                        Snackbar snackbar1 = Snackbar.make(baseView, "Message is restored!", Snackbar.LENGTH_SHORT);
                        snackbar1.show();
                    }
                });

        snackbar.show();
    }


    private void showSnackbarCustom() {
        Snackbar snackbar = Snackbar
                .make(this.baseView, "Try again!", Snackbar.LENGTH_LONG)
                .setAction("RETRY", new View.OnClickListener() {
                    @Override
                    public void onClick(View view) {
                    }
                });
        snackbar.setActionTextColor(Color.RED);
        View sbView = snackbar.getView();
        TextView textView = sbView.findViewById(com.google.android.material.R.id.snackbar_text);
        textView.setTextColor(Color.YELLOW);
        // Align center.
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M){
            textView.setTextAlignment(View.TEXT_ALIGNMENT_CENTER);
        } else {
            textView.setGravity(Gravity.CENTER_HORIZONTAL);
        }
        // Show Sneckbar
        snackbar.show();
    }
}

3- Ví dụ Snackbar (+CoordinatorLayout)

Đối với một ứng dụng phức tạp, có sự tham gia của Snackbar, FloatingActionButton,... bạn nên sử dụng CoordinatorLayout, điều này giúp ngăn chặn sự chồng chéo của Snackbar và FloatingActionButton.

Sử dụng Snackbar, FloatingActionBar với CoordinatorLayout giúp bạn có được một giao diện mượt mà, loại bỏ sự chồng chéo (overlap).

Xem bài viết chi tiết hơn về CoordinatorLayout:

TODO Link?

Xem thêm các chuyên mục:

Các hướng dẫn lập trình Android