Setup Firebase Database and Retrieve data from Firebase in Android| Inshorts News App Clone PART 2 | Android Studio | Firebase

In this series of tutorials, we are going to create a clone app of Inshorts News App using Firebase Realtime Database. Before starting make sure you are ready with the vertical view pager, if not then see PART 1 of the Inshorts News App Clone.

Today we will set up our Firebase Database with Android project then retrieve the data from the firebase to our vertical view page. First, go to the Firebase official site and log in with your google id.

If you’re know how to create and set up Firebase for android then check my previous tutorial on How to create and set up Firebase for Android. CLICK HERE.

Overview

Before going to create the app first let’s see what we are going to create in this tutorial.

Part 1: Add the required dependencies and file in the android project for firebase.

Add the google-service.json file in the app folder.

Add the dependencies and pre-requisite in the build.gradle file

Part 2: add some data

In the Firebase Realtime Database, create one database named “News” and store some data as per our requirement. For data we will be used phys.org news portal. Below image will give you a clean idea how we will add data in our database.

Part 3: Retrieve data from Firebase

  • First create an ArrayList to store data from firebase in the main activity.

public class MainActivity extends AppCompatActivity {

………………

ArrayList<String> titles = new ArrayList<>();

ArrayList<String> desc = new ArrayList<>();

ArrayList<String> images = new ArrayList<>();

ArrayList<String> newslinks = new ArrayList<>();

ArrayList<String> heads = new ArrayList<>();

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

…………..

}

}

  • Create Database Reference

public class MainActivity extends AppCompatActivity {
//now create list of type slider items, which created last part; go check out

List<SliderItems> sliderItems = new ArrayList<>();

ArrayList<String> titles = new ArrayList<>();
ArrayList<String> desc = new ArrayList<>();
ArrayList<String> images = new ArrayList<>();
ArrayList<String> newslinks = new ArrayList<>();
ArrayList<String> heads = new ArrayList<>();

// database reference
DatabaseReference mRef;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.
activity_main);

final VerticalViewPager verticalViewPager = (VerticalViewPager) findViewById(R.id.
verticalViewPager);

mRef = FirebaseDatabase.
getInstance().getReference(“News”);

mRef.addListenerForSingleValueEvent(new ValueEventListener() {
@Override
public void onDataChange(@NonNull DataSnapshot snapshot) {
for (DataSnapshot ds: snapshot.getChildren()){

} }
@Override
public void onCancelled(@NonNull DatabaseError error) {

}
});
}
}

  • Add data to arrayList, make sure all names will be the same as database

public class MainActivity extends AppCompatActivity {

//now create list of type slider items

List<SliderItems> sliderItems = new ArrayList<>();

ArrayList<String> titles = new ArrayList<>();

ArrayList<String> desc = new ArrayList<>();

ArrayList<String> images = new ArrayList<>();

ArrayList<String> newslinks = new ArrayList<>();

ArrayList<String> heads = new ArrayList<>();

DatabaseReference mRef;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

final VerticalViewPager verticalViewPager = (VerticalViewPager) findViewById(R.id.verticalViewPager);

mRef = FirebaseDatabase.getInstance().getReference("News");

mRef.addListenerForSingleValueEvent(new ValueEventListener() {

@Override

public void onDataChange(@NonNull DataSnapshot snapshot) {

for (DataSnapshot ds: snapshot.getChildren()){

titles.add(ds.child("title").getValue(String.class));

desc.add(ds.child("desc").getValue(String.class));

images.add(ds.child("imagelink").getValue(String.class));

newslinks.add(ds.child("newslink").getValue(String.class));

heads.add(ds.child("head").getValue(String.class));

}

for (int i=0;i<images.size();i++){

sliderItems.add(new SliderItems(images.get(i)));

}

verticalViewPager.setAdapter(new ViewPagerAdapter(MainActivity.this));

}

@Override

public void onCancelled(@NonNull DatabaseError error) {

}

});

}

}

  • Now change the adapter signature, add all arrayList inside the adapter class

In the main activity file

public class MainActivity extends AppCompatActivity {
………………
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.
activity_main);

final VerticalViewPager verticalViewPager = (VerticalViewPager) findViewById(R.id.
verticalViewPager);

mRef = FirebaseDatabase.
getInstance().getReference(“News”);
mRef.addListenerForSingleValueEvent(new ValueEventListener() {
@Override
public void onDataChange(@NonNull DataSnapshot snapshot) {
for (DataSnapshot ds: snapshot.getChildren()){
…………..
}
for (int i=0;i<images.size();i++){
………..
}

//add all arrayList in adapter
verticalViewPager.setAdapter(new ViewPagerAdapter(MainActivity.this, sliderItems, titles,desc,newslinks,heads,verticalViewPager));

}

@Override
public void onCancelled(@NonNull DatabaseError error) {

}
});

}
}

In adapter class

public class ViewPagerAdapter extends PagerAdapter {

List<SliderItems> sliderItems;
LayoutInflater mLayoutInflater;
Context context;

ArrayList<String> titles;
ArrayList<String> desc;
ArrayList<String> newslinks;
ArrayList<String> heads;
VerticalViewPager verticalViewPager;

public ViewPagerAdapter(Context context, List<SliderItems> sliderItems, ArrayList<String> titles, ArrayList<String> desc, ArrayList<String> newslinks, ArrayList<String> heads, VerticalViewPager verticalViewPager) {
this.context = context;
this.sliderItems = sliderItems;
this.titles = titles;
this.desc = desc;
this.newslinks = newslinks;
this.heads =heads;
this.verticalViewPager = verticalViewPager;
mLayoutInflater = (LayoutInflater) context.getSystemService(Context.
LAYOUT_INFLATER_SERVICE);
}

@Override
public int getCount() {
return sliderItems.size();
}

@Override
public boolean isViewFromObject(@NonNull View view, @NonNull Object object) {
return view == ((LinearLayout) object);
}

@NonNull
@SuppressLint(“ClickableViewAccessibility”)
@Override
public Object instantiateItem(@NonNull ViewGroup container, int position) {
View itemView = mLayoutInflater.inflate(R.layout.
item_container, container, false);
………

container.addView(itemView);
return itemView;
}

@Override
public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
container.removeView((LinearLayout) object);
}
}

Part 4: Import Glide

  • now we will use Glide library to show images and set the data from array list to textView.
  • to use the glide library first adds the dependency in the build.gradle app module.
  • now use the glide in the adapter class to retrieve image from the database and also set the data in the textViews

public class ViewPagerAdapter extends PagerAdapter {

List<SliderItems> sliderItems;
LayoutInflater mLayoutInflater;
Context context;

ArrayList<String> titles;
ArrayList<String> desc;
ArrayList<String> newslinks;
ArrayList<String> heads;
VerticalViewPager verticalViewPager;

public ViewPagerAdapter(Context context, List<SliderItems> sliderItems, ArrayList<String> titles, ArrayList<String> desc, ArrayList<String> newslinks, ArrayList<String> heads, VerticalViewPager verticalViewPager) {
this.context = context;
this.sliderItems = sliderItems;
this.titles = titles;
this.desc = desc;
this.newslinks = newslinks;
this.heads =heads;
this.verticalViewPager = verticalViewPager;
mLayoutInflater = (LayoutInflater) context.getSystemService(Context.
LAYOUT_INFLATER_SERVICE);
}

@Override
public int getCount() {
return sliderItems.size();
}

@Override
public boolean isViewFromObject(@NonNull View view, @NonNull Object object) {
return view == ((LinearLayout) object);
}

@NonNull
@SuppressLint(“ClickableViewAccessibility”)
@Override
public Object instantiateItem(@NonNull ViewGroup container, int position) {
View itemView = mLayoutInflater.inflate(R.layout.
item_container, container, false);
ImageView imageView = itemView.findViewById(R.id.
imageView);
ImageView imageView2 = itemView.findViewById(R.id.
imageView2);
TextView title = itemView.findViewById(R.id.
headline);
TextView descTv = itemView.findViewById(R.id.
desc);
TextView head = itemView.findViewById(R.id.
head);

title.setText(titles.get(position));
descTv.setText(desc.get(position));
head.setText(heads.get(position));

Glide.
with(context).load(sliderItems.get(position).getImage())
.centerCrop()
.into(imageView);

Glide.
with(context).load(sliderItems.get(position).getImage())
.centerCrop()
.override(12,12)
.into(imageView2);

container.addView(itemView);
return itemView;
}

@Override
public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
container.removeView((LinearLayout) object);
}
}

**Stay tuned for later parts**

In the next part, we will see how to use swipe left gesture to read a full news article in the inshorts news app.

any query ping me at barmangolap15@gmail.com

Hi everyone, myself Golap an Android app developer with UI/UX designer.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store