- As a user, after installing and opening an application, the next thing to be concerned about is what the components of the application's interface function, how the application will be used, and the instructions. Using the user for the first time opening the app is essential.
- In this article, we will learn how to use one of the libraries to handle the above purpose, which is Spotlight.
1. Gradle
- First we have to implement the library in the Gradle file:
1 2 3 4 | dependencies { implementation 'com.github.takusemba:spotlight:x.x.x' } |
2. Create Target Object
- Next, we will create an object provided by Spotlight that is the Target object, each of which corresponds to the components we want to highlight to guide in the application.
- This object will set properties as below
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | val target = Target.Builder() .setAnchor(view) .setShape(Circle(100f)) .setEffect(RippleEffect(100f, 200f, argb(30, 124, 255, 90))) .setOverlay(layout) .setOnTargetListener(object : OnTargetListener { override fun onStarted() { makeText( <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5f2b37362c1f123e36311e3c2b3629362b26">[email protected]</a> , "first target is started", LENGTH_SHORT).show() } override fun onEnded() { makeText( <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f2869a9b81b2bf939b9cb391869b849b868b">[email protected]</a> , "first target is ended", LENGTH_SHORT).show() } }).build() |
- With setAnchor (view), the view is the component we want to guide
- setShape () creates a spotlight for the elements we want to guide
- setEffect () creates an effect associated with the set shape
- setOverlay (layout), the layout will be the layout we want to overlay to highlight the other elements
3. Create Spotlight Object
- Once we have the Target objects, we will use those objects to place in the Spotlight object, then we will be able to perform the next process.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | val spotlight = Spotlight.Builder(activity) .setTargets(firstTarget, secondTarget, thirdTarget ...) .setBackgroundColor(R.color.spotlightBackground) .setDuration(1000L) .setAnimation(DecelerateInterpolator(2f)) .setOnSpotlightListener(object : OnSpotlightListener { override fun onStarted() { Toast.makeText( <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bfcbd7d6ccfff2ded6d1fedccbd6c9d6cbc6">[email protected]</a> , "spotlight is started", Toast.LENGTH_SHORT).show() } override fun onEnded() { Toast.makeText( <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="05716d6c764548646c6b4466">[email protected]</a> tivity, "spotlight is ended", Toast.LENGTH_SHORT).show() } }).build() |
4. Start / Finish Spotlight
- Once we have a Spotlight object, we can start or finish this object
1 2 3 | spotlight.start() spotlight.finish() |
5. Next / Previous / Show Target
- For Spotlight objects with multiple targets, we can next or previous to pass the Target object, or we can specify which Target is shown.
1 2 3 4 | spotlight.next() spotlight.previous() spotlight.show(index of target) |
6. Custom Shape
- We can also customize a custom shape to set the shape of the Target object
1 2 3 4 5 6 7 8 9 | class CustomShape( override val duration: Long, override val interpolator: TimeInterpolator ) : Shape { override fun draw(canvas: Canvas, point: PointF, value: Float, paint: Paint) { // draw your shape here. } } |
7. Custom Effect
- In addition, the effects can also be customized by us to set the effect for the Target object
1 2 3 4 5 6 7 8 9 10 | class CustomEffect( override val duration: Long, override val interpolator: TimeInterpolator, override val repeatMode: Int ) : Effect { override fun draw(canvas: Canvas, point: PointF, value: Float, paint: Paint) { // draw your effect here. } } |
8. Conclusion
- Thus, we have learned how to guide users to use the application the first time to open the application, with a very easy to use and effective library called Spotlight.
- Thank you so much for watching, see you next time.
- Demo Link: https://github.com/TakuSemba/Spotlight/tree/master/app
- Reference source is taken directly from the Spotlight library: https://github.com/TakuSemba/Spotlight/blob/master/README.md