Welcome back to the "Phones gallery" series which we will create a full app from scratch. In the last post we did a splash screen with animations to both : the app logo and the app title and subtitle.
In this part we will create a on boarding screen. The youtube video is too long so i decided to devise it into two part.This is part 1 of on boarding screen.
Colors
Before we start we need a color to set it as background attribute so i choose the light purple color. Add this color to your colors.xml and lets get started :
<color name="purple3">#EFEEF8</color>
The on boarding strings
We need those strings to add them to the on boarding pages (titles,descriptions,buttons strings...),add them to your strings.xml :
<!-- Strings for On Boarding Screen -->
<string name="first_title">Find a product</string>
<string name="second_title">Your order is coming</string>
<string name="third_title">Congratulations! you did it</string>
<string name="first_description">Browse, search and add what you need to your cart easily and safely with our store. </string>
<string name="second_description">Be ready your order will come to you as soon as possible with the best delivery time and price.</string>
<string name="third_description">Your order is here! Enjoy it.</string>
<string name="skip">Skip</string>
<string name="next">Next</string>
<string name="let_get_started">Lets Get Started</string>
Designing the main layout of the on boarding activity :
Here my activity_on_boarding.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="@color/purple3"
tools:context=".onBoarding">
<Button
android:id="@+id/skipBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/skip"
android:background="#00000000"
android:textColor="@color/purple1"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:drawableEnd="@drawable/skip"/>
<androidx.viewpager.widget.ViewPager
android:id="@+id/slider"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintTop_toBottomOf="@id/skipBtn"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toTopOf="@id/linearLayout"/>
<LinearLayout
android:id="@+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
app:layout_constraintBottom_toBottomOf="parent"
android:orientation="vertical"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent">
<Button
android:id="@+id/letsGetStartedBtn"
android:layout_width="match_parent"
android:layout_height="55dp"
android:backgroundTint="@color/orange1"
android:text="@string/let_get_started"
android:textAllCaps="false"
android:visibility="invisible"
android:clickable="false"
android:fontFamily="@font/ubuntu"
android:textSize="16sp"/>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center_vertical"
android:layout_gravity="center_vertical">
<LinearLayout
android:id="@+id/dotsLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
<Button
android:id="@+id/nextBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:background="#00000000"
android:drawableEnd="@drawable/next"
android:text="@string/next"
android:textColor="@color/purple1"
android:fontFamily="@font/ubuntu"
android:textSize="16sp"
android:textAllCaps="false"/>
</androidx.constraintlayout.widget.ConstraintLayout>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Designing the on boarding pages layout :
We need to create the layout of the on boarding wich contains three elements (add whatever you want). Here my layout_slider.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"
xmlns:app="http://schemas.android.com/apk/res-auto">
<ImageView
android:id="@+id/sliderImg"
android:layout_width="match_parent"
android:layout_height="400dp"
android:layout_marginHorizontal="10dp"
android:layout_marginTop="32dp"
android:src="@drawable/b1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:id="@+id/sliderTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginHorizontal="10dp"
android:layout_marginTop="10dp"
android:fontFamily="@font/titillium"
android:text="@string/first_title"
android:textColor="@color/purple2"
android:textSize="30sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/sliderImg" />
<TextView
android:id="@+id/sliderSubtitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginHorizontal="15dp"
android:layout_marginTop="10dp"
android:text="@string/first_description"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/sliderTitle"
android:gravity="center"/>
</androidx.constraintlayout.widget.ConstraintLayout>
Create the adapter
In order to make the ViewPager works fine we need to create an adapter, so here my onBoardingAdapter.java file :
package m.phonesgallery.phonesgallery.helpers;
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.phonesgallery.phonesgallery.R;
public class onBoardingAdapter extends PagerAdapter {
Context context;
LayoutInflater layoutInflater;
public onBoardingAdapter(Context context) {
this.context = context;
}
int titles[] = {
R.string.first_title,
R.string.second_title,
R.string.third_title
};
int descriptions[] = {
R.string.first_description,
R.string.second_description,
R.string.third_description
};
int images[] = {
R.drawable.b1,
R.drawable.b2,
R.drawable.b3
};
@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.layout_slider,container,false);
ImageView image = v.findViewById(R.id.sliderImg);
TextView title = v.findViewById(R.id.sliderTitle);
TextView subtitle = v.findViewById(R.id.sliderSubtitle);
image.setImageResource(images[position]);
title.setText(titles[position]);
subtitle.setText(descriptions[position]);
container.addView(v);
return v;
}
@Override
public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
container.removeView((ConstraintLayout)object);
}
}
Youtube video
Check the onBoarding 1/2 video for more understanding :