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 or vertical constraint or center 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:HighLightPro:1.4.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 r

HighLightPro

Install / Use

README