Intouch - Services informatiques
Nous allons créer un écran de connexion simple dans Android Studio en utilisant XML et le connecter avec un fichier Java. Pour créer un écran de connexion simple, nous aurons besoin de certains éléments que nous allons appliquer dans Android Studio. Pour commencer, ouvrez Android Studio et configurez votre projet. Pour obtenir de l'aide, consultez nos précédents tutoriels sur la création de votre première application Android.
Dans le fichier XML nommé activity_main.xml, nous ajouterons une vue d'image, deux vues de texte, deux champs de texte et un bouton.
- Une vue d'image (ImageView) sert de placeholder pour les images, nous l'utiliserons pour afficher un logo qui identifie le projet à son nom.
- Une vue de texte (TextView) affiche du texte à l'utilisateur, dans ce cas, elle affichera les champs de nom d'utilisateur et de mot de passe, en d'autres termes, elle agit comme une étiquette.
- Un champ de texte (EditText) est utilisé pour récupérer des données texte de l'utilisateur, dans le sens où il agit comme un champ de formulaire où vous pouvez ajouter vos informations telles que demandées.
Pour ajouter une vue d'image dans le fichier XML, ajoutez le code suivant :
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="150dp"
android:layout_marginTop="50dp"
android:id="@+id/imagelogo"
android:src="@drawable/logo"
/>
Notez que vous devez remplacer "@drawable/logo" par le nom de votre image, mais d'abord, vous devriez ajouter l'image dans le dossier du projet pour qu'elle apparaisse.
Pour ajouter une vue de texte et un champ de texte pour le nom d'utilisateur, utilisez le code suivant :
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Username"
android:layout_below="@+id/imagelogo"
android:textSize="40dp"
android:layout_marginTop="50dp"
android:id="@+id/usernameview"
/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/usernameview"
android:id="@+id/username"
/>
Les éléments essentiels dans le code ci-dessus sont :
- La largeur de mise en page (layout_width)
- La hauteur de mise en page (layout_height)
- L'ID (id)
Pour ajouter une vue de texte et un champ de texte pour le mot de passe, utilisez le code suivant :
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Password"
android:layout_below="@+id/username"
android:textSize="40dp"
android:layout_marginTop="20dp"
android:id="@+id/passwordview"
/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/passwordview"
android:id="@+id/password"
android:inputType="textPassword"
/>
Ensuite, nous allons ajouter le bouton de soumission :
<Button
android:layout_width="300dp"
android:layout_height="80dp"
android:text="Login"
android:id="@+id/login"
android:layout_marginLeft="50dp"
android:layout_below="@+id/password"
/>
Le code complet pour le fichier activity_main.xml sera :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:tools="http://schemas.android.com/tools"
android:background="#9cc2e5"
tools:context=".MainActivity">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="150dp"
android:layout_marginTop="50dp"
android:id="@+id/imagelogo"
android:src="@drawable/logo"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Username"
android:layout_below="@+id/imagelogo"
android:textSize="40dp"
android:layout_marginTop="50dp"
android:id="@+id/usernameview"
/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/usernameview"
android:id="@+id/username"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Password"
android:layout_below="@+id/username"
android:textSize="40dp"
android:layout_marginTop="20dp"
android:id="@+id/passwordview"
/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/passwordview"
android:id="@+id/password"
android:inputType="textPassword"
/>
<Button
android:layout_width="300dp"
android:layout_height="80dp"
android:text="Login"
android:id="@+id/login"
android:layout_marginLeft="50dp"
android:layout_below="@+id/password"
/>
</RelativeLayout>
L'écran de sortie pour le code ci-dessus est le suivant :
Ensuite, nous allons connecter les identifiants dans activity_main.xml à MainActivity.java et le code sera comme indiqué ci-dessous :
- Initialisez les champs de texte et le bouton dans la classe publique comme indiqué :
EditText username, password;
Button login;
- Ensuite, connectez les éléments initialisés ci-dessus à ceux du fichier xml comme suit à l'intérieur de la méthode
onCreate:
username = (EditText) findViewById(R.id.username);
password = (EditText) findViewById(R.id.password);
login = (Button) findViewById(R.id.login);
Ensuite, nous ajoutons l'action de clic au bouton de connexion et vérifions si l'utilisateur a saisi des données dans les champs nom d'utilisateur et mot de passe.
- S'il y a des champs vides, affichez des messages texte à l'utilisateur demandant des informations.
- Si tout est rempli correctement, l'activité de connexion se poursuivra.
login.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
if(username.getText().toString().equals("")){
Toast.makeText(getApplicationContext(), "Username cannot be blank", Toast.LENGTH_SHORT).show();
}else if(password.getText().toString().equals("")){
Toast.makeText(getApplicationContext(), "password cannot be blank", Toast.LENGTH_SHORT).show();
}else{
Toast.makeText(getApplicationContext(), "login method to proceed", Toast.LENGTH_SHORT).show();
}
}
});
Finalement, le code complet de MainActivity.java est le suivant :
package com.maestrislyon.simpleloginpage;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity {
EditText username, password;
Button login;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
username = (EditText) findViewById(R.id.username);
password = (EditText) findViewById(R.id.password);
login = (Button) findViewById(R.id.login);
login.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
if(username.getText().toString().equals("")){
Toast.makeText(getApplicationContext(), "Username cannot be blank", Toast.LENGTH_SHORT).show();
}else if(password.getText().toString().equals("")){
Toast.makeText(getApplicationContext(), "password cannot be blank", Toast.LENGTH_SHORT).show();
}else{
Toast.makeText(getApplicationContext(), "login method to proceed", Toast.LENGTH_SHORT).show();
}
}
});
}
}
Conclusion
Pour cet article, nous allons nous arrêter à cette étape afin que dans le prochain article, nous discutions de la manière d'ajouter l'API de connexion qui communiquera avec le serveur pour vérifier si les informations ajoutées par l'utilisateur existent dans la table de la base de données.
* Pay to Play
Comme dans le domaine de la musique, le pay to play (ou payola) est la pratique par laquelle un artiste ou son représentant (maison de disques, agent) paye la personne contrôlant l'accès à un moyen de diffusion (salle de spectacle, émission de radio) afin d'accéder à ce moyen, dans le domaine du webmarketing une entreprise ou son agence de e-marketing paye les grands acteurs du numérique (Google, Facebook …) afin d’accéder à un public cible par les moyens publicitaires sur ces plateformes.
