Firebase Realtime Database With RecycleView

Firebase Database

Hello and welcome back guys!

What We Gonna Do Today?

Today We Are Gonna Learn Firebase Real time Database with Firebase Database Ui.
We Gonna Add Multiple Data In Our Database And will Retrieve it and Show In Recycle View using Firebase UI,

How We Gonna Do?

So firstly Create A Firebase Project at Firebase Console  And Add Your Android App in project

now add these libraries in your app level gradle


compile 'com.google.firebase:firebase-database:9.2.1'
compile 'com.firebaseui:firebase-ui-database:0.4.3'
compile 'com.android.support:support-v4:25.0.0'
compile 'com.android.support:design:25.0.0'

now go to your Firebase console then in database section and in rules change the read and write to true like this:

Now Lets Create AddDataActivity From where we gonna save data in Database

And here’s AddDataActicty Layout:

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_add_data"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.blogspot.theandroidclassroom.tacdatabasedemo.AddDataActivity">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/name_edit"
android:hint="Name"
android:layout_margin="10dp"
/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/email_edit"
android:hint="Email"
android:layout_margin="10dp"
/>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/add_btn"
android:text="Add Data"
android:layout_marginTop="5dp"/>
</LinearLayout>

Now Lets Code Our AddDataActivity:

 public class AddDataActivity extends AppCompatActivity {
private DatabaseReference mDatabaseRef;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_add_data);
mDatabaseRef = FirebaseDatabase.getInstance().getReference().child("Data");
final EditText nameEdit = (EditText) findViewById(R.id.name_edit);
final EditText emailEdit = (EditText) findViewById(R.id.email_edit);
Button addBtn = (Button) findViewById(R.id.add_btn);

addBtn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
String name = nameEdit.getText().toString();
String email = emailEdit.getText().toString();

if (TextUtils.isEmpty(name) || TextUtils.isEmpty(email)) {
Toast.makeText(getApplicationContext(), "Please fill all fields", Toast.LENGTH_LONG).show();
} else {

DatabaseReference data = mDatabaseRef.push();
data.child("name").setValue(name);
data.child("email").setValue(email);

nameEdit.setText("");
emailEdit.setText("");
}
}
});
}
}

So What we did here is We called the Firebase DatabaseReference mDatabaseReference
and Initialized it and added a child  to id “Data”
then in Button click we created one more databaseRef and it just push a Unique key to our mDatabaseReference
then we added child name And email and added values to it

And its Done Our Data has been saved in Firebase:

Now its time to retrieve data
so we gonna retrieve data in list And will display it in a recycle view using Firebase ui Recycle View Adapter

So First create a Pojo for Our Data :

 public class DataPojo {  
private String email,name;
public DataPojo() {
}
public DataPojo(String email, String name) {
this.email = email;
this.name = name;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}

Note: the Member Variable Name should be Same as we Gave in Database For eg “name”

now Lets Code Our MainActivity Layout:

 <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"
tools:context="com.blogspot.theandroidclassroom.tacdatabasedemo.MainActivity">
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/recycle_view"/>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/goto_add_post"
android:text="Add Data"
android:layout_alignParentBottom="true"/>
</RelativeLayout>

now lets create a layout for recycle view:
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="25dp"
android:layout_marginTop="10dp"
style="@style/Base.TextAppearance.AppCompat.Headline"
android:id="@+id/name"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/email"
android:layout_marginLeft="15dp"
style="@style/Base.TextAppearance.AppCompat.Medium"
/>
<View
android:layout_margin="3dp"
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#999999"
/>
</LinearLayout>

Now lets code MainActivity:

 public class MainActivity extends AppCompatActivity {  
private DatabaseReference mDataRef;
private RecyclerView mRecycleView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mDataRef = FirebaseDatabase.getInstance().getReference().child("Data");
Button gotoAddDataActivity =(Button) findViewById(R.id.goto_add_post);
gotoAddDataActivity.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
startActivity(new Intent(MainActivity.this,AddDataActivity.class));
}
});
mRecycleView = (RecyclerView) findViewById(R.id.recycle_view);
mRecycleView.setLayoutManager(new LinearLayoutManager(this));
}
@Override
protected void onStart() {
super.onStart();
FirebaseRecyclerAdapter<DataPojo,MyViewHolder> adapter = new FirebaseRecyclerAdapter<DataPojo, MyViewHolder>(
DataPojo.class,
R.layout.layout_for_recycle,
MyViewHolder.class,
mDataRef
) {
@Override
protected void populateViewHolder(MyViewHolder viewHolder, DataPojo model, int position) {
viewHolder.setupViews(model.getName(),model.getEmail());
}
};
mRecycleView.setAdapter(adapter);
}
static class MyViewHolder extends RecyclerView.ViewHolder{
private View mView;
public MyViewHolder(View itemView) {
super(itemView);
mView = itemView;
}
void setupViews(String name, String email){
TextView nameText = (TextView) mView.findViewById(R.id.name);
TextView emailText = (TextView) mView.findViewById(R.id.email);
nameText.setText(name);
emailText.setText(email);
}
}

So here what we did is

  1. We created the instance of our DatabaseReference
  2. Created a static ViewHolder Class (needed for Firebase ui And RecycleView)
  3. Created An Instance of Firebase Recycle View Adapter and gave the 4 Params (DataPojo class, layout for recycleview, ViewHolder class and DatabaseReference )
  4. now on PopulateViewHolder() we set the views. Getting data from DataPojo model.. 
All Done!
Our app is ready now….
AddDataActivity
MainActivity

Leave a Reply

Your email address will not be published. Required fields are marked *