[Android] Passer d’une vue à une autre en cliquant sur un bouton

Quand on débute en développement Android, on crée notre première application, on ajoute du texte, un bouton, etc… Et après ? Comment créer une nouvelle page et passer à cette page en cliquant sur le bouton ? 

C’est ce que je vais essayer d’expliquer aujourd’hui dans ce tutoriel.

Création du bouton

On va partir d’une page vide, où nous allons ajouter un bouton. Jusque-là, rien de bien compliqué.

Il vous suffit de déplacer le bouton à partir de la palette sur votre vue.

vueavecboutonsimple

  • Modifiez l’identifiant du bouton par : “buttonSuivant”

Ajout d’une deuxième vue

La deuxième étape consite à ajouter une seconde vue (ou activité) à notre projet.

Cette étape va se départager en 3 étapes.

Etape 1 : Création de la classe qui va contrôler la vue

Nous allons créer cette classe sous : src –> com.example.tutopassagevue

Faites un clic droit puis :

  • New
  • Class
  • Nommez-là

L’arborescence de votre projet doit ressembler à ça :

nouvelle_vue_projet_android

Le code de la classe “Vue2.java” est presque vide.

Remplacez le par celui-là :

[java]
public class Vue2 extends Activity {

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

@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;
}

}
[/java]

Etape 2 : Création de la vue

Maintenant, nous allons créer la vue dans le projet. Ajoutez simplement un nouveau “Android XML File” sous : res –> layout

  • Clic droit
  • New
  • Other…
  • Android XML File

new_android_xml_file

  • Nommez votre fichier XML “vue2”
  • Validez par “Finish

new_android_xml_file2

Etape 3 : Déclaration de la nouvelle vue dans le AndroidManifest.xml

Pour déclarer correctement cette nouvelle vue dans notre projet, il faut ajouter l’activité dans le fichier “AndroidManifest.xml“.

  • Ouvrez le code du fichier “AndroidManifest.xml”
  • Sélectionnez l’onglet où se trouve le code (voir ci-dessous)

androidmanifestxml

  • Sous la balise fermante “</activity>” ajoutez le code ci-dessous qui correspond à la nouvelle vue :

[xml]
<activity android:name=".Vue2" />
[/xml]

Le code de votre fichier AndroidManifest.xml doit être identique à ça :

[xml]
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.tutopassagevue"
android:versionCode="1"
android:versionName="1.0" >

<uses-sdk
android:minSdkVersion="8"
android:targetSdkVersion="17" />

<application
android:allowBackup="true"
android:icon="@drawable/ic_launcher"
android:label="@string/app_name"
android:theme="@style/AppTheme" >
<activity
android:name="com.example.tutopassagevue.MainActivity"
android:label="@string/app_name" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />

<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity android:name=".Vue2" />
</application>

</manifest>
[/xml]

Voilà. Si après enregistrement du projet il n’y a pas d’erreur bloquante, c’est que tout a bien été déclaré.

Passons à la dernière étape : le code du bouton!

La gestion du clic sur le bouton “suivant”

Maintenant que tout est en place, il faut gérer l’effet du clic de l’utilisateur sur le bouton suivant pour passer à la seconde vue.

Cette gestion se fait dans le code de notre classe Java (“MainActivity.java”).

[java]
public class MainActivity extends Activity {

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

final Button buttonsuiv = (Button) findViewById(R.id.buttonSuivant);
buttonsuiv.setOnClickListener(new View.OnClickListener() {

@Override
public void onClick(View v) {
Intent intent = new Intent(MainActivity.this, Vue2.class);
startActivity(intent);
}
});
}

@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;
}

}
[/java]

Enregistrez, compilez et testez!

Si vous avez suivi les étapes dans l’ordre, le passage d’une vue à l’autre doit se faire sans soucis.

7 Comments [Android] Passer d’une vue à une autre en cliquant sur un bouton

  1. Amri

    Bonjour,
    j’ai suivit les étapes à la lettre mais la dernière partie me sort des erreurs, voilà à quoi ça ressemble:

    final Button buttonsuiv = (Button) findViewById(R.id.btn_start);
    buttonsuiv.setOnClickListener(new View.OnClickListener() {

    @Override
    public void onClick(View v) {
    Intent intent = new Intent(MainActivity.this, send.class);
    startActivity(intent);
    }
    });

    ça souligne “button” , ” view” et “intent” ..

    je suis débutant merci pour votre aide à l’avance 🙂

    Reply
    1. Joey Bronner

      Salut!

      Avec un peu de retard… (je pense que tu as trouvé maintenant)

      Il faut que tu passes ta souris sur chaque mot souligné, et que tu cliques sur “import

      Voilà.. c’est bon ?

      Bon courage pour la suite!

      Reply
  2. hey

    Merci beaucoup pour ce tuto tres clair.
    j’ai deux erreurs: main cannot be resolved or is not a field
    une sur cette ligne
    getMenuInflater().inflate(R.menu.main, menu);
    et l’autre sur
    getMenuInflater().inflate(R.menu.main, menu);

    Reply
  3. Dr dry

    bonjour! mon problème est le suivant: j’aimerai quitter d’une vue ajout_client.xml a activity_main.xml mais l’application plante et se ferme brusquement
    voici le code
    ok.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
    Intent intent = new Intent(AjoutActivity.this, MainActivity.class);
    startActivity(intent);
    }
    });
    et le manifeste est

    Reply

Leave a Reply to lalki Cancel reply

Your email address will not be published.