sjwall / materialtaptargetprompt

⛔️ DEPRECATED Material Design tap target for Android. https://sjwall.github.io/MaterialTapTargetPrompt/

DEPRECATED

Android is moving towards compose, for an alternative library in compose have a look at intro-showcase-view.

Bug fix pull requests will be accepted for this library for the immediate future but there will be no active development or new features and it will eventually be archived.

Thank you to everyone who has contributed to the library over the years!

Material Tap Target Prompt

A Tap Target implementation in Android based on Material Design Onboarding guidelines. For more information on tap targets check out the guidelines.

sjwall.github.io/MaterialTapTargetPrompt

Quick start · Examples · Sample app

The sample app is available to download on the Google Play Store:

Quick start

Gradle

Add the following to build.gradle using Maven Central:

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

Supports Android minSdkVersion 14

Version 2.15.0 works with Android Support Library

Also available from GitHub packages

Usage

Basic usage is shown below with more examples in the sample app and documentation:

new MaterialTapTargetPrompt.Builder(MainActivity.this)
        .setTarget(R.id.fab)
        .setPrimaryText("Send your first email")
        .setSecondaryText("Tap the envelope to start composing your first email")
        .setPromptStateChangeListener(new MaterialTapTargetPrompt.PromptStateChangeListener()
        {
            @Override
            public void onPromptStateChanged(MaterialTapTargetPrompt prompt, int state)
            {
                if (state == MaterialTapTargetPrompt.STATE_FOCAL_PRESSED)
                {
                    // User has pressed the prompt target
                }
            }
        })
        .show();

Note

If a target is not set or the target view could not be found or both the primary and secondary text are null then builder.show and builder.create will return null.

Other shapes

The default shape is a circle but any other shape can be rendered by extending the PromptBackground and PromptFocal classes. Custom shapes such as a rectangle can be set by calling setPromptBackground and/or setPromptFocal. Documentation and examples are available here.

License

Copyright (C) 2016-2021 Samuel Wall

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

materialtaptargetprompt's Issues

problem with long touch

Hi, thank you for your great library.
there is a problem with long touch. i have implemented a step by step procedure and inside "onHidePromptComplete" of a prompt I fire the next prompt. when I long touch a prompt, i see 2 prompts showing simultaneously and every thing unsettles. i have attached some lines of my code.
thanks in advance.
sample4.txt

Prompt positioned wrong

Prompt positioned wrong in conjunction with this library
(https://github.com/Clans/FloatingActionButton)

Prompt not displayed if only secondary text is set

It seems like setting primary text is required to display the prompt. If you only set the secondary text it does not show.

Builder option for setting icon color

It seems that if an icon is set manually with setIcon, then the default color for this icon is blue and I cannot figure out how to change the color for this image. Is it a missing option?

Getting NullPointer for showing prompt

Getting Nullpointer exception with 1.8.2 as well as 1.8.1.. Target is a menuitem in actionmode. I had to update the library as i updated my compilesdkversion to 25

compile 'com.android.support:appcompat-v7:25.0.0'
compile 'com.android.support:support-v4:25.0.0'
compile 'com.android.support:design:25.0.0'
compile 'uk.co.samuelwall:material-tap-target-prompt:1.8.2'

I have only added this in build.gradle, not imported it as module in my project.
Code is fine as it works perfectly with design:23.0.1 and uk.co.samuelwall:material-tap-target-prompt:1.1.4

Sending you the error message

java.lang.NullPointerException
at uk.co.samuelwall.materialtaptargetprompt.MaterialTapTargetPrompt.updateFocalCentrePosition(MaterialTapTargetPrompt.java:714)
at uk.co.samuelwall.materialtaptargetprompt.MaterialTapTargetPrompt$2.onGlobalLayout(MaterialTapTargetPrompt.java:335)
at android.view.ViewTreeObserver.dispatchOnGlobalLayout(ViewTreeObserver.java:859)
at android.view.ViewRootImpl.performTraversals(ViewRootImpl.java:2048)
at android.view.ViewRootImpl.doTraversal(ViewRootImpl.java:1234)
at android.view.ViewRootImpl$TraversalRunnable.run(ViewRootImpl.java:6301)
at android.view.Choreographer$CallbackRecord.run(Choreographer.java:813)
at android.view.Choreographer.doCallbacks(Choreographer.java:613)
at android.view.Choreographer.doFrame(Choreographer.java:583)
at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:799)
at android.os.Handler.handleCallback(Handler.java:733)
at android.os.Handler.dispatchMessage(Handler.java:95)
at android.os.Looper.loop(Looper.java:146)
at android.app.ActivityThread.main(ActivityThread.java:5511)
at java.lang.reflect.Method.invokeNative(Native Method)
at java.lang.reflect.Method.invoke(Method.java:515)
at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:1283)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1099)
at dalvik.system.NativeStart.main(Native Method)

On the tablet, text is outside the circle

Hello,

On the tablet, the text is displayed outside the circle when the object is in the center of the screen.

my code:

final MaterialTapTargetPrompt.Builder tapTargetPromptBuilder = new MaterialTapTargetPrompt.Builder(this)
                .setPrimaryText(R.string.ansicht_wechseln)
                .setSecondaryText(R.string.kalender_show_text2)
                .setAnimationInterpolator(new FastOutSlowInInterpolator())
                .setMaxTextWidth(R.dimen.tap_target_menu_max_width)
                .setIconDrawable(new IconicsDrawable(this, CommunityMaterial.Icon.cmd_view_module).actionBar().color(Color.WHITE))
                .setOnHidePromptListener(new MaterialTapTargetPrompt.OnHidePromptListener() {
                    @Override
                    public void onHidePrompt(MotionEvent event, boolean tappedTarget) {
                        event.setAction(MotionEvent.ACTION_CANCEL);
                    }

                    @Override
                    public void onHidePromptComplete() {
                        showTapTarget4();
                    }
                });
        tapTargetPromptBuilder.setTarget(bottomNavigation.getViewAtPosition(2));
        tapTargetPromptBuilder.show();

Can i reduce the background radius to half its size

I do not want the blue background to almost fill the activity. Can its size be minimized to lets say half??

issue with forced RTL support

Many thanks for great effort. I developed an Arabic news reader
https://play.google.com/store/apps/details?id=com.tabe3.news&hl=en

So I force RTL. when I use MaterialTapTargetPrompt to showcase toolbar item using:

tapTargetPromptBuilder.setTarget(tb.getChildAt(1));

there is a strange behavior happens. it highlights areas in left of toolbar.

I use this code to force RTL:

try {
    String languageToLoad = "ar"; // your language
    Locale locale = new Locale(languageToLoad);
    Locale.setDefault(locale);
    Configuration config = activity.getResources().getConfiguration();
    //config.locale = locale;
    config.setLocale(locale);
    activity.getResources().updateConfiguration(config, activity.getResources().getDisplayMetrics());
    activity.getWindow().getDecorView().setLayoutDirection(View.LAYOUT_DIRECTION_RTL);
} catch (Exception ex){
    Crashlytics.logException(ex);
    LogUtil.e(ex);
}

Delay

Hello. I havent used this library in my project yet , but i did try the demonstration app. This looks awesome. There is one small problem tho . There is a noticable delay before animation starts , is there any way to fix this ?

Text in prompt on wrong position when activity smaller then screen and not centered

When you have an activity like in your DialogActivity but it is not in the center of the screen (eg at the bottom) the prompt is shown ok but the text in it is positioned wrong.

In my example the targetView is on the top right of my activity but my activity is at bottom center of the window. The targetView is still in the bottom right part of the window.
Parameters tell met the text will be shown above/left of the target but that is not in my activity anymore.

I'm searching for a solution in order to help you out :)

different device size issue

Hi,
I have problem using this library with different screen sizes. on a 7" tablet, the texts falls outside the box from left or right, while there is no problem with a 5.7" device. How can i handle this issue. i have to mention that,this occurs rarely and only some text in some positions behave in this manner.
thanks in advance.

How to make target visible?

I've read somewhere here that the way to make the target visible is to .setFocalColour(Color.TRANSPARENT) but when I did that, the focal color turns black. Is there other way to do this? I don't want to set a drawable icon, I just want the target to be visible.

Disable target click listener

hi @sjwall
thanks for your great material help library .

i have simple question , if you do this function , can you share your implemantation for my issue :
how to disable target click listener , because i want to step by step prompt target .

i want to disable target (view) click listener .

thanks in advance

Target as a View inside a ListView row example

Hi,

I am trying to set the target of the MaterialTapTargetPrompt as a view of a row of a list view in an activity. Unfortunately, the focus is at the top left of the screen instead on on the view given as target.

Can this library be used with list views?

Thanks so much!

Little bug with FAB

Hi, thanks for your great work, I found a very absurd and little bug: the fab button must have the R.id.fab id or it won't work. If I try any other word instead of "fab" as id of the target fab, the prompt is opened but at the starting point of the screen (top-left), it seems not attached to any target, but no errors in logcat.

Grow outer circle / force side (instead of center) positioning?

This screenshot best describes my problem:
https://goo.gl/photos/qHuLLGe1hvqjvBrL6

When focal is pulsating, it's touching outer circle. And also it would look better if the outer circle was stuck right-side, instead of being centered.

Is there some smart way of forcing it to stick to side?

Many many thanks for a great library!

v1.6.1 causes crashes in Gingerbread and below when user touches prompt

Prompt causes crash when use press prompt in v1.6.1 when running on Gingerbread and below

Do not use an icon for target

Great job! Really like your implementation!

I would like to target some text area on the screen but do not use an icon there. Is there a way to target an area without using an icon? If I do not specify an icon I simply get a white space there. It should be transparent. I tried the following but did not seem to work:

tapTargetPromptBuilder.setIconDrawableColourFilter(activity.getResources().getColor(R.color.transparent));
and colors.xml:

<color name="transparent">#00000000</color>

I am trying out the library. Maybe I am missing something?

Thanx!

Bottom of the PromptView wouldn't ba appeared if I use an actionbar theme

Hi
when i turn my application's theme to something not NoActionBar , the bottom of prompt wouldn't be appeared 😞
Please help me ... 😢
it's an emergency 😅
thanks ❤️

Hide prompt programmaticaly

Hello again =)) and again , this library is awesome. Thank you =))

I was wondering if there is any way to close the prompt by java code?

Wrong target view Location When View Changed Upon Design Orientation Changes

When flipping the UI upon changing the application language from English to Arabic for example, the target view will move from the left to the right, but the material tap target prompt still sees the target view on the left and it starts from the left of the screen.

how to click step by step

hi
I want click multiple prompt step by step by user.
please help me

Unable set the dismiss actoin only on the focal view

Couldn't control the touch listener on the rest of the view, only on the focal

java.lang.NoClassDefFoundError: uk.co.samuelwall.materialtaptargetprompt.MaterialTapTargetPrompt$Builder

hi !
this issues in Android 4.0 to low , but not problem in android 5.0
please help me !!!

Remove somethingFromRes methods

These methods needlessly increase the libraries method count

Usage is not flexible enough for fragments / dialogfragments

I'm using your library in my app. I noticed it's strongly connected to an activity for usage.

I have a DialogFragment in my app (bottom sheet) which is displayed in a different window / decorview than the one from my activity. When I trigger the prompt it is thus shown behind the dialog.

By changing the constructor & builder so it accepts a context (instead of activity) and a decorview, usage is a lot more flexible.

Any chance this could be changed in your library?

Follow the Material Design Guidelines on positioning the prompt in the centre of the screen

Currently the prompt positioning is not correct if the target is in the centre of the screen

Doesn't support transparent or semi-transparent color

Hi there!
Amazing job making this library, but it doesn't support transparent or semi-transparent colors,
if we set focal color with transparency it removes transparency,
if we set non-transparent background color it sets transparency

please set the color exactly as we define in .setFocalColour( ) and .setBackgroundColour( ).

Thank you very much.

Prompt draws outside activity bounds

If the prompt parent activity is styled like a dialog with another activity the prompt is drawn outside the bounds of the parent activity.

Add functionality for setting (on/off) animation near target view + text gravity

It could be nice if you add setter to enable/disable animation above target view (ripple and so on) and ability to set text gravity. Those are only things not allowing me to use your library without copy/paste with modification.

more shapes other than circle.

Can you make more regular shape for focal beside circle, like rectangle, rounded rectangle, that would be awesome.

Impossible to chain MaterialTapTargetPrompt

Hey,

First of all awesome library! It's basically what I was looking for!!

On the other hand, I am trying to make multiple MaterialTapTargetPrompt showing up one after the other using MaterialTapTargetPrompt.show(); in onHidePromptComplete but it does nothing.

It's a known bug or am I doing it wrong?

White space on top

Thanks for your awesome library...
I use this in a device without the status bar (removed by the System), and when I call the function new MaterialTapTargetPrompt appears on the top a white space (I think is the margin of the status bar).
There's a possibility to remove this space?

Thanks

focalColour does not take transparency into account

The focalColour which is responsible for the circle drawn around the target does not seem to take into account transparency values for the color used. The pulsating/animating color associated with the focalColour does seem to have transparency but not the focalColour itself.

Syncing only crash

Syncing the library and running the app without even inserting any code cause my app to crash on startup.

E/AndroidRuntime: FATAL EXCEPTION: main Process: com.tea2code.e_gym, PID: 22205 java.lang.RuntimeException: Unable to start activity ComponentInfo{com.tea2code.e_gym/com.tea2code.e_gym.MainActivity}: android.view.InflateException: Binary XML file line #24: Binary XML file line #1: Error inflating class fragment at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2665) at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2726) at android.app.ActivityThread.-wrap12(ActivityThread.java) at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1477) at android.os.Handler.dispatchMessage(Handler.java:102) at android.os.Looper.loop(Looper.java:154) at android.app.ActivityThread.main(ActivityThread.java:6126) at java.lang.reflect.Method.invoke(Native Method) at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:886) at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:776) Caused by: android.view.InflateException: Binary XML file line #24: Binary XML file line #1: Error inflating class fragment Caused by: android.view.InflateException: Binary XML file line #1: Error inflating class fragment Caused by: java.lang.NullPointerException: Attempt to invoke virtual method 'void android.widget.TextView.setTypeface(android.graphics.Typeface)' on a null object reference at com.tea2code.e_gym.MainActivityFragment.onViewCreated(MainActivityFragment.java:31) at android.support.v4.app.FragmentManagerImpl.moveToState(FragmentManager.java:1264) at android.support.v4.app.FragmentManagerImpl.moveToState(FragmentManager.java:1467) at android.support.v4.app.FragmentManagerImpl.addFragment(FragmentManager.java:1681) at android.support.v4.app.FragmentManagerImpl.onCreateView(FragmentManager.java:3357) at android.support.v4.app.FragmentController.onCreateView(FragmentController.java:120) at android.support.v4.app.FragmentActivity.dispatchFragmentsOnCreateView(FragmentActivity.java:378) at android.support.v4.app.BaseFragmentActivityHoneycomb.onCreateView(BaseFragmentActivityHoneycomb.java:33) at android.support.v4.app.FragmentActivity.onCreateView(FragmentActivity.java:79) at android.view.LayoutInflater.createViewFromTag(LayoutInflater.java:777) at android.view.LayoutInflater.parseInclude(LayoutInflater.java:964) at android.view.LayoutInflater.rInflate(LayoutInflater.java:854) at android.view.LayoutInflater.rInflateChildren(LayoutInflater.java:821) at android.view.LayoutInflater.inflate(LayoutInflater.java:518) at android.view.LayoutInflater.inflate(LayoutInflater.java:426) at android.view.LayoutInflater.inflate(LayoutInflater.java:377) at android.support.v7.app.AppCompatDelegateImplV9.setContentView(AppCompatDelegateImplV9.java:288) at android.support.v7.app.AppCompatActivity.setContentView(AppCompatActivity.java:143) at com.tea2code.e_gym.MainActivity.onCreate(MainActivity.java:40) at android.app.Activity.performCreate(Activity.java:6679) at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1119) at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2618) at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2726) at android.app.ActivityThread.-wrap12(ActivityThread.java) at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1477) at android.os.Handler.dispatchMessage(Handler.java:102) at android.os.Looper.loop(Looper.java:154) at android.app.ActivityThread.main(ActivityThread.java:6126) at java.lang.reflect.Method.invoke(Native Method) at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:886) at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:776)

Unrelated crash. But it only happens when i sync the library.

Text Font

How can i set custom font file to the primary text and the secondary text,

Prompt on FAB Menu position miss match

I am using the Clans' FAB Button library for my application. https://github.com/Clans/FloatingActionButton.

mFabPrompt = new MaterialTapTargetPrompt.Builder(MainActivityFloat.this)
.setTarget(findViewById(R.id.multiple_actions))
The generated output is:

The FAB buttons are being displayed perfectly except the menu..
Please advice..

Nonfunctional with disabled animations

The library is nonfunctional when disabling animations in the developer settings (as needed for automated tests)

In that case Android applies the animations twice, with the start and the end value. But it does that before mGlobalLayoutListener is called to update mBaseBackgroundRadius, which results in an always zero mBackgroundRadius.

This results in two problems:

1. The Background is not drawn
2. The motionEvent is never considered hitting the target or the background, the motion event is not captured and the overlay is never dismissed. This is the part which makes UI Tests impossible.

Update target sdk to 25

Any plans to support API level 25

StatusBar Calculation Wrong

First of all thanks for this awesome library, I love it! 😄 🙇‍♂️

The latest version introduced a bug (probably by 91e9539).

This is how it looks with 1.4.0

An overlay button over a camera is to be focused. MaterialTap covers up that overlay button.

It is shown something like this:

(Emulator camera is being used here)

While ideally, it shouldn't cover the overlay icon at the top left corner, because that icon is the target:

Here's what I am doing in my app:
I'm showing the live camera preview with a couple of overlay buttons. Those buttons were added in a separate layout file, control.xml. This is how I added my overlay to the camera:
viewControl = LayoutInflater.from(getBaseContext()).inflate(R.layout.control, null);

And then targeted one of the icons like this:

profileIcon = (ImageView) viewControl.findViewById(R.id.profile_icon);
new MaterialTapTargetPrompt.Builder(CustomCamera.this)
            .setTarget(profileIcon)
            .setPrimaryText("Click Picture")
            .setSecondaryText("Tap here to click the picture of the problem")
            .setOnHidePromptListener(new MaterialTapTargetPrompt.OnHidePromptListener()
            {
                @Override
                public void onHidePrompt(MotionEvent event, boolean tappedTarget) {
                }
                @Override
                public void onHidePromptComplete()
                {
                }
            })
            .show();

I cloned the project and tried changing a couple of alpha values in the class MaterialTapTargetPrompt, but that served no help.

Focal point offset

Would be helpful to provide a way of providing a focalpoint to something other than the centre of the view

START/END/TOP/BOTTOM come to mind.

alternatively, specify an offset

Target focus shows below actionmode in 1.6 version

I was using 1.1.4 version which shows the target correctly over the actionmode, but now if i update the dependency to 1.6, the target shows below the actionmode.

Prompt positioned incorrectly when target view has rotation

If the target view has rotation then the prompt is being positioned incorrectly.
This can be replicated in the sample app by adding the following code into onCreate and then showing a prompt on the FAB.

ViewCompat.setRotation(fab, 50.0f);

Set card or listitem as target

Dear sjwall,

I have a cardView with a couple of cards shown, I would like to set a list item as a target. How can I do it?
I really appreciate your work. Thank you

More flexibility with positioning and sizing circles and text

It would be nice to have more control over sizing and positioning of the elements.

For example the ability to:

• offset the center position of the larger outer circle so it is not perfectly centered around the target
• set a specific size for the larger outer circle rather than relying on the textPadding value
• ability to position the text relative to the target in the x and y directions individually rather than both together as it is now via the focalToTextPadding
• ability to offset/separate the primary and secondary text in both the x and y directions

Use Target for ahbottomnavigation

Hi
I want use this target for bottomnavigation
please help that why use it.

Thanks

Load prompt style/theme from resources

Add loading the prompt colour, text etc. from a style resource

ClipToView assumes first child is a view group

I'm not using a ViewGroup as the first child of R.id.content (I've got a <merge> tag at the top for performance reasons and then the first child itself is a normal View). The app crashes at this line:

mPrompt.mClipToView = (ViewGroup) ((ViewGroup) mActivity.findViewById(android.R.id.content)).getChildAt(0);

NPE

Hi,

I am having a NPE exception in user's devices reported by Crashlytics. I am not sure what the cause is but this is the line where it happens: https://github.com/sjwall/MaterialTapTargetPrompt/blob/master/library/src/main/java/uk/co/samuelwall/materialtaptargetprompt/MaterialTapTargetPrompt.java#L1037

mPrimaryTextLayout.draw(canvas);

And here is the exception:

Fatal Exception: java.lang.NullPointerException: Attempt to invoke virtual method 'void android.text.Layout.draw(android.graphics.Canvas)' on a null object reference
at uk.co.samuelwall.materialtaptargetprompt.MaterialTapTargetPrompt$PromptView.onDraw(MaterialTapTargetPrompt.java:1037)
at android.view.View.draw(View.java:16435)
at android.view.View.updateDisplayListIfDirty(View.java:15388)
at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:3719)
at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:3699)
at android.view.View.updateDisplayListIfDirty(View.java:15339)
at android.view.ThreadedRenderer.updateViewTreeDisplayList(ThreadedRenderer.java:286)
at android.view.ThreadedRenderer.updateRootDisplayList(ThreadedRenderer.java:292)
at android.view.ThreadedRenderer.draw(ThreadedRenderer.java:327)
at android.view.ViewRootImpl.draw(ViewRootImpl.java:3020)
at android.view.ViewRootImpl.performDraw(ViewRootImpl.java:2824)
at android.view.ViewRootImpl.performTraversals(ViewRootImpl.java:2436)
at android.view.ViewRootImpl.doTraversal(ViewRootImpl.java:1321)
at android.view.ViewRootImpl$TraversalRunnable.run(ViewRootImpl.java:6708)
at android.view.Choreographer$CallbackRecord.run(Choreographer.java:894)
at android.view.Choreographer.doCallbacks(Choreographer.java:696)
at android.view.Choreographer.doFrame(Choreographer.java:631)
at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:880)
at android.os.Handler.handleCallback(Handler.java:815)
at android.os.Handler.dispatchMessage(Handler.java:104)
at android.os.Looper.loop(Looper.java:207)
at android.app.ActivityThread.main(ActivityThread.java:5728)
at java.lang.reflect.Method.invoke(Method.java)
at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:789)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:679)

Any ideas? It is quite distressing as we are using the library to help people with onboarding and we are ending up with users getting crashes.

Thanks a lot for your help!