Créer un Toast Personnalisé

Définition du Toast

A considérer comme message d'information, d'avertissement. Le Toast c'est l'affichage d'un message dit transitoire car il ne nécessite aucune intervention de la part de l'utilisateur et ne prend même pas le focus: dans le cas où l'utilisateur serait en train d'effectuer une saisie, la saisie continuera dans ce même champ durant tout le temps de l'affichage du message. Enfin, le message disparaît de lui même.

Comme l'utilisateur ne peut pas intervenir, il n'est pas certain que celui-ci voit ce message. Il ne faudra donc utiliser les toasts pour afficher des messages qui ont peu d'importance (pour indiquer qu'un traitement est terminé, ...) !

Le toast de base

Le toast de base a besoin de 3 paramètres: Généralement le contexte de notre application, le texte à afficher et enfin la durée d'affichage (La durée pourra prendre deux valeurs: Toast.LENGTH_SHORT ou Toast.LENGTH_LONG):

public static Toast makeText (Context context, CharSequence text, int duration)

Toast toast = Toast.makeText(getApplicationContext(), "Hello toast!",Toast.LENGTH_SHORT);

toast.show();

(source: developer.android)

La méthode makeText construit une instance de Toast avec ces paramètres que vous n'aurez plus qu'à afficher via la méthode show()

Il est possible d'utiliser makeText avec un identifiant sur le texte à afficher en passant ainsi par une ressource texte:

public static Toast makeText (Context context, int resId, int duration)

Avec resId = R.string.Nom_resource_string

Le toast personnalisé

Vous pourrez égailler votre Toast en utilisant une View. Dans ce cas, construisez votre View via un fichier XML ou par code et utilisez la méthode setView() de votre instance de toast.

Un fichier toast_layout.xml

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

              android:id="@+id/toast_layout_root"

              android:orientation="horizontal"

              android:layout_width="fill_parent"

              android:layout_height="fill_parent"

              android:padding="10dp"

              android:background="#DAAA"

              >

    <ImageView android:id="@+id/image"

               android:layout_width="wrap_content"

               android:layout_height="fill_parent"

               android:layout_marginRight="10dp"

               />

    <TextView android:id="@+id/text"

              android:layout_width="wrap_content"

              android:layout_height="fill_parent"

              android:textColor="#FFF"

              />

</LinearLayout>

LayoutInflater inflater = getLayoutInflater();

View layout = inflater.inflate(R.layout.toast_layout,

                               (ViewGroup) findViewById(R.id.toast_layout_root));

ImageView image = (ImageView) layout.findViewById(R.id.image);

image.setImageResource(R.drawable.android);

TextView text = (TextView) layout.findViewById(R.id.text);

text.setText("Notre toast personnalisé avec une image dedans !");

Toast toast = new Toast(getApplicationContext());

toast.setView(layout);

toast.setDuration(Toast.LENGTH_SHORT);

toast.show();

Positionner un toast

Comme pour les widgets, un toast a un point d'attraction (qui est vers le bas de l'écran et centré horizontalement par défaut). Vous pouvez cependant le personnaliser en utilisant la méthode setGravity()

setGravity(int gravity, int offset x, int offset y)

Par exemple: toast.setGravity(Gravity.TOP|Gravity.LEFT, 0, 0);

Le Toast Super Personnalisé

Dans ce tutoriel nous allons apprendre comment créer un Toast super personnalisé en utilisant une RelativeLayout qu'on va afficher à l'écran à un moment donné pendant une certaine durée.

L'avantage du Toast que j'ai nommé super personnalisé c'est de pouvoir gérer la durée d'affichage, l'emplacement sur l'écran et surtout le contenu qui peut être du texte associé à une image pour rendre votre application plus conviviale.

Télécharger le code complet

Je suppose que vous savez déjà créer un projet, nous allons donc aller droit au but.

1. Création de notre Layout activity_main.xml
   
   
   Notre Layout sera composé de 3 Button qui vont générer 3 différents type de Toast au clic:

• Toast Texte Simple     
• Toast Image
• Toast Image + Texte

Code activity_main.xml:

<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"

    android:paddingBottom="@dimen/activity_vertical_margin"

    android:paddingLeft="@dimen/activity_horizontal_margin"

    android:paddingRight="@dimen/activity_horizontal_margin"

    android:paddingTop="@dimen/activity_vertical_margin"

    tools:context=".MainActivity" >

    <RelativeLayout

        android:id="@+id/toast_simple"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:layout_above="@+id/relativeLayout1"

        android:layout_alignParentLeft="true"

        android:layout_centerVertical="true"

        android:layout_marginBottom="10dp"

        android:background="@drawable/fond_blue"

        android:gravity="center"

        android:orientation="vertical" >

        <TextView

            android:layout_width="fill_parent"

            android:layout_height="wrap_content"

            android:gravity="center"

            android:text="Toast Simple"

            android:textColor="@color/white"

            android:textSize="14sp" />

    </RelativeLayout>

    <LinearLayout

        android:id="@+id/relativeLayout1"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:layout_alignParentBottom="true"

        android:layout_alignParentLeft="true"

        android:gravity="center_horizontal"

        android:orientation="horizontal" >

        <Button

            android:id="@+id/btn_simple"

            android:layout_width="95dip"

            android:layout_height="50dip"

            android:layout_marginLeft="0dip"

            android:text="Simple" />

        <Button

            android:id="@+id/btn_merci"

            android:layout_width="95dip"

            android:layout_height="50dip"

            android:text="Merci" />

        <Button

            android:id="@+id/btn_bye"

            android:layout_width="95dip"

            android:layout_height="50dip"

            android:text="Bye Bye" />

    </LinearLayout>

    <RelativeLayout

        android:id="@+id/toast_bye"

        android:layout_width="fill_parent"

        android:layout_height="30dp"

        android:layout_alignLeft="@+id/toast_simple"

        android:layout_centerVertical="true"

        android:background="@drawable/fond_blue"

        android:orientation="vertical" >

        <ImageView

            android:layout_width="wrap_content"

            android:layout_height="50dp"

            android:src="@drawable/byebye"

            android:layout_marginLeft="10dp" />

        <TextView

            android:layout_width="fill_parent"

            android:layout_height="wrap_content"

            android:layout_alignParentLeft="true"

            android:layout_centerVertical="true"

            android:gravity="center"

            android:text="Toast Bye bye"

            android:textColor="@color/white"

            android:textSize="14sp" />

    </RelativeLayout>

    <RelativeLayout

        android:id="@+id/toast_merci"

        android:layout_width="150dp"

        android:layout_height="150dp"

        android:background="@android:color/transparent"

        android:layout_centerHorizontal="true"

        android:gravity="center"

        android:orientation="vertical" >

        <ImageView

            android:id="@+id/imageView1"

            android:layout_width="150dp"

            android:layout_height="150dp"

            android:layout_alignParentTop="true"

            android:layout_centerHorizontal="true"

            android:src="@drawable/merci" />

    </RelativeLayout>

</RelativeLayout>

     2.  Création de notre MainActivity.java

        Nous allons d'abord cacher le Toast "toastMerci.setVisibility(View.GONE)" à la création de l'affichage ensuite l'afficher "toastMerci.setVisibility(View.VISIBLE)" après le clic de l'utilisateur dans un Runnable pendant une durée de 3s.  

Code MainActivity.java


package com.example.customizedtoast;

import android.app.Activity;
import android.os.Bundle;
import android.os.Handler;
import android.view.Menu;
import android.view.View;
import android.widget.Button;
import android.widget.RelativeLayout;

public class MainActivity extends Activity {
Button btnMerci, btnBye, btnSimple;
RelativeLayout toastMerci;
RelativeLayout toastBye;
RelativeLayout toastSimple;
private static final int SPLASH_TIME = 3 * 1000;// 3 seconds


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

btnMerci = (Button) findViewById(R.id.btn_merci);
btnBye = (Button) findViewById(R.id.btn_bye);
btnSimple = (Button) findViewById(R.id.btn_simple);

toastMerci = (RelativeLayout) findViewById(R.id.toast_merci);
toastBye = (RelativeLayout) findViewById(R.id.toast_bye);
toastSimple = (RelativeLayout) findViewById(R.id.toast_simple);

toastMerci.setVisibility(View.GONE);
toastBye.setVisibility(View.GONE);
toastSimple.setVisibility(View.GONE);

btnMerci.setOnClickListener(new View.OnClickListener() {

@Override
public void onClick(View arg0) {
// TODO Auto-generated method stub
toastMerci.setVisibility(View.VISIBLE);
new Handler().postDelayed(new Runnable() {
@Override
public void run() {
toastMerci.setVisibility(View.GONE);
}

}, SPLASH_TIME);
}
});

btnBye.setOnClickListener(new View.OnClickListener() {

@Override
public void onClick(View arg0) {
// TODO Auto-generated method stub
toastBye.setVisibility(View.VISIBLE);
new Handler().postDelayed(new Runnable() {
@Override
public void run() {
toastBye.setVisibility(View.GONE);
}

}, SPLASH_TIME);
}
});
btnSimple.setOnClickListener(new View.OnClickListener() {

@Override
public void onClick(View arg0) {
// TODO Auto-generated method stub
toastSimple.setVisibility(View.VISIBLE);
new Handler().postDelayed(new Runnable() {
@Override
public void run() {
toastSimple.setVisibility(View.GONE);
}

}, SPLASH_TIME);
}
});
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}

}

Télécharger le code complet