Android Kotlin - Custom Toast với ảnh và animation

Toast dùng để hiển thị thông điệp trong khoảng thời gian ngắn, nó giống như một thông báo nổi trên ứng dụng, không ngăn cản tương tác người dùng. Hôm nay, chúng ta sẽ cũng nhau tìm hiểu về cách custom lại Toast theo ý muốn bằng ngôn ngữ Kotlin nha.

Một số phương thức quan trọng của Toast

  1. makeText(Context context, CharSequence text, int duration): Phương thức này được sử dụng để hiện thị thông báo, 3 tham số truyền vào:
  • Context context: Nếu bạn sử dụng phương thức này ở Activity(ví dụ Activity đó tên là MainActivity) thì bạn sẽ truyền vào [email protected], nếu bạn sử dụng ở Fragment thì tham số đó sẽ là context.

  • CharSequence text: Là đoạn thông điệp mà bạn muốn hiển thị lên. Kiểu dữ liệu là String.

  • int duration: Là khoảng thời gian Toast hiển thị và nó là hằng số được định nghĩa sẵn. Có 2 sự lựa chọn đó là LENGTH_LONG hiển thị trong 3,5 giây và LENGTH_SHORT hiển thị trong 2 giây. Ví dụ:

    Toast.makeText(this@MainActivity, "Thông điệp cần hiển thị", Toast.LENGTH_SHORT)
    
  1. show(): Phương thức này dùng để hiển thị Toast ra màn hình. Ví dụ:

    Toast.makeText(this@MainActivity, "Thông điệp cần hiển thị", Toast.LENGTH_LONG).show()
    
  2. setGravity(int,int,int): Phương thức này cho phép bạn điều chỉnh vị trí hiển thị Toast trên màn hình. Nếu không sử dụng phương thức này thì mặc định Toast sẽ hiển thị ở dưới cùng của màn hình. Ví dụ:

    val toast: Toast = Toast.makeText(this@MainActivity, "Thông điệp cần hiển thị", Toast.LENGTH_SHORT)
    toast.setGravity(Gravity.TOP or Gravity.CENTER, 0, 200)
    
  3. setText (CharSequence s): Phương thức này cho phép ta thiết lập thông điệp cần hiển thị của Toast. Ví dụ:

    toast.setText("Thông điệp cần hiển thị")
    
  4. setDuration(int duration): Phương thức này cho phép ta thiết lập thời gian hiển thị trên màn hình cho Toast. Ví dụ:

    toast.duration = Toast.LENGTH_LONG
    
  5. inflate(Context context, @LayoutRes int resource, ViewGroup root): Khi custom Toast, ta sẽ sử dụng phương thức này để thiết lập giao diện cho Toast từ một file xml. Ví dụ:

    var view: View = View.inflate(context, R.layout.item_toast, null)
    
  6. setView(View): Phương thức này dùng để truyền layout cho Toast. Ví dụ:

    var view: View = View.inflate(context, R.layout.item_toast, null)
    toast.setView(view)
    

Demo custom Toast sử dụng ảnh kết hợp animation

Ta sẽ tạo một project mới có cấu trúc như sau: alt

  • Thư mục anim chứa các file xml để thiết lập animation cho Toast.

  • Thư mục drawable chứa các file nguyên liệu phục vụ cho việc thiết kế giao diện cho Toast. Ở đây thì mình dùng một tấm hình.

  • Tạo file activity_main.xml. Đây là file giao diện màn hình chính.

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout
        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=".MainActivity"
        android:orientation="vertical"
        android:gravity="center"
        >
    
        <Button
            android:id="@+id/btnShowToast"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Show Toast"
            />
        <Button
            android:id="@+id/btnShowCustomToast"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Show Custom Toast"
            />
    
    </LinearLayout>
    
  • Tạo file item_toast.xml. File này dùng để thiết kế giao diện cho Toast.

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        >
    
        <ImageView
            android:id="@+id/image"
            android:layout_width="150dp"
            android:layout_height="150dp"
            android:background="@drawable/hearteyes"
            android:layout_centerInParent="true"
            />
    </RelativeLayout>
    
  • File cycle_5.xml

    <?xml version="1.0" encoding="utf-8"?>
    <cycleInterpolator xmlns:android="http://schemas.android.com/apk/res/android"
        android:cycles="9"/>
    
  • File shake.xml

    <?xml version="1.0" encoding="utf-8"?>
    <translate xmlns:android="http://schemas.android.com/apk/res/android"
        android:duration="1000"
        android:fromXDelta="0"
        android:interpolator="@anim/cycle_5"
        android:toXDelta="10"/>
    
  • Tiếp đến ta sẽ tạo class MyToast để custom lại Toast.

    import android.content.Context
    import android.view.Gravity
    import android.view.View
    import android.view.animation.Animation
    import android.view.animation.AnimationUtils
    import android.widget.ImageView
    import android.widget.Toast
    
    class MyToast : Toast {
    
        private var context: Context
        private lateinit var imageView: ImageView
    
        constructor(context: Context) : super(context) {
            this.context = context
            initView()
        }
    
        private fun initView() {
            duration = Toast.LENGTH_SHORT
            setGravity(Gravity.TOP or Gravity.CENTER, 0, 200)
            var view: View = View.inflate(context, R.layout.item_toast, null)
            imageView = view.findViewById(R.id.image)
            var animation: Animation
            animation = AnimationUtils.loadAnimation(context, R.anim.shake)
            imageView.startAnimation(animation)
            setView(view)
        }
    }
    
  • Cuối cùng là code của class MainActivity.

    import android.support.v7.app.AppCompatActivity
    import android.os.Bundle
    import android.view.Gravity
    import android.view.View
    import android.widget.Toast
    import kotlinx.android.synthetic.main.activity_main.*
    
    class MainActivity : AppCompatActivity(), View.OnClickListener {
    
        override fun onCreate(savedInstanceState: Bundle?) {
            super.onCreate(savedInstanceState)
            setContentView(R.layout.activity_main)
            btnShowToast.setOnClickListener(this)
            btnShowCustomToast.setOnClickListener(this)
        }
    
        override fun onClick(v: View?) {
            when (v!!.id) {
                R.id.btnShowToast -> {
                    val toast: Toast = Toast.makeText(this@MainActivity, "", Toast.LENGTH_SHORT)
                    toast.setGravity(Gravity.TOP or Gravity.CENTER, 0, 200)
                    toast.setText("Thông điệp cần hiển thị")
                    toast.duration = Toast.LENGTH_LONG
                    toast.show()
                }
                R.id.btnShowCustomToast -> {
                    var myToast = MyToast(this)
                    myToast.show()
                }
            }
        }
    }
    
  • Vậy là chúng ta đã custom xong một cái Toast đơn giản bằng Kotlin. Thank for reading ^^