Didacticiel Android Firebase Realtime Database avec RecyclerView
Dans cet article, nous voulons examiner plusieurs exemples de RecyclerView et de base de données Firebase Realtime. En gros, comment effectuer plusieurs opérations CRUD comme l'ajout, la récupération et l'affichage dans RecyclerView.
Qu'est-ce que la base de données Firebase Realtime ?
Firebase Realtime Database est l'un des services fournis par Firebase Platform, qui appartient à Google.
Fondamentalement, c'est ce que nous appelons une base de données BAAS, ou une base de données Backend As A Service. Il est hébergé dans le Cloud.
Pourquoi Firebase Realtime Database ?
Elle diffère de nombreuses bases de données que vous connaissez peut-être déjà de plusieurs façons. Ce sont ces aspects qui confèrent à la base de données en temps réel de Firebase ses avantages.
- Elle est hébergée dans le Cloud alors que les autres bases comme [SQLite] (https://camposha.info/android/sqlite) et Realm sont hébergées localement. Cela permet à Firebase Realtime Database d'être accessible à de nombreuses applications. Les bases de données comme SQLite et Realm sont localisées dans une seule application. La base de données en temps réel Firebase est accessible à de nombreuses applications.
- Elle est en temps réel. C'est la plus grande différence. Cela signifie que vous enregistrez des données et que, automatiquement, les données de toutes les applications connectées sont mises à jour instantanément. Cela le rend tout à fait applicable à de nombreux types d'applications comme les applications de chat et de messagerie, les applications qui nécessitent une synchronisation instantanée.
- Il stocke les données au format json, contrairement aux tables dans sqlite. Cela rend la base de données Firebase Realtime Database très évolutive.
- Il a des plans gratuits et payants. C'est le meilleur scénario possible, car vous pouvez alors l'utiliser à des fins d'apprentissage et à des fins commerciales.
Qu'est-ce que RecyclerView ?
RecyclerView est un adaptateur android qui permet de rendre efficacement de grands ensembles de données. Normalement, pour rendre des listes de données dans android, vous avez besoin d'un adaptateur et d'un adaptateur. L'adaptateur est le widget de liste et les exemples incluent ListView, Gridview, Spinner et bien sûr RecyclerView.
Ensuite, l'adaptateur est normalement responsable de la connexion de l'adapterview à la source de données. Et en fait, vous pouvez normalement utiliser des mises en page personnalisées pour présenter un seul élément de liste. Cette mise en page est également gonflée dans l'adaptateur.
Pour en savoir plus [sur le RecyclerView, cliquez ici] (https://camposha.info/android/recyclerview).
Pourquoi RecyclerView ?
Nous avons dit que plusieurs adaptateurs peuvent être utilisés pour la présentation des données dans Android. Il y a ListView, GridView, Spinner, etc. ListView était la plus populaire jusqu'à l'introduction de RecyclerView.
De nos jours, RecyclerView est l'adaptateur le plus utilisé en raison de sa flexibilité et de ses performances. RecyclerView peut être utilisé pour construire presque n'importe quel type de vue, qu'il s'agisse d'une vue en liste, d'une vue en grille ou en quinconce, d'une vue en tableau, d'un calendrier, etc.
Ce fait le rend assez spécial et utilisable dans de nombreux scénarios. Pourtant, elle n'est pas beaucoup plus difficile que les autres adapterviews.
Outils utilisés
Cet exemple a été écrit avec les outils suivants :
- Microsoft Windows 8.1 - C'est mon système d'exploitation.
- Android Studio - C'est mon IDE (Integerated Develpment Kit) par Jetbrains et Google.
- Emulateur Genymotion - Nous l'utilisons pour tester nos applications.
- Langage : Java - Java est le langage de programmation le plus populaire.
1. Android Firebase => Simple RecyclerView - Save,Retrieve then Show (Sauvegarder, récupérer puis afficher)
[center]Android Firebase Realtime Database recyclerView Tutorial[/center]
Ceci est un tutoriel android firebase RecyclerView. Comment enregistrer des données dans la base de données Firebase, les récupérer puis les afficher dans une simple vue de recyclage. Nous utilisons juste un seul champ de données.
Concepts généraux que vous apprenez de cet exemple.
Voici quelques-uns des concepts que vous pouvez apprendre de ce tutoriel :
- Qu'est-ce que Firebase et qu'est-ce que [RecyclerView] (https://camposha.info/android/recyclerview) et pourquoi les utiliser.
- Comment sauvegarder les données de edittext à la base de données en temps réel de google Firebase.
- Comment obtenir ou récupérer ou lire des données à partir d'une base de données Firebase en attachant des événements à une instance
DatabaseReferenceet en remplissant ensuite une liste de tableaux java. - Comment lier les données récupérées à une instance de la sous-classe
RecyclerView.Adapter. - Comment créer et opérer sur une base de données dans Firebase.
- Exemples d'applications Firebase avec recyclerview.
- Synchronisation de la base de données Firebase
Concepts spécifiques Vous allez apprendre
- Comment utiliser la référence de la base de données Firebase.
- Comment ajouter un enfant à la référence de base de données Firebase.
Démo
Voici la démo du projet pour ce tutoriel :
Installation et configuration
(a). Créer un projet d'activité de base
- Créez d'abord un nouveau projet dans android studio.
(b). Créer Firebase et télécharger le fichier de configuration
Allez sur la console Firebase, créez une application Firebase, enregistrez votre identifiant d'application et téléchargez le fichier google-services.json. Ajoutez-le à votre dossier d'application.
(c). Spécifier l'URL du dépôt Maven
Allez au niveau du projet (dossier du projet) build.gradle et
- Ajoutez le classpath des services Google comme ci-dessous
- Ajoutez l'URL du dépôt Maven
// Top-level build file where you can add configuration options common to all sub-projects/modules.
buildscript {
repositories {
jcenter()
}
dependencies {
classpath 'com.android.tools.build:gradle:2.3.3'
classpath 'com.google.gms:google-services:3.1.0'
// NOTE: Do not place your application dependencies here; they belong
// in the individual module build.gradle files
}
}
allprojects {
repositories {
jcenter()
maven {
url "https://maven.google.com" // Google's Maven repository
}
}
}
task clean(type: Delete) {
delete rootProject.buildDir
}Ceci va nous permettre de récupérer notre Firebase depuis maven.google com. Firebase est une bibliothèque tierce et doit être téléchargée pour que nous puissions l'utiliser dans notre projet.
(d). Ajouter les dépendances de Firebase
Ajoutez-les dans votre niveau d'application (dossier app) build.gradle nous devons ajouter plusieurs dépendances. Nous avons ajouté des bibliothèques de support comme appcompat, design et cardview. AppCompat nous donnera AppCompatActivity, la classe de laquelle notre MainActivity dérivera. Nous les ajoutons en utilisant l'instruction implementation.
Le support design nous donnera le recyclerveiew qui est notre widget de liste. C'est ce que nous allons remplir avec les données que nous interrogeons depuis notre Firebase. Le cardview, quant à lui, nous permettra de travailler avec des cardviews comme vues d'éléments. Le recyclerview comprendra des cardviews.
Ensuite, nous avons ajouté le Firebase Core ainsi que le Firebase Database. Firebase remember est une plateforme tandis que Firebase Database est la base de données dans laquelle nous stockons nos données. Vous pouvez utiliser des versions ultérieures. Cependant n'oubliez pas d'appliquer les services google comme nous l'avons fait.
dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
testImplementation 'junit:junit:4.12'
implementation 'com.android.support:appcompat-v7:23.3.0'
implementation 'com.android.support:design:23.3.0'
implementation 'com.android.support:cardview-v7:23.3.0'
implementation 'com.google.firebase:firebase-core:11.8.0'
implementation 'com.google.firebase:firebase-database:11.8.0'
}
apply plugin: 'com.google.gms.google-services'Assurez-vous d'appliquer le plugin apply : 'com.google.gms.google-services' comme ci-dessus.
2. Notre code Java
Nous écrivons cet exemple en utilisant le langage de programmation Java. Nous allons donc découpler les différentes parties de notre application en plusieurs classes.
(a). Notre classe de modèle
- Est notre classe d'objet de données
- Doit avoir un constructeur vide.
- Vous pouvez créer, transmettre des données et utiliser d'autres constructeurs.
La classe de modèle ou d'objet de données représente essentiellement une classe qui va modéliser nos données. Lorsque vous travaillez avec n'importe quelle forme de données, c'est toujours une bonne idée de représenter les données dans une classe simple et concrète. L'objet de cette classe peut ensuite être interrogé selon les besoins. Normalement, ces types de classes possèdent ce que l'on appelle des méthodes d'accès. Ces méthodes sont toujours publiques, ce qui permet d'exposer les propriétés de la classe, qui sont toujours privées.
Dans notre cas, nous avons créé une classe appelée Spacecraft. Cette classe n'aura qu'une seule propriété, un nom pour contenir le nom du vaisseau spatial. Ensuite, nous fournissons à notre classe un constructeur public par défaut. C'est une fonctionnalité normalement nécessaire pour les moteurs de base de données qui s'appuient sur la lecture de l'objet de données pour générer automatiquement le schéma de la base de données. Firebase Database fait définitivement cela tout comme Realm, une base de données locale pour java et android.
Ensuite, nous fournissons à notre classe une méthode accesseur getName et setName.
package com.tutorials.hp.firebasesimplerecyclerview.m_Model;
public class Spacecraft {
String name;
//EMPTY CONSTR
public Spacecraft() {
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}(b). Notre classe FirebaseHelper
- Fondamentalement, notre classe CRUD.
- Ici, nous effectuons des lectures et des écritures dans la base de données Firebase.
- Pour persister les données, nous utilisons setValue().
- Avant d'appeler la méthode setValue(), nous appelons push() pour nous assurer que nous ajoutons des données à la base de données, et non les remplacer.
- Nous remplissons une simple liste de tableaux.
Nous avons créé cette classe, FirebaseHelper, pour nous permettre de sauvegarder, d'interroger ou de lire des données depuis Firebase. Nous commençons par définir le package qui hébergera notre classe. Ensuite, nous ajoutons nos importations, y compris plusieurs classes de com.google.firebase.database.
Nous avons défini plusieurs champs d'instance dont :
- DatabaseReference -- Notre référence de base de données.
- Valeur booléenne - pour déterminer si nous avons réussi à sauvegarder ou non.
- ArrayList - Pour contenir nos données récupérées de Firebase.
Nous commençons par recevoir une référence de base de données via le constructeur. Nous assignons ensuite la référence de la base de données au champ d'instance local que nous avons maintenu.
Enregistrement des données dans la FirebaseDatabase.
Nous définissons ensuite une méthode pour sauvegarder les données dans la base de données Firebase. Cette méthode recevra un objet Spacecraft comme paramètre. Étant donné que nous recevons l'objet Spacecraft du monde extérieur, il serait idéal de vérifier d'abord s'il est nul.
Pour sauvegarder les données sur Firebase
db.child("Spacecraft").push().setValue(spacecraft);Dans ce cas, db est notre DatabaseReference. Nous obtenons son nœud enfant via la méthode child(). Puis on passe le nom de notre "table". Puis nous utilisons la méthode push() pour pousser les données vers Firebase. Cependant, nous devons définir la valeur que nous poussons. Nous utilisons la méthode setValue pour définir notre objet spacecraft. Et c'est ainsi que nous sauvegardons les données dans notre base de données Firebase. Notez que nous avons utilisé un bloc try catch pour attraper une DatabaseException.
Récupérer les données de la base de données Firebase.
Nous allons recevoir des données de la base de données Firebase Realtime et remplir une ArrayList. Plus tard, cette liste sera utilisée comme source de données pour notre adaptateur recyclerview.
Pour lire les données de la base de données Firebase, nous devons attacher un ChildEventListener à notre référence de base de données. Cela permettra d'écouter les changements dans les noeuds de données. Par exemple, lorsqu'un noeud enfant est ajouté, modifié, supprimé ou annulé, nous obtenons des méthodes de rappel contenant notre instantané de données. Nous pouvons alors lire les données de ces instantanés de données.
Ensuite, à chaque itération, vous pouvez invoquer la méthode getValue de l'instantané de données enfant pour obtenir l'objet. La lecture des données d'un objet DataSnapshot est facile. Il suffit de boucler à travers ses enfants :
for (DataSnapshot ds : dataSnapshot.getChildren())
{
String name=ds.getValue(Spacecraft.class).getName();
spacecrafts.add(name);
}Voici le code complet :
package com.tutorials.hp.firebasesimplerecyclerview.m_FireBase;
import com.google.firebase.database.ChildEventListener;
import com.google.firebase.database.DataSnapshot;
import com.google.firebase.database.DatabaseError;
import com.google.firebase.database.DatabaseException;
import com.google.firebase.database.DatabaseReference;
import com.tutorials.hp.firebasesimplerecyclerview.m_Model.Spacecraft;
import java.util.ArrayList;
public class FirebaseHelper {
DatabaseReference db;
Boolean saved=null;
ArrayList<String> spacecrafts=new ArrayList<>();
public FirebaseHelper(DatabaseReference db) {
this.db = db;
}
//SAVE
public Boolean save(Spacecraft spacecraft)
{
if(spacecraft==null)
{
saved=false;
}else {
try
{
db.child("Spacecraft").push().setValue(spacecraft);
saved=true;
}catch (DatabaseException e)
{
e.printStackTrace();
saved=false;
}
}
return saved;
}
//READ
public ArrayList<String> retrieve()
{
db.addChildEventListener(new ChildEventListener() {
@Override
public void onChildAdded(DataSnapshot dataSnapshot, String s) {
fetchData(dataSnapshot);
}
@Override
public void onChildChanged(DataSnapshot dataSnapshot, String s) {
fetchData(dataSnapshot);
}
@Override
public void onChildRemoved(DataSnapshot dataSnapshot) {
}
@Override
public void onChildMoved(DataSnapshot dataSnapshot, String s) {
}
@Override
public void onCancelled(DatabaseError databaseError) {
}
});
return spacecrafts;
}
private void fetchData(DataSnapshot dataSnapshot)
{
spacecrafts.clear();
for (DataSnapshot ds : dataSnapshot.getChildren())
{
String name=ds.getValue(Spacecraft.class).getName();
spacecrafts.add(name);
}
}
}(c). Notre classe MyViewHolder
- Oui, c'est notre classe de viewholder.
- Maintient les vues pour une utilisation prête à être recyclée.
package com.tutorials.hp.firebasesimplerecyclerview.m_UI;
import android.support.v7.widget.RecyclerView;
import android.view.View;
import android.widget.TextView;
import com.tutorials.hp.firebasesimplerecyclerview.R;
public class MyViewHolder extends RecyclerView.ViewHolder {
TextView nameTxt;
public MyViewHolder(View itemView) {
super(itemView);
nameTxt=(TextView) itemView.findViewById(R.id.nameTxt);
}
}Ce MyViewHolder est notre classe ViewHolder. Ceux-ci sont toujours nécessaires pour le recyclage des vues par le recyclerview. Cependant, pour transformer une classe en un ViewHolder de recyclerview, nous devons dériver de la classe Recyclerview.ViewHolder comme vous l'avez vu ci-dessus. Nous avons commencé par créer plusieurs classes dont la classe RecyclerView elle-même.
Dans notre classe, nous avons maintenu un TextView appelé nameTxt. Ensuite, notre constructeur MyViewHolder a pris un objet View. Cet objet View a ensuite été transmis à la super classe qui est Recyclerview.ViewHolder.
Nous avons ensuite référencé le nameTxt à partir de sa spécification de mise en page.
9. Notre classe MyAdapter
- Responsable de l'inflation de la mise en page.
- Aussi pour la liaison de données aux vues.
package com.tutorials.hp.firebasesimplerecyclerview.m_UI;
import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import com.tutorials.hp.firebasesimplerecyclerview.R;
import java.util.ArrayList;
public class MyAdapter extends RecyclerView.Adapter<MyViewHolder> {
Context c;
ArrayList<String> spacecrafts;
public MyAdapter(Context c, ArrayList<String> spacecrafts) {
this.c = c;
this.spacecrafts = spacecrafts;
}
@Override
public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View v=LayoutInflater.from(c).inflate(R.layout.model,parent,false);
return new MyViewHolder(v);
}
@Override
public void onBindViewHolder(MyViewHolder holder, int position) {
holder.nameTxt.setText(spacecrafts.get(position));
}
@Override
public int getItemCount() {
return spacecrafts.size();
}
}Les adaptateurs sont importants dans la façon dont android travaille avec la collecte de données. Les appareils mobiles que ce soit HTC, Samsung, F7, Apple iOS, Infinix etc, tous lourdement des applications qui ont besoin de rendre des listes de données. C'est simplement la nature même des appareils mobiles. L'écran est toujours minuscule et il convient donc d'afficher des éléments qui peuvent être défilés.
Et RecyclerView est l'adaptateur numéro un pour l'affichage de grands ensembles de données. Ces ensembles de données peuvent provenir du cloud comme Firebase. Et en fait, dans ce cas, nos données proviennent de la base de données Firebase Realtime. Nous avons donc rempli une ArrayList jusqu'à présent avec les données que nous avons déjà collectées. Maintenant il est temps de lier ces données. Cependant, cela nécessite un adaptateur.
Adaptateurs :
- Nous permettent de lier les données à nos adapterviews.
- Nous aident à gonfler les mises en page personnalisées dans les vues afin que nous puissions concevoir des adapterviews personnalisés.
Vous créez un adaptateur de vue recyclée en dérivant de RecyclerView.Adapter<MyViewHolder>. Le paramètre générique est le ViewHolder. Dériver de cette classe nous obligera à surcharger trois méthodes :
getItemCount- Pour retourner le nombre d'éléments à rendre dans le recyclerview.onCreateViewHolder- C'est ici que l'inflation se produit. Nous utilisonsLayoutInflater pour le gonflage.onBindViewHolder- C'est ici que nous lions les données aux widgets que nous avons définis dans la classe ViewHolder.
Entre-temps, notre constructeur a pris un objet Context ainsi que la liste de tableaux de nos données.
(d). Notre activité principale
- Lancement de l'activité.
- Référence RecyclerView et définit son layoutManager ainsi que son adaptateur.
- Affiche le dialogue de saisie lors du clic sur le bouton FAB.
- Configure nos Firebase's en initialisant la DatabaseReference.
package com.tutorials.hp.firebasesimplerecyclerview;
import android.app.Dialog;
import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;
import com.google.firebase.database.DatabaseReference;
import com.google.firebase.database.FirebaseDatabase;
import com.tutorials.hp.firebasesimplerecyclerview.m_FireBase.FirebaseHelper;
import com.tutorials.hp.firebasesimplerecyclerview.m_Model.Spacecraft;
import com.tutorials.hp.firebasesimplerecyclerview.m_UI.MyAdapter;
public class MainActivity extends AppCompatActivity {
DatabaseReference db;
FirebaseHelper helper;
RecyclerView rv;
EditText nameEditTxt;
MyAdapter adapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
//SETUP RV
rv= (RecyclerView) findViewById(R.id.rv);
rv.setLayoutManager(new LinearLayoutManager(this));
//SETUP FB
db=FirebaseDatabase.getInstance().getReference();
helper=new FirebaseHelper(db);
//ADAPTER
adapter=new MyAdapter(this,helper.retrieve());
rv.setAdapter(adapter);
FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
displayInputDialog();
}
});
}
private void displayInputDialog()
{
Dialog d=new Dialog(this);
d.setTitle("Save To Firebase");
d.setContentView(R.layout.input_dialog);
nameEditTxt= (EditText) d.findViewById(R.id.nameEditText);
Button saveBtn= (Button) d.findViewById(R.id.saveBtn);
//SAVE
saveBtn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//GET DATA
String name=nameEditTxt.getText().toString();
//SET DATA
Spacecraft s=new Spacecraft();
s.setName(name);
//VALIDATE
if(name.length()>0 && name != null)
{
if(helper.save(s))
{
nameEditTxt.setText("");
adapter=new MyAdapter(MainActivity.this,helper.retrieve());
rv.setAdapter(adapter);
}
}else
{
Toast.makeText(MainActivity.this, "Name Cannot Be Empty", Toast.LENGTH_SHORT).show();
}
}
});
d.show();
}
}11. Nos mises en page
(a). activité_main.xml
Il s'agit de notre mise en page principale activité.
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
android_layout_width="match_parent"
android_layout_height="match_parent"
android_fitsSystemWindows="true"
tools_context="com.tutorials.hp.firebasesimplerecyclerview.MainActivity">
<android.support.design.widget.AppBarLayout
android_layout_width="match_parent"
android_layout_height="wrap_content"
android_theme="@style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android_id="@+id/toolbar"
android_layout_width="match_parent"
android_layout_height="?attr/actionBarSize"
android_background="?attr/colorPrimary"
app_popupTheme="@style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<include layout="@layout/content_main" />
<android.support.design.widget.FloatingActionButton
android_id="@+id/fab"
android_layout_width="wrap_content"
android_layout_height="wrap_content"
android_layout_gravity="bottom|end"
android_layout_margin="@dimen/fab_margin"
android_src="@android:drawable/ic_dialog_email" />
</android.support.design.widget.CoordinatorLayout>(b). content_main.xml
C'est ici que nous ajoutons notre adapterview dans ce cas une recyclerview.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android_layout_width="match_parent"
android_layout_height="match_parent"
android_paddingBottom="@dimen/activity_vertical_margin"
android_paddingLeft="@dimen/activity_horizontal_margin"
android_paddingRight="@dimen/activity_horizontal_margin"
android_paddingTop="@dimen/activity_vertical_margin"
app_layout_behavior="@string/appbar_scrolling_view_behavior"
tools_context="com.tutorials.hp.firebasesimplerecyclerview.MainActivity"
tools_showIn="@layout/activity_main">
<android.support.v7.widget.RecyclerView
android_id="@+id/rv"
android_layout_width="match_parent"
android_layout_height="wrap_content"
/>
</RelativeLayout>(c). input_dialog.xml
- définit la disposition de nos dialogues d'entrée.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android_orientation="vertical" android_layout_width="match_parent"
android_layout_height="match_parent">
<LinearLayout
android_layout_width="fill_parent"
android_layout_height="match_parent"
android_layout_marginTop="?attr/actionBarSize"
android_orientation="vertical"
android_paddingLeft="15dp"
android_paddingRight="15dp"
android_paddingTop="10dp">
<android.support.design.widget.TextInputLayout
android_id="@+id/nameLayout"
android_layout_width="match_parent"
android_layout_height="wrap_content">
<EditText
android_id="@+id/nameEditText"
android_layout_width="match_parent"
android_layout_height="wrap_content"
android_singleLine="true"
android_hint= "Name" />
</android.support.design.widget.TextInputLayout>
<Button android_id="@+id/saveBtn"
android_layout_width="fill_parent"
android_layout_height="wrap_content"
android_text="Save"
android_clickable="true"
android_background="@color/colorAccent"
android_layout_marginTop="10dp"
android_textColor="@android:color/white"/>
</LinearLayout>
</LinearLayout>(d). model.xml
Il s'agit de notre modèle de ligne RecyclerView. Ce layout sera gonflé dans la classe adaptateur.
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
android_orientation="horizontal" android_layout_width="match_parent"
android_layout_margin="10dp"
card_view_cardCornerRadius="5dp"
card_view_cardElevation="5dp"
android_layout_height="200dp">
<LinearLayout
android_orientation="vertical"
android_layout_width="match_parent"
android_layout_height="match_parent">
<TextView
android_layout_width="match_parent"
android_layout_height="wrap_content"
android_textAppearance="?android:attr/textAppearanceLarge"
android_text="Name"
android_id="@+id/nameTxt"
android_padding="10dp"
android_textColor="@color/colorAccent"
android_textStyle="bold"
android_layout_alignParentLeft="true"
/>
</LinearLayout>
</android.support.v7.widget.CardView>12. AndroidManifest.xml
- N'oubliez pas d'ajouter la permission pour internet dans votre fichier manifest.
<emploie la permission android_name="android.permission.INTERNET"/>
Télécharger
2. Android Firebase - RecyclerView Champs multiples
Il s'agit d'une base de données Android Firebase RecyclerView tutoriel. Comment enregistrer des données dans la base de données Firebase, récupérer puis afficher ces données dans un RecyclerView personnalisé.
Cette fois-ci, nous utilisons plusieurs champs, et non un seul comme dans l'exemple précédent.
1. Mise en place
(a). Créer un projet d'activité de base
- Créez d'abord un nouveau projet dans android studio. Allez à File --> New Project.
(b).Créer Firebase et télécharger le fichier de configuration
Allez sur la console Firebase, créez une application Firebase, enregistrez votre identifiant d'application et téléchargez le fichier google-services.json. Ajoutez-le à votre dossier d'application.
(c). Spécifier l'URL du dépôt Maven
Allez au niveau du projet (dossier du projet) build.gradle et
- Ajoutez le classpath des services Google comme ci-dessous
- Ajoutez l'url du dépôt Maven
// Top-level build file where you can add configuration options common to all sub-projects/modules.
buildscript {
repositories {
jcenter()
}
dependencies {
classpath 'com.android.tools.build:gradle:2.3.3'
classpath 'com.google.gms:google-services:3.1.0'
// NOTE: Do not place your application dependencies here; they belong
// in the individual module build.gradle files
}
}
allprojects {
repositories {
jcenter()
maven {
url "https://maven.google.com" // Google's Maven repository
}
}
}
task clean(type: Delete) {
delete rootProject.buildDir
}(d). Ajouter les dépendances de Firebase
Ajoutez-les dans votre niveau d'app(dossier app) build.gradle, puis
dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
testCompile 'junit:junit:4.12'
compile 'com.android.support:appcompat-v7:23.3.0'
compile 'com.android.support:design:23.3.0'
compile 'com.android.support:cardview-v7:23.3.0'
compile 'com.google.firebase:firebase-core:11.8.0'
compile 'com.google.firebase:firebase-database:11.8.0'
}
apply plugin: 'com.google.gms.google-services'Assurez-vous que vous appliquer le plugin : 'com.google.gms.google-services' comme ci-dessus.
(e). AndroidManifest
- N'oubliez pas d'ajouter la permission pour internet dans votre fichier manifest.
<?xml version="1.0" encoding="utf-8"?>
<manifest
package="com.tutorials.hp.firebaserecyclermulti_items">
<uses-permission android_name="android.permission.INTERNET"/>
....
</manifest>2. Classes
(a). Notre classe de modèle
- Est notre classe d'objets de données
- Doit avoir un constructeur vide.
- Vous pouvez créer, passer des données à et utiliser d'autres constructeurs.
package com.tutorials.hp.firebaserecyclermulti_items.m_Model;
/*
* 1. OUR MODEL CLASS
*/
public class Spacecraft {
String name,propellant,description;
public Spacecraft() {
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getPropellant() {
return propellant;
}
public void setPropellant(String propellant) {
this.propellant = propellant;
}
public String getDescription() {
return description;
}
public void setDescription(String description) {
this.description = description;
}
}(b). Notre classe FirebaseHelper
- Fondamentalement, notre classe CRUD.
- Ici, nous effectuons des lectures et des écritures dans la base de données Firebase.
- Pour persister les données, nous utilisons setValue().
- Avant d'appeler la méthode setValue(), nous appelons push() pour nous assurer que nous ajoutons des données à la base de données, et non les remplacer.
- Nous remplissons une liste de tableaux avec les objets du modèle.
package com.tutorials.hp.firebaserecyclermulti_items.m_FireBase;
import com.google.firebase.database.ChildEventListener;
import com.google.firebase.database.DataSnapshot;
import com.google.firebase.database.DatabaseError;
import com.google.firebase.database.DatabaseException;
import com.google.firebase.database.DatabaseReference;
import com.tutorials.hp.firebaserecyclermulti_items.m_Model.Spacecraft;
import java.util.ArrayList;
/*
* 1. RECEIVE DB REFERENCE
* 2. SAVE
* 3. RETRIEVE
* 4. RETURN ARRAYLIST
*/
public class FirebaseHelper {
DatabaseReference db;
Boolean saved=null;
ArrayList<Spacecraft> spacecrafts=new ArrayList<>();
/*
PASS DATABASE REFRENCE
*/
public FirebaseHelper(DatabaseReference db) {
this.db = db;
}
//WRITE IF NOT NULL
public Boolean save(Spacecraft spacecraft)
{
if(spacecraft==null)
{
saved=false;
}else
{
try
{
db.child("Spacecraft").push().setValue(spacecraft);
saved=true;
}catch (DatabaseException e)
{
e.printStackTrace();
saved=false;
}
}
return saved;
}
//IMPLEMENT FETCH DATA AND FILL ARRAYLIST
private void fetchData(DataSnapshot dataSnapshot)
{
spacecrafts.clear();
for (DataSnapshot ds : dataSnapshot.getChildren())
{
Spacecraft spacecraft=ds.getValue(Spacecraft.class);
spacecrafts.add(spacecraft);
}
}
//READ BY HOOKING ONTO DATABASE OPERATION CALLBACKS
public ArrayList<Spacecraft> retrieve()
{
db.addChildEventListener(new ChildEventListener() {
@Override
public void onChildAdded(DataSnapshot dataSnapshot, String s) {
fetchData(dataSnapshot);
}
@Override
public void onChildChanged(DataSnapshot dataSnapshot, String s) {
fetchData(dataSnapshot);
}
@Override
public void onChildRemoved(DataSnapshot dataSnapshot) {
}
@Override
public void onChildMoved(DataSnapshot dataSnapshot, String s) {
}
@Override
public void onCancelled(DatabaseError databaseError) {
}
});
return spacecrafts;
}
}(c). Notre classe ViewHolder
- Retient les vues pour que nous puissions les recycler.
- Sous-classes RecyclerView.ViewHolder
package com.tutorials.hp.firebaserecyclermulti_items.m_UI;
import android.support.v7.widget.RecyclerView;
import android.view.View;
import android.widget.TextView;
import com.tutorials.hp.firebaserecyclermulti_items.R;
/*
* 1. HOLD VIEWS
*/
public class MyViewHolder extends RecyclerView.ViewHolder {
TextView nameTxt,propTxt,descTxt;
public MyViewHolder(View itemView) {
super(itemView);
nameTxt=(TextView) itemView.findViewById(R.id.nameTxt);
propTxt=(TextView) itemView.findViewById(R.id.propellantTxt);
descTxt=(TextView) itemView.findViewById(R.id.descTxt);
}
}9. Notre classe MyAdapter
- Responsable de l'inflation de la mise en page.
- Elle permet également de lier les données aux vues.
- Cette classe est une sous-classe de RecyclerView.Adapter.
package com.tutorials.hp.firebaserecyclermulti_items.m_UI;
import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import com.tutorials.hp.firebaserecyclermulti_items.R;
import com.tutorials.hp.firebaserecyclermulti_items.m_Model.Spacecraft;
import java.util.ArrayList;
/
* 1. LAYOUT INFLATION
* 2. RECEIVE SPACECRAFTS
* 3. PERFORM BINDING
*/
public class MyAdapter extends RecyclerView.Adapter<MyViewHolder> {
Context c;
ArrayList<Spacecraft> spacecrafts;
public MyAdapter(Context c, ArrayList<Spacecraft> spacecrafts) {
this.c = c;
this.spacecrafts = spacecrafts;
}
@Override
public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View v=LayoutInflater.from(c).inflate(R.layout.model,parent,false);
return new MyViewHolder(v);
}
@Override
public void onBindViewHolder(MyViewHolder holder, int position) {
holder.nameTxt.setText(spacecrafts.get(position).getName());
holder.propTxt.setText(spacecrafts.get(position).getPropellant());
holder.descTxt.setText(spacecrafts.get(position).getDescription());
}
@Override
public int getItemCount() {
return spacecrafts.size();
}
}(d). Notre MainActivity
- Activité de lancement.
- Référencer RecyclerView et définir son LayoutManager.
- Définir son adaptateur.
- Affiche la boîte de dialogue de saisie lors du clic sur le bouton FAB.
- Configure nos Firebase's en initialisant la DatabaseReference.
package com.tutorials.hp.firebaserecyclermulti_items;
import android.app.Dialog;
import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;
import com.google.firebase.database.DatabaseReference;
import com.google.firebase.database.FirebaseDatabase;
import com.tutorials.hp.firebaserecyclermulti_items.m_FireBase.FirebaseHelper;
import com.tutorials.hp.firebaserecyclermulti_items.m_Model.Spacecraft;
import com.tutorials.hp.firebaserecyclermulti_items.m_UI.MyAdapter;
/*
1.INITIALIZE FIREBASE DB
2.INITIALIZE UI
3.DATA*/
public class MainActivity extends AppCompatActivity {
DatabaseReference db;
FirebaseHelper helper;
MyAdapter adapter;
RecyclerView rv;
EditText nameEditTxt,propTxt,descTxt;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
//INITIALIZE RV
rv= (RecyclerView) findViewById(R.id.rv);
rv.setLayoutManager(new LinearLayoutManager(this));
//INITIALIZE FB
db= FirebaseDatabase.getInstance().getReference();
helper=new FirebaseHelper(db);
//ADAPTER
adapter=new MyAdapter(this,helper.retrieve());
rv.setAdapter(adapter);
FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
displayInputDialog();
}
});
}
//DISPLAY INPUT DIALOG
private void displayInputDialog()
{
//CREATE DIALOG
Dialog d=new Dialog(this);
d.setTitle("Save To Firebase");
d.setContentView(R.layout.input_dialog);
nameEditTxt= (EditText) d.findViewById(R.id.nameEditText);
propTxt= (EditText) d.findViewById(R.id.propellantEditText);
descTxt= (EditText) d.findViewById(R.id.descEditText);
Button saveBtn= (Button) d.findViewById(R.id.saveBtn);
//SAVE
saveBtn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//GET DATA
String name=nameEditTxt.getText().toString();
String propellant=propTxt.getText().toString();
String desc=descTxt.getText().toString();
//SET DATA
Spacecraft s=new Spacecraft();
s.setName(name);
s.setPropellant(propellant);
s.setDescription(desc);
//SAVE
if(name != null && name.length()>0)
{
if(helper.save(s))
{
nameEditTxt.setText("");
propTxt.setText("");
descTxt.setText("");
adapter=new MyAdapter(MainActivity.this,helper.retrieve());
rv.setAdapter(adapter);
}
}else
{
Toast.makeText(MainActivity.this, "Name Must Not Be Empty", Toast.LENGTH_SHORT).show();
}
}
});
d.show();
}
}3. Nos mises en page
(a). InputDialog.xml
- définit la disposition de nos dialogues d'entrée
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android_orientation="vertical" android_layout_width="match_parent"
android_layout_height="match_parent">
<LinearLayout
android_layout_width="fill_parent"
android_layout_height="match_parent"
android_layout_marginTop="?attr/actionBarSize"
android_orientation="vertical"
android_paddingLeft="15dp"
android_paddingRight="15dp"
android_paddingTop="50dp">
<android.support.design.widget.TextInputLayout
android_id="@+id/nameLayout"
android_layout_width="match_parent"
android_layout_height="wrap_content">
<EditText
android_id="@+id/nameEditText"
android_layout_width="match_parent"
android_layout_height="wrap_content"
android_singleLine="true"
android_hint= "Name" />
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android_id="@+id/propLayout"
android_layout_width="match_parent"
android_layout_height="wrap_content">
<EditText
android_id="@+id/propellantEditText"
android_layout_width="match_parent"
android_layout_height="wrap_content"
android_singleLine="true"
android_hint= "Propellant" />
<android.support.design.widget.TextInputLayout
android_id="@+id/descLayout"
android_layout_width="match_parent"
android_layout_height="wrap_content">
<EditText
android_id="@+id/descEditText"
android_layout_width="match_parent"
android_layout_height="wrap_content"
android_singleLine="true"
android_hint= "Description" />
</android.support.design.widget.TextInputLayout>
</android.support.design.widget.TextInputLayout>
<Button android_id="@+id/saveBtn"
android_layout_width="fill_parent"
android_layout_height="wrap_content"
android_text="Save"
android_clickable="true"
android_background="@color/colorAccent"
android_layout_marginTop="40dp"
android_textColor="@android:color/white"/>
</LinearLayout>
</LinearLayout>(b). Model.xml
- Comment chaque élément de vue doit apparaître.
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
android_orientation="horizontal" android_layout_width="match_parent"
android_layout_margin="10dp"
card_view_cardCornerRadius="5dp"
card_view_cardElevation="5dp"
android_layout_height="200dp">
<LinearLayout
android_orientation="vertical"
android_layout_width="match_parent"
android_layout_height="match_parent">
<TextView
android_layout_width="match_parent"
android_layout_height="wrap_content"
android_textAppearance="?android:attr/textAppearanceLarge"
android_text="Name"
android_id="@+id/nameTxt"
android_padding="10dp"
android_textColor="@color/colorAccent"
android_textStyle="bold"
android_layout_alignParentLeft="true"
/>
<TextView
android_layout_width="wrap_content"
android_layout_height="wrap_content"
android_textAppearance="?android:attr/textAppearanceLarge"
android_text="Description....................."
android_lines="3"
android_id="@+id/descTxt"
android_padding="10dp"
android_layout_alignParentLeft="true"
/>
<TextView
android_layout_width="wrap_content"
android_layout_height="wrap_content"
android_textAppearance="?android:attr/textAppearanceMedium"
android_text="Propellant"
android_textStyle="italic"
android_id="@+id/propellantTxt" />
</LinearLayout>
</android.support.v7.widget.CardView>4. Télécharger
3. Android Firebase - Détail du Master RecyclerView [Open Activity].
Bonjour, bienvenue à notre tutoriel Android Firebase RecyclerView Master detail.
Il s'agit d'un tutoriel android firebase recyclerview. Comment enregistrer des données sur Firebase, les récupérer puis les afficher dans une grille personnalisée.
- Sauvegarder les données de edittext à la base de données google firebase.
- Récupérer les données en attachant des événements à une instance de DatabaseReference.
- Lier les données à un GridView csutom en utilisant une sous-classe de BaseAdapter.
- Gérer les clics sur les éléments du GridView.
- Ouvrir une nouvelle activité lorsqu'un élément de la grille est cliqué.
- Passer les données à cette nouvelle activité
Qu'est-ce que la base de données Firebase Realtime ?
La base de données Firebase Realtime est un backend de base de données en tant que service hébergé dans le Cloud qui nous donne la plate-forme pour construire des applications riches.Normalement, nous sommes habitués à faire des requêtes HTTP pour lire ou écrire des données sur nos serveurs.Mais pas dans Firebase.Il utilise la technologie de synchronisation qui lui permet d'être en temps réel, mais toujours performant.
Principales caractéristiques ?
- Son temps réel.
- Indépendant de la plateforme.
- Contrôle d'accès facile.
- C'est une solution NoSQL et elle est fortement optimisée pour la performance.
- Il a une capacité hors ligne.
- Il est facile à utiliser.
Tutoriel vidéo Pour plus d'explications, veuillez consulter notre tutoriel vidéo ci-dessous.
Configuration
(a) .Créer un projet d'activité de base
- Tout d'abord créer un nouveau projet dans android studio. Allez à File --> New Project.
(b). Créer Firebase et télécharger le fichier de configuration
Allez sur la console Firebase, créez une application Firebase, enregistrez votre identifiant d'application et téléchargez le fichier google-services.json. Ajoutez-le à votre dossier d'application.
(c). Spécifier l'URL du dépôt Maven
Allez au niveau du projet (dossier du projet) build.gradle et
- Ajoutez le classpath des services Google comme ci-dessous
- Ajoutez l'url du dépôt Maven
// Top-level build file where you can add configuration options common to all sub-projects/modules.
buildscript {
repositories {
jcenter()
}
dependencies {
classpath 'com.android.tools.build:gradle:2.3.3'
classpath 'com.google.gms:google-services:3.1.0'
// NOTE: Do not place your application dependencies here; they belong
// in the individual module build.gradle files
}
}
allprojects {
repositories {
jcenter()
maven {
url "https://maven.google.com" // Google's Maven repository
}
}
}
task clean(type: Delete) {
delete rootProject.buildDir
}(d). Ajouter les dépendances de Firebase
Ajoutez-les dans votre niveau app(dossier app) build.gradle, puis
dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
testCompile 'junit:junit:4.12'
compile 'com.android.support:appcompat-v7:23.3.0'
compile 'com.android.support:design:23.3.0'
compile 'com.android.support:cardview-v7:23.3.0'
compile 'com.google.firebase:firebase-core:11.8.0'
compile 'com.google.firebase:firebase-database:11.8.0'
}
apply plugin: 'com.google.gms.google-services'Assurez-vous que vous appliquer le plugin : 'com.google.gms.google-services' comme ci-dessus.
(e). AndroidManifest.xml
- N'oubliez pas d'ajouter la permission pour internet dans votre fichier manifest.
<?xml version="1.0" encoding="utf-8"?>
<manifest
package="com.tutorials.hp.firebaserecyclermdetail">
<uses-permission android_name="android.permission.INTERNET"/>
<application
android_allowBackup="true"
android_icon="@mipmap/ic_launcher"
android_label="@string/app_name"
android_supportsRtl="true"
android_theme="@style/AppTheme">
<activity
android_name=".MainActivity"
android_label="@string/app_name"
android_theme="@style/AppTheme.NoActionBar">
<intent-filter>
<action android_name="android.intent.action.MAIN" />
<category android_name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity
android_name=".DetailActivity"
android_label="Detail View"
android_theme="@style/AppTheme.NoActionBar">
</activity>
</application>
</manifest>Classes Java
(a). Spacecraft.java
- Est notre classe d'objet de données.
- Doit avoir un constructeur vide.
- Vous pouvez créer, passer des données à et utiliser d'autres constructeurs.
package com.tutorials.hp.firebaserecyclermdetail.m_Model;
/*
* 1. OUR MODEL CLASS
*/
public class Spacecraft {
String name,propellant,description;
public Spacecraft() {
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getPropellant() {
return propellant;
}
public void setPropellant(String propellant) {
this.propellant = propellant;
}
public String getDescription() {
return description;
}
public void setDescription(String description) {
this.description = description;
}
}(b). FirebaseHelper.java
- Fondamentalement, notre classe CRUD.
- Ici, nous effectuons des lectures et des écritures dans la base de données Firebase.
- Pour persister les données, nous utilisons setValue().
- Avant d'appeler la méthode setValue(), nous appelons push() pour nous assurer que les données sont ajoutées à la base de données et non remplacées.
- Nous remplissons une liste de tableaux avec les objets des vaisseaux spatiaux.
package com.tutorials.hp.firebaserecyclermdetail.m_FireBase;
import com.google.firebase.database.ChildEventListener;
import com.google.firebase.database.DataSnapshot;
import com.google.firebase.database.DatabaseError;
import com.google.firebase.database.DatabaseException;
import com.google.firebase.database.DatabaseReference;
import com.tutorials.hp.firebaserecyclermdetail.m_Model.Spacecraft;
import java.util.ArrayList;
/*
* 1.SAVE DATA TO FIREBASE
* 2. RETRIEVE
* 3.RETURN AN ARRAYLIST
*/
public class FirebaseHelper {
DatabaseReference db;
Boolean saved=null;
ArrayList<Spacecraft> spacecrafts=new ArrayList<>();
public FirebaseHelper(DatabaseReference db) {
this.db = db;
}
//WRITE IF NOT NULL
public Boolean save(Spacecraft spacecraft)
{
if(spacecraft==null)
{
saved=false;
}else
{
try
{
db.child("Spacecraft").push().setValue(spacecraft);
saved=true;
}catch (DatabaseException e)
{
e.printStackTrace();
saved=false;
}
}
return saved;
}
//IMPLEMENT FETCH DATA AND FILL ARRAYLIST
private void fetchData(DataSnapshot dataSnapshot)
{
spacecrafts.clear();
for (DataSnapshot ds : dataSnapshot.getChildren())
{
Spacecraft spacecraft=ds.getValue(Spacecraft.class);
spacecrafts.add(spacecraft);
}
}
//READ THEN RETURN ARRAYLIST
public ArrayList<Spacecraft> retrieve() {
db.addChildEventListener(new ChildEventListener() {
@Override
public void onChildAdded(DataSnapshot dataSnapshot, String s) {
fetchData(dataSnapshot);
}
@Override
public void onChildChanged(DataSnapshot dataSnapshot, String s) {
fetchData(dataSnapshot);
}
@Override
public void onChildRemoved(DataSnapshot dataSnapshot) {
}
@Override
public void onChildMoved(DataSnapshot dataSnapshot, String s) {
}
@Override
public void onCancelled(DatabaseError databaseError) {
}
});
return spacecrafts;
}
}(c). MyViewHolder.java
- Est notre classe de viewholder
- Détient les vues à montrer dans notre RecyclerView.
package com.tutorials.hp.firebaserecyclermdetail.m_UI;
import android.support.v7.widget.RecyclerView;
import android.view.View;
import android.widget.TextView;
import com.tutorials.hp.firebaserecyclermdetail.R;
public class MyViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener{
TextView nameTxt,propTxt,descTxt;
ItemClickListener itemClickListener;
public MyViewHolder(View itemView) {
super(itemView);
nameTxt= (TextView) itemView.findViewById(R.id.nameTxt);
propTxt= (TextView) itemView.findViewById(R.id.propellantTxt);
descTxt= (TextView) itemView.findViewById(R.id.descTxt);
itemView.setOnClickListener(this);
}
public void setItemClickListener(ItemClickListener itemClickListener)
{
this.itemClickListener=itemClickListener;
}
@Override
public void onClick(View view) {
this.itemClickListener.onItemClick(this.getLayoutPosition());
}
}(d). MonAdapteur.java
- Responsable de l'inflation de la mise en page.
- Aussi pour la liaison de données aux vues.
- Puis ouvre une nouvelle activité et lui transmet des données via android.Content.Intent.
package com.tutorials.hp.firebaserecyclermdetail.m_UI;
import android.content.Context;
import android.content.Intent;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import com.tutorials.hp.firebaserecyclermdetail.DetailActivity;
import com.tutorials.hp.firebaserecyclermdetail.R;
import com.tutorials.hp.firebaserecyclermdetail.m_Model.Spacecraft;
import java.util.ArrayList;
public class MyAdapter extends RecyclerView.Adapter<MyViewHolder> {
Context c;
ArrayList<Spacecraft> spacecrafts;
public MyAdapter(Context c, ArrayList<Spacecraft> spacecrafts) {
this.c = c;
this.spacecrafts = spacecrafts;
}
@Override
public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View v=LayoutInflater.from(c).inflate(R.layout.model,parent,false);
return new MyViewHolder(v);
}
@Override
public void onBindViewHolder(MyViewHolder holder, int position) {
final Spacecraft s=spacecrafts.get(position);
holder.nameTxt.setText(s.getName());
holder.propTxt.setText(s.getPropellant());
holder.descTxt.setText(s.getDescription());
holder.setItemClickListener(new ItemClickListener() {
@Override
public void onItemClick(int pos) {
//OPEN DETAI ACTIVITY
openDetailActivity(s.getName(),s.getDescription(),s.getPropellant());
}
});
}
@Override
public int getItemCount() {
return spacecrafts.size();
}
//OPEN DETAIL ACTIVITY
private void openDetailActivity(String...details)
{
Intent i=new Intent(c,DetailActivity.class);
i.putExtra("NAME_KEY",details[0]);
i.putExtra("DESC_KEY",details[1]);
i.putExtra("PROP_KEY",details[2]);
c.startActivity(i);
}
}(e). ItemClickListener.java
- Définit pour nous la signature de notre méthode onItemClick().
package com.tutorials.hp.firebaserecyclermdetail.m_UI;
public interface ItemClickListener {
void onItemClick(int pos);
}12. MainActivity.java
- Activité de lancement.
- Référence RecyclerView, définit son adaptateur.
- Affiche la boîte de dialogue de saisie lors du clic sur le bouton FAB.
- Configure nos Firebase's en initialisant la DatabaseReference.
package com.tutorials.hp.firebaserecyclermdetail;
import android.app.Dialog;
import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;
import com.google.firebase.database.DatabaseReference;
import com.google.firebase.database.FirebaseDatabase;
import com.tutorials.hp.firebaserecyclermdetail.m_FireBase.FirebaseHelper;
import com.tutorials.hp.firebaserecyclermdetail.m_Model.Spacecraft;
import com.tutorials.hp.firebaserecyclermdetail.m_UI.MyAdapter;
/*
1.INITIALIZE FIREBASE DB
2.INITIALIZE UI
3.DATA INPUT
*/
public class MainActivity extends AppCompatActivity {
DatabaseReference db;
FirebaseHelper helper;
MyAdapter adapter;
RecyclerView rv;
EditText nameEditTxt,propTxt,descTxt;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
//SETUP RECYCLER
rv = (RecyclerView) findViewById(R.id.rv);
rv.setLayoutManager(new LinearLayoutManager(this));
//INITIALIZE FIREBASE DB
db= FirebaseDatabase.getInstance().getReference();
helper=new FirebaseHelper(db);
//ADAPTER
adapter=new MyAdapter(this,helper.retrieve());
rv.setAdapter(adapter);
FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
displayInputDialog();
}
});
}
//DISPLAY INPUT DIALOG
private void displayInputDialog()
{
Dialog d=new Dialog(this);
d.setTitle("Save To Firebase");
d.setContentView(R.layout.input_dialog);
nameEditTxt= (EditText) d.findViewById(R.id.nameEditText);
propTxt= (EditText) d.findViewById(R.id.propellantEditText);
descTxt= (EditText) d.findViewById(R.id.descEditText);
Button saveBtn= (Button) d.findViewById(R.id.saveBtn);
//SAVE
saveBtn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//GET DATA
String name=nameEditTxt.getText().toString();
String propellant=propTxt.getText().toString();
String desc=descTxt.getText().toString();
//SET DATA
Spacecraft s=new Spacecraft();
s.setName(name);
s.setPropellant(propellant);
s.setDescription(desc);
//SIMPLE VALIDATION
if(name != null && name.length()>0)
{
//THEN SAVE
if(helper.save(s))
{
//IF SAVED CLEAR EDITXT
nameEditTxt.setText("");
propTxt.setText("");
descTxt.setText("");
adapter=new MyAdapter(MainActivity.this,helper.retrieve());
rv.setAdapter(adapter);
}
}else
{
Toast.makeText(MainActivity.this, "Name Must Not Be Empty", Toast.LENGTH_SHORT).show();
}
}
});
d.show();
}
}(f). DetailActivity.java
- Oui, l'activité de détail ici. Pour montrer nos détails.
- Reçoit les données de MainActivity via Intent.
- Montre les données dans des TextViews.
package com.tutorials.hp.firebaserecyclermdetail;
import android.content.Intent;
import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.widget.TextView;
public class DetailActivity extends AppCompatActivity {
TextView nameTxt,descTxt, propTxt;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_detail);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
nameTxt = (TextView) findViewById(R.id.nameDetailTxt);
descTxt= (TextView) findViewById(R.id.descDetailTxt);
propTxt = (TextView) findViewById(R.id.propellantDetailTxt);
//GET INTENT
Intent i=this.getIntent();
//RECEIVE DATA
String name=i.getExtras().getString("NAME_KEY");
String desc=i.getExtras().getString("DESC_KEY");
String propellant=i.getExtras().getString("PROP_KEY");
//BIND DATA
nameTxt.setText(name);
descTxt.setText(desc);
propTxt.setText(propellant);
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
.setAction("Action", null).show();
}
});
}
}Mises en page
(a). ActivityMain.xml
- Contient notre ContentMain.xml
- Définit notre bouton d'action flottant.
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
android_layout_width="match_parent"
android_layout_height="match_parent"
android_fitsSystemWindows="true"
tools_context="com.tutorials.hp.firebaserecyclermdetail.MainActivity">
<android.support.design.widget.AppBarLayout
android_layout_width="match_parent"
android_layout_height="wrap_content"
android_theme="@style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android_id="@+id/toolbar"
android_layout_width="match_parent"
android_layout_height="?attr/actionBarSize"
android_background="?attr/colorPrimary"
app_popupTheme="@style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<include layout="@layout/content_main" />
<android.support.design.widget.FloatingActionButton
android_id="@+id/fab"
android_layout_width="wrap_content"
android_layout_height="wrap_content"
android_layout_gravity="bottom|end"
android_layout_margin="@dimen/fab_margin"
android_src="@android:drawable/ic_dialog_email" />
</android.support.design.widget.CoordinatorLayout>(b). ContentMain.xml
- Notre vue principale
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android_layout_width="match_parent"
android_layout_height="match_parent"
android_paddingBottom="@dimen/activity_vertical_margin"
android_paddingLeft="@dimen/activity_horizontal_margin"
android_paddingRight="@dimen/activity_horizontal_margin"
android_paddingTop="@dimen/activity_vertical_margin"
app_layout_behavior="@string/appbar_scrolling_view_behavior"
tools_context="com.tutorials.hp.firebaserecyclermdetail.MainActivity"
tools_showIn="@layout/activity_main">
<android.support.v7.widget.RecyclerView
android_id="@+id/rv"
android_layout_width="match_parent"
android_layout_height="wrap_content"
/>
</RelativeLayout>(c). inputdialog.xml
- définit la disposition de nos dialogues d'entrée
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android_orientation="vertical" android_layout_width="match_parent"
android_layout_height="match_parent">
<LinearLayout
android_layout_width="fill_parent"
android_layout_height="match_parent"
android_layout_marginTop="?attr/actionBarSize"
android_orientation="vertical"
android_paddingLeft="15dp"
android_paddingRight="15dp"
android_paddingTop="50dp">
<android.support.design.widget.TextInputLayout
android_id="@+id/nameLayout"
android_layout_width="match_parent"
android_layout_height="wrap_content">
<EditText
android_id="@+id/nameEditText"
android_layout_width="match_parent"
android_layout_height="wrap_content"
android_singleLine="true"
android_hint= "Name" />
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android_id="@+id/propLayout"
android_layout_width="match_parent"
android_layout_height="wrap_content">
<EditText
android_id="@+id/propellantEditText"
android_layout_width="match_parent"
android_layout_height="wrap_content"
android_singleLine="true"
android_hint= "Propellant" />
<android.support.design.widget.TextInputLayout
android_id="@+id/descLayout"
android_layout_width="match_parent"
android_layout_height="wrap_content">
<EditText
android_id="@+id/descEditText"
android_layout_width="match_parent"
android_layout_height="wrap_content"
android_singleLine="true"
android_hint= "Description" />
</android.support.design.widget.TextInputLayout>
</android.support.design.widget.TextInputLayout>
<Button android_id="@+id/saveBtn"
android_layout_width="fill_parent"
android_layout_height="wrap_content"
android_text="Save"
android_clickable="true"
android_background="@color/colorAccent"
android_layout_marginTop="40dp"
android_textColor="@android:color/white"/>
</LinearLayout>
</LinearLayout>(d). Model.xml
- définit nos CardViews personnalisés.
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
android_orientation="horizontal" android_layout_width="match_parent"
android_layout_margin="10dp"
card_view_cardCornerRadius="5dp"
card_view_cardElevation="5dp"
android_layout_height="200dp">
<LinearLayout
android_orientation="vertical"
android_layout_width="match_parent"
android_layout_height="match_parent">
<TextView
android_layout_width="match_parent"
android_layout_height="wrap_content"
android_textAppearance="?android:attr/textAppearanceLarge"
android_text="Name"
android_id="@+id/nameTxt"
android_padding="10dp"
android_textColor="@color/colorAccent"
android_textStyle="bold"
android_layout_alignParentLeft="true"
/>
<TextView
android_layout_width="wrap_content"
android_layout_height="wrap_content"
android_textAppearance="?android:attr/textAppearanceLarge"
android_text="Description....................."
android_lines="3"
android_id="@+id/descTxt"
android_padding="10dp"
android_layout_alignParentLeft="true"
/>
<TextView
android_layout_width="wrap_content"
android_layout_height="wrap_content"
android_textAppearance="?android:attr/textAppearanceMedium"
android_text="Propellant"
android_textStyle="italic"
android_id="@+id/propellantTxt" />
</LinearLayout>
</android.support.v7.widget.CardView>(f). activity_detail.xml
- Contient notre ContentDetail.xml.
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
android_layout_width="match_parent"
android_layout_height="match_parent"
android_fitsSystemWindows="true"
tools_context="com.tutorials.hp.firebaserecyclermdetail.DetailActivity">
<android.support.design.widget.AppBarLayout
android_layout_width="match_parent"
android_layout_height="wrap_content"
android_theme="@style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android_id="@+id/toolbar"
android_layout_width="match_parent"
android_layout_height="?attr/actionBarSize"
android_background="?attr/colorPrimary"
app_popupTheme="@style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<include layout="@layout/content_detail" />
<android.support.design.widget.FloatingActionButton
android_id="@+id/fab"
android_layout_width="wrap_content"
android_layout_height="wrap_content"
android_layout_gravity="bottom|end"
android_layout_margin="@dimen/fab_margin"
android_src="@android:drawable/ic_dialog_email" />
</android.support.design.widget.CoordinatorLayout>(g). content_detail.xml
- Notre vue détaillée.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android_layout_width="match_parent"
android_layout_height="match_parent"
android_paddingBottom="@dimen/activity_vertical_margin"
android_paddingLeft="@dimen/activity_horizontal_margin"
android_paddingRight="@dimen/activity_horizontal_margin"
android_paddingTop="@dimen/activity_vertical_margin"
app_layout_behavior="@string/appbar_scrolling_view_behavior"
tools_context="com.tutorials.hp.firebaserecyclermdetail.DetailActivity"
tools_showIn="@layout/activity_detail">
<android.support.v7.widget.CardView
android_orientation="horizontal" android_layout_width="match_parent"
android_layout_margin="5dp"
card_view_cardCornerRadius="10dp"
card_view_cardElevation="5dp"
android_layout_height="match_parent">
<LinearLayout
android_orientation="vertical"
android_layout_width="match_parent"
android_layout_height="match_parent"
android_weightSum="1">
<LinearLayout
android_orientation="horizontal"
android_layout_width="match_parent"
android_layout_height="wrap_content">
<ImageView
android_id="@+id/articleDetailImg"
android_layout_width="320dp"
android_layout_height="wrap_content"
android_paddingLeft="10dp"
android_layout_alignParentTop="true"
android_scaleType="centerCrop"
android_src="@drawable/spitzer" />
<LinearLayout
android_orientation="vertical"
android_layout_width="match_parent"
android_layout_height="wrap_content">
<TextView
android_id="@+id/nameDetailTxt"
android_layout_width="wrap_content"
android_layout_height="wrap_content"
android_textAppearance="?android:attr/textAppearanceLarge"
android_padding="5dp"
android_minLines="1"
android_textStyle="bold"
android_textColor="@color/colorAccent"
android_text="Title" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android_layout_width="fill_parent"
android_layout_height="match_parent"
android_layout_marginTop="?attr/actionBarSize"
android_orientation="vertical"
android_paddingLeft="5dp"
android_paddingRight="5dp"
android_paddingTop="5dp">
<TextView
android_id="@+id/propellantDetailTxt"
android_layout_width="wrap_content"
android_layout_height="wrap_content"
android_textAppearance="?android:attr/textAppearanceLarge"
android_padding="5dp"
android_minLines="1"
android_text="DATE" />
<TextView
android_id="@+id/descDetailTxt"
android_layout_width="wrap_content"
android_layout_height="wrap_content"
android_textAppearance="?android:attr/textAppearanceLarge"
android_padding="5dp"
android_textColor="#0f0f0f"
android_minLines="4"
android_text="Space craft details...." />
<TextView
android_id="@+id/linkDetailTxt"
android_layout_width="wrap_content"
android_layout_height="wrap_content"
android_textAppearance="?android:attr/textAppearanceMedium"
android_padding="5dp"
android_textColor="@color/colorPrimaryDark"
android_textStyle="italic"
android_text="Link" />
</LinearLayout>
</LinearLayout>
</android.support.v7.widget.CardView>
</RelativeLayout>4. Télécharger
Comment courir
- Téléchargez le projet.
- Vous obtiendrez un fichier zippé, extrayez-le.
- Ouvrez le Android Studio.
- Fermez maintenant le projet déjà ouvert.
- Dans la barre de menu, cliquez sur Fichier >Nouveau>Importer un projet.
- Choisissez maintenant un dossier de destination, à partir duquel vous voulez importer le projet.
- Choisissez un projet Android.
- Cliquez maintenant sur "OK".
- Terminé, vous avez fini d'importer le projet, maintenant éditez-le.
- Vous devrez vous rendre dans la console Firebase, créer une application, puis télécharger le fichier de configuration et l'ajouter à votre projet dans le dossier de l'application.
