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

Overview

๐Ÿ”ฆ ShowCaseView ๐Ÿ”ฆ

Release APK API Android Arsenal awesome-android

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

    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

    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 ?

    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

    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

    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?

    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

    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

    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.

    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

    Dark Theme Bug

    noticed bug with dark theme

    image

    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

    image

    UPDATE:

    i have troubles with "Pull Request"s, sorry T_T

    opened by ImTema 1
  • ACTION BAR MENU/ NAVIGATION DRAWER

    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

    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

    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

    image

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

    opened by MoustafaElsaghier 2
  • Error in Api 18

    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

    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)
Owner
Mohammad Reza Eram
Senior Android Developer
Mohammad Reza Eram
Animation View to Highlight particular Views ๐ŸŽฏ for Android

TargetView Animation View to Highlight particular Views ?? for Android, it can be Used with Views that you see important (Like CountDownTimer), And al

Anas Altair 53 Aug 7, 2021
A tiny window overlay to log app internal on top of your android app

DebugOverlay A logcat alike overlay to display log messages in your app as independent overlay. Typically in android you would log some app internals

Hannes Dorfmann 150 Nov 29, 2022
A realtime blurring overlay for Android (like iOS UIVisualEffectView)

RealtimeBlurView It's just a realtime blurring overlay like iOS UIVisualEffectView. Just put the view in the layout xml, no Java code is required. //

Tu Yimin 3k Jan 9, 2023
Highligth specific points of interest of your app

ShowTipsView ShowTipsView let you highligth specific points of interest of your app. Usage ShowTipsView showtips = new ShowTipsBuilder(this) .setTarg

Frederico Silva 602 Dec 4, 2022
A simple and Elegant Showcase view for Android

Tuto Showcase A simple and Elegant Showcase view for Android TutoShowcase.from(this) .setContentView(R.layout.tuto_sample) .on(R.id.about) //

Florent CHAMPIGNY 509 Nov 25, 2022
Sample app to try compose and showcase principles from Composing (UI) beyond the UI

Composing clocks sample app This is a sample app to show how to build an app that follows the practices described in the series of articles Compose (U

Jordi Saumell 84 Dec 15, 2022
Aether - anti-aliased UI engine designed for Minecraft, and general LWJGL

README WIP SOME THINGS MIGHT BE INACCURATE Aether UI Aether is anti-aliased UI engine designed for Minecraft, and general LWJGL. It is compatible with

Prism Client 35 Nov 12, 2022
An Android Holo themed colorpicker designed by Marie Schweiz

Android Holo ColorPicker Marie Schweiz http://marie-schweiz.de/ made a beautifull new design for the Holo ColorPicker which added a lot of new functio

Lars Werkman 1.4k Dec 21, 2022
A great material designed colorpicker by Marie Schweiz

Lobsterpicker Designed by Marie Schweiz, Developed by Lars Werkman Lobsterpicker is a library for android material design made to support apps and dev

Lars Werkman 534 Sep 15, 2022
Simple and lightweight UI library for user new experience, combining floating bottom navigation and bottom sheet behaviour. Simple and beautiful.

Simple and lightweight UI library for user new experience, combining floating bottom navigation and bottom sheet behaviour. Simple and beautiful.

Rizki Maulana 118 Dec 14, 2022
FogView is a android library that can show fog on any layout and the fog removes when user rubs it.

Fog View Android Library Min SDK 8 (Android 2.2โ€“2.2.3 Froyo) Screnshots How to use If you want use this library, you can download project and import i

Chetan Kaushik 631 Dec 31, 2022
Bubbles for Android is an Android library to provide chat heads capabilities on your apps. With a fast way to integrate with your development.

Bubbles for Android Bubbles for Android is an Android library to provide chat heads capabilities on your apps. With a fast way to integrate with your

Txus Ballesteros 1.5k Jan 2, 2023
Regret is an Android library for apps that wants to implement an undo/redo feature

Regret I've been developing on an editor for my Android App recently, using Jetpack Compose, but Google doesn't implement a built-in undo / redo for d

Moriafly 5 Jun 29, 2022
A View on which you can freely draw, customizing paint width, alpha and color, and take a screenshot of the content. Useful for note apps, signatures or free hand writing.

FreeDrawView A View that let you draw freely on it. You can customize paint width, alpha and color. Can be useful for notes app, signatures or hands-f

Riccardo Moro 643 Nov 28, 2022
Android view that allows the user to create drawings. Customize settings like color, width or tools. Undo or redo actions. Zoom into DrawView and add a background.

DrawView Android view that allows the user to create drawings. Draw anything you like in your Android device from simple view. Customize draw settings

Oscar Gilberto Medina Cruz 839 Dec 28, 2022
Reach plc. Apps Team Exercise (Junior)

Reach plc. Apps Team Exercise (Junior) Description One of our magazines is looki

Paul Vickers 0 Dec 20, 2021
A simple launcher which displays all the apps on a RecyclerView trying to KISS

A simple launcher which displays all the apps on a RecyclerView trying to KISS

Alex Allafi 1 Jun 17, 2022
NumberPickerView - Custom Android View to provide a user friendly way of picking numbers. ๐Ÿงช

?? Custom view for Android which provides a modern design and gestures for picking numbers in a user friendly way.

Mirkamal 6 Feb 16, 2022
This a Ride User app in which in integrate almost every features of a Ride Share app.

My-Ride-App This a Ride app(User) in which I integrate almost every features of a Ride Share app. Here I use kotlin programing language, Google map SD

Khairul Islam 5 Apr 27, 2022