Android Library that lights items for tutorials or walk-throughs etc...

Overview

Spotlight

alt text

Build Status Download License API

Gradle

dependencies {
    implementation 'com.github.takusemba:spotlight:x.x.x'
}

Usage

val spotlight = Spotlight.Builder(this)
    .setTargets(firstTarget, secondTarget, thirdTarget ...)
    .setBackgroundColor(R.color.spotlightBackground)
    .setDuration(1000L)
    .setAnimation(DecelerateInterpolator(2f))
    .setContainer(viewGroup)
    .setOnSpotlightListener(object : OnSpotlightListener {
      override fun onStarted() {
        Toast.makeText(this@MainActivity, "spotlight is started", Toast.LENGTH_SHORT).show()
      }
      override fun onEnded() {
        Toast.makeText(this@MainActivity, "spotlight is ended", Toast.LENGTH_SHORT).show()
      }
    })
    .build()         

If you want to show Spotlight immediately, you have to wait until views are laid out.

// with core-ktx method.
view.doOnPreDraw { Spotlight.Builder(this)...start() }


Target

Create a Target to add Spotlight.

Target is a spot to be casted by Spotlight. You can add multiple targets to Spotlight.

val target = Target.Builder()
    .setAnchor(100f, 100f)
    .setShape(Circle(100f))
    .setEffect(RippleEffect(100f, 200f, argb(30, 124, 255, 90)))
    .setOverlay(layout)
    .setOnTargetListener(object : OnTargetListener {
      override fun onStarted() {
        makeText(this@MainActivity, "first target is started", LENGTH_SHORT).show()
      }
      override fun onEnded() {
        makeText(this@MainActivity, "first target is ended", LENGTH_SHORT).show()
      }
    })
    .build()


Start/Finish Spotlight

val spotlight = Spotlight.Builder(this)...start()

spotlight.finish()

Next/Previous/Show Target

val spotlight = Spotlight.Builder(this)...start()

spotlight.next()

spotlight.previous()

spotlight.show(2)

Custom Shape

Shape defines how your target will look like. Circle and RoundedRectangle shapes are already implemented, but if you want your custom shape, it's arhivable by implementing Shape interface.

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.
  }
}

Custom Effect

Effect allows you to decorates your target. RippleEffect and FlickerEffect shapes are already implemented, but if you want your custom effect, it's arhivable by implementing Effect interface.

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.
  }
}

Sample

Clone this repo and check out the app module.

Author

Licence

Copyright 2017 Taku Semba.

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
  • assign target to view..

    assign target to view..

    Hi,

    im trying to implement the library, but i cant put target as a view to method setPoint(textview1);

    the round is not fit to the view..

    any advice would help much.

    thanks

    opened by fadlifebriansyah 7
  • round rectangle spotlight

    round rectangle spotlight

    Thanks for awesome library, but I am little disappointed that there is no round rectangle option. anyone who forked and made changes for this feature?

    opened by mickychen0524 6
  • Spotlight starts at corner in every phone

    Spotlight starts at corner in every phone

     val firstRoot = LinearLayout(this)
            val first = layoutInflater.inflate(R.layout.spotlight_tour, firstRoot)
            val firstTarget = com.takusemba.spotlight.Target.Builder()
                .setAnchor(btnLoginWithEmail)
                .setEffect(RippleEffect(100f, 200f, argb(30, 124, 255, 90)))
                .setShape(RoundedRectangle(200f,400f,100f))
                .setOverlay(first)
                .build()
            val spotlight = Spotlight.Builder(this)
                .setTargets(firstTarget)
                .setBackgroundColor(R.color.spotlight_bg_color)
                .setDuration(1000L)
                .setAnimation(DecelerateInterpolator(2f))
                .build()
    
            btnLoginWithEmail.doOnPreDraw {
                spotlight.start()
            }
    // Even tried btnLoginWithEmail.post({}) but did not help
    

    By the way I am using Material design UI elements the button class is com.google.android.material.button.MaterialButton. Though I checked with regular Button class but it didn't work. In the corner again...

    opened by XiXiongMaoXiong 5
  • Show previous target

    Show previous target

    Hello,

    is there a method or some workaround to show the previous target? For moving to the next one we have spotlight.closeCurrentTarget(), anything similar for going back would be useful.

    In this way for example in a tutorial you can have all kind of buttons, skip, next but also back.

    opened by Elvereth 5
  • Manifest merger failed

    Manifest merger failed

    i had a issues. please help me.

    "Manifest merger failed : Attribute application@appComponentFactory value=(android.support.v4.app.CoreComponentFactory) from [com.android.support:support-compat:28.0.0] AndroidManifest.xml:22:18-91 is also present at [androidx.core:core:1.0.1] AndroidManifest.xml:22:18-86 value=(androidx.core.app.CoreComponentFactory). Suggestion: add 'tools:replace="android:appComponentFactory"' to element at AndroidManifest.xml:6:5-24:19 to override."

    opened by saviart 5
  • Spotlight position between phones

    Spotlight position between phones

    The spotlight position is different between two phone. A Pixel 2 XL emulator looks like this:

    https://i.imgur.com/G7Lcrmq.png

    but on a Pixel 3 XL phone (no emulator) it's here:

    https://i.imgur.com/7qddSSE.png

    I'm thinking the notch might be effecting the positioning.

    I'm also using 1.5.0 because 1.8.0 is throwing some manifest merge compiling error.

    bug 
    opened by krisdb 5
  • Spotlight is not started with CustomTarget

    Spotlight is not started with CustomTarget

    I created a customtarget.

    CustomTarget customtarget = new CustomTarget.Builder(activity)
                    .setPoint(viewToFocus)
                    .setRadius(50f)
                    .setView(R.layout.fab_filter_coachmark)
                    .build();
    

    Start spotlight:

    Spotlight.with(activity)
                        .setOverlayColor(ContextCompat.getColor(activity, R.color.transparent))
                        .setTargets(customtarget)
                        .setClosedOnTouchedOutside(true)
                        .start();
    

    layout : fab_filter_coachmark

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="vertical" android:layout_width="match_parent"
        android:background="@color/coachMarkBg"
        android:layout_height="match_parent">
        <TextView
            android:id="@+id/textViewDescription"
            android:layout_width="match_parent"
            android:text="Description"
            android:textColor="@color/white"
            android:layout_height="wrap_content" />
        <TextView
            android:layout_width="match_parent"
            android:text="got it"
            android:textColor="@color/blue_priceinsight"
            android:layout_height="wrap_content" />
    </LinearLayout>
    

    There are two issues

    1. Custom view is not inflated near to the target, It inflated on the top left of screen.
    2. Spotlight is not started on target.
    opened by HimanshuNarang 5
  • target.getView().getTag() return Null in OnTargetStateChangedListener

    target.getView().getTag() return Null in OnTargetStateChangedListener

    Hello, I got trouble when put data in tag view before put in setPoint method and get data in OnTargetStateChangedListener in method onStarted and onEnded, and always got null value.

    I think this is a bug.

    Sorry, my english is bad.

    Thank you

    opened by dhinx 5
  • Displaying spotLight over Dialog

    Displaying spotLight over Dialog

    Hi, the library was cool and working fine in activities and fragments. But whenever i want to display the overlay on top of dialog it was displaying below the dialog. Please suggest any possible solution..

    opened by NaveenKadiyala 4
  • Coachmark with Dialog

    Coachmark with Dialog

    Its an awesome library but I have a query how do I show the coachmark over the dialog. Its always coming behind the dialog. I am using the DialogFragment with animation in android.

    opened by mnnit-LaltuKumar 4
  • Make SpotlightView/Targetclickable

    Make SpotlightView/Targetclickable

    Can you make spotlightview or the target clickable? I know we can make a custom view and set clickable there but it would be great to make the target itself clickable to make the user tap on the target to move forward

    opened by nikhilpanju 4
  • Support for Jetpack Compose

    Support for Jetpack Compose

    Since most of the new UI development is moving toward Jetpack Compose, which is way better than XML, it would be great to have such a library for Compose.

    opened by divyanshdxn 0
  • Background blur

    Background blur

    Hello,

    Is there a way to set the background of the spotlight to a blur? Meaning that you cannot see the layout underneath the spotlight, due to the blur? I currently tried to but a view that matched parent on width and height but then it blocks the target being shown. Does anyone know a work around for this?

    Thanks!

    opened by DerSIlent 1
  • How to make spotlight persistence. If the current Configuration changes, from port to landscape, then spotlight index should persist.

    How to make spotlight persistence. If the current Configuration changes, from port to landscape, then spotlight index should persist.

    Consider a situation when there are some configuration changes. In the current spotlight, I don't think there is any way we can persist the targeted index. In my experience, if the screen is rotated, then the spotlight restart from the beginning.

    Also, consider if the user is using a different UI for different orientations, then in that case we will have to use a different layout for each target. But the thing is, the spotlight takes predefined layout targets. How can we conditionally or with some other method can change the target layout during runtime?

    opened by rishidyno 1
  • Feature: finish spotlight on touch outside of current target

    Feature: finish spotlight on touch outside of current target

    Problem

    I've seen issue https://github.com/TakuSemba/Spotlight/issues/123 (from @aryandii) and decided to help you make Spotlight more functional ✨

    Solution

    So I added a new flag to make it possible to finish spotlight on touch outside of current target. Let's see how it looks like:

    There is a listener to catch on touch outside of current target event. Finishing on touch outside is the only one usage of listener. If you want to add new Shape just create a child class and implement contains function. It can be quite complex if your shape is not primitive. So it can be not perfectly precise (and there is nothing horrible, IMHO). Round rectangle is an example of complex shape:

    @TakuSemba , thanks a lot for your work. I hope this feature will improve your project and engage new developers 🤝

    opened by valeryvpetrov-dev 1
Owner
TakuSemba
ex: CyberAgent.Inc, AbemaTv.Inc. currently, Invoice2go.Inc.
TakuSemba
Android library to display a list of items for pick one

PickerUI Android library to display a list of items for pick one with blur effect (if you wish). Support for Android 3.0 and up. It supports portrait

David Pizarro 630 Nov 19, 2022
An Android Widget for selecting items that rotate on a wheel.

Looking for maintainers I'm no longer active on this project but I'll still focus on fixing crashing issues and review any code changes etc. WheelView

Luke Deighton 888 Jan 3, 2023
Spinner with searchable items.

SearchableSpinner Spinner with searchable items. Searchable Spinner is a dialog spinner with the search feature which allows to search the items loade

Mitesh Pithadiya 649 Dec 21, 2022
Overscroll any scrollable items!

ComposeOverscroll Overscroll any scrollable items! Preview compare with iOS demo Preview.for.overscroll.and.nested.invoke.mp4 How to use for column :

null 7 Dec 15, 2022
💳 A quick and easy flip view through which you can create views with two sides like credit cards, poker cards etc.

The article on how this library was created is now published. You can read it on this link here. →. ?? EasyFlipView Built with ❤︎ by Wajahat Karim and

Wajahat Karim 1.3k Dec 14, 2022
Just a Wheel——A easy way to setEmptyView to ListView、GridView or RecyclerView etc..

中文说明在这里 TEmptyView Just a Wheel—— A easier way to setEmptyView. Without having to write xml file every time. It supports AdapterView(ListView,GridView

Barry 454 Jan 9, 2023
A new canvas drawing library for Android. Aims to be the Fabric.js for Android. Supports text, images, and hand/stylus drawing input. The library has a website and API docs, check it out

FabricView - A new canvas drawing library for Android. The library was born as part of a project in SD Hacks (www.sdhacks.io) on October 3rd. It is cu

Antwan Gaggi 1k Dec 13, 2022
Android StackBlur is a library that can perform a blurry effect on a Bitmap based on a gradient or radius, and return the result. The library is based on the code of Mario Klingemann.

Android StackBlur Android StackBlur is a library that can perform a blurry effect on a Bitmap based on a gradient or radius, and return the result. Th

Enrique López Mañas 3.6k Dec 29, 2022
Android library providing bread crumbs to the support library fragments.

Hansel And Gretel Android library providing bread crumbs for compatibility fragments. Usage For a working implementation of this project see the sampl

Jake Wharton 163 Nov 25, 2022
Android library used to create an awesome Android UI based on a draggable element similar to the last YouTube graphic component.

Draggable Panel DEPRECATED. This project is not maintained anymore. Draggable Panel is an Android library created to build a draggable user interface

Pedro Vicente Gómez Sánchez 3k Dec 6, 2022
TourGuide is an Android library that aims to provide an easy way to add pointers with animations over a desired Android View

TourGuide TourGuide is an Android library. It lets you add pointer, overlay and tooltip easily, guiding users on how to use your app. Refer to the exa

Tan Jun Rong 2.6k Jan 5, 2023
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
Wizard Pager is a library that provides an example implementation of a Wizard UI on Android, it's based of Roman Nurik's wizard pager (https://github.com/romannurik/android-wizardpager)

Wizard Pager Wizard Pager is a library that provides an example implementation of a Wizard UI on Android, it's based of Roman Nurik's wizard pager (ht

Julián Suárez 520 Nov 11, 2022
Make your native android Toasts Fancy. A library that takes the standard Android toast to the next level with a variety of styling options. Style your toast from code.

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

Shashank Singhal 1.2k Dec 26, 2022
Make your native android Dialog Fancy. A library that takes the standard Android Dialog to the next level with a variety of styling options. Style your dialog from code.

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

Shashank Singhal 350 Dec 9, 2022
A Tinder-like Android library to create the swipe cards effect. You can swipe left or right to like or dislike the content.

Swipecards Travis master: A Tinder-like cards effect as of August 2014. You can swipe left or right to like or dislike the content. The library create

Dionysis Lorentzos 2.3k Dec 9, 2022
A Material design Android pincode library. Supports Fingerprint.

LolliPin A Lollipop material design styled android pincode library (API 14+) To include in your project, add this to your build.gradle file: //Loll

Omada Health 1.6k Nov 25, 2022
Android Library to implement simple touch/tap/swipe gestures

SimpleFingerGestures An android library to implement simple 1 or 2 finger gestures easily Example Library The library is inside the libSFG folder Samp

Arnav Gupta 315 Dec 21, 2022
Useful library to use custom fonts in your android app

EasyFonts A simple and useful android library to use custom fonts in android apps without adding fonts into asset/resource folder.Also by using this l

Vijay Vankhede 419 Sep 9, 2022