How to work with Firebase Recylerview

hai friends in this tutorial we will learn how to use firebase recyclerview ,this is one of the famous and important ui component in android it makes our work easier

target of our application 

Lets start our work

• create a new android project in android studio
• setup the firebase with our android project (if u don't know about please see the below video)

• add the following dependencies in our project under project structure build.gradle(Module: app) file in module section

   compile 'com.google.firebase:firebase-database:10.0.0'  
   compile 'com.firebaseui:firebase-ui-database:0.6.2'  
   compile 'com.android.support:recyclerview-v7:24.2.1'  
   compile 'com.android.support:cardview-v7:24.2.1'  
   compile 'com.squareup.picasso:picasso:2.5.2'  

uses of above dependencies

• firebase database dependency used to uses the database feature of firebase 
• firebase ui dependency used to working with firebase recyclerview
• recyclerview dependency used to working with inbuilt recyclerview of android
• cardview dependency used to working with cardview 
• picasso dependency used to set the images into imageview from network urls in easier way

create User Interface for our Application

• make our activity_main.xml file to below  

activity_main.xml

 <?xml version="1.0" encoding="utf-8"?>  
 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
   xmlns:tools="http://schemas.android.com/tools"  
   android:id="@+id/activity_main"  
   android:layout_width="match_parent"  
   android:layout_height="match_parent"  
   >  
   <android.support.v7.widget.RecyclerView  
     android:layout_width="match_parent"  
     android:layout_height="match_parent"  
     android:id="@+id/recyclerview">  
   </android.support.v7.widget.RecyclerView>  
 </RelativeLayout>  

• create another XML file(i.e individual_row.xml) under res/layout directory
• then make that xml file to look like this

individual_row.xml

 <?xml version="1.0" encoding="utf-8"?>  
 <android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"  
   android:layout_width="match_parent" android:layout_height="match_parent">  
   <LinearLayout  
     android:layout_width="match_parent"  
     android:orientation="vertical"  
     android:layout_height="wrap_content">  
     <ImageView  
       android:layout_width="match_parent"  
       android:layout_height="wrap_content"  
       android:src="@mipmap/ic_launcher"  
       android:id="@+id/image"/>  
     <TextView  
       android:layout_width="match_parent"  
       android:layout_height="wrap_content"  
       android:text="title"  
       android:id="@+id/title"/>  
     <TextView  
       android:layout_width="match_parent"  
       android:layout_height="wrap_content"  
       android:text="description"  
       android:id="@+id/description"/>  
   </LinearLayout>  
 </android.support.v7.widget.CardView>  

• finally we will get user interface like this

individual_row

activity_main

• some times you will get activity_main show like this due to some android studio errors but it will works fine
• next we will manually add some data to our database section like below

• make the MainActivity.java file like this

MainActivity.java

 package com.example.mahesh.test;  
 import android.content.Context;  
 import android.support.v7.app.AppCompatActivity;  
 import android.os.Bundle;  
 import android.support.v7.widget.LinearLayoutManager;  
 import android.support.v7.widget.RecyclerView;  
 import android.view.View;  
 import android.widget.ImageView;  
 import android.widget.TextView;  
 import android.widget.Toast;  
 import com.firebase.ui.database.FirebaseRecyclerAdapter;  
 import com.google.firebase.database.DatabaseReference;  
 import com.google.firebase.database.FirebaseDatabase;  
 import com.squareup.picasso.Picasso;  
 public class MainActivity extends AppCompatActivity {  
   private RecyclerView recyclerView;  
   private DatabaseReference myref;  
   @Override  
   protected void onCreate(Bundle savedInstanceState) {  
     super.onCreate(savedInstanceState);  
     setContentView(R.layout.activity_main);  
     recyclerView=(RecyclerView)findViewById(R.id.recyclerview);  
     recyclerView.setHasFixedSize(true);  
     recyclerView.setLayoutManager(new LinearLayoutManager(this));  
     myref= FirebaseDatabase.getInstance().getReference().child("/blog");  
     FirebaseRecyclerAdapter<Blog,BlogViewHolder> recyclerAdapter=new FirebaseRecyclerAdapter<Blog,BlogViewHolder>(  
         Blog.class,  
         R.layout.individual_row,  
         BlogViewHolder.class,  
         myref  
     ) {  
       @Override  
       protected void populateViewHolder(BlogViewHolder viewHolder, Blog model, int position) {  
         viewHolder.setTitle(model.getTitle());  
         viewHolder.setDescription(model.getDescription());  
         viewHolder.setImage(model.getImage());  
       }  
     };  
   recyclerView.setAdapter(recyclerAdapter);  
   }  
   public static class BlogViewHolder extends RecyclerView.ViewHolder {  
     View mView;  
     TextView textView_title;  
     TextView textView_decription;  
     ImageView imageView;  
     public BlogViewHolder(View itemView) {  
       super(itemView);  
       mView=itemView;  
       textView_title = (TextView)itemView.findViewById(R.id.title);  
       textView_decription = (TextView) itemView.findViewById(R.id.description);  
       imageView=(ImageView)itemView.findViewById(R.id.image);  
     }  
     public void setTitle(String title)  
     {  
       textView_title.setText(title+"");  
     }  
     public void setDescription(String description)  
     {  
       textView_decription.setText(description);  
     }  
     public void setImage(String image)  
     {  
       Picasso.with(mView.getContext())  
           .load(image)  
           .into(imageView);  
     }  
   }  
 }  

• create another new java file(i.e Blog) under our application package
• makes that file look like this

Blog.java

 package com.example.mahesh.test;  
 /**  
  * Created by uma maesh on 12-03-17.  
  */  
 public class Blog {  
   private String title,description,image;  
   public Blog() {  
   }  
   public Blog(String title, String description, String image) {  
     this.title = title;  
     this.description = description;  
     this.image = image;  
   }  
   public String getTitle() {  
     return title;  
   }  
   public void setTitle(String title) {  
     this.title = title;  
   }  
   public String getDescription() {  
     return description;  
   }  
   public void setDescription(String description) {  
     this.description = description;  
   }  
   public String getImage() {  
     return image;  
   }  
   public void setImage(String image) {  
     this.image = image;  
   }  
 }  

Note  : if you are not implementing authentication(Login system) for your                           application (like me) you follow the following steps  

• click here
• it will automatically redirects to firebase console page, there you will find your firebase projects
• then select your project and click database section
• under database section click Rules tab for changing the rules
• change the your default rules like below

 {  
  "rules": {  
   ".read": "true",  
   ".write": "true"  
  }  
 }  

Thanks for seeing our blog if you have any doubts please comment below i will come with better solution