CODEWITHSUNDEEP
androidandroid-activity
Broadwell
Broadwell

Reputation: 1384

Android create a help screen like google does

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

Upvotes: 0

Views: 2286

Answers (3)

Rohit Lalwani
Rohit Lalwani

Reputation: 579

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 :)

Upvotes: 0

Psypher
Psypher

Reputation: 10839

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();

Upvotes: 2

Anirudh Sharma
Anirudh Sharma

Reputation: 7974

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.

Upvotes: 1

Related Questions