A highlight lib and also it can be a simple popup window lib for android

Overview

HighlightPro

中文

HighlightPro is a highlight library for android and also it can be a simple popup window library for android.

Features:

  • One or more highlighted views can be displayed at once

  • Custom exact position of the tip view by horizontal constraint and vertical constraint

  • Custom tip view display animation what you want

  • Custom highlight shape and shape's paint

  • Chained code, simple to use

  • Support simple popup window

Sample screenshots:

guide_pro

guide_pro_popup_window

highlight_recycler_view

Basic usage:

Gradle

Add maven repositories of jitpack in your project's build.gradle file:

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

Add dependence in your app's build.gradle file:

dependencies {		
	implementation 'com.github.hyy920109:GuidePro:1.1.0'
}

Code Sample

You can start with one of Activity or Fragment or ViewGroup like the below code:

/**
 * DecorView of [activity] treat as the rootView
 */
fun with(activity: Activity): HighlightPro {
    return HighlightPro(activity)
}

/**
 * DecorView of [fragment]'s [activity] treat as the rootView
 */
fun with(fragment: Fragment): HighlightPro {
    return HighlightPro(fragment)
}


/**
 * the [container] treat as rootView and the container should be a FrameLayout or a viewGroup extends FrameLayout
 * to ensure the UI can display normally
 */
fun with(container: FrameLayout): HighlightPro {
    return HighlightPro(container)
}

A simple complete code:

HighlightPro.with(this)
            .setHighlightParameter {
                HighlightParameter.Builder()
                    .setHighlightViewId(R.id.btn_step_first)
                    .setTipsViewId(R.layout.guide_step_first)
                    .setHighlightShape(RectShape(4f.dp, 4f.dp, 6f))
                    .setHighlightHorizontalPadding(8f.dp)
                    .setConstraints(Constraints.StartToEndOfHighlight + Constraints.TopToTopOfHighlight)
                    .setMarginOffset(MarginOffset(start = 8.dp))
                    .build()
            }
            .setBackgroundColor("#80000000".toColorInt())
            .setOnShowCallback { index ->
                //do something
            }
            .setOnDismissCallback {
                //do something
            }
            .show()

Sometimes you want to show more highlight views at once:

HighlightPro.with(this)
            .setHighlightParameters(
                HighlightParameter.Builder()
                    .setHighlightViewId(R.id.btn_step_first)
                    .setTipsViewId(R.layout.guide_step_first)
                    .setHighlightShape(RectShape(4f.dp, 4f.dp, 6f))
                    .setHighlightHorizontalPadding(8f.dp)
                    .setConstraints(Constraints.StartToEndOfHighlight + Constraints.TopToTopOfHighlight)
                    .setMarginOffset(MarginOffset(start = 8.dp))
                    .build()
                        +
                HighlightParameter.Builder()
                    .setHighlightViewId(R.id.btn_step_second)
                    .setTipsViewId(R.layout.guide_step_second)
                    .setHighlightShape(RectShape(4f.dp, 4f.dp, 6f))
                    .setHighlightHorizontalPadding(8f.dp)
                    .setConstraints(Constraints.StartToEndOfHighlight + Constraints.TopToTopOfHighlight)
                    .setMarginOffset(MarginOffset(start = 8.dp))
                    .build()
            )
            .setBackgroundColor("#80000000".toColorInt())
            .setOnShowCallback { index ->
                //do something
            }
            .setOnDismissCallback {
                //do something
            }
            .show()

Sometimes we want display some steps highlight guide:

HighlightPro.with(this)
    .setHighlightParameter {
        HighlightParameter.Builder()
            .setHighlightViewId(R.id.btn_step_first)
            .setTipsViewId(R.layout.guide_step_first)
            .setHighlightShape(RectShape(4f.dp, 4f.dp, 6f))
            .setHighlightHorizontalPadding(8f.dp)
            .setConstraints(Constraints.StartToEndOfHighlight + Constraints.TopToTopOfHighlight)
            .setMarginOffset(MarginOffset(start = 8.dp))
            .build()
    }
    .setHighlightParameter {
        HighlightParameter.Builder()
            .setHighlightViewId(R.id.btn_step_second)
            .setTipsViewId(R.layout.guide_step_second)
            .setHighlightShape(CircleShape())
            .setHighlightHorizontalPadding(20f.dp)
            .setHighlightVerticalPadding(20f.dp)
            .setConstraints(Constraints.TopToBottomOfHighlight + Constraints.EndToEndOfHighlight)
            .setMarginOffset(MarginOffset(top = 8.dp))
            .build()
    }
    .setHighlightParameter {
        HighlightParameter.Builder()
            .setHighlightViewId(R.id.btn_step_third)
            .setTipsViewId(R.layout.guide_step_third)
            .setHighlightShape(OvalShape())
            .setHighlightHorizontalPadding(12f.dp)
            .setHighlightVerticalPadding(12f.dp)
            .setConstraints(Constraints.BottomToTopOfHighlight + Constraints.EndToEndOfHighlight)
            .setMarginOffset(MarginOffset(bottom = 6.dp))
            .build()
    }
    .setBackgroundColor("#80000000".toColorInt())
    .setOnShowCallback { index ->
        //do something
    }
    .setOnDismissCallback {
        //do something
    }
    .interceptBackPressed(true)
    .show()

Sometimes we want disable highlight, it can also be a popup window:

HighlightPro.with(this)
    .setHighlightParameter {
        HighlightParameter.Builder()
            .setHighlightViewId(R.id.btn_tips_bottom)
            .setTipsViewId(R.layout.pop_tips_layout_bottom)
            .setConstraints(Constraints.TopToBottomOfHighlight + Constraints.EndToEndOfHighlight)
            .setMarginOffset(MarginOffset(end = (-2).dp))
            .build()
    }
    .enableHighlight(false)//no highlight now is a popup window
    .interceptBackPressed(true)//BackPressed will dismiss the HighligthPro default not intercepted
    .show()

API doc

About HighlightParameter.Builder
Method Description
setHighlightViewId Set id of highlight view
setHighlightView Set the highlight view
setTipsViewId Set id of tips view
setTipsView Set tips view
setHighlightShape Set shape of highlight
setHighlightVerticalPadding Set v-padding of highlight rectangle
setHighlightHorizontalPadding Set h-padding of highlight rectangle
setConstraints Set constraints of tips view
setMarginOffset Set tips view's margin relative highlight rectangle
build To create a HighlightParameter object

Note

  • setHighlightViewId & setHighlightView
  • setTipsViewId & setTipsView

For the above two methods, you only need one. If you don't use any one, this lib will display UI unexpected.

About HighlightShape
HighlightShape Description
RectShape A rectangle highlight shape
CircleShape A circle highlight shape
OvalShape An oval highlight shape

Note

Any shape base on highlight view's rect on screen, we can setHighlightVerticalPadding or setHighlightHorizontalPadding to expand highlight area.

About Constraints

It is the core class which determine the position of tips view. Like Android's ConstraintLayout our all constriants depend on highlight view.

Vertical Constraints Description
TopToTopOfHighlight Align tips view top to top of highlight rect.
TopToBottomOfHighlight Align tips view top to bottom of highlight rect.
BottomToBottomOfHighlight Align tips view bottom to bottom of highlight rect.
BottomToTopOfHighlight Align tips view bottom to top of highlight rect.
Horizontal Constraint Description
StartToStartOfHighlight Align tips view start to start of highlight rect.
StartToEndOfHighlight Align tips view start to end of highlight rect.
EndToEndOfHighlight Align tips view end to end of highlight rect.
EndToStartOfHighlight Align tips view end to start of highlight rect.

Note

Usually we should set a list of constraints that contains one v-constraint and one h-constraint. And we can use plus operator to create a list of constraints:

Constraints.TopToBottomOfHighlight + Constraints.EndToEndOfHighlight

Of course, we can set margin offsets to adjust position by :

setMarginOffset(MarginOffset(start = 8.dp))

End

Above we introduce all usages of HighlightPro , if it helps you , thanks for your star. Or if you have some good advices, welcome commit a pull request. If HighlightPro has some bug in use, you can commit an issue to me, I will reply as soon as.

Issues
Releases(v1.1.0)
Owner
heyangyang
heyangyang
A highlight lib and also it can be a simple popup window lib for android

HighlightPro 中文 HighlightPro is a highlight library for android and also it can be a simple popup window library for android. Features: One or more hi

heyangyang 149 Jul 20, 2021
An Android Dialog Lib simplify customization.

FlycoDialog-Master 中文版 An Android Dialog Lib simplify customization. Supprot 2.2+. Features [Built-in Dialog, convenient to use](#Built-in Dialog) [Ab

Flyco 2.3k Jul 15, 2021
An easy to use, yet very customizable search dialog

search-dialog An awesome and customizable search dialog with built-in search options. Usage First add jitpack to your projects build.gradle file allpr

Mad Mirrajabi 504 Jul 12, 2021
Library project to display DialogFragment with a blur effect.

BlurDialogFragment This project allows to display DialogFragment with a burring effect behind. The blurring part is achieved through FastBlur algorith

tvbarthel 2k Aug 2, 2021
Extremely useful library to validate EditText inputs whether by using just the validator for your custom view or using library's extremely resizable & customisable dialog

Extremely useful library for validating EditText inputs whether by using just the validator (OtpinVerification) for your custom view or using library's extremely resizable & customisable dialog (OtpinDialogCreator)

Ehma Ugbogo 10 Jul 18, 2021
📱 An Android Library for 💫fluid, 😍beautiful, 🎨custom Dialogs.

Aesthetic Dialogs for Android ?? ?? Android Library for ?? fluid, ?? beautiful, ?? custom Dialogs. Table of Contents: Introduction Types of Dialog Dar

Gabriel TEKOMBO 408 Aug 1, 2021
A simple library for creating animated warnings/dialogs/alerts for Android.

Noty A simple library for creating animated warnings/notifications for Android. Examples Show me code Show me code Show me code Show me code Show me c

Emre 144 Jul 23, 2021
Backport of Material dialogs with easy-to-use API based on DialogFragment

StyledDialogs for Android Demo app: Features: Compatible with Material Design Guidelines Same look for Android 2.2+ Built on top of standard DialogFra

Avast 2.2k Jul 26, 2021
Backport of Material dialogs with easy-to-use API based on DialogFragment

StyledDialogs for Android Demo app: Features: Compatible with Material Design Guidelines Same look for Android 2.2+ Built on top of standard DialogFra

Avast 2.2k Jul 26, 2021
Advanced dialog solution for android

DialogPlus Simple and advanced dialog solution. Uses normal view as dialog Provides expandable option Multiple positioning Built-in options for easy i

Orhan Obut 4.9k Aug 2, 2021
Common dialog fragments

Common dialog fragments

null 6 Jun 6, 2021
[Deprecated] This project can make it easy to theme and custom Android's dialog. Also provides Holo and Material themes for old devices.

Deprecated Please use android.support.v7.app.AlertDialog of support-v7. AlertDialogPro Why AlertDialogPro? Theming Android's AlertDialog is not an eas

Feng Dai 465 May 8, 2021
Make your native android Dialog Fancy and Gify. A library that takes the standard Android Dialog to the next level with a variety of styling options and Gif's. Style your dialog from code.

FancyGifDialog-Android Prerequisites Add this in your root build.gradle file (not your module build.gradle file): allprojects { repositories { ...

Shashank Singhal 476 Jul 28, 2021
An Android library that provides a simple implementation of a DialogFragment

SimpleDialogFragment An Android library that provides a simple implementation of a DialogFragment. Are you tired of creating a new DialogFragment for

Julien Arzul 32 Oct 2, 2020