Welcome back in this tutorial we will see how to create on boarding walkthrough screen with dots and shared preference to remember if it's the first time running the app or not.
Let's start:
colors.xml
we need some colors for the backgrounds for that i have used 8 collors :
<!--On boarding colors-->
<color name="purple_light">#C297F8</color>
<color name="purple_dark">#975DE5</color>
<color name="green_light">#76CCBB</color>
<color name="green_dark">#1EBDAC</color>
<color name="pink_light">#F890BC</color>
<color name="pink_dark">#EB5595</color>
<color name="blue_light">#90C2F8</color>
<color name="blue_dark">#5591EB</color>
string.xml
We need some titles and subtitles for our onBoarding slides (\n means new line)
<string name="title1">Welcome !</string>
<string name="title2">Find products</string>
<string name="title3">Your order is coming</string>
<string name="title4">Pay and enjoy</string>
<string name="subtitle1">Welcome to the family.\nThis app will help you finding the best phones with the best prices.</string>
<string name="subtitle2">Find the products you want to buy and add them to your cart easily.\nDone ? order them.</string>
<string name="subtitle3">Your products will come to you wherever you are as soon as possible.</string>
<string name="subtitle4">Congratulations, you have done it. \nEnjoy !</string>
drawables
You need some vectors so i used 4 vectors with 4 different colors .As you can see every vector has a background with the same colors.
So here the 4 backgrounds files:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<gradient
android:angle="315"
android:startColor="@color/purple_dark"
android:centerColor="@color/purple_dark"
android:endColor="@color/purple_light"
android:type="linear"/>
</shape>
</item>
</selector>
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<gradient
android:angle="315"
android:startColor="@color/green_dark"
android:centerColor="@color/green_dark"
android:endColor="@color/green_light"
android:type="linear"/>
</shape>
</item>
</selector>
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<gradient
android:angle="315"
android:startColor="@color/pink_dark"
android:centerColor="@color/pink_dark"
android:endColor="@color/pink_light"
android:type="linear"/>
</shape>
</item>
</selector>
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<gradient
android:angle="315"
android:startColor="@color/blue_dark"
android:centerColor="@color/blue_dark"
android:endColor="@color/blue_light"
android:type="linear"/>
</shape>
</item>
</selector>
And finaly you need next icon you can get it from the vector assets.
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/bg1"
tools:context=".MainActivity">
<androidx.cardview.widget.CardView
android:id="@+id/nextCard"
android:layout_width="56dp"
android:layout_height="56dp"
app:cardCornerRadius="28dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginEnd="30dp"
android:layout_marginBottom="60dp"
android:backgroundTint="@color/teal_700"
android:clickable="true"
android:focusable="true"
android:foreground="?attr/selectableItemBackground">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="17dp"
android:src="@drawable/ic_next"/>
</androidx.cardview.widget.CardView>
<androidx.viewpager.widget.ViewPager
android:id="@+id/slider"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<LinearLayout
android:id="@+id/dotsLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal"
app:layout_constraintTop_toTopOf="@id/nextCard"
app:layout_constraintBottom_toBottomOf="@id/nextCard"
app:layout_constraintStart_toStartOf="parent"
android:layout_marginStart="30dp"/>
</androidx.constraintlayout.widget.ConstraintLayout>
slide.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/sliderLayout"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="@drawable/bg4">
<ImageView
android:id="@+id/slideImg"
android:layout_width="match_parent"
android:layout_height="300dp"
android:src="@drawable/on_boarding_vector_1"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="100dp"/>
<TextView
android:id="@+id/sliderTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="@id/slideImg"
android:layout_marginTop="20dp"
android:text="@string/title1"
android:textColor="@color/white"
android:textStyle="bold"
android:textSize="20sp"/>
<TextView
android:id="@+id/sliderSubtitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="@id/sliderTitle"
android:layout_marginTop="20dp"
android:text="@string/subtitle1"
android:textColor="@color/white"
android:gravity="center"
android:layout_marginHorizontal="20dp"
android:textSize="15sp"/>
</androidx.constraintlayout.widget.ConstraintLayout>
OnBoardingAdapter.java
package m.ify.onboarding.Adapters;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;
import androidx.annotation.NonNull;
import androidx.constraintlayout.widget.ConstraintLayout;
import androidx.viewpager.widget.PagerAdapter;
import m.ify.onboarding.R;
public class OnBoardingAdapter extends PagerAdapter {
Context context;
LayoutInflater layoutInflater;
public OnBoardingAdapter(Context context) {
this.context = context;
}
int titles[] = {
R.string.title1,
R.string.title2,
R.string.title3,
R.string.title4
};
int subtitles[] = {
R.string.subtitle1,
R.string.subtitle2,
R.string.subtitle3,
R.string.subtitle4
};
int images[] = {
R.drawable.on_boarding_vector_1,
R.drawable.on_boarding_vector_2,
R.drawable.on_boarding_vector_3,
R.drawable.on_boarding_vector_4
};
int bg[] = {
R.drawable.bg1,
R.drawable.bg2,
R.drawable.bg3,
R.drawable.bg4
};
@Override
public int getCount() {
return titles.length;
}
@Override
public boolean isViewFromObject(@NonNull View view, @NonNull Object object) {
return view == (ConstraintLayout) object;
}
@NonNull
@Override
public Object instantiateItem(@NonNull ViewGroup container, int position) {
layoutInflater = (LayoutInflater) context.getSystemService(context.LAYOUT_INFLATER_SERVICE);
View v = layoutInflater.inflate(R.layout.slide,container,false);
ImageView image = v.findViewById(R.id.slideImg);
TextView title = v.findViewById(R.id.sliderTitle);
TextView subtitle = v.findViewById(R.id.sliderSubtitle);
ConstraintLayout layout = v.findViewById(R.id.sliderLayout);
image.setImageResource(images[position]);
title.setText(titles[position]);
subtitle.setText(subtitles[position]);
layout.setBackgroundResource(bg[position]);
container.addView(v);
return v;
}
@Override
public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
container.removeView((ConstraintLayout) object);
}
}
SaveState.java
package m.ify.onboarding.Helpers;
import android.content.Context;
import android.content.SharedPreferences;
import java.net.ContentHandler;
public class SaveState {
Context context;
String saveName;
SharedPreferences sp;
public SaveState(Context context, String saveName) {
this.context = context;
this.saveName = saveName;
sp = context.getSharedPreferences(saveName,context.MODE_PRIVATE);
}
public void setState(int key){
SharedPreferences.Editor editor = sp.edit();
editor.putInt("Key",key);
editor.apply();
}
public int getState(){
return sp.getInt("Key",0);
}
}
MainActivity.java
package m.ify.onboarding;
import androidx.appcompat.app.AppCompatActivity;
import androidx.cardview.widget.CardView;
import androidx.viewpager.widget.ViewPager;
import android.content.Intent;
import android.os.Bundle;
import android.text.Html;
import android.view.View;
import android.view.WindowManager;
import android.widget.LinearLayout;
import android.widget.TextView;
import m.ify.onboarding.Adapters.OnBoardingAdapter;
import m.ify.onboarding.Helpers.SaveState;
public class MainActivity extends AppCompatActivity {
CardView nextCard;
LinearLayout dotsLayout;
ViewPager viewPager;
TextView[] dots;
int currentPosition;
SaveState saveState ;
@Override
protected void onCreate(Bundle savedInstanceState) {
getWindow().setFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS,WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
nextCard = findViewById(R.id.nextCard);
dotsLayout = findViewById(R.id.dotsLayout);
viewPager = findViewById(R.id.slider);
dotsFunction(0);
saveState = new SaveState(MainActivity.this,"OB");
if (saveState.getState() == 1){
Intent i = new Intent(MainActivity.this,MainActivity2.class);
startActivity(i);
finish();
}
OnBoardingAdapter adapter = new OnBoardingAdapter(this);
viewPager.setAdapter(adapter);
nextCard.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
viewPager.setCurrentItem(currentPosition+1,true);
}
});
viewPager.setOnPageChangeListener(onPageChangeListener);
}
private void dotsFunction(int pos){
dots = new TextView[4];
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.white)); //this is the non selection color
dots[i].setTextSize(30);
dotsLayout.addView(dots[i]);
}
if (dots.length > 0){
dots[pos].setTextColor(getColor(R.color.teal_700)); //this is the selection color
dots[pos].setTextSize(40); //this is the selection size
}
}
ViewPager.OnPageChangeListener onPageChangeListener = 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 <= 2){
nextCard.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
viewPager.setCurrentItem(currentPosition+1);
}
});
}else{
nextCard.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
saveState.setState(1);
Intent i = new Intent(MainActivity.this,MainActivity2.class);
startActivity(i);
finish();
}
});
}
}
@Override
public void onPageScrollStateChanged(int state) {
}
};
}
Watch on youtube
Part I :
Part II :
please add all files because i want download all files
ReplyDelete