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.
implementation 'com.github.bumptech.glide:glide:4.11.0'annotationProcessor 'com.github.bumptech.glide:compiler:4.11.0
- 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
