Slider Intro with Android Studio

Creating a slider intro wizard for your android apps

The first impression is the best impression. The first impression your app makes with its users decides if people will stick onto your app for a longer time or not. This style of intros are used in many of the popular apps including those from Google, to help users to get familiar with the app features.

This intro will only pop up the first time the app is run and never again.

Procedure

1.First of all import all the assets you want to include in the project into the drawable folder in the resources. This includes the images you want to display in the different slides.

2.Create an activity for the slider. Let's call it sliderActivity now. It will have its own .java file and .xml file.

3.In the .xml file, add a ViewPager element. This will be the part of the screen which will be scrollable. Resize it accordingly while giving a little space in the bottom for the dots and the buttons. Set the background image you prefer for the slider in here.

4.Add a LinearLayout under the ViewPager for placing the dots.

5.Create a standalone xml file. In this file we will define how the slides will look. In this layout file, add the ImageView and the TextViews for the heading and the descriptions in the slides. Give them appropriate ids for future reference.

6.Create a java class called sliderAdapter, (or really any name, but it will be for setting up the ViewPager).
Inside it you have to define a Context and a LayoutInflater. This process is explained with the code.

import android.content.Context;
import android.support.annotation.NonNull;
import android.support.v4.view.PagerAdapter;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.TextView;

public class SliderAdapter extends PagerAdapter {  // this class should extend the PagerAdapter class

    Context context;
    LayoutInflater layoutInflater;

    public sliderAdapter(Context context){
        this.context = context;
    }

// set up the images you imported

    public int[] sliderImages = {
       R.drawable.sliderone,
       R.drawable.slidertwo,
       R.drawable.sliderthree
    };

//Store all the heading text in a string array

    public String[] sliderHeadings = {
            "TITLE 1",
            "TITLE 2",
            "TITLE 3"
    };

//Store all the descriptions in a string array

    public String[] slideDescription = {
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam",
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam",
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam"
        };


    @Override
    public int getCount()
    {
        return sliderHeadings.length;      //this is to determine the number of slides we need as no. of headings = no. of slides
    }

    @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.slide_layout,container,false);

        ImageView slide_image = (ImageView) view.findViewById(R.id.slide_image);  // initialize all the views
        TextView slide_heading = (TextView) view.findViewById(R.id.slide_heading);
        TextView slide_description = (TextView) view.findViewById(R.id.slide_description);

        slide_image.setImageResource(sliderImages[position]);  //set the src file from the array we made. 
        slide_heading.setText(sliderHeadings[position]);                 // the position variable can be passed later through a loop
        slide_description.setText(slideDescription[position]);

        container.addView(view);                                                                //add the view to the container.

        return view;
    }

    @Override
    public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
        container.removeView((RelativeLayout)object);
    }
}

This class will set up the ViewPager with our slides. After declaring this class, we can call an object of the sliderAdapter class in our sliderActivity.java class and we will use a for loop to show the different images and the corresponding headings and descriptions we have saved inside this class.

7.Now back to the sliderActivity.java class.

import android.content.Intent;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.text.Html;
import android.view.View;
import android.widget.Button;
import android.widget.LinearLayout;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    private ViewPager slideViewPager;
    private LinearLayout dotsLayout;

    private TextView[] dots;      //this textview is for drawing the dots 

    private SliderAdapter Adapter;   // an object of the SliderAdapter class we made

    private Button finishButton;



    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        slideViewPager = (ViewPager) findViewById(R.id.slideViewPager);
        dotsLayout = (LinearLayout) findViewById(R.id.dotsLayout);

        finishButton = (Button) findViewById(R.id.finishButton);

        Adapter = new sliderAdapter(this);

        slideViewPager.setAdapter(Adapter);

        addDotsIndicator(0);

        slideViewPager.addOnPageChangeListener(pageChangeListener);

        finishButton.setOnClickListener(new View.OnClickListener(){
            @Override
            public void onClick(View view){

                Intent intent = new Intent(MainActivity.this,HomeActivity.class);
                startActivity(intent);
                finish();

            }
        });

    }

    public void addDotsIndicator(int position){

        dots = new TextView[3];
        dotsLayout.removeAllViews();

// now we can use a for loop to display the dots 

        for(int i =0;i<3;i++){
            dots[i] = new TextView(this);
            dots[i].setText(Html.fromHtml("&#8226;")); // the html character is used to display the dot
            dots[i].setTextSize(35);
            dots[i].setTextColor(getResources().getColor(R.color.TransparentWhite));
            dotsLayout.addView(dots[i]);

        }

// this conditional check sets the dot of the current position differently from the other dots

        if(dots.length > 0){  
            dots[position].setTextColor(getResources().getColor(R.color.White));
            dots[position].setTextSize(38);
        }


    }

// set up the onPageChangeListener for the ViewPager object
// we can use this and its functions to display the different slides as we move the slider

    ViewPager.OnPageChangeListener pageChangeListener = new ViewPager.OnPageChangeListener() {
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

        }

        @Override
        public void onPageSelected(int position) {
           addDotsIndicator(position);

           if(position == 2)
           {
               finishButton.setVisibility(View.VISIBLE);
           }
        }

        @Override
        public void onPageScrollStateChanged(int state) {

        }
    };

}

In this java file, what we have done is

• Initialize all the elements like the ViewPager and the LinearLayout and the Button we added in the layout.
• We added an onPageChangeListener for the ViewPager and set it to display the different slides as one changes the pages. Hence when someone scrolls, the different slides gets displayed.
• The visibility of the button is initially set to invisible and gets displayed only when the user first reaches the last slide.
• We also add an onClickListener for the button to go to a different activity. This can lead to the MainActivity of the app.

Finally we have to do one more thing. That is to check if the app is run for the first time and display the intro slides. If it isn't then there is no need to display it. The app opens up directly to the MainActivity. We do this by setting the launcher activity to the MainActivity and checking if the app is run for the first time. This state is permanently stored by using SharedPreferences and the snippet of code which launches our intro slider activity will not be run if the isFirstRun variable is false.

Boolean isFirstRun = getSharedPreferences("PREFERENCE",MODE_PRIVATE)
                     .getBoolean("isFirstRun",true);

        if(isFirstRun)
        {
            startActivity(new Intent(HomeActivity.this,slider_Activity.class)); 

        }

        getSharedPreferences("PREFERENCE",MODE_PRIVATE).edit()
                .putBoolean("isFirstRun",false).apply();

This piece of code in the MainActivity will open up the sliderActivity for only the first run of the app and saves the state.

Conclusion

So we finally got a neat little introduction for our android project. This is a useful technique as it does not involve adding any external libraries or extensions.

Image Source

All the provided images and the gif are of my own work and are screenshots taken by me.

References :