Hire the author: Moses N

Introduction

In this article we are going to learn how to create an awesome android help feature using material tap target prompt dependency, this is the final phase of How to generate real-time reports using Firebase and How to create an android two-step authentication signup system using Firebase. We are simply going to add a help functionality to take the user to go through the app features on the first launch.

Get the complete project from GitHub

Motivation

Help makes it easier or possible to do something or use something with ease. How about having an introduction to first-time users to your app on the first launch or when they may need it? This will make everyone comfortable while using the app.

Goal

My goal in this project is to make the readers successfully develop an awesome Android help feature using material tap target prompt dependency.

Glossary

  • Help – makes it easier or possible for (someone) to do something by offering one’s services or resources.
  • Fragment – is an independent Android component that can be used by an activity. A fragment encapsulates functionality so that it is easier to reuse within activities and layouts.
  • Material is an adaptable system of guidelines, components, and tools that support the best practices of user interface design.

Project requirements

  1. Android Phone – you will require your android phone to act as an emulator for running the project. Alternatively, you can download Memu. Also, you can install the emulator from your android studio.
  2. Android studio – this the application development environment.
  3. Git – This is kinda optional but I still recommend having git installed. This will prove useful if you ever want to deploy your code or push to a remote repository. You can download and install git through Git.
  4. Internet Connectivity – we will require the internet for accessing the Firebase Database.

In short, that’s our project requirement. Let’s begin coding!

Steps for designing an awesome Android help feature

Step 1: Adding the project dependencies

We will be using the material tap target prompt dependency. Firstly, go to the app-level build.gradle file and add the following dependency: The dependency supports Android minSdkVersion 14


dependencies {
    implementation 'uk.co.samuelwall:material-tap-target-prompt:3.0.0'
}

Step 2: Creating the help fragment.

Secondly, we will create the home fragment and add a button “Open visual start guide”.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:padding="10dp"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="@dimen/fab_margin"
android:layout_marginEnd="@dimen/fab_margin"
android:text="@string/blue_circle"
android:textColor="@android:color/black"
android:textSize="17sp" />
<Button
android:id="@+id/button_open_help"
android:layout_width="match_parent"
android:layout_height="44dp"
android:layout_marginStart="@dimen/fab_margin"
android:layout_marginTop="8dp"
android:layout_marginEnd="@dimen/fab_margin"
android:layout_marginBottom="24dp"
android:background="@drawable/button"
android:text="@string/open_visual_start_guide"
android:textAllCaps="false"
android:textColor="@android:color/white"
android:textSize="17sp" />
</LinearLayout>
view raw helpfragment.Xml hosted with ❤ by GitHub

Step 3:Creating the tittle and subtitle.

How to create an awesome Android help feature

Since we want to add our favorite title and subtitle. We will create a method to set the primary title and the secondary title.

public static MaterialTapTargetPrompt.Builder showPrompt (Activity activity, int id, String title, String subtitle)
{
MaterialTapTargetPrompt.Builder mttp = new MaterialTapTargetPrompt.Builder(activity);
mttp.setTarget(id)
.setPrimaryText(title)
.setSecondaryText(subtitle)
.setBackButtonDismissEnabled(true)
.show();
return mttp;
}
view raw title.java hosted with ❤ by GitHub

We will then create a method that will call the method created above to set the actual title we want on a page.

public void showIntroPaypal(){
if(!help.getIntroPaypal()) {
MaterialTapTargetPrompt.Builder mttp = Help.showPrompt(PaymentActivity.this, R.id.btn_Paypal, "Payment", "Tap here to open payment Activity");
mttp.setPromptStateChangeListener((prompt, state) -> {
if (state == MaterialTapTargetPrompt.STATE_DISMISSED
|| state == MaterialTapTargetPrompt.STATE_FOCAL_PRESSED) {
help.setIntroPaypal(true);
startActivity(new Intent(PaymentActivity.this, HomeActivity.class));
}
});
view raw setactualtitle.java hosted with ❤ by GitHub

Step 4: Showing the help on first launch.

Lastly, we do not want to show these prompts all the time. It is supposed to be available only the first time the user launches the app or when the user clicks on the “Open visual start guide” button. We will use the sharedpreferences and then create a method firstrun() and set it to true.

public class Help
{
SharedPreferences preferences;
SharedPreferences.Editor editor;
public Help(Context context)
{
preferences = context.getSharedPreferences(HELP ,Context.MODE_PRIVATE );
editor = preferences.edit();
}
public void setFirstRun(){
if (!getFirstRun()){
editor.putBoolean(FIRST_RUN, true);
editor.putBoolean(DONATE, false);
editor.putBoolean(MPESA, false);
editor.putBoolean(PAYPAL, false);
editor.apply();
}
}
view raw firstrun hosted with ❤ by GitHub
.

Finally, our complete and final Help.java will be like this.

package com.example.charitycare.data;
import android.app.Activity;
import android.content.Context;
import android.content.SharedPreferences;
import uk.co.samuelwall.materialtaptargetprompt.MaterialTapTargetPrompt;
import static com.example.charitycare.data.Constants.DONATE;
import static com.example.charitycare.data.Constants.FIRST_RUN;
import static com.example.charitycare.data.Constants.HELP;
import static com.example.charitycare.data.Constants.MPESA;
import static com.example.charitycare.data.Constants.PAYPAL;
public class Help
{
SharedPreferences preferences;
SharedPreferences.Editor editor;
public Help(Context context)
{
preferences = context.getSharedPreferences(HELP ,Context.MODE_PRIVATE );
editor = preferences.edit();
}
public static MaterialTapTargetPrompt.Builder showPrompt (Activity activity, int id, String title, String subtitle)
{
MaterialTapTargetPrompt.Builder mttp = new MaterialTapTargetPrompt.Builder(activity);
mttp.setTarget(id)
.setPrimaryText(title)
.setSecondaryText(subtitle)
.setBackButtonDismissEnabled(true)
.show();
return mttp;
}
public void setFirstRun(){
if (!getFirstRun()){
editor.putBoolean(FIRST_RUN, true);
editor.putBoolean(DONATE, false);
editor.putBoolean(MPESA, false);
editor.putBoolean(PAYPAL, false);
editor.apply();
}
}
public boolean getFirstRun(){
return preferences.getBoolean(FIRST_RUN,false);
}
public void setIntroDonate(boolean state){
editor.putBoolean(DONATE, state);
editor.apply();
}
public void setIntroMpesa(boolean state){
editor.putBoolean(MPESA, state);
editor.apply();
}
public void setIntroPaypal(boolean state){
editor.putBoolean(PAYPAL, state);
editor.apply();
}
public boolean getIntroDonate (){
return preferences.getBoolean(DONATE, true);
}
public boolean getIntroMpesa (){
return preferences.getBoolean(MPESA, true);
}
public boolean getIntroPaypal(){
return preferences.getBoolean(PAYPAL, true);
}
}
view raw Help.java hosted with ❤ by GitHub

Future Direction

The default shape is a circle but any other shape can be rendered by extending the PromptBackground and PromptFocal classes. We can also use different colour and font styles on the title and subtitles.

Reflective Analysis

Figuring out how to utilize the material tap target prompt in android was a great learning experience. One of the best experiences a user can have with an application is having a general and quick overview of all the functionalities he or she can perform.

Learning Strategies and Tools

There are a lot of learning tools online, I would recommend the following:

I used the learning tools above to create an awesome android help feature. Anytime I faced some bugs, I would use stack overflow to check for solutions.

It took me a total of 5 hours to finish the project and the blog.
Get the complete project from GitHub

Image Citation: Link

Happy coding!

Hire the author: Moses N