Android simple example of Highlights/ShowCase using ShowcaseView 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.myapp 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.mreram:showcaseview:1.1'
  ...
}

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.myapp;

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

<?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:id="@+id/my_Constraint_Layout"
tools:context=".MainActivity">

<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
android:textSize="20dp"
android:textStyle="bold"
android:layout_marginTop="24dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.498"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.25" />

<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="160dp"
android:layout_marginLeft="160dp"
android:layout_marginTop="24dp"
android:text="Button1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/textView1" />

<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="160dp"
android:layout_marginLeft="160dp"
android:layout_marginTop="24dp"
android:text="Button2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/button1" />

</androidx.constraintlayout.widget.ConstraintLayout>

Step 5: MainActivity.java

prefManager.isFirstTimeLanch()-it will check is app first time launching or not.if yes then call ShowIntro(…)with title,content,view of FirstElement.

ShowIntro(…)-you can set each element and its highlighting content.

GuideView.Builder -it will handle and display all your highlights.

package com.khushi.myapp;

import androidx.appcompat.app.AppCompatActivity;

import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;
import smartdevelop.ir.eram.showcaseviewlib.GuideView;
import smartdevelop.ir.eram.showcaseviewlib.config.DismissType;
import smartdevelop.ir.eram.showcaseviewlib.listener.GuideListener;

public class MainActivity extends AppCompatActivity {

    private GuideView mGuideView;
    private GuideView.Builder builder;
    private PrefManager prefManager;
    private TextView textView1;
    private Button btn1,btn2;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        textView1=findViewById(R.id.textView1);
        btn1=findViewById(R.id.button1);
        btn2=findViewById(R.id.button2);
        prefManager=new PrefManager(this);
        //call this method with title,text,view of first element(where to start highlights)
        if (prefManager.isFirstTimeLaunch()) {
            ShowIntro(" Textview Title", " textview text goes here",textView1);
        }


    }
    private void ShowIntro(String title, String text, View currentView) {
        builder = new GuideView.Builder(this);
        builder.setTitle(title);
        builder.setContentText(text);
        builder.setGravity(smartdevelop.ir.eram.showcaseviewlib.config.Gravity.center);
        builder.setDismissType(DismissType.anywhere);
        // builder.setContentSpan((Spannable) Html.fromHtml("<font color='#3700B3'>testing spannable</p>"));
        builder.setTargetView(currentView).build();
        builder.setGuideListener(new GuideListener() {
            @Override
            public void onDismiss(View view) {
                switch (view.getId()) {
                    case R.id.textView1:
                        builder.setTitle("button 1 Title");
                        builder.setContentText("button 1 text............");
                        builder.setTargetView(btn1).build();

                        break;
                        case R.id.button1:
                            builder.setTitle("button 2 Title");
                            builder.setContentText("button 2 text............");
                            builder.setTargetView(btn2).build();

                        break;
                    case R.id.button2:
                       prefManager.setFirstTimeLaunch(false);

                        return;

                }

                mGuideView = builder.build();
                mGuideView.show();
            }

        });
        mGuideView = builder.build();
        mGuideView.show();
    }

}

260 total views, 4 views today

(Visited 13 times, 1 visits today)