Intro Slider in many apps is mostly used to educate the users about the app, the features of the app, and the services that our app will provide to us. In this article, we will take a look at the implementation of Custom Intro Slider in our app.
What we are going to build in this article?
We will be building a simple application in which we will be displaying an intro slider in which we will show slider in our app. This slider contains a simple image and two TextView. 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 of Custom Intro Slider
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: Adding the dependency for Picasso in your build.gradle file
As we will be loading all our images from online sources so we will be using Picasso for loading images from URLs inside our application. So for using the images from the URL we have to add the below dependency in our build.gradle file.
implementation ‘com.squareup.picasso:picasso:2.71828’
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.
<uses-permission android:name=”android.permission.INTERNET”/>
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 version = "1.0" encoding = "utf-8" ?>
< RelativeLayout
android:layout_width = "match_parent"
android:layout_height = "match_parent"
android:orientation = "vertical"
android:weightSum = "5"
tools:context = ".MainActivity" >
<!--view pager for displaying our slides-->
< androidx.viewpager.widget.ViewPager
android:id = "@+id/idViewPager"
android:layout_width = "match_parent"
android:layout_height = "match_parent" />
< LinearLayout
android:layout_width = "match_parent"
android:layout_height = "wrap_content"
android:layout_alignParentBottom = "true"
android:background = "@android:color/transparent"
android:orientation = "horizontal"
android:weightSum = "5" >
< View
android:layout_width = "0dp"
android:layout_height = "0dp"
android:layout_weight = "2" />
<!--adding linear layout for
creating dots view-->
< 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 for skipping our intro slider-->
< Button
android:id = "@+id/idBtnSkip"
android:layout_width = "0dp"
android:layout_height = "wrap_content"
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 >
</ RelativeLayout >
|
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 version = "1.0" encoding = "utf-8" ?>
< RelativeLayout
android:id = "@+id/idRLSlider"
android:layout_width = "match_parent"
android:layout_height = "match_parent" >
<!--text view for displaying
our heading-->
< 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/white"
android:textSize = "20sp"
android:textStyle = "bold" />
<!--Image view for displaying
our slider image-->
< 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" />
<!--text view for displaying our
slider description-->
< 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:textColor = "@color/white"
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.
public class SliderModal {
// string variable for storing
// title, image url and description.
private String title;
private String heading;
private String imgUrl;
private int backgroundDrawable;
public SliderModal() {
// empty constructor is required
// when using firebase
}
// creating getter methods.
public String getTitle() {
return title;
}
public void setTitle(String title) {
this .title = title;
}
public String getHeading() {
return heading;
}
// creating setter methods
public void setHeading(String heading) {
this .heading = heading;
}
public String getImgUrl() {
return imgUrl;
}
public void setImgUrl(String imgUrl) {
this .imgUrl = imgUrl;
}
// constructor for our modal class
public SliderModal(String title, String heading, String imgUrl, int backgroundDrawable) {
this .title = title;
this .heading = heading;
this .imgUrl = imgUrl;
this .backgroundDrawable = backgroundDrawable;
}
public int getBackgroundDrawable() {
return backgroundDrawable;
}
public void setBackgroundDrawable( int backgroundDrawable) {
this .backgroundDrawable = backgroundDrawable;
}
} |
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 and name it as SliderAdapter and add the below code to it. Comments are added inside the code to understand the code in more detail.
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 {
// creating variables for layout
// inflater, context and array list.
LayoutInflater layoutInflater;
Context context;
ArrayList<SliderModal> sliderModalArrayList;
// creating constructor.
public SliderAdapter(Context context, ArrayList<SliderModal> sliderModalArrayList) {
this .context = context;
this .sliderModalArrayList = sliderModalArrayList;
}
@Override
public int getCount() {
// inside get count method returning
// the size of our array list.
return sliderModalArrayList.size();
}
@Override
public boolean isViewFromObject( @NonNull View view, @NonNull Object object) {
// inside isViewFromobject method we are
// returning our Relative layout object.
return view == (RelativeLayout) object;
}
@NonNull
@Override
public Object instantiateItem( @NonNull ViewGroup container, int position) {
// in this method we will initialize all our layout
// items and inflate our layout file as well.
layoutInflater = (LayoutInflater) context.getSystemService(context.LAYOUT_INFLATER_SERVICE);
// below line is use to inflate the
// layout file which we created.
View view = layoutInflater.inflate(R.layout.slider_layout, container, false );
// initializing our views.
ImageView imageView = view.findViewById(R.id.idIV);
TextView titleTV = view.findViewById(R.id.idTVtitle);
TextView headingTV = view.findViewById(R.id.idTVheading);
RelativeLayout sliderRL = view.findViewById(R.id.idRLSlider);
// setting data to our views.
SliderModal modal = sliderModalArrayList.get(position);
titleTV.setText(modal.getTitle());
headingTV.setText(modal.getHeading());
Picasso.get().load(modal.getImgUrl()).into(imageView);
// below line is to set background
// drawable to our each item
sliderRL.setBackground(context.getResources().getDrawable(modal.getBackgroundDrawable()));
// after setting the data to our views we
// are adding the view to our container.
container.addView(view);
// at last we are
// returning the view.
return view;
}
@Override
public void destroyItem( @NonNull ViewGroup container, int position, @NonNull Object object) {
// this is a destroy view method
// which is use to remove a view.
container.removeView((RelativeLayout) object);
}
} |
Step 8: Creating custom gradient drawable for our background of each slide
Navigate to the app > res > drawable > Right-click on it > New > drawable resource file and name the file as gradient_one and add the below code to it.
gradient_one.xml
<? xml version = "1.0" encoding = "utf-8" ?>
android:shape = "rectangle" >
< gradient
android:angle = "90"
android:endColor = "@color/purple_500"
android:startColor = "#4B6CD6" />
</ shape >
|
gradient_two.xml
<? xml version = "1.0" encoding = "utf-8" ?>
android:shape = "rectangle" >
< gradient
android:angle = "90"
android:endColor = "#FF9800"
android:startColor = "#F4C22B" />
</ shape >
|
gradient_three.xml
<? xml version = "1.0" encoding = "utf-8" ?>
android:shape = "rectangle" >
< gradient
android:angle = "90"
android:endColor = "#F44336"
android:startColor = "#FD7B52" />
</ shape >
|
Step 9: 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.
import android.os.Bundle;
import android.text.Html;
import android.widget.LinearLayout;
import android.widget.TextView;
import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager.widget.ViewPager;
import java.util.ArrayList;
public class MainActivity extends AppCompatActivity {
// creating variables for view pager,
// liner layout, adapter and our array list.
private ViewPager viewPager;
private LinearLayout dotsLL;
SliderAdapter adapter;
private ArrayList<SliderModal> sliderModalArrayList;
private TextView[] dots;
int size;
@Override
protected void onCreate(Bundle savedInstanceState) {
super .onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// initializing all our views.
viewPager = findViewById(R.id.idViewPager);
dotsLL = findViewById(R.id.idLLDots);
// in below line we are creating a new array list.
sliderModalArrayList = new ArrayList<>();
// on below 3 lines we are adding data to our array list.
sliderModalArrayList.add( new SliderModal( "Slide 1 " , "Slide 1 heading" , "https://images.unsplash.com/photo-1610842546881-b282c580b51d?ixid=MXwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw5fHx8ZW58MHx8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" , R.drawable.gradient_one));
sliderModalArrayList.add( new SliderModal( "Slide 2 " , "Slide 2 heading" , "https://images.unsplash.com/photo-1610783131813-475d08664ef6?ixid=MXwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxMnx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" , R.drawable.gradient_two));
sliderModalArrayList.add( new SliderModal( "Slide 3 " , "Slide 3 heading" , "https://images.unsplash.com/photo-1610832958506-aa56368176cf?ixid=MXwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxN3x8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" , R.drawable.gradient_three));
// below line is use to add our array list to adapter class.
adapter = new SliderAdapter(MainActivity. this , sliderModalArrayList);
// below line is use to set our
// adapter to our view pager.
viewPager.setAdapter(adapter);
// we are storing the size of our
// array list in a variable.
size = sliderModalArrayList.size();
// calling method to add dots indicator
addDots(size, 0 );
// below line is use to call on
// page change listener method.
viewPager.addOnPageChangeListener(viewListener);
}
private void addDots( int size, int pos) {
// inside this method we are
// creating a new text view.
dots = new TextView[size];
// below line is use to remove all
// the views from the linear layout.
dotsLL.removeAllViews();
// running a for loop to add
// number of dots to our slider.
for ( int i = 0 ; i < size; i++) {
// below line is use to add the
// dots and modify its color.
dots[i] = new TextView( this );
dots[i].setText(Html.fromHtml( "•" ));
dots[i].setTextSize( 35 );
// below line is called when the dots are not selected.
dots[i].setTextColor(getResources().getColor(R.color.black));
dotsLL.addView(dots[i]);
}
if (dots.length > 0 ) {
// this line is called when the dots
// inside linear layout are selected
dots[pos].setTextColor(getResources().getColor(R.color.purple_200));
}
}
// creating a method for view pager for on page change listener.
ViewPager.OnPageChangeListener viewListener = new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled( int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected( int position) {
// we are calling our dots method to
// change the position of selected dots.
addDots(size, position);
}
@Override
public void onPageScrollStateChanged( int state) {
}
};
} |
Now run your app and see the output of the app. Make sure to keep your Internet On.
Output: