Android create a help screen like google does

Question

I want to include a google style help screen in my app. I was thinking about the design google uses in its apps like calendar, where the screen fades blue and shows you parts of the activity in white where you can press and shows what it does. Also there is a "Got it" button below. How can this be done?

Image: http://developer.android.com/design/media/help_cling.png

Answer 1

You can use ShowcaseView library to implement this functionality.

https://github.com/amlcurran/ShowcaseView

To add it in Android Studio just add below in build.gradle

compile 'com.github.amlcurran.showcaseview:library:5.0.0'

After adding use the below code

new ShowcaseView.Builder(this)
    .setTarget(new ActionViewTarget(this, ActionViewTarget.Type.HOME))
    .setContentTitle("ShowcaseView")
    .setContentText("This is highlighting the Home button")
    .hideOnTouchOutside()
    .build();

Answer 2

try this.. https://github.com/Espiandev/ShowcaseView

use like-

new ShowcaseView.Builder(this)
    .setTarget(new ActionViewTarget(this, ActionViewTarget.Type.HOME))
    .setContentTitle("ShowcaseView")
    .setContentText("This is highlighting the Home button")
    .hideOnTouchOutside()
    .build();

Also there is another library_ https://github.com/stephanenicolas/RoboDemo

Try these out.

Answer 3

You can use this library from git hub

implementation 'com.github.amlcurran.showcaseview:library:5.4.3'

https://github.com/amlcurran/ShowcaseView

use this code to show help text :

    ViewTarget target = new ViewTarget(R.id.view, this);

    ShowcaseView sv = new ShowcaseView.Builder(this)
            .setTarget(target)
            .setContentTitle("Title")
            .setContentText("This is highlighting the message")
            .hideOnTouchOutside()
            .setStyle(R.style.CustomShowcaseTheme1)
            .setShowcaseEventListener(this)
            .build();

put this code in your styles:

<style name="CustomShowcaseTheme1" parent="ShowcaseView">
    <item name="sv_backgroundColor">#e5111316</item>
    <item name="sv_showcaseColor">@color/colorPrimary</item>
    <item name="sv_buttonText">Next</item>
    <item name="sv_titleTextAppearance">@style/CustomTitle</item>
    <item name="sv_detailTextAppearance">@style/CustomText</item>
</style>

<style name="CustomTitle" parent="TextAppearance.ShowcaseView.Title.Light">
    <item name="android:textColor">@color/white</item>
    <item name="android:textSize">24dp</item>
</style>

<style name="CustomText" parent="TextAppearance.ShowcaseView.Detail.Light">
    <item name="android:textColor">@color/white</item>
    <item name="android:textSize">16dp</item>
</style>

For showing more than 1 help :

public class className extends AppCompatActivity implements OnShowcaseEventListener{
}

Happy Coding :)