[Tutoriel] : Design , Splash Screen , AlertDialog , Toast

Salut tout le monde , voici le nouvel tutoriel qui va expliquer qu'est qu'on a vu la dernière séance (Mercredi 9 Octobre 2013) suite à cet événement ." Get ready ! ".

Dans ce tutoriel on va présenter 4 choses :

 - Splash Screen

-  Le design

- Toast

- AlertDialog

Passons maintenant au dévéloppement :

On va tout d'abord créer un nouveau projet (Design par exemple)

 On va maintenant changer l'icone de notre application : il suffit de cliquer sur le bouton "Browse" ,une fenetre s'ouvre contenant l'arborescence de dossier de votre système,choisissez une image puis valider.

 

 

On peut aussi changer le Shape de l'icone ,ici on voit le résultat du Shape "Circle".

Aprés , votre projet sera crée: 

1) Splash Screen :

Un splash screen  est la toute première fenêtre affichée par une application ou logiciel.

Cette fenêtre incite l'utilisateur à patienter pendant le chargement et l'installation d'un logiciel tout en lui apportant diverses informations comme le nom du logiciel, le nom de l'éditeur, le logo de l'éditeur ou du logiciel, les droits d'auteur associés au logiciel, la version et l'état du chargement du logiciel.

Cette fenêtre peut aussi demander à l'utilisateur de s'identifier avec un nom d'utilisateur et un mot de passe.

Voici  des exemples :

 

Avant tout,on va ajouter des photos à notre projet qu'on va ensuite les utiliser dans notre application . Comme vous le savez , les photos sont obligatoirement mises dans le dossier  drawable . Pour ce faire on va faire du copier/coller de nos photos dans le dossier drawable soit on se plaçant dans le dossier drawable dans le dossier de notre application dans notre workspace ou bien en faisant copier/coller directement dans eclipse .

 

On va maintent ajouter une autre activité MainActivity .

On ouvre le layout splash.xml dans le dossier layout de notre application puis on va ajouter une photos à l'interface indiquant que l'activité est en cours de chargement . 

On fait un drag-and-drop de ImageView dans le layout,une fenetre s'ouvre contenant la liste des images de notre application ,on choisi la photo qu'on veut l'ajouter puis on confirme .

 

 

Revenons à l'activité SplashScreen,on va ajuter ces lignes de code :

package com.enisandroidclub.design;

import android.os.Bundle;
import android.os.Handler;
import android.app.Activity;
import android.content.Intent;


public class SplashScreen extends Activity {

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

       
        new Handler().postDelayed(new Runnable() {
          

            @Override
            public void run() {
               
                Intent i = new Intent(SplashScreen.this, MainActivity.class);
                startActivity(i);

                finish();
            }
        }, 3000);
    }

}

On lance l'application,l'activité SplashScreen va apparaitre pour 3 secondes puis elle sera fermée et l'activité MainActivity va se lancer .

 

Nous voulons maintenant désactiver la barre de titre de l'activité SplashScreen afin qu'elle va apparaitre en plein écran , on ajoute donc cette instruction :

public class SplashScreen extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        

        requestWindowFeature(Window.FEATURE_NO_TITLE);
        

        setContentView(R.layout.splash);
       
        new Handler().postDelayed(new Runnable() {
          

            @Override
            public void run() {
               
                Intent i = new Intent(SplashScreen.this, MainActivity.class);
                startActivity(i);

                finish();
            }
        }, 3000);
    }

Avant d'aborder la notion de Toast, on va faire un peu de design pour l'activité MainActivity,pour ce faire,on va concevoir une activité d’authentification :

- ajouter une image comme on l'a fait précédemment

- ajouter deux EditText(Login, Mot de passe) 

- deux boutons : l'un pour afficher un Toast et l'autre pour afficher un AlertDialog .

On va faire un drag-and-drop à partir de la palette un ImageView,une fenêtre s'ouvre,on choisit la photo et on valide .

Ici on modifie la proprieté Hint de l'EditText .

 

Ici on ajoute un icone à gauche pour le bouton Exit à partir de la proprieté Drawable Left .

On va maintenant changer l'arrière plan de l'activité .

Et voici le résultat après l'exécution .

 

2) Les Toast :

Un toast est une vue contenant un petit message rapide pour l'utilisateur.

On va récupérer les identifiant des 2 boutons  ,on déclare deux variables de type Button : 

Button infos;
Button exit;

Puis dans la méthode  onCreate on ajoute :

infos=(Button)findViewById(R.id.infos);

exit=(Button)findViewById(R.id.exit);
       
infos.setOnClickListener(this);
exit.setOnClickListener(this);

La classe MainActivity implements OnClickListener et on ajoute enfin la méthode public void onClick(View v) qui va contenir le code des actions des boutons .

switch(v.getId())

        {
        case R.id.infos:
           
            Toast t=Toast.makeText(this, "Ceci est un Toast",              Toast.LENGTH_LONG);
            t.setGravity(Gravity.CENTER, 0, 0);
            t.show();
           
            break;
           
        case R.id.exit:
           
            break;
        }
       

 Ces trois lignes permettent d'afficher un Toast contenant le message "Ceci est un Toast" .

 Toast t=Toast.makeText(this, "Ceci est un Toast",Toast.LENGTH_LONG);
            t.setGravity(Gravity.CENTER, 0, 0);
            t.show();

=> setGravity() permet d'indiquer la position qu'on veut y afficher le Toast.

=> show() permet d'afficher le Toast,si on ne l'écrit pas le Toast ne sera pas    affiché .            

3) Les AlertDialog :

Dans Android, vous pouvez ajouter des alertes à votre demande pour obtenir le utilisateurs de se concentrer sur quelque chose, comme une mise à jour. La classe AlertDialog est utilisé pour afficher une alerte. Voici comment faire pour implémenter la fonctionnalité dans votre application.

Voir les étapes qui découlent:
1- Tout d'abord, utiliser le AlertDialog.Builder pour créer l'interface d'alerte de la boîte, comme le titre, message à afficher, des boutons, et un bouton fonction onclick 

2- Joindre plus tard au-dessus de constructeur à AlertDialog et l'afficher. 

3- Terminé. 

@Override
    public void onClick(View v) {
        switch(v.getId())
        {
        case R.id.infos:
           
            Toast t=Toast.makeText(this, "Ceci est un Toast", Toast.LENGTH_LONG);
            t.setGravity(Gravity.CENTER, 0, 0);
            t.show();
           
            break;
           
        case R.id.exit:
           
            AlertDialog.Builder ad= new AlertDialog.Builder(this);
            ad.setTitle("Quitter");
            ad.setMessage("Voulez-vous vraiment quitter l'application ?");
            ad.setIcon(R.drawable.alert);
            ad.show();
           
            break;
        }
       
    } 

On va ajouter maintenant plus d’interaction avec la boite de dialogue en ajoutant des boutons de confirmation (Oui / Non),si Oui on va qui l'application sinon on va rien faire .

case R.id.exit:
           
            AlertDialog.Builder ad= new AlertDialog.Builder(this);
            ad.setTitle("Quitter");
            ad.setMessage("Voulez-vous vraiment quitter l'application ?");
            ad.setIcon(R.drawable.alert);

            ad.setPositiveButton("Oui",new android.content.DialogInterface.OnClickListener() {
               
                @Override
                public void onClick(DialogInterface dialog, int which) {
                    finish();
                   
                }
            });
            ad.setNegativeButton("Non",new android.content.DialogInterface.OnClickListener() {
               
                @Override
                public void onClick(DialogInterface dialog, int which) {
               
                   
                }
            });

            ad.show();
           
            break;

 

Avant de finir , je veux vous donner une astuce comment changer le font d'un TextView par exemple avec un font de votre choix et qui n'est pas integré dans le SDK Android,pour ce faire je vous recommande ce site qui vous offre une grande bibliothèque de font .

1- Ajouter un fichier font de type .ttf au dossier Assets de l'application (nommé par exemple androidfont.ttf) .

2- On ajoute par exemple un TextView au layout splash.xml 

 

On ajoute ces ligne de code à l'activité SplashScreen :

txt=(TextView)findViewById(R.id.textView1);

Typeface font=Typeface.createFromAsset(getAssets(), "androidfont.ttf");
txt.setTypeface(font);

Ce tutoriel est fini  ,on espère que tout a été clair et n'osez pas de poser des questions ou des remarques .

A bientôt .