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.
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.
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.
<!--adding linear layout for creating dots view-->
<!--button for skipping our intro slider-->
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.
<!--text view for displaying our slider description-->
android:text="C++ data structure and ALgorithm Course"
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.
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 asSliderAdapter and add the below code to it. Comments are added inside the code to understand the code in more detail.
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.
Please Login to comment...