Phones gallery [part 03] | Android studio create on boarding screen 2/2

In the part 1/2 we have designed the layouts and create the ViewPager adapter, so in part 2/2 we will edit the onBoarding.java file (which is the activity java file) and create a save function to use it not only in on boarding activity but in other activities.

We will also edit the splash activity java file. So how it will works ?

Easy : when we click the skip or the get started button we will set a value to our save state function, so in the splash screen we will check this value and make the right decision (the on boarding screen or the login screen which btw we will create it in the next part)

So lets get started :

The save function

As i talked before this will make our application take the right decision.

Here my saveState.java :

package m.phonesgallery.phonesgallery.helpers;

import android.content.Context;
import android.content.SharedPreferences;

public class saveState {

    Context context;
    String saveName;
    SharedPreferences sharedPreferences;

    public saveState(Context context, String saveName) {
        this.context = context;
        this.saveName = saveName;

        sharedPreferences = context.getSharedPreferences(saveName,Context.MODE_PRIVATE);

    }

    public void setState(int key){
        SharedPreferences.Editor editor = sharedPreferences.edit();
        editor.putInt("key",key);
        editor.apply();
    }

    public int getState(){
        return sharedPreferences.getInt("key",0);
    }

}

onBoarding.java

I will not talk too much about the java file because everything is clear i think, so here my onBoarding.java file :

package m.phonesgallery.phonesgallery;

import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager.widget.ViewPager;

import android.content.Intent;
import android.os.Bundle;
import android.text.Html;
import android.view.View;
import android.view.Window;
import android.view.WindowManager;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.Button;
import android.widget.LinearLayout;
import android.widget.TextView;

import m.phonesgallery.phonesgallery.helpers.onBoardingAdapter;
import m.phonesgallery.phonesgallery.helpers.saveState;

public class onBoarding extends AppCompatActivity {

    //XML
    ViewPager viewPager;
    LinearLayout dotsLayout;
    Button letsGetStarted,next,skip;

    //Animations
    Animation btnAnimation;

    //ViewPager adapter
    onBoardingAdapter adapter;

    //others
    TextView[] dots;
    int currentPosition;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,WindowManager.LayoutParams.FLAG_FULLSCREEN);
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_on_boarding);

        //XML
        viewPager = findViewById(R.id.slider);
        dotsLayout = findViewById(R.id.dotsLayout);
        letsGetStarted = findViewById(R.id.letsGetStartedBtn);
        next = findViewById(R.id.nextBtn);
        skip = findViewById(R.id.skipBtn);

        //Animations
        btnAnimation = AnimationUtils.loadAnimation(this,R.anim.btn_anim);

        //viewPager adapter
        adapter = new onBoardingAdapter(this);
        viewPager.setAdapter(adapter);

        //
        dotsFunction(0);
        viewPager.addOnPageChangeListener(onChangeListner);

        next.setOnClickListener(this::nextClick);
        skip.setOnClickListener(this::skipClick);
        letsGetStarted.setOnClickListener(this::skipClick);



    }

    private void skipClick(View view) {
        //we need a save state function
        saveState saveState = new saveState(onBoarding.this,"onBoarding");  //this "onBoarding we will need it later"
        saveState.setState(1);
        Intent i = new Intent(onBoarding.this,Login.class);
        startActivity(i);
        finish();
    }

    private void nextClick(View view) {
        viewPager.setCurrentItem(currentPosition+1);
    }

    private void dotsFunction(int pos){

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

        for (int i = 0; i < dots.length ; i++){

            dots[i] = new TextView(this);
            dots[i].setText(Html.fromHtml("•"));
            dots[i].setTextColor(getColor(R.color.orange2));   //this is the unselection color
            dots[i].setTextSize(30);

            dotsLayout.addView(dots[i]);

        }

        if (dots.length > 0){
            dots[pos].setTextColor(getColor(R.color.purple2));  //this is the selection color
        }

    }

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

        }

        @Override
        public void onPageSelected(int position) {
            dotsFunction(position);
            currentPosition = position;

            if (currentPosition == 0){
                letsGetStarted.setVisibility(View.INVISIBLE);
                letsGetStarted.setClickable(false);
                next.setVisibility(View.VISIBLE);
                next.setClickable(true);
                skip.setVisibility(View.VISIBLE);
                skip.setClickable(true);
            } else if (currentPosition == 1) {
                letsGetStarted.setVisibility(View.INVISIBLE);
                letsGetStarted.setClickable(false);
                next.setVisibility(View.VISIBLE);
                next.setClickable(true);
                skip.setVisibility(View.VISIBLE);
                skip.setClickable(true);
            }else if (currentPosition == 2){
                letsGetStarted.startAnimation(btnAnimation);
                letsGetStarted.setVisibility(View.VISIBLE);
                letsGetStarted.setClickable(true);
                next.setVisibility(View.INVISIBLE);
                next.setClickable(false);
                skip.setVisibility(View.INVISIBLE);
                skip.setClickable(false);
            }
        }

        @Override
        public void onPageScrollStateChanged(int state) {

        }
    };

}

Edit the splash screen

Just return to splash.java file and edit the function named "toTheNextScreen" like this :

private void toTheNextScreen(){
    title.setAnimation(textsAnim);
    subtitle.setAnimation(textsAnim);
    logo.setAnimation(logoAnim);
    new Handler().postDelayed(new Runnable() {
        @Override
        public void run() {
            onBoardingCheckPoint();
        }
    },3000);
}

private void onBoardingCheckPoint() {
    Intent i;
    //we need the save state function here
    saveState saveState = new saveState(splash.this,"onBoarding");
    if (saveState.getState() == 0){
        i = new Intent(splash.this,onBoarding.class);
    }else{
        i = new Intent(splash.this,Login.class);
    }
    startActivity(i);
    finish();
}

the number "3000" means the time before the splash screen disappear "3000 ms = 3 s" you can edit it as you want

Make the on boarding screen run in only portrait mode

Make sure to do that or designe new landscape layouts to your application.

You can do that by adding this line to your AndroidManifest.xml (under you onboarding activity) :

android:screenOrientation="portrait"

Youtube video

For more understanding watch the 2/2 video of the on boarding screen using android studio