Hướng dẫn Custom Toast trong Android

Như mình đã nói ở bài Toast và Alert Dialog trong ứng dụng Android thì Toast được sử dụng rất nhiều trong Android. Nhưng nhiều lúc bạn thấy nó hiển thị quá đơn điệu, bạn muốn thay đổi cách hiển thị của nó trông cho đẹp hơn, vậy thì bạn hãy xem qua bài viết hướng dẫn Custom Toast trong Android này và sau khi xem xong bạn hãy tạo ra một Toast View theo ý thích của mình nhé.

Cách tạo một Custom Toast

Nói thì nghe kiểu dài dòng phức tạp nhưng làm thì dễ lắm, Custom Toast đơn giản chỉ là tạo ra cho nó một file xml layout mới và set nó vào Toast thôi, trong layout đó bạn có thể tùy chỉnh  cách hiển thị, thêm hình ảnh, background..vv

B1: Đầu tiên là kiếm cái icon, mình sẽ lấy hình này nhé: http://findicons.com/icon/89631/warning, bạn download file png về và đặt tên alert.png rồi copy vào thư mục res/drawable/ nhé

B2: Tiếp theo mình sẽ tạo một file xml trong mục res/drawable/mycustom_toast_border.xml đặt tên là mycustom_toast_border.xml , nội dung file như sau:

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke
        android:width="2dp"
        android:color="#ff9500" />
    <padding
        android:bottom="7dp"
        android:left="7dp"
        android:right="7dp"
        android:top="7dp" />
    <corners android:radius="5dp" />
    <gradient
        android:angle="-90"
        android:endColor="#c4a20a"
        android:startColor="#fceaab" />
</shape>

Trong file xml trên mình có sử dụng cá thành phần sau:

• shape: bạn có thể tạm hiểu đó là hình dạng, hình thù, nó chứa các thành phần con tạo nên giao diện cho cái Toast View đó
• stroke: tạo border cho Toast View
• padding: tạo khoảng cách từ nội dung Toast tới viền
• corners: tạo viền bo tròn cho Toast View
• gradient: tạo giải màu từ  trên xuống dưới bắt đầu từ màu #fceaab tới màu #c4a20a (angle=”-90″ có nghĩa là nó chạy từ trên xuống dưới, bạn có thể thay đổi nó).

B3: Tiếp tục mình tạo thêm file mycustomtoast_layout.xml để trong thư mục res/layout/mycustomtoast_layout.xml, file này chính là định dạng layout hiển thị  cho toast:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:layout_margin="5px"
    android:orientation="horizontal"
    android:padding="10dp">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/mycustom_toast_border">

        <ImageView
            android:id="@+id/imgCustomToast"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:src="@drawable/alert" />

        <TextView
            android:id="@+id/tvCustomToast"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:padding="3dp"
            android:text="Android Custom Toast"
            android:textColor="#fff"
            android:textSize="16dp" />

    </LinearLayout>

</LinearLayout>

File này bao gồm icon và nội dung Toast, nói chính xác là file xml này chứa nội dung của Custom Toast View.

B4:  Tạo mới một activity và đặt tên CustomToastActivity, khi tạo mới activity thì nó sẽ tự sinh ra file activity_custom_toast.xml. Trong file activity_custom_toast sẽ có 1 button mình đặt tên là Show, khi bấm vào button này nó sẽ hiện thị ra Toast.

Nội dung file activity_custom_toast.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="dev4u.com.alertdialogdemo.CustomToastActivity">

    <Button
        android:id="@+id/btnCustomToast"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="Show" />
</RelativeLayout>

Trong file CustomToastActivity bạn khai báo id cho button và bắt đầu code thôi.

Nội dung file CustomToastActivity:

package dev4u.com.alertdialogdemo;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;
import android.widget.Toast;

public class CustomToastActivity extends AppCompatActivity {

    Button btnCustomToast;

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

        btnCustomToast = (Button) findViewById(R.id.btnCustomToast);
        btnCustomToast.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                LayoutInflater inflater = getLayoutInflater();
                View layout = inflater.inflate(R.layout.mycustomtoast_layout, null);

                TextView tvCustomToast = (TextView) layout.findViewById(R.id.tvCustomToast);
                tvCustomToast.setText("Đây là một custom toast!!");

                Toast toast = new Toast(getApplicationContext());
                //Set vị trí hiển thị cho Toast
                toast.setGravity(Gravity.CENTER_VERTICAL, 0, 0);
                //Thời gian hiển thị của Toast
                toast.setDuration(Toast.LENGTH_LONG);
                //Set layout mycustom_toast_border.xml cho Toast
                toast.setView(layout);
                //hiển thị Toast
                toast.show();
            }
        });

    }
}

B5: Thế là xong phần Custom Toast rồi đấy, bây giờ là lưu lại và chạy xem kết quả thôi, dưới đây là hình ảnh của cái Toast mình vừa Custom cho nó xong.

Lời kết

Qua bài viết hướng dẫn Custom Toast trong Android ngắn trên hi vọng bạn có thể tự tạo cho mình một Toast View đẹp và ưng ý. Trong quá trình tìm hiểu nếu bạn gặp bất kỳ lỗi nào hay có bất kỳ góp ý hay chia sẻ gì, mong bạn có thể để lại comment bên dưới hoặc gửi mail về [email protected]. Xin cảm ơn!!