Cómo agregar un brindis con estilo personalizado en Android usando Kotlin

Un Toast es un breve mensaje de alerta que se muestra en la pantalla de Android durante un breve intervalo de tiempo. Android Toast es una breve notificación emergente que se utiliza para mostrar información cuando realizamos cualquier operación en la aplicación. En este artículo, aprendamos cómo crear un brindis personalizado en Android usando Kotlin.

Nota : Para crear un brindis con un estilo personalizado en Android utilizando Java, consulte Cómo agregar un brindis con un estilo personalizado en Android.

Tabla de Atributos

Acercarse

Paso 1: crea el diseño de tostadas

Vaya a res -> diseño (clic con el botón derecho) -> nuevo -> Archivo de recursos de diseño -> Crear archivo (custom_toast_layout.xml). Agregue un CardView para que contenga el mensaje de brindis personalizado y también agregue un TextView para mostrar el texto dentro del mensaje de brindis personalizado. FrameLayout se usa para especificar la posición de múltiples vistas colocadas una encima de la otra para representar una sola pantalla de vista.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    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"
    android:id="@+id/toast_container">
 
    <RelativeLayout
        android:id="@+id/button_parent"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true">
 
        <androidx.cardview.widget.CardView
            android:id="@+id/button_card_parent"
            android:layout_width="match_parent"
            android:layout_height="56dp"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            android:layout_marginLeft="25dp"
            app:cardElevation="20dp"
            android:layout_marginRight="25dp"
            app:cardCornerRadius="4dp">
 
            <RelativeLayout
                android:id="@+id/button_click_parent"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="?attr/selectableItemBackground"
                android:clickable="true"
                android:focusable="true">
 
                <FrameLayout
                    android:id="@+id/button_accent_border"
                    android:layout_width="4dp"
                    android:layout_height="match_parent"
                    android:background="#3EAA56" />
 
                <TextView
                    android:id="@+id/toast_text"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerVertical="true"
                    android:layout_marginStart="17dp"
                    android:ellipsize="end"
                    android:lines="1"
                    android:text="This is a custom Toast"
                    android:textColor="#131313"
                    android:textSize="18sp"
                    android:textStyle="bold" />
 
            </RelativeLayout>
 
        </androidx.cardview.widget.CardView>
 
    </RelativeLayout>
 
</RelativeLayout>

Paso 2: crea un nuevo archivo Kotlin

Ahora crea un nuevo archivo Kotlin y asígnale el nombre WrapToast.kt para que el código sea reutilizable. Vaya a Paquete de proyecto (clic derecho) -> nuevo -> archivo/clase Kotlin -> Crear archivo (WrapToast.kt). Ahora vamos a extender la Toast::class con la cual tomará String y Context como parámetro.

Nota:

• Infle el diseño creado previamente (custom_toast_layout.xml) usando el layoutInflater.
• Después, inflado el diseño, encuentre su vista. En este caso, configure el texto de TextView del mensaje.
• El último paso es crear una nueva instancia sobre la clase Toast::. Luego, usando su función de extensión de aplicación, establece la gravedad, la duración y el diseño. Dentro de apply, llama también al método.

import android.app.Activity
import android.view.Gravity
import android.widget.TextView
import android.widget.Toast
 
fun Toast.showCustomToast(message: String, activity: Activity)
{
    val layout = activity.layoutInflater.inflate (
        R.layout.custom_toast_layout,
        activity.findViewById(R.id.toast_container)
    )
     
    // set the text of the TextView of the message
    val textView = layout.findViewById<TextView>(R.id.toast_text)
    textView.text = message
   
    // use the application extension function
    this.apply {
        setGravity(Gravity.BOTTOM, 0, 40)
        duration = Toast.LENGTH_LONG
        view = layout
        show()
    }
}

Paso 3: crea un botón para mostrar el brindis en una actividad

Agregue un botón dentro de ConstraintLayout. Entonces, cuando el usuario hace clic en el botón, aparece el Toast personalizado en la pantalla. 

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
 
    <Button
        android:id="@+id/btn_show_toast"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:text="Show Toast"
        android:background="#3EAA56"
        android:textColor="#fff"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
 
</androidx.constraintlayout.widget.ConstraintLayout>

Paso 4: crea el brindis

Después, al crear el botón para mostrar un brindis, aplique un onClickListener() y pase el mensaje del brindis y el contexto de la actividad.

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Toast
import kotlinx.android.synthetic.main.activity_main.*
 
class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
 
        // apply an onClickListener() method
        btn_show_toast.setOnClickListener{
            Toast(this).showCustomToast ("Hello! This is a custom Toast!", this)
        }
    }
}

Producción:

Nota:

Ya no se recomiendan las vistas personalizadas del brindis. Cuando están en primer plano, las aplicaciones pueden usar la función makeText() para producir un brindis de texto normal, o pueden crear un Snackbar. Las vistas personalizadas del brindis no se mostrarán cuando la aplicación propietaria, dirigida al nivel de API Build.VERSION_CODES#R o superior, esté en segundo plano. Por ahora, los Toasts creados con makeText() o sus variaciones también devolverán un valor nulo aquí en las aplicaciones que tienen como objetivo el nivel de API Build.VERSION CODES.R o superior, a menos que llamen a setView con una vista no nula.