Top Related Projects
Paging indicator widgets compatible with the ViewPager from the Android Support Library and ActionBarSherlock.
[Archived] Highlight the best bits of your app to users quickly, simply, and cool...ly
An implementation of tap targets from the Material Design guidelines for feature discovery.
Android view for displaying PDFs rendered with PdfiumAndroid
Implementation of ImageView for Android that supports zooming, by various touch gestures.
A Material Design ViewPager easy to use library
Quick Overview
Spotlight is an Android library that provides an easy way to add a spotlight effect to highlight specific UI elements in your app. It's designed to create engaging onboarding experiences, feature introductions, or to draw attention to particular parts of your interface.
Pros
- Simple and intuitive API for creating spotlight effects
- Customizable appearance and animations
- Supports chaining multiple spotlights for guided tours
- Lightweight and easy to integrate into existing projects
Cons
- Limited to Android platform only
- May require additional effort to ensure accessibility compliance
- Documentation could be more comprehensive
- Lacks built-in support for complex shapes or multiple simultaneous highlights
Code Examples
Creating a simple spotlight:
Spotlight.with(this)
.setOverlayColor(ContextCompat.getColor(this, R.color.background))
.setDuration(1000L)
.setAnimation(DecelerateInterpolator(2f))
.setTargets(
Target.Builder()
.setAnchor(view)
.setOverlay(overlay)
.build()
)
.setClosedOnTouchedOutside(true)
.setOnSpotlightStateListener(object : OnSpotlightStateChangedListener {
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()
}
})
.start()
Chaining multiple spotlights:
Spotlight.with(this)
.setOverlayColor(ContextCompat.getColor(this, R.color.background))
.setDuration(1000L)
.setAnimation(DecelerateInterpolator(2f))
.setTargets(
firstTarget,
secondTarget,
thirdTarget
)
.setClosedOnTouchedOutside(true)
.start()
Customizing the spotlight shape:
val customShape = RoundedRectangle(100f, 100f)
Target.Builder()
.setAnchor(view)
.setShape(customShape)
.setOverlay(overlay)
.build()
Getting Started
- Add the dependency to your
build.gradle
file:
dependencies {
implementation 'com.github.takusemba:spotlight:2.0.3'
}
- Create a simple spotlight in your activity or fragment:
val target = Target.Builder()
.setAnchor(findViewById(R.id.button))
.setOverlay(TextView(this).apply {
text = "This is a spotlight!"
})
.build()
Spotlight.with(this)
.setTargets(target)
.start()
This will create a spotlight effect highlighting the specified button and displaying the custom overlay text.
Competitor Comparisons
Paging indicator widgets compatible with the ViewPager from the Android Support Library and ActionBarSherlock.
Pros of ViewPagerIndicator
- Mature and well-established library with a large user base
- Offers a variety of indicator styles (e.g., circles, titles, tabs)
- Highly customizable with extensive documentation
Cons of ViewPagerIndicator
- No longer actively maintained (last update in 2016)
- Designed for older Android versions, may require additional work for modern apps
- Limited to ViewPager functionality, not as versatile as Spotlight
Code Comparison
ViewPagerIndicator:
CirclePageIndicator indicator = (CirclePageIndicator)findViewById(R.id.indicator);
ViewPager pager = (ViewPager)findViewById(R.id.pager);
indicator.setViewPager(pager);
Spotlight:
Spotlight.with(this)
.setOverlayColor(R.color.background)
.setDuration(1000L)
.setAnimation(DecelerateInterpolator(2f))
.setTargets(firstTarget, secondTarget)
.setClosedOnTouchedOutside(true)
.start()
While ViewPagerIndicator focuses on providing indicators for ViewPager, Spotlight is a more general-purpose library for creating spotlight effects and onboarding experiences. ViewPagerIndicator is Java-based and tailored for a specific use case, while Spotlight is written in Kotlin and offers more flexibility for highlighting UI elements beyond just ViewPager indicators.
[Archived] Highlight the best bits of your app to users quickly, simply, and cool...ly
Pros of ShowcaseView
- More established and mature project with a longer history
- Offers a wider range of customization options for showcase views
- Provides built-in animations and transitions for smoother user experience
Cons of ShowcaseView
- Less active development and updates compared to Spotlight
- May have more complex implementation due to its extensive features
- Potentially larger library size, which could impact app performance
Code Comparison
ShowcaseView:
new ShowcaseView.Builder(this)
.setTarget(new ViewTarget(findViewById(R.id.button)))
.setContentTitle("Hello!")
.setContentText("This is a showcase view")
.hideOnTouchOutside()
.build();
Spotlight:
Spotlight.with(this)
.setOverlayColor(ContextCompat.getColor(this, R.color.background))
.setDuration(1000L)
.setAnimation(DecelerateInterpolator(2f))
.setTargets(firstTarget, secondTarget)
.setClosedOnTouchedOutside(true)
.start()
Both libraries offer similar functionality for creating showcase or spotlight views in Android applications. ShowcaseView provides more customization options and has a longer history, while Spotlight offers a more modern, Kotlin-friendly API with simpler implementation. The choice between the two depends on specific project requirements and preferences.
An implementation of tap targets from the Material Design guidelines for feature discovery.
Pros of TapTargetView
- More customizable appearance with options for title and description text
- Supports chaining multiple targets for guided tours
- Includes built-in animations for target highlighting
Cons of TapTargetView
- Limited to circular target shapes
- Less flexible positioning options compared to Spotlight
- May require more setup code for complex scenarios
Code Comparison
TapTargetView:
TapTargetView.showFor(this,
TapTarget.forView(findViewById(R.id.target), "This is a target", "We have the best targets, believe me")
.outerCircleColor(R.color.red)
.targetCircleColor(R.color.white)
.titleTextSize(20)
.titleTextColor(R.color.blue)
.descriptionTextSize(10)
.descriptionTextColor(R.color.black)
.tintTarget(false))
Spotlight:
val spotlight = Spotlight.Builder(this)
.setTargets(
Target.Builder()
.setAnchor(100f, 100f)
.setShape(Circle(50f))
.setEffect(RippleEffect(100f, 200f, argb(30, 124, 255, 90)))
.setOverlay(ViewTarget(findViewById(R.id.overlay)))
.build()
)
.build()
spotlight.start()
Both libraries offer easy-to-use APIs for creating spotlight effects, but Spotlight provides more flexibility in terms of target shapes and positioning, while TapTargetView offers more built-in customization options for text and appearance.
Android view for displaying PDFs rendered with PdfiumAndroid
Pros of AndroidPdfViewer
- Specifically designed for PDF viewing in Android applications
- Supports zooming, scrolling, and page navigation features
- Renders PDF files using native Android graphics, potentially offering better performance
Cons of AndroidPdfViewer
- Limited to PDF viewing functionality, less versatile than Spotlight
- May require more setup and configuration for PDF-specific features
- Less actively maintained, with fewer recent updates compared to Spotlight
Code Comparison
AndroidPdfViewer:
PDFView pdfView = findViewById(R.id.pdfView);
pdfView.fromAsset("sample.pdf")
.pages(0, 2, 1, 3, 3, 3)
.defaultPage(1)
.showMinimap(false)
.enableSwipe(true)
.load();
Spotlight:
Spotlight.with(this)
.setOverlayColor(R.color.background)
.setDuration(1000L)
.setAnimation(DecelerateInterpolator(2f))
.setTargets(firstTarget, secondTarget)
.setClosedOnTouchedOutside(true)
.start()
While AndroidPdfViewer focuses on PDF rendering and navigation, Spotlight is designed for creating spotlight effects and onboarding experiences in Android apps. The code snippets demonstrate their distinct purposes and usage patterns.
Implementation of ImageView for Android that supports zooming, by various touch gestures.
Pros of PhotoView
- More comprehensive image viewing functionality, including zooming, panning, and multi-touch gestures
- Supports GIF animations and large image loading
- Wider adoption and community support, with more contributors and stars on GitHub
Cons of PhotoView
- Larger library size and potentially higher memory usage
- More complex implementation for basic image viewing tasks
- Less frequent updates and maintenance compared to Spotlight
Code Comparison
Spotlight usage:
Spotlight(this)
.setTargets(firstTarget, secondTarget)
.setOnSpotlightStartedListener { /* ... */ }
.start()
PhotoView usage:
val photoView = findViewById<PhotoView>(R.id.photo_view)
photoView.setImageResource(R.drawable.image)
photoView.setScaleType(ImageView.ScaleType.CENTER_CROP)
Summary
PhotoView is a more feature-rich library for advanced image viewing, while Spotlight focuses on creating spotlight effects for onboarding or highlighting UI elements. PhotoView is better suited for image galleries or detailed image inspection, whereas Spotlight is ideal for user guidance and feature introduction. The choice between the two depends on the specific requirements of your project.
A Material Design ViewPager easy to use library
Pros of MaterialViewPager
- Offers a more comprehensive UI solution with Material Design-inspired ViewPager
- Provides built-in header animations and parallax effects
- Includes integration with RecyclerView for smooth scrolling experiences
Cons of MaterialViewPager
- More complex implementation compared to Spotlight's focused approach
- May require more customization for specific use cases
- Less frequently updated, potentially leading to compatibility issues with newer Android versions
Code Comparison
MaterialViewPager:
mViewPager = (MaterialViewPager) findViewById(R.id.materialViewPager);
mViewPager.getViewPager().setAdapter(new FragmentStatePagerAdapter(getSupportFragmentManager()) {
// Adapter implementation
});
mViewPager.setMaterialViewPagerListener(new MaterialViewPager.Listener() {
// Listener implementation
});
Spotlight:
new Spotlight.Builder(this)
.setTargets(firstTarget, secondTarget, thirdTarget)
.setOnSpotlightStateListener(new OnSpotlightStateChangedListener() {
// Listener implementation
})
.build()
.start();
Summary
MaterialViewPager offers a more comprehensive solution for creating Material Design-inspired ViewPagers with advanced features like header animations and parallax effects. However, it may be more complex to implement and customize compared to Spotlight's focused approach on highlighting specific UI elements. Spotlight provides a simpler API for creating onboarding or tutorial experiences, while MaterialViewPager is better suited for creating rich, scrollable content layouts with material design elements.
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
Spotlight
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
- Taku Semba
- Github - (https://github.com/takusemba)
- Twitter - (https://twitter.com/takusemba)
- Facebook - (https://www.facebook.com/takusemba)
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.
Top Related Projects
Paging indicator widgets compatible with the ViewPager from the Android Support Library and ActionBarSherlock.
[Archived] Highlight the best bits of your app to users quickly, simply, and cool...ly
An implementation of tap targets from the Material Design guidelines for feature discovery.
Android view for displaying PDFs rendered with PdfiumAndroid
Implementation of ImageView for Android that supports zooming, by various touch gestures.
A Material Design ViewPager easy to use library
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot