Android simple example of Highlights/ShowCase using MaterialShowcaseView Library

By | August 4, 2020

In this tutorial, We will be showing highlights On UI Elements. These highlights allow new users to easily understand the functionality of the app’s user interface.
So when users first interact with the app, these intro highlight will be shown one by one progressively explaining each UI element.

Step 1: Creating Project

Let’s start with creating new project in android studio with package name com.khushi.materialshowcaseview and class name MainActivity.java and its layout name is activity_main.xml.

Step 2: Adding Library dependencies

Open your build.gradle(Project:MyApp) and in allprojects{…} add this-

allprojects {
    repositories {
       ...
        maven { url 'https://jitpack.io' }
    }
}

Open your build.gradle(Module:app) and in dependencies{…} add this-

dependencies {
   ...
   implementation 'com.github.deano2390:MaterialShowcaseView:1.3.4@aar'
  ...
}

Step 3: Creating PrefManager.java class for storing our app specific data. and in this case we want to show app intro only if user is interacting first time with app.

here we use String variable IS_FIRST_TIME_LAUNCH for checking if user interacting first time or not. And if user is interacting first time then we will show showcase/highlights or if it is not first time then we will skip showing it.

PrefManager.java

package com.khushi.materialshowcaseview;

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

public class PrefManager {
SharedPreferences pref;
SharedPreferences.Editor editor;
Context _context;
// shared pref mode
int PRIVATE_MODE = 0;

// Shared preferences file name
private static final String PREF_NAME = "tutorialface-welcome";
private static final String IS_FIRST_TIME_LAUNCH = "true";


public PrefManager(Context context) {
this._context = context;
pref = _context.getSharedPreferences(PREF_NAME, PRIVATE_MODE);
editor = pref.edit();
}

public void setFirstTimeLaunch(boolean isFirstTime) {
editor.putBoolean(IS_FIRST_TIME_LAUNCH, isFirstTime);
editor.commit();
}

public boolean isFirstTimeLaunch() {
return pref.getBoolean(IS_FIRST_TIME_LAUNCH, true);
}

}

Step 4: activity_main.xml

<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"

tools:context="com.khushi.materialshowcaseview.MainActivity">


<Button
android:id="@+id/btn_one"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_marginStart="160dp"
android:layout_marginLeft="160dp"
android:layout_marginTop="172dp"
android:text="Button 1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />

<Button
android:id="@+id/btn_three"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="@+id/btn_one"
android:layout_alignParentRight="true"
android:layout_centerHorizontal="true"
android:layout_marginStart="160dp"
android:layout_marginLeft="160dp"
android:layout_marginTop="50dp"
android:text="Button 3"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/btn_two" />

<Button
android:id="@+id/btn_two"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginStart="160dp"
android:layout_marginLeft="160dp"
android:layout_marginTop="50dp"
android:text="Button 2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/btn_one" />

</androidx.constraintlayout.widget.ConstraintLayout>

Step 5: MainActivity.java

prefManager.isFirstTimeLanch()-it will check is app first time launching or not.if yes then call presentShowcaseSequence().

presentShowcaseSequence()– this method will handle and display your highlights using MaterialShowcaseSequence.

package com.khushi.materialshowcaseview;

import android.os.Bundle;
import android.view.View;
import android.widget.Button;

import androidx.appcompat.app.AppCompatActivity;

import uk.co.deanwild.materialshowcaseview.MaterialShowcaseSequence;
import uk.co.deanwild.materialshowcaseview.MaterialShowcaseView;
import uk.co.deanwild.materialshowcaseview.ShowcaseConfig;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

private static final String SHOWCASE_ID = "sequence example";
private Button mButtonOne;
private Button mButtonTwo;
private Button mButtonThree;
private PrefManager prefManager;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
prefManager = new PrefManager(this);

mButtonOne = findViewById(R.id.btn_one);
mButtonOne.setOnClickListener(this);

mButtonTwo = findViewById(R.id.btn_two);
mButtonTwo.setOnClickListener(this);

mButtonThree = findViewById(R.id.btn_three);
mButtonThree.setOnClickListener(this);
if (prefManager.isFirstTimeLaunch()) {
presentShowcaseSequence(); // one second delay
}
}

@Override
public void onClick(View v) {
if (v.getId() == R.id.btn_one || v.getId() == R.id.btn_two) {

presentShowcaseSequence();
} else if (v.getId() == R.id.btn_three) {
presentShowcaseSequence();
prefManager.setFirstTimeLaunch(false);
}
}


private void presentShowcaseSequence() {

ShowcaseConfig config = new ShowcaseConfig();
config.setDelay(500); // half second between each showcase view

MaterialShowcaseSequence sequence = new MaterialShowcaseSequence(this, SHOWCASE_ID);

sequence.setOnItemShownListener(new MaterialShowcaseSequence.OnSequenceItemShownListener() {
@Override
public void onShow(MaterialShowcaseView itemView, int position) {
//Toast.makeText(itemView.getContext(), "Item #" + position, Toast.LENGTH_SHORT).show();
}
});

sequence.setConfig(config);

sequence.addSequenceItem(mButtonOne, "This is button one", "GOT IT");

sequence.addSequenceItem(
new MaterialShowcaseView.Builder(this)
// .setSkipText("SKIP")
.setTarget(mButtonTwo)
.setDismissText("GOT IT")
.setContentText("This is button two")
.build()
);

sequence.addSequenceItem(
new MaterialShowcaseView.Builder(this)
.setTarget(mButtonThree)
.setDismissText("GOT IT")
.setContentText("This is button three")
// .withRectangleShape()
.build()
);

sequence.start();

}
}

537 total views, 6 views today

(Visited 70 times, 1 visits today)