Skip to content

30 juin 2010 | Rédigé par Axon

62

Faire une application calculatrice [Tuto Android n°6]

Aujourd’hui nous allons faire notre première application qui ressemble vraiment à une application. On commence petit, c’est une simple calculatrice qui nous permettra de revoir le principe des évènements, et du positionnement des Buttons principalement.

Alors pour commencer créez un nouveau projet et appelez le comme vous voulez. Personnellement j’ai choisi une compatibilité avec la version 1.6 d’Android, mais je pense que le code que je vais vous donner fonctionne également à partir de la version 1.5. 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 :

	<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 cursorVisible.

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.

	<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	    android:orientation="horizontal"
	    android:layout_width="fill_parent"
	    android:layout_height="wrap_content"
	    >
 
	    <Button android:id="@+id/button1"
	    	android:text="1"
			android:layout_width="fill_parent"
			android:layout_height="wrap_content"
			android:layout_weight="1"
			/>
 
		<Button android:id="@+id/button2"
	    	android:text="2"
			android:layout_width="fill_parent"
			android:layout_height="wrap_content"
			android:layout_weight="1"
			/>
 
		<Button android:id="@+id/button3"
	    	android:text="3"
			android:layout_width="fill_parent"
			android:layout_height="wrap_content"
			android:layout_weight="1"
			/>
 
		<Button android:id="@+id/buttonPlus"
	    	android:text="+"
			android:layout_width="fill_parent"
			android:layout_height="wrap_content"
			android:layout_weight="1"
			/>
	</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 :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
 
	<EditText android:id="@+id/EditText01"
		android:layout_width="fill_parent"
		android:layout_height="wrap_content"
		android:textSize="20px"
		android:editable="false"
		android:cursorVisible="false"
		/>
 
	<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	    android:orientation="horizontal"
	    android:layout_width="fill_parent"
	    android:layout_height="wrap_content"
	    >
 
	    <Button android:id="@+id/button1"
	    	android:text="1"
			android:layout_width="fill_parent"
			android:layout_height="wrap_content"
			android:layout_weight="1"
			/>
 
		<Button android:id="@+id/button2"
	    	android:text="2"
			android:layout_width="fill_parent"
			android:layout_height="wrap_content"
			android:layout_weight="1"
			/>
 
		<Button android:id="@+id/button3"
	    	android:text="3"
			android:layout_width="fill_parent"
			android:layout_height="wrap_content"
			android:layout_weight="1"
			/>
 
		<Button android:id="@+id/buttonPlus"
	    	android:text="+"
			android:layout_width="fill_parent"
			android:layout_height="wrap_content"
			android:layout_weight="1"
			/>
	</LinearLayout>
 
	<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	    android:orientation="horizontal"
	    android:layout_width="fill_parent"
	    android:layout_height="wrap_content"
	    >
 
	    <Button android:id="@+id/button4"
	    	android:text="4"
			android:layout_width="fill_parent"
			android:layout_height="wrap_content"
			android:layout_weight="1"
			/>
 
		<Button android:id="@+id/button5"
	    	android:text="5"
			android:layout_width="fill_parent"
			android:layout_height="wrap_content"
			android:layout_weight="1"
			/>
 
		<Button android:id="@+id/button6"
	    	android:text="6"
			android:layout_width="fill_parent"
			android:layout_height="wrap_content"
			android:layout_weight="1"
			/>
 
		<Button android:id="@+id/buttonMoins"
	    	android:text="-"
			android:layout_width="fill_parent"
			android:layout_height="wrap_content"
			android:layout_weight="1"
			/>
 
	</LinearLayout>
 
	<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	    android:orientation="horizontal"
	    android:layout_width="fill_parent"
	    android:layout_height="wrap_content"
	    >
 
	    <Button android:id="@+id/button7"
	    	android:text="7"
			android:layout_width="fill_parent"
			android:layout_height="wrap_content"
			android:layout_weight="1"
			/>
 
		<Button android:id="@+id/button8"
	    	android:text="8"
			android:layout_width="fill_parent"
			android:layout_height="wrap_content"
			android:layout_weight="1"
			/>
 
		<Button android:id="@+id/button9"
	    	android:text="9"
			android:layout_width="fill_parent"
			android:layout_height="wrap_content"
			android:layout_weight="1"
			/>
 
		<Button android:id="@+id/buttonMultiplier"
	    	android:text="*"
			android:layout_width="fill_parent"
			android:layout_height="wrap_content"
			android:layout_weight="1"
			/>
 
	</LinearLayout>
 
	<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	    android:orientation="horizontal"
	    android:layout_width="fill_parent"
	    android:layout_height="wrap_content"
	    >
 
	    <Button android:id="@+id/button0"
	    	android:text="0"
			android:layout_width="fill_parent"
			android:layout_height="wrap_content"
			android:layout_weight="1"
			/>
 
		<Button android:id="@+id/buttonPoint"
	    	android:text="."
			android:layout_width="fill_parent"
			android:layout_height="wrap_content"
			android:layout_weight="1"
			/>
 
		<Button android:id="@+id/buttonC"
	    	android:text="C"
			android:layout_width="fill_parent"
			android:layout_height="wrap_content"
			android:layout_weight="1"
			/>
 
		<Button android:id="@+id/buttonDivision"
	    	android:text="/"
			android:layout_width="fill_parent"
			android:layout_height="wrap_content"
			android:layout_weight="1"
			/>
 
	</LinearLayout>
 
	<Button android:id="@+id/buttonEgal"
	    	android:text="="
			android:layout_width="fill_parent"
			android:layout_height="wrap_content"
			/>
 
	<ImageView android:id="@+id/logo"
			android:layout_width="fill_parent"
			android:layout_height="wrap_content"
			android:src="@drawable/logo_tuto_mobile"
			android:paddingTop="20px"
	/>
</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.tutomobile.android.calculatrice;
 
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
 
public class Tutoriel4_Android 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.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");
            }
        }
    }
}

On notera que l’on utilise qu’une seule méthode pour gérer les évènements sur les boutons chiffres, rien d’exceptionnel d’autant plus qu’il me semble qu’il y a un moyen moins lourd pour déclarer les écouteurs d’évènements sur les boutons, mais je n’ai pas encore trouvé comment faire. D’ailleurs si quelqu’un voit de quoi je parle, qu’il n’hésite pas à nous aider.

Comme toujours n’hésitez pas à poser vos questions, vous êtes déjà un bon petit nombre à consulter les tutos mais vous ne posez jamais de question, je commence à me remettre en question… ;)

Encore un peu de lecture :

62 Commentaires Poster un commentaire
  1. efel
    9 nov 2011

    Bonjour,

    Je cite :
     »
    Sispheor
    Bonsoir, j’ai une petite question. A aucun moment l’écran est initialisé avec la valeur « 0″. Lors du premier lancement l’écran doit bien afficher zéro non?
    Voila. Merci pour la réponse.
     »
    Pour l’affichage du 0.0 au démarrage et après Clear :

    private double chiffre1 = 0;

    private boolean update = true;

    puis après la ligne :
    ecran = (EditText) findViewById(R.id.EditText01);
    ajouter :
    ecran.setText(String.valueOf(chiffre1));

    enfin modifier resetClick comme suit :*

    //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(String.valueOf(chiffre1));
    }

    Voici une petite contribution à ce tuto très intéressant.

    Merci à tous

  2. aspirator
    15 nov 2011

    bonjour,
    merci beaucoup pour les quelques tutos qui sont relativement clair.
    j’ai fait la calculette en me servant du switch et en y intégrant les méthodes de calcul, je met le code du switch , si ça peut vous donner des idées.
    le voici :

    public void onClick(View v) {
    switch(v.getId()){
    case R.id.bouton1:
    edit.setText(edit.getText()+ »1″);
    break;
    case R.id.bouton2:
    edit.setText(edit.getText()+ »2″);
    break;
    case R.id.bouton3:
    edit.setText(edit.getText()+ »3″);
    break;
    case R.id.bouton4:
    edit.setText(edit.getText()+ »4″);
    break;
    case R.id.bouton5:
    edit.setText(edit.getText()+ »5″);
    break;
    case R.id.bouton6:
    edit.setText(edit.getText()+ »6″);
    break;
    case R.id.bouton7:
    edit.setText(edit.getText()+ »7″);
    break;
    case R.id.bouton8:
    edit.setText(edit.getText()+ »8″);
    break;
    case R.id.bouton9:
    edit.setText(edit.getText()+ »9″);
    break;
    case R.id.bouton0:
    edit.setText(edit.getText()+ »0″);
    break;
    case R.id.boutonc:
    edit.setText(«  »);
    resultat = 0;
    point–;
    break;
    case R.id.boutonpo:
    if(point<=0){
    edit.setText(edit.getText()+".");
    point=1;
    }
    break;
    case R.id.boutonplus:
    chiffre1 = Double.valueOf(edit.getText().toString()) + chiffre1;
    plus = true;
    moins = false;
    div = false;
    fois = false;
    edit.setText("");
    break;
    case R.id.boutonmoins:
    chiffre1 = Double.valueOf(edit.getText().toString()) – chiffre1;
    plus = false;
    moins = true;
    div = false;
    fois = false;
    edit.setText("");
    break;
    case R.id.boutonfois:
    chiffre1 = Double.valueOf(edit.getText().toString()) + chiffre1;
    plus = false;
    moins = false;
    div = false;
    fois = true;
    edit.setText("");
    break;
    case R.id.boutondiv:
    chiffre1 = Double.valueOf(edit.getText().toString()) + chiffre1;
    plus = false;
    moins = false;
    div = true;
    fois = false;
    edit.setText("");
    break;
    case R.id.boutonresult:
    if(plus == true)
    resultat = Double.valueOf(edit.getText().toString())+chiffre1;
    if(moins == true)
    resultat = chiffre1 -Double.valueOf(edit.getText().toString());
    if(fois == true)
    resultat = chiffre1 * Double.valueOf(edit.getText().toString());
    if(div == true)
    resultat = chiffre1 / Double.valueOf(edit.getText().toString());
    edit.setText(""+resultat);
    chiffre1 = 0;

    break;
    }

    }

    voila, merci encore

  3. 15 déc 2011

    Bonjour,
    Je viens de suivre ce tuto qui fonctionne très bien mais j’ai une petite question :
    Lorsque je clic sur le bouton « = » Voici ce que j’appelle :
    public void egalClick() {
    calcul();
    update = true;
    clicOperateur = false;
    }
    J’appelle la méthode calcul() mais voilà dans calcul il n’y a pas de condition pour exécuter du code mais le résultat s’affiche bien dans champs…
    Quelqu’un pourrait m’expliquer pourquoi ???
    Je vous remercie de vos réponses par avance.

  4. Novice
    1 jan 2012

    Bonjour à tous,

    J’ai suivi le tuto que je trouve super claire. Par contre, à l’exécution de l’application j’ai un message d’erreur:

    « Sorry! The application (Process) has stopped unexpectedly. Please try again »

    D’avance merci de votre aide pour trouver la solution.

  5. abdou
    22 jan 2012

    j ‘ai un prob dans :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);
    il me souligne une erreur sur id
    est ce qui’ il y a qlq qui me aide stp

  6. Moutiee
    26 fév 2012

    Bonjour,
    j’ai repris ce code avec eclipse et genere un .apk
    L’appli fonctionne bien avec l’emulator . apres telechargement sur mon samsung galaxy gio pas moyen de l’installer j’ai le message : « application non installee. »

    une idée ?

  7. Skuti
    8 avr 2012

    Pour un néophyte il est quand même assez difficile de comprendre. D’où sort le package com.tutomobile.android.calculatrice? Où doit ton placer cette nouvelle classe? Cela parait évident pour certain mais pas pour moi =p

    Merci pour ceux qui voudront bien m’eclairer ^^

  8. Frank
    12 avr 2012

    « On notera que l’on utilise qu’une seule méthode pour gérer les évènements sur les boutons chiffres, rien d’exceptionnel d’autant plus qu’il me semble qu’il y a un moyen moins lourd pour déclarer les écouteurs d’évènements sur les boutons, mais je n’ai pas encore trouvé comment faire. D’ailleurs si quelqu’un voit de quoi je parle, qu’il n’hésite pas à nous aider. »

    Perso j’utilise la méthode onclick dans les propriété de l’objet. Je lui affecte un nom puis je l’utilise directement. Par exemple pour la touche 1 , j’ai déclaré AppBouton_1 dans le onclick et je l’utilise comme ça :
    public void AppBouton_1(View v){
    ToucheApp(« 1″);
    };
    D’aprés tous les exemples j’ai vu ça n’a pas l’air très conforme mais c’est simple et rapide.

  9. 7 juin 2012

    J’aime ce site ce un bon site mai je n’arrive pas a me connecté dessus sinon j’ai besoin d’un prof a distance

  10. thebeps
    25 déc 2012

    Pour abdou:

    C’est normal, le R.id.xxx, vient du fichier R qui n’est créé qu’une fois que tu fais une première compilation de ton projet. Donc avant que tu ais essayé de lancer ton projet pour la première fois, Eclipse ne connait pas R, tu dois juste ignorer cette erreur.

    Pour Moutiee:

    Regarde dans les settings de ton android (sous le menu application) que source inconnues est bien activé, sans cela tu ne peux installer que des programmes venant du store…

    Pour Skuti:

    Commence par les premiers tutoriels… le package est en quelque sort le nom complet qui est donné à ton projet quand tu le crée.

  11. hamdi
    11 mai 2013

    coment faire une controle pour la division en 0

Trackbacks & Pingbacks

  1. Tuto développement Android : faire une calculatrice

Une question, une suggestion, une opinion? Partagez ce que vous pensez, laissez un commentaire.

(obligatoire)
(obligatoire)

Note: Votre adresse email ne sera jamais publiée.

Suivez les réponses aux commentaires