The ShowcaseView library is designed to highlight and showcase specific parts of apps to the user with an attractive and flat overlay.

Last update: Dec 26, 2022

Overview

🔦 ShowCaseView 🔦

How to use ❓

Sample usage in your activity

new GuideView.Builder(this)
    .setTitle("Guide Title Text")
    .setContentText("Guide Description Text\n .....Guide Description Text\n .....Guide Description Text .....")
    .setGravity(Gravity.auto) //optional
    .setDismissType(DismissType.anywhere) //optional - default DismissType.targetView
    .setTargetView(view)
    .setContentTextSize(12)//optional
    .setTitleTextSize(14)//optional
    .build()
    .show();

Installation

maven:

<repositories>
   <repository>
     <id>jitpack.ioid>
     <url>https://jitpack.iourl>
   repository>
repositories>

Step 2. Add the dependency

<dependency>
    <groupId>com.github.mreramgroupId>
    <artifactId>showcaseviewartifactId>
    <version>1.4.1version>
dependency>

gradle:

Add it in your root build.gradle at the end of repositories:

allprojects {
	repositories {
		...
		maven { url 'https://jitpack.io' }
	}
}

Step 2. Add the dependency

implementation 'com.github.mreram:showcaseview:1.4.1'

Change type face

new GuideView.Builder(this)
    .setTitle("Guide Title Text")
    .setContentText("Guide Description Text\n .....Guide Description Text\n .....Guide Description Text .....")
    .setTargetView(view)
    .setContentTypeFace(Typeface)//optional
    .setTitleTypeFace(Typeface)//optional
    .setDismissType(DismissType.outSide) //optional - default dismissible by TargetView
    .build()
    .show();

Change title and Content text size

new GuideView.Builder(this)
    .setTitle("Guide Title Text")
    .setContentText("Guide Description Text\n .....Guide Description Text\n .....Guide Description Text .....")
    .setTargetView(view)
    .setContentTextSize(12)//optional
    .setTitleTextSize(14)//optional
    .setDismissType(DismissType.outSide) //optional - default dismissible by TargetView
    .build()
    .show();

Change Gravity

new GuideView.Builder(this)
    .setTitle("Guide Title Text")
    .setContentText("Guide Description Text\n .....Guide Description Text\n .....Guide Description Text .....")
    .setGravity(Gravity.CENTER)//optional
    .setTargetView(view) 
    .setDismissType(DismissType.outSide) //optional - default dismissible by TargetView
    .build()
    .show();

use Spannable for Content

testing spannable

")) .setDismissType(DismissType.outSide) //optional - default dismissible by TargetView .build() .show();">

new GuideView.Builder(this)
    .setTitle("Guide Title Text")
    .setTargetView(view)
    .setContentSpan((Spannable) Html.fromHtml("testing spannable
"))
    .setDismissType(DismissType.outSide) //optional - default dismissible by TargetView
    .build()
    .show();

Set Listener

new GuideView.Builder(MainActivity.this)
    .setTitle("Guide Title Text")
    .setContentText("Guide Description Text\n .....Guide Description Text\n .....Guide Description Text .....")
    .setGravity(Gravity.CENTER)
    .setTargetView(view1)
    .setDismissType(DismissType.outSide) //optional - default dismissible by TargetView
    .setGuideListener(new GuideListener() {
        @Override
        public void onDismiss(View view) {
           //TODO ...
        }
     })
    .build()
    .show();

DismissType Attribute

Type	Description
outside	Dismissing with click on outside of MessageView
anywhere	Dismissing with click on anywhere
targetView	Dismissing with click on targetView(targetView is assigned with setTargetView method)
outsideTargetAndMessage	Dismissing with click on outside of MessageView and target View

PointerType Attribute

Type	Description
circle	Show circle pointer towards targetView
arrow	Show arrow pointer towards targetView
none	Show no pointer or line towards targetView

Contribution 💥

Pull requests are welcome! 👏

You can improve/fix some part of it .

Add Tests:

Assuming that the code in question already has automated (unit) tests, do add tests for the code you submit. This isn't a hard rule. There are various cases where you may need to add code without test coverage (e.g. when adding a Object), but if it can be tested, it should be tested.

License

   Copyright 2018 Mohammad Reza Eram

   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.

Comments

Not able to dismiss nor there is any way for continuity

I am using mGuideView = builder.build(); mGuideView.dismiss();

but unable to dismiss this it is not working . And what if i want to show other icon after how can i do that to maintain continues behaviour . I am using this in fragment

opened by suyashm002 7
Updated version of ShowCaseView
The following features were added to accommodate one of my projects.

Set background color of showcase.

Set background color of message box

Set title text color

Set content text color

Make showcase a circle or rectangle

Added a previous and next arrow with a onclick listener. - Use the setArrowsClicked method.

Set Arrows to Show and Hide the arrows.

Set corner radius of rectangle.

Function to remove all tap dismiss events.

This enable custom events and arrows.

Add setClickable - false - no touch registered. Else touch registered and onDismiss can be called as default.

All defaults are set to existing defaults. Except the isClickable which is default false. The targetView click default is great but if you need the library to work in an app where you maybe utilize custom swipe events or click events it can be a problem.

TODO - change arrow position constructor/method to be added. Time constraint at the moment.
opened by JJSWART 6
Setting Listener in Kotlin ?
Please excuse my question if it sounds too silly but im a beginner and im writing my app with Kotlin, i've implemented the ShowCaseView successfully and its working great when working with one ShowCaseView, im trying to make the app show several ShowCaseViews one after another but im having a hard time doing so in Kotlin, Kotlin dosn't allow overriding for local functions i've also tried to implement the GuideListener Interface in a class and then override onDismiss() fun from there but that didn't help.

below is the code i got working for a single ShowCase

fun showTut(title:String,text:String,viewID:View){ GuideView.Builder(this) .setTitle(title) .setContentText(text) .setTargetView(viewID) .setContentTextSize(12)//optional .setTitleTextSize(14)//optional .setDismissType(DismissType.anywhere) .build() .show() }
opened by tahaak67 4
Added new feature enhancements and fixed orientation issues

Fixed open issues #9 : Fixed orientation issue and location in window #23 : Added Skip for sequence of ShowCaseView #22 : Added feature to change color of Pointer #36 : Added feature to change color of Message text, Message Box, and line connecting Message Box and Pointer

opened by Adw41t 3
Custom Guide Shape
Extends existing functionality to allow for a custom guide shape.

This is done through the use of a new interface called Targetable.

How it works

If the target view given to the GuideView constructor implements Targetable.

boundingRect will be used to set targetRect property inside the GuideView class.

guidePath will be used when onDraw is called in GuideView instead of always using drawRoundRect the canvas will call drawPath and will draw the guide path.

PS: I have added onto the sample application with a demonstration of how this works as well.

This implementation could be used to resolve issue #29
opened by NicholasMata 2

Every time Open app it is showing the showcaseview why?

hi I am trying to add your library in my application working well but i have seeing that it show the same dialog everytime i am opening the application pls help me here , I want it to open only the first time my code is

private void ShowIntro() {

    new GuideView.Builder(MainActivity.this)
            .setTitle("Warning")
            .setContentText("Supported Language for Extract Text from pdf are  Catalan\n" +
                    "Danish\n" +
                    "Dutch\n" +
                    "Turkish")
            .setTargetView(findViewById( R.id.fab))
            
            .setDismissType( DismissType.anywhere) //optional - default dismissible by TargetView
            .setGuideListener(new GuideListener() {
                @Override
                public void onDismiss(View view) {
                    Toast.makeText( getApplicationContext(),"Click",Toast.LENGTH_LONG ).show();
                }
            })
            .build()
            .show();
}

opened by sunil-singh-chaudhary 2

java.lang.NullPointerException: Attempt to invoke virtual method 'void android.view.View.getLocationOnScreen(int[])' on a null object reference

Hi, I am using firebase test lab , and in almost tests I have this issue, in real and virtual devices:

java.lang.NullPointerException: Attempt to invoke virtual method 'void android.view.View.getLocationOnScreen(int[])' on a null object reference FATAL EXCEPTION: main Process: ir.mytoon.app, PID: 7178 java.lang.NullPointerException: Attempt to invoke virtual method 'void android.view.View.getLocationOnScreen(int[])' on a null object reference at smartdevelop.ir.eram.showcaseviewlib.b.<init>(GuideView.java:99) at smartdevelop.ir.eram.showcaseviewlib.b.<init>(GuideView.java:36) at smartdevelop.ir.eram.showcaseviewlib.b$a.a(GuideView.java:587) at ir.mytoon.app.MyTest.MVP.Main.MainActivity.d(MainActivity.java:192) at ir.mytoon.app.MyTest.MVP.Main.MainActivity.c(MainActivity.java:174) at ir.mytoon.app.MyTest.MVP.Main.MainActivity.b(MainActivity.java:167) at ir.mytoon.app.MyTest.MVP.Main.MainActivity.a(MainActivity.java:382) at ir.mytoon.app.MyTest.MVP.Main.MainActivity.lambda$rPCInGqblCtQbczEtPHk2uci39Y(MainActivity.java) at ir.mytoon.app.MyTest.MVP.Main.-$$Lambda$MainActivity$rPCInGqblCtQbczEtPHk2uci39Y.run(lambda) at android.os.Handler.handleCallback(Handler.java:751) at android.os.Handler.dispatchMessage(Handler.java:95) at android.os.Looper.loop(Looper.java:154) at android.app.ActivityThread.main(ActivityThread.java:6119) 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)

opened by Hosseinyzr 2
new dismissType - outsideTargetAndMessage added

Solves #57

outsideTargetAndMessage dismissType can be used for editTexts where we might want the guideView to remain while the user clicks on the editText and is typing. If the user clicks outside the target and message, then the guideView is dismissed which is natural.

opened by gargVader 1
Could not find com.github.mreram:showcaseview:1.2.0.

Was working fine before upgrading to Android Studio to 4.2.0.

Below are the details shown in the error:

Execution failed for task ':app:checkDebugAarMetadata'.

Could not resolve all files for configuration ':app:debugRuntimeClasspath'. Could not find com.github.mreram:showcaseview:1.2.0. Searched in the following locations: - https://dl.google.com/dl/android/maven2/com/github/mreram/showcaseview/1.2.0/showcaseview-1.2.0.pom - https://jcenter.bintray.com/com/github/mreram/showcaseview/1.2.0/showcaseview-1.2.0.pom - https://repo.maven.apache.org/maven2/com/github/mreram/showcaseview/1.2.0/showcaseview-1.2.0.pom - https://oss.jfrog.org/libs-snapshot/com/github/mreram/showcaseview/1.2.0/showcaseview-1.2.0.pom Required by: project :app

opened by sreyans01 1
Dark Theme Bug
noticed bug with dark theme

the simpliest workaround is to set transparent background for GuideMessageView.java for TextViews

mTitleTextView.setTextColor(Color.BLACK); mTitleTextView.setBackgroundColor(Color.TRANSPARENT); ... mContentTextView.setGravity(Gravity.CENTER); mContentTextView.setBackgroundColor(Color.TRANSPARENT);

and result of above code is

UPDATE:

i have troubles with "Pull Request"s, sorry T_T
opened by ImTema 1
ACTION BAR MENU/ NAVIGATION DRAWER

Hi, It does not work for Action bar menu items or for navigation view. Is that feature supported? If yes, can you please tell me how to do that?

Thanks, Sahil

opened by sahil239 1
create parameter for making the shape filled or not

I've created a simple fork for adding a new features or allowing developers to control in the shape ( arrow - circle ) is solid or not developer can use the following method isShapeSolid(true) to control if the shape is solid or not

also some of idea auto import and reformate to code sample and library

opened by MoustafaElsaghier 6
remove line and it's space

using the latest version of lib and can't remove the space between the arrow and the rectangle

my showcase model needs to be like that and have the next button and for the last one to be done

can you tell me if I can use your excellent library to do that or not?

opened by MoustafaElsaghier 2
Error in Api 18

Hi.I have a problem . When i click on view sooner than Pointer show , i get an error on Api 18. Failed to inflate ColorStateList, leaving it to the framework java.lang.UnsupportedOperationException: Can't convert to color: type=0x2

opened by sobosha 1
Added new feature enhancements and fixed orientation issues

Fixed open issues #9 Resolved orientation issue and location in window #23 Resolved : Added Skip for sequence of ShowCaseView #22 Resolved : Added feature to change color of Pointer #36 Resolved ; Added feature to change color of Message text, Message Box, and line connecting Message Box and Pointer

opened by Adw41t 0

Releases(1.4.1)

1.4.1(Aug 16, 2022)
Bugfix finding position of target view with Navigation component

Source code(tar.gz)
Source code(zip)
1.4.0(Aug 31, 2021)

Added new dismissType (outsideTargetAndMessage), Solves #57 Thanks to @gargVader
Source code(tar.gz)
Source code(zip)
1.3.0(Jul 22, 2021)

The ability to change the pointer(indicator) of GuideView. Added by @Adw41t in #53 pull request.
Source code(tar.gz)
Source code(zip)
1.2.0(Oct 6, 2020)

Thanks to @NicholasMata #41 .
Source code(tar.gz)
Source code(zip)
1.1(Nov 28, 2018)

Implemented animations and Ability to change sizes / refactor and created method for handling target view location
Source code(tar.gz)
Source code(zip)
1.0.5(Feb 15, 2018)

added dismissType #4 (thanks to @suyashm002)
Source code(tar.gz)
Source code(zip)
1.0.4(Jan 24, 2018)

change gravity center feature - Align Center with Target set optional Title bugfix in landscape mode decrease IndicatorHeight decrease Transition Time added GuideListener included dismiss listener
Source code(tar.gz)
Source code(zip)
1.0.3(Jan 22, 2018)

Cleanup code
Source code(tar.gz)
Source code(zip)
1.0.2(Jan 22, 2018)

added Transition Fade In / Fade Out
Source code(tar.gz)
Source code(zip)
1.0.1(Jan 21, 2018)

bugfix and add TypeFace for title and content text
Source code(tar.gz)
Source code(zip)
1.0.0(Jan 21, 2018)

Source code(tar.gz)
Source code(zip)