How to Create Dynamic Intro Slider in Android using Firebase Firestore?
Last Updated :
23 Dec, 2022
We have seen creating a basic Intro Slider in Android which is used to inform our users regarding the features of our app and many more. In this article, we will take a look at the implementation of dynamic Intro Slider in our app with the help of Firebase. With the help of Firebase Firestore, we can change all the data dynamically from Firebase Console. Now let’s move towards the implementation.
What we are going to build in this project?
We will be building a simple Intro Slider in which we will load all the data from the Firebase Console and display that data in our slider. With the help of Firebase, we can dynamically update our data according to our requirements. A sample GIF is given below to get an idea about what we are going to do in this article. Note that we are going to implement this project using the Java language.
Step by Step Implementation
Step 1: Create a New Project
To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Java as the programming language.
Step 2: Connect your app to Firebase
After creating a new project. Navigate to the Tools option on the top bar. Inside that click on Firebase. After clicking on Firebase, you can get to see the right column mentioned below in the screenshot.
Inside that column Navigate to Firebase Cloud Firestore. Click on that option and you will get to see two options on Connect app to Firebase and Add Cloud Firestore to your app. Click on Connect now option and your app will be connected to Firebase. After that click on the second option and now your App is connected to Firebase. After connecting your app to Firebase you will get to see the below screen.
After that verify that dependency for the Firebase Firestore database has been added to our Gradle file. Navigate to app > Gradle Scripts inside that file check weather below dependency is added or not. If the below dependency is not present in your build.gradle file. Add the below dependency in the dependencies section.
implementation ‘com.google.firebase:firebase-firestore:22.0.1’
implementation ‘com.squareup.picasso:picasso:2.71828’
After adding this dependency sync your project and now we are ready for creating our app. if you want to know more about connecting your app to Firebase. Refer to this article to get in detail about How to add Firebase to Android App. As we are loading images from URL so we have to use Picasso.
Step 3: Adding permissions for the Internet
As we will be loading images from the URL, so we have to add permissions for the internet in your AndroidManifest.xml file. For adding permissions. Navigate to the app > AndroidManifest.xml file and add the below permissions.
XML
< uses-permission android:name = "android.permission.INTERNET" />
< uses-permission android:name = "android.permission.ACCESS_NETWORK_STATE" />
|
Step 4: Working with the activity_main.xml file
Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file.
XML
<? xml version = "1.0" encoding = "utf-8" ?>
< LinearLayout
android:layout_width = "match_parent"
android:layout_height = "match_parent"
android:orientation = "vertical"
android:weightSum = "5"
tools:context = ".MainActivity" >
< androidx.viewpager.widget.ViewPager
android:id = "@+id/idViewPager"
android:layout_width = "match_parent"
android:layout_height = "0dp"
android:layout_weight = "4.5" />
< LinearLayout
android:layout_width = "match_parent"
android:layout_height = "0dp"
android:layout_weight = "0.5"
android:orientation = "horizontal"
android:weightSum = "5" >
< View
android:layout_width = "0dp"
android:layout_height = "wrap_content"
android:layout_weight = "2" />
< LinearLayout
android:id = "@+id/idLLDots"
android:layout_width = "0dp"
android:layout_height = "wrap_content"
android:layout_gravity = "center_horizontal"
android:layout_weight = "1"
android:gravity = "center_horizontal"
android:orientation = "horizontal" />
< Button
android:id = "@+id/idBtnSkip"
android:layout_width = "0dp"
android:layout_height = "wrap_content"
android:layout_gravity = "center"
android:layout_margin = "10dp"
android:layout_weight = "2"
android:background = "@color/purple_500"
android:backgroundTint = "@color/purple_500"
android:text = "Skip"
android:textAllCaps = "false"
android:textColor = "@color/white" />
</ LinearLayout >
</ LinearLayout >
|
Step 5: Creating a layout file for our slider item
Now we will create an item that we will be displaying in our slider. So for creating a new layout navigate to the app > res > layout > Right-click on it > Click on New > layout resource file and name it as slider_layout and add below code to it.
XML
<? xml version = "1.0" encoding = "utf-8" ?>
< RelativeLayout
android:layout_width = "match_parent"
android:layout_height = "match_parent" >
< TextView
android:id = "@+id/idTVtitle"
android:layout_width = "match_parent"
android:layout_height = "wrap_content"
android:layout_margin = "20dp"
android:padding = "10dp"
android:text = "Slide 1"
android:textAlignment = "center"
android:textColor = "@color/black"
android:textSize = "20sp" />
< ImageView
android:id = "@+id/idIV"
android:layout_width = "200dp"
android:layout_height = "200dp"
android:layout_below = "@id/idTVtitle"
android:layout_centerHorizontal = "true"
android:layout_marginTop = "50dp"
android:padding = "10dp"
android:src = "@mipmap/ic_launcher" />
< TextView
android:id = "@+id/idTVheading"
android:layout_width = "match_parent"
android:layout_height = "wrap_content"
android:layout_below = "@id/idIV"
android:layout_marginStart = "20dp"
android:layout_marginTop = "90dp"
android:layout_marginEnd = "20dp"
android:padding = "10dp"
android:text = "C++ data structure and ALgorithm Course"
android:textAlignment = "center"
android:textSize = "15sp" />
</ RelativeLayout >
|
Step 6: Creating a Modal class for storing all the data for Slider items
For creating a new Modal class navigate to the app > java > your app’s package name > Right-click on it and click on New > Java class and name it as SliderModal. After creating this class add the below code to it.
Java
public class SliderModal {
private String title;
private String heading;
private String imgUrl;
public SliderModal() {
}
public String getTitle() {
return title;
}
public void setTitle(String title) {
this .title = title;
}
public String getHeading() {
return heading;
}
public void setHeading(String heading) {
this .heading = heading;
}
public String getImgUrl() {
return imgUrl;
}
public void setImgUrl(String imgUrl) {
this .imgUrl = imgUrl;
}
public SliderModal(String title, String heading, String imgUrl) {
this .title = title;
this .heading = heading;
this .imgUrl = imgUrl;
}
}
|
Step 7: Create an Adapter class for setting data to each view
For creating a new Adapter class. Navigate to the app > java > your app’s package name > Right-click on it > New Java class > name it as SliderAdapter and add the below code to it. Comments are added inside the code to understand the code in more detail.
Java
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.TextView;
import androidx.annotation.NonNull;
import androidx.viewpager.widget.PagerAdapter;
import com.squareup.picasso.Picasso;
import java.util.ArrayList;
public class SliderAdapter extends PagerAdapter {
LayoutInflater layoutInflater;
Context context;
ArrayList<SliderModal> sliderModalArrayList;
public SliderAdapter(Context context, ArrayList<SliderModal> sliderModalArrayList) {
this .context = context;
this .sliderModalArrayList = sliderModalArrayList;
}
@Override
public int getCount() {
return sliderModalArrayList.size();
}
@Override
public boolean isViewFromObject( @NonNull View view, @NonNull Object object) {
return view == (RelativeLayout) object;
}
@NonNull
@Override
public Object instantiateItem( @NonNull ViewGroup container, int position) {
layoutInflater = (LayoutInflater) context.getSystemService(context.LAYOUT_INFLATER_SERVICE);
View view = layoutInflater.inflate(R.layout.slider_layout, container, false );
ImageView imageView = view.findViewById(R.id.idIV);
TextView titleTV = view.findViewById(R.id.idTVtitle);
TextView headingTV = view.findViewById(R.id.idTVheading);
SliderModal modal = sliderModalArrayList.get(position);
titleTV.setText(modal.getTitle());
headingTV.setText(modal.getHeading());
Picasso.get().load(modal.getImgUrl()).into(imageView);
container.addView(view);
return view;
}
@Override
public void destroyItem( @NonNull ViewGroup container, int position, @NonNull Object object) {
container.removeView((RelativeLayout) object);
}
}
|
Step 8: Working with the MainActivity.java file
Go to the MainActivity.java file and refer to the following code. Below is the code for the MainActivity.java file. Comments are added inside the code to understand the code in more detail.
Java
import android.os.Bundle;
import android.text.Html;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.widget.Toast;
import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager.widget.ViewPager;
import com.google.android.gms.tasks.OnFailureListener;
import com.google.android.gms.tasks.OnSuccessListener;
import com.google.firebase.firestore.DocumentSnapshot;
import com.google.firebase.firestore.FirebaseFirestore;
import com.google.firebase.firestore.QuerySnapshot;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends AppCompatActivity {
private ViewPager viewPager;
private LinearLayout dotsLL;
SliderAdapter adapter;
private ArrayList<SliderModal> sliderModalArrayList;
private TextView[] dots;
int size;
FirebaseFirestore db;
@Override
protected void onCreate(Bundle savedInstanceState) {
super .onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
db = FirebaseFirestore.getInstance();
viewPager = findViewById(R.id.idViewPager);
dotsLL = findViewById(R.id.idLLDots);
sliderModalArrayList = new ArrayList<>();
loadDataFromFirebase();
addDots(size, 0 );
viewPager.addOnPageChangeListener(viewListener);
}
private void loadDataFromFirebase() {
db.collection( "SliderData" ).get()
.addOnSuccessListener( new OnSuccessListener<QuerySnapshot>() {
@Override
public void onSuccess(QuerySnapshot queryDocumentSnapshots) {
if (!queryDocumentSnapshots.isEmpty()) {
List<DocumentSnapshot> list = queryDocumentSnapshots.getDocuments();
for (DocumentSnapshot d : list) {
SliderModal sliderModal = d.toObject(SliderModal. class );
sliderModalArrayList.add(sliderModal);
}
adapter = new SliderAdapter(MainActivity. this , sliderModalArrayList);
viewPager.setAdapter(adapter);
size = sliderModalArrayList.size();
} else {
Toast.makeText(MainActivity. this , "No data found in Database" , Toast.LENGTH_SHORT).show();
}
}
}).addOnFailureListener( new OnFailureListener() {
@Override
public void onFailure( @NonNull Exception e) {
Toast.makeText(MainActivity. this , "Fail to load data.." , Toast.LENGTH_SHORT).show();
}
});
}
private void addDots( int size, int pos) {
dots = new TextView[size];
dotsLL.removeAllViews();
for ( int i = 0 ; i < size; i++) {
dots[i] = new TextView( this );
dots[i].setText(Html.fromHtml( "•" ));
dots[i].setTextSize( 35 );
dots[i].setTextColor(getResources().getColor(R.color.white));
dotsLL.addView(dots[i]);
}
if (dots.length > 0 ) {
dots[pos].setTextColor(getResources().getColor(R.color.purple_200));
}
}
ViewPager.OnPageChangeListener viewListener = new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled( int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected( int position) {
addDots(size, position);
}
@Override
public void onPageScrollStateChanged( int state) {
}
};
}
|
After adding the above code add the data to Firebase Firestore in Android.
Step 9: Adding the data to Firebase Firestore in Android
Search for Firebase in your browser and go to that website and you will get to see the below screen.
After clicking on Go to Console option. Click on your project which is shown below.
After clicking on your project you will get to see the below screen. After clicking on this project you will get to see the below screen.
After clicking on Create Database option you will get to see the below screen.
Inside this screen, we have to select the Start in test mode option. We are using test mode because we are not setting authentication inside our app. So we are selecting Start in test mode. After selecting on test mode click on the Next option and you will get to see the below screen.
Inside this screen, we just have to click on Enable button to enable our Firebase Firestore database. After completing this process we have to add the data inside our Firebase Console. For adding data to our Firebase Console.
You have to click on Start Collection Option and give the collection name as SliderData. After creating a collection you have to click on Autoid option for creating the first document. Inside this create three fields as title, heading, and imgUrl and add values inside that fields. Add multiple documents in a similar way inside your Firebase Console. After that run your app and see the output of the app.
After adding this data to Firebase run your app and see the output of the app.
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...