How to Create a Custom Intro Slider of an Android App?
Last Updated :
23 Dec, 2022
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
<? 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" >
< 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" />
< 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_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
<? xml version = "1.0" encoding = "utf-8" ?>
< RelativeLayout
android:id = "@+id/idRLSlider"
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/white"
android:textSize = "20sp"
android:textStyle = "bold" />
< 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: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.
Java
public class SliderModal {
private String title;
private String heading;
private String imgUrl;
private int backgroundDrawable;
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, 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.
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);
RelativeLayout sliderRL = view.findViewById(R.id.idRLSlider);
SliderModal modal = sliderModalArrayList.get(position);
titleTV.setText(modal.getTitle());
headingTV.setText(modal.getHeading());
Picasso.get().load(modal.getImgUrl()).into(imageView);
sliderRL.setBackground(context.getResources().getDrawable(modal.getBackgroundDrawable()));
container.addView(view);
return view;
}
@Override
public void destroyItem( @NonNull ViewGroup container, int position, @NonNull Object object) {
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
<? 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
<? 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
<? 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.
Java
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 {
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);
viewPager = findViewById(R.id.idViewPager);
dotsLL = findViewById(R.id.idLLDots);
sliderModalArrayList = new ArrayList<>();
adapter = new SliderAdapter(MainActivity. this , sliderModalArrayList);
viewPager.setAdapter(adapter);
size = sliderModalArrayList.size();
addDots(size, 0 );
viewPager.addOnPageChangeListener(viewListener);
}
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.black));
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) {
}
};
}
|
Now run your app and see the output of the app. Make sure to keep your Internet On.
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...