Faciliter le développement des applications Android

Chers membres du club J2I équipe Android, comme je vous ai proposé voilà les "material design" pour faciliter le développement de vos applications.

Importez->intégrez les dans vos applications->ENJOY 

Android CircleMenu

Fatigué d'être ordinaire? faire des applications de type régulier et en utilisant tous les mêmes et défaut peau Android dans toutes vos applications mobiles?

Un beau Menu Circulaire est prêt pour vous à utiliser cher membres du club J2I.

Vous pouvez télécharger le projet ici

DashBoard Menu

DashBoard est un élément important dans les applications Android qui permet une navigation facile aux fonctionnalités antérieures de l'application.

Vous pouvez télécharger le projet ici

Satellite Menu

Le menu se compose d'un bouton principal en bas à gauche de l'écran. Lorsque l'utilisateur clique sur ce bouton, un certain nombre de boutons sont sauté sur ce bouton.

Vous pouvez télécharger le projet ici

Radial Menu

Un autre type des menus

Vous pouvez télécharger le projet ici

QuiAction

C'est une petite bibliothèque pour créer des dialogues Android.

Vous pouvez télécharger le projet ici

Un autre projet du QuickAction

Vous pouvez télécharger le projet ici

Styled dialogs

Cette bibliothèque fait le style et l'utilisation de dialogues un jeu d'enfant

Vous pouvez télécharger le projet ici

To be Continued chez J2I... 

Lire la suite

ListView avec ArrayList

Comme nous avons vu pendant la séance précédente, les ListView sont très utiles pour afficher clairement un grand nombre de données. Nous allons donc voir comment utiliser une ListView avec ArrayList.

Alors comme d’habitude avant de se lancer dans le code je vous montre ce que l’on veut faire :

Contenu de la classe ArrayList

La classe ArrayList permet de construire des tableaux de taille variable. De la même manière qu’un tableau (un tableau d’int, de char, de String...), une ArrayList contient des valeurs d’un type donné. On doit préciser ce type quand on déclare la variable. Pour cela, on fait suivre le nom de la classe ArrayList par le type des éléments, entre chevrons (< et >).

Par exemple : ArrayList<String> maListe; déclare la variable maListe comme étant une référence vers une ArrayList de Strings. Une ArrayList est un objet, et comme les tableaux, les objets sont créés par l’exécution de l’instruction new. Nous verrons plus tard les détails. Pour l’instant, il suffit de comprendre que

maListe= new ArrayList<String>(); va créer une ArrayList vide.

Utilisation

•  la méthode size(), qui est une fonction, retourne la longueur d’une ArrayList

Exemple : int long= maListe.size()

•  la méthode get(int i) renvoie l’entrée de la case numéro i

Exemple : public static int somme(ArrayList<Integer> liste) { 

      int s=0; for (int i= 0; i < liste.size(); i++) { s= s + liste.get(i); }

      return s; 

  }

• la méthode add(element) ajoute un élément à la fin de la liste

Exemple : ArrayList<String> l= new ArrayList<String>(); 

    l.add("Slim"); 

    l.add("ISAMM"); 

    l.add("J2I");

• la méthode set(int i, element) remplace l’ancienne valeur qui était dans la case i par element, i doit être inférieure à la size() de l’ArrayList.
• la méthode remove(int i) supprime l’élément qui est dans la case i;
• la méthode clear() vide la liste.

ListView

Fichier activity_mainl.xml

1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
2.     android:layout_width="fill_parent"
3.     android:layout_height="fill_parent"
4.     android:orientation="vertical" >
5. 
   
6.     <EditText
7.         android:id="@+id/nom"
8.         android:layout_width="match_parent"
9.         android:layout_height="wrap_content"
10.         android:ems="10" >
11.     </EditText>
12. 
    
13.     <LinearLayout
14.         android:layout_width="match_parent"
15.         android:layout_height="wrap_content" >
16. 
    
17.         <Button
18.             android:id="@+id/add"
19.             android:layout_width="wrap_content"
20.             android:layout_height="wrap_content"
21.             android:layout_weight="1"
22.             android:text="Ajouter" />
23. 
    
24.         <Button
25.             android:id="@+id/find"
26.             android:layout_width="wrap_content"
27.             android:layout_height="wrap_content"
28.             android:layout_weight="1"
29.             android:text="Chercher" />
30. 
    
31.         <Button
32.             android:id="@+id/rem"
33.             android:layout_width="wrap_content"
34.             android:layout_height="wrap_content"
35.             android:layout_weight="1"
36.             android:text="Supprimer" />
37.     </LinearLayout>
38. 
    
39.     <ListView
40.         android:id="@+id/list"
41.         android:layout_width="match_parent"
42.         android:layout_height="wrap_content" >
43.     </ListView>
44. 
    
45. </LinearLayout>

Fichier MainActivity.java

Notre activité principale (MainActivity) crée une ArrayAdapter, qui contient les objets à afficher dans la ListView. Le constructeur ArrayAdapter est passé l'ID de ressource du fichier de mise en page android.R.layout.simple_list_item_1, le ArrayAdapter va l'utiliser pour instancier un TextView pour chaque ligne.

Nous avons ensuite mis le ArrayAdapter que l'adaptateur de notre ListView.

1. // trouver la ressource ListView.
2. list = (ListView) this.findViewById(R.id.list);
3. // créer ArrayAdapter en utilisant la liste des chaines.
4. ArrayAdapterAdapter=new ArrayAdapter(MainActivity.this,android.R.layout.simple_list_item_1, tab);
5. // appliquer l'adapter sur la listView
6. list.setAdapter(Adapter);
7. list.setOnItemClickListener(this);

Le code source et les fichiers de projet Eclipse pour ce tutoriel peuvent être téléchargés ici

Lire la suite

Faire une application calculatrice

Bonjour les membres du club Jeunes Ingénieurs ISAMM J2I, vous trouverez dans ce toturial une partie de ce que nous avons fait durant la séance du 27/11/2013. On commence petit à petit, c’est une simple calculatrice qui nous permettra de revoir le principe des événements, et du positionnement des Buttons principalement.

Avant de partir tête baissée dans le code, je vous montre ce qu’on souhaite réaliser :

Code XML

Commençons par l’interface graphique via le fichier main.xml, pour ce qui fera figure d’écran on va utiliser un EditText qui aura les propriétés suivantes :

1. <EditText android:id="@+id/EditText01"
   android:layout_width="fill_parent"
   android:layout_height="wrap_content"
   android:textSize="20px"
   android:editable="false"
   android:cursorVisible="false"
   />

On étend l’affichage de l’EditBox en largeur mais pas en hauteur, grâce à l’attribut editable on ne permet pas à l’utilisateur d’entrer directement du texte avec le clavier virtuel, et pour une question d’esthétisme on supprime le curseur à l’aide de l’attribut.

Passons maintenant à l’affichage des boutons. Nous allons voir comment faire pour une rangée et se sera la même chose pour toutes les autres rangées. Je vous donne tout de suite le code et je vous explique après les deux-trois choses à retenir.

1. <LinearLayout
       android:orientation="horizontal"
       android:layout_width="fill_parent"
       android:layout_height="wrap_content"
       >
2.  <Button android:id="@+id/button1"
        android:text="1"
   android:layout_width="fill_parent"
   android:layout_height="wrap_content"
   android:layout_weight="1"
   />
3. <Button android:id="@+id/button2"
        android:text="2"
   android:layout_width="fill_parent"
   android:layout_height="wrap_content"
   android:layout_weight="1"
   />
4. <Button android:id="@+id/button3"
        android:text="3"
   android:layout_width="fill_parent"
   android:layout_height="wrap_content"
   android:layout_weight="1"
   />
5. <Button android:id="@+id/buttonPlus"
        android:text="+"
   android:layout_width="fill_parent"
   android:layout_height="wrap_content"
   android:layout_weight="1"
   />
6. </LinearLayout>

L’astuce pour placer les boutons en ligne est de les placer dans un LinearLayout complété de l’attribut orientation avec la valeur horizontal, et définir l’attribut layout_width des boutons fill_parent. Néanmoins si on laisse dans l’état on ne verra que le premier bouton de la rangée, il faut donc attribuer à chaque bouton un layout_weight de 1.

On applique cela pour chaque rangée de boutons ainsi que pour le bouton égal rien de plus simple, il suffit de définir l’attribut layout_width avec la valeur fill_parent. On obtient alors le fichier XML suivant :

1. <?xml version="1.0" encoding="utf-8"?>
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
       android:orientation="vertical"
       android:layout_width="fill_parent"
       android:layout_height="fill_parent"
       >
3. <EditText android:id="@+id/EditText01"
   android:layout_width="fill_parent"
   android:layout_height="wrap_content"
   android:textSize="20px"
   android:editable="false"
   android:cursorVisible="false"
   />
4. <LinearLayout
       android:orientation="horizontal"
       android:layout_width="fill_parent"
       android:layout_height="wrap_content"
       >
5.     <Button android:id="@+id/button1"
        android:text="1"
   android:layout_width="fill_parent"
   android:layout_height="wrap_content"
   android:layout_weight="1"
   />
6. <Button android:id="@+id/button2"
        android:text="2"
   android:layout_width="fill_parent"
   android:layout_height="wrap_content"
   android:layout_weight="1"
   />
7. <Button android:id="@+id/button3"
        android:text="3"
   android:layout_width="fill_parent"
   android:layout_height="wrap_content"
   android:layout_weight="1"
   />
8. <Button android:id="@+id/buttonPlus"
        android:text="+"
   android:layout_width="fill_parent"
   android:layout_height="wrap_content"
   android:layout_weight="1"
   />
9. </LinearLayout>
10. <LinearLayout
        android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        >
11.     <Button android:id="@+id/button4"
         android:text="4"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    />
12. <Button android:id="@+id/button5"
         android:text="5"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    />
13. <Button android:id="@+id/button6"
         android:text="6"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    />
14. <Button android:id="@+id/buttonMoins"
         android:text="-"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    />
15. </LinearLayout>
16. <LinearLayout
        android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        >
17.     <Button android:id="@+id/button7"
         android:text="7"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    />
18. <Button android:id="@+id/button8"
         android:text="8"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    />
19. <Button android:id="@+id/button9"
         android:text="9"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    />
20. <Button android:id="@+id/buttonMultiplier"
         android:text="*"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    />
21. </LinearLayout>
22. <LinearLayout
        android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        >
23.     <Button android:id="@+id/button0"
         android:text="0"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    />
24. <Button android:id="@+id/buttonPoint"
         android:text="."
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    />
25. <Button android:id="@+id/buttonC"
         android:text="C"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    />
26. <Button android:id="@+id/buttonDivision"
         android:text="/"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    />
27. </LinearLayout>
28. <Button android:id="@+id/buttonEgal"
         android:text="="
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    />
29. </LinearLayout>

Code JAVA

Passons maintenant au code java. Pour programmer cette petite calculatrice, j’ai adapté un code trouvé sur le site du zero.  Je vous donne tout de suite le code JAVA commenté :

package com.example.calcul;

import android.app.Activity;

import android.os.Bundle;

import android.view.View;

import android.widget.Button;

import android.widget.EditText;

public class MainActivity extends Activity {

//On déclare toutes les variables dont on aura besoin

Button button0;

Button button1;

Button button2;

Button button3;

Button button4;

Button button5;

Button button6;

Button button7;

Button button8;

Button button9;

Button buttonPlus;

Button buttonMoins;

Button buttonDiv;

Button buttonMul;

Button buttonC;

Button buttonEgal;

Button buttonPoint;

EditText ecran;

private double chiffre1;

private boolean clicOperateur = false;

private boolean update = false;

private String operateur = "";

    /** Called when the activity is first created. */

    @Override

    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        //On récupère tout les éléments de notre interface graphique grâce aux ID

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

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

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

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

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

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

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

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

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

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

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

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

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

        buttonDiv = (Button) findViewById(R.id.buttonDivision);

        buttonMul = (Button) findViewById(R.id.buttonMultiplier);

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

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

        ecran = (EditText) findViewById(R.id.EditText01);

        //On attribut un écouteur d'évènement à tout les boutons

        buttonPlus.setOnClickListener(new View.OnClickListener() {

        public void onClick(View v) {

        plusClick();

        }

        });

        buttonMoins.setOnClickListener(new View.OnClickListener() {

        public void onClick(View v) {

        moinsClick();

        }

        });

        buttonDiv.setOnClickListener(new View.OnClickListener() {

        public void onClick(View v) {

        divClick();

        }

        });

        buttonMul.setOnClickListener(new View.OnClickListener() {

        public void onClick(View v) {

        mulClick();

        }

        });

        buttonC.setOnClickListener(new View.OnClickListener() {

        public void onClick(View v) {

        resetClick();

        }

        });

        buttonEgal.setOnClickListener(new View.OnClickListener() {

        public void onClick(View v) {

        egalClick();

        }

        });

        buttonPoint.setOnClickListener(new View.OnClickListener() {

        public void onClick(View v) {

        chiffreClick(".");

        }

        });

        button0.setOnClickListener(new View.OnClickListener() {

        public void onClick(View v) {

        chiffreClick("0");

        }

        });

        button1.setOnClickListener(new View.OnClickListener() {

        public void onClick(View v) {

        chiffreClick("1");

        }

        });

        button2.setOnClickListener(new View.OnClickListener() {

        public void onClick(View v) {

        chiffreClick("2");

        }

        });

        button3.setOnClickListener(new View.OnClickListener() {

        public void onClick(View v) {

        chiffreClick("3");

        }

        });

        button4.setOnClickListener(new View.OnClickListener() {

        public void onClick(View v) {

        chiffreClick("4");

        }

        });

        button5.setOnClickListener(new View.OnClickListener() {

        public void onClick(View v) {

        chiffreClick("5");

        }

        });

        button6.setOnClickListener(new View.OnClickListener() {

        public void onClick(View v) {

        chiffreClick("6");

        }

        });

        button7.setOnClickListener(new View.OnClickListener() {

        public void onClick(View v) {

        chiffreClick("7");

        }

        });

        button8.setOnClickListener(new View.OnClickListener() {

        public void onClick(View v) {

        chiffreClick("8");

        }

        });

        button9.setOnClickListener(new View.OnClickListener() {

        public void onClick(View v) {

        chiffreClick("9");

        }

        });

    }

    //voici la méthode qui est exécutée lorsque l'on clique sur un bouton chiffre

    public void chiffreClick(String str) {

        if(update){

                update = false;

        }else{

            if(!ecran.getText().equals("0"))

            str = ecran.getText() + str;

        }

        ecran.setText(str);

    }

    //voici la méthode qui est  exécutée lorsque l'on clique sur le bouton +

    public void plusClick(){

    if(clicOperateur){

    calcul();

            ecran.setText(String.valueOf(chiffre1));

        }else{

            chiffre1 = Double.valueOf(ecran.getText().toString()).doubleValue();

            clicOperateur = true;

        }

        operateur = "+";

        update = true;

    }

    //voici la méthode qui est  exécutée lorsque l'on clique sur le bouton -

    public void moinsClick(){

    if(clicOperateur){

    calcul();

            ecran.setText(String.valueOf(chiffre1));

        }else{

            chiffre1 = Double.valueOf(ecran.getText().toString()).doubleValue();

            clicOperateur = true;

        }

        operateur = "-";

        update = true;

    }

    //voici la méthode qui est  exécutée lorsque l'on clique sur le bouton *

    public void mulClick(){

    if(clicOperateur){

    calcul();

    ecran.setText(String.valueOf(chiffre1));

        }else{

            chiffre1 = Double.valueOf(ecran.getText().toString()).doubleValue();

            clicOperateur = true;

        }

        operateur = "*";

        update = true;

    }

    //voici la méthode qui est  exécutée lorsque l'on clique sur le bouton /

    public void divClick(){

    if(clicOperateur){

    calcul();

    ecran.setText(String.valueOf(chiffre1));

         }else{

        chiffre1 = Double.valueOf(ecran.getText().toString()).doubleValue();

        clicOperateur = true;

         }

         operateur = "/";

         update = true;

    }

    //voici la méthode qui est  exécutée lorsque l'on clique sur le bouton =

    public void egalClick(){

    calcul();

        update = true;

        clicOperateur = false;

    }

    //voici la méthode qui est  exécutée lorsque l'on clique sur le bouton C

    public void resetClick(){

    clicOperateur = false;

         update = true;

         chiffre1 = 0;

         operateur = "";

         ecran.setText("");

    }

    //Voici la méthode qui fait le calcul qui a été demandé par l'utilisateur

    private void calcul(){

        if(operateur.equals("+")){

        chiffre1 = chiffre1 + Double.valueOf(ecran.getText().toString()).doubleValue();

            ecran.setText(String.valueOf(chiffre1));

        }

        if(operateur.equals("-")){

        chiffre1 = chiffre1 - Double.valueOf(ecran.getText().toString()).doubleValue();

            ecran.setText(String.valueOf(chiffre1));

        }

        if(operateur.equals("*")){

                chiffre1 = chiffre1 * Double.valueOf(ecran.getText().toString()).doubleValue();

                ecran.setText(String.valueOf(chiffre1));

        }

        if(operateur.equals("/")){

        try{

            chiffre1 = chiffre1 / Double.valueOf(ecran.getText().toString()).doubleValue();

                ecran.setText(String.valueOf(chiffre1));

            }catch(ArithmeticException e){

                ecran.setText("0");

            }

        }

    }

}

Le code source et les fichiers de projet Eclipse pour ce tutoriel peuvent être téléchargés ici

Inspiré du tutorial de site du zéro

Lire la suite