sherzodbek-muhammadiev / tooltipdialog

Easy to use library to add tooltips to your app

ToolTipDialog

An easy-to-use dialog to add tooltips to your app with teh ability to point to specific screen locations and also highlight views on-screen.

Great for on-boarding, calling out new features, or simply calling out bits of UI.

Features

• Show a default dialog pop up banner
• Align the dialog to a certain vertical location on screen
• Point to a specific element on-screen
• Highlight specific UI elements by letting them "peek through" a background shade

Gradle Setup

In your app's build.gradle add

repositories {
    jcenter()
}

dependencies {
    implementation 'com.kcrimi.tooltipdialog:tooltipdialog:1.1.0'
}

Note: the jcenter() repository is not necessary if it already exists in allRepositories in the project's build.gradle.

Usage

The below are shown as called by an Activity

Basic

ToolTipDialog(this, this)
  .title("This is a basic dialog") // Define the title for the tooltip
  .content("This dialog will show at the top of the screen by default") // Body content 
  .subtitle("Subtitle for tooltip") // Subtitle on the tooltip
  .setToolTipListener(toolTipListener) // Define the listener for clicks on the tooltip
  .show() // Build and show the tooltip

Vertically positioned

Great for underlining an element or section of you UI.

ToolTipDialog(this, this)
  ...
  .setYPosition(720) // Align the top of the dialog with this position on screen
  .show()

Point to specific location

You can also point to a specific point on screen. Great for calling out buttons and improving discoverability of buried features.

ToolTipDialog(this, this)
  ...
  .pointTo(250, 720) // Point to the specific X,Y position on-screen
  .show()

View the sample app for how to point to specific views.

Peek-through views

Draw a typical shade behind your dialog but let specific views peek through.

ToolTipDialog(this, this)
  ...
  .addPeekThroughView(myCoolButton)
  .show()

You can also add as many of these as you'd like

ToolTipDialog(this, this)
  ...
  .addPeekThroughView(myCoolButton)
  .addPeekThroughView(myOtherButton)
  .addPeekThroughView(myAwesomeImage)
  .show()

Custom styles

You can define a custom theme inheriting from ToolTipDialog, defining any of the following attributes for the styles you wish to override.

<style name="ToolTipDialogTheme.Custom">
        <item name="toolTipDialog.titleTextStyle">@style/custom_title_text</item>
        <item name="toolTipDialog.subtitleTextStyle">@style/custom_subtitle_text</item>
        <item name="toolTipDialog.bodyTextStyle">@style/custom_body_text</item>
        <item name="toolTipDialog.backgroundColor">@color/custom_background_color</item>
</style>

Now you simply pass in this custom theme when creating a new ToolTipDialog

ToolTipDialog(this, this, R.style.TooltipDialogTheme_Custom)

FAQ

My view keeps saying it's at x:0, y:0, making the dialog to point to the wrong spot

You'll need to make sure that you let the system have time to inflate the layout or else the views won't have their proper sizes/dimenstions.

If you need to show the tooltip on an early lifecycle event like onCreate() or onViewCreated(), yout can usually solve this issue by adding an additional delay or, more reliably, adding a ViewTreeObserver.

contentView.viewTreeObserver.addOnGlobalLayoutListener(object: ViewTreeObserver.OnGlobalLayoutListener,
            ViewTreeObserver.OnGlobalFocusChangeListener {
            override fun onGlobalLayout() {
                contentView.viewTreeObserver.removeOnGlobalFocusChangeListener(this)
                // Show Dialog here
            }
            
            ...
        })

---

This project is licensed under the terms of the Apache 2.0 license.