diff --git a/README.md b/README.md
index 4bb7c80..b8d7742 100644
--- a/README.md
+++ b/README.md
@@ -2,7 +2,9 @@
[![JitPack](https://jitpack.io/v/Kyash/android-target-instructions.svg)](https://jitpack.io/#Kyash/android-target-instructions)
-Make easy to implement the instructions feature.
+Make easy to implement the instructions feature to your app.
+
+![demo.gif](art/demo.gif)
## Download
@@ -28,39 +30,108 @@ dependencies {
`LATEST_VERSION` is [![JitPack](https://jitpack.io/v/Kyash/android-target-instructions.svg)](https://jitpack.io/#Kyash/android-target-instructions)
-## Usage
+## Simple Usage
+
+Create `Target` instance to set view.
+
+```kotlin
+// Create Target and set
+val target1 = SimpleTarget.Builder(context)
+ .setTarget(binding.fab)
+ .setTitle("Floating Action Button")
+ .setHighlightRadius(100f) // Circle shape
+ .setDescription("This is the floating action button.")
+ .build()
+
+val target2 = SimpleTarget.Builder(context)
+ .setTarget(binding.firstText)
+ .setTitle("First text")
+ .setDescription("This is the first text.")
+ .setHighlightPadding(R.dimen.simple_highlight_padding)
+ .build()
+```
+
+Then, set them to `TargetInstructions` and call `start()` method.
+
+```
+TargetInstructions.with(activity)
+ .setTargets(arrayListOf(target1, target2))
+ .start()
+```
+
+That's it!
+
+## Advanced Usage
+
+### SimpleTarget attributes
+
+You can set some attributes to `SimpleTarget` class.
+
+```kotlin
+val target = SimpleTarget.Builder(context)
+ .setTarget(binding.fab)
+ // or you can set target by using left, top position and width, height.
+ .setTarget(0f, 0f, 100f, 100f)
+ .setTitle("Floating Action Button")
+ .setDescription("This is the floating action button.")
+ .setHighlightRadius(100f) // If you don't set this, the highlight shape would be square.
+ .setMessageInterpolator(FastOutSlowInInterpolator()) // For message scale animation
+ .setMessageAnimationDuration(200L)
+ .setPositionType(Target.Position.ABOVE) // Message position
+ .setStartDelayMillis(200L)
+ .setListener(object: Target.OnStateChangedListener {
+ override fun onClosed() {
+ // Do after target is closed. Ex) Scroll to bottom
+ }
+ })
+ .build()
+```
+
+### Customize SimpleTarget Layout
+
+You can set the custom layout file to `SimpleTarget` like [this](https://github.com/Kyash/android-target-instructions/blob/3374e0528ed352c05b7827a158f717f6e1c48a1c/example/src/main/java/co/kyash/androidtargetinstructions/example/CustomUsageActivity.kt#L68).
+
+```xml
+SimpleTarget.Builder(context).setTarget(binding.secondText)
+ .setTitle("Second text")
+ .setDescription("This is the second text. This is customized instruction.")
+ .setMessageLayoutResId(R.layout.layout_instruction_simple_message_black) // This is custom layout
+```
+
+This custom layout code is [here](https://github.com/Kyash/android-target-instructions/blob/3374e0528ed352c05b7827a158f717f6e1c48a1c/example/src/main/res/layout/layout_instruction_simple_message_black.xml)
+
+You have to put these layout id in custom layout.
+
+![customize_message_layout.png](art/customize_message_layout.png)
+
+### Create custom Target
+If you want to customize more, you can create the original `Target` class by implementing `co.kyash.targetinstructions.targets.Target` class.
+
+[SimpleTarget.kt](https://github.com/Kyash/android-target-instructions/blob/master/library/src/main/java/co/kyash/targetinstructions/targets/SimpleTarget.kt) would help you.
+
+### TargetInstructions attributes
+
+You can set some attributes to `TargetInstructions` class.
```kotlin
-val target1 = SimpleTarget.Builder(this@MainActivity).setTarget(binding.fab)
- .setTitle("Floating Action Button")
- .setHighlightRadius(100f)
- .setDescription("This is the floating action button.")
- .build()
-
-val target2 = SimpleTarget.Builder(this@MainActivity).setTarget(binding.firstText)
- .setTitle("First text")
- .setDescription("This is the first text.")
- .setHighlightPadding(R.dimen.simple_hightlight_padding)
- .setListener(object : Target.OnStateChangedListener {
- override fun onClosed() {
- binding.scrollview.smoothScrollBy(0, 10000)
- }
- })
- .build()
-
-val target3 = SimpleTarget.Builder(this@MainActivity).setTarget(binding.secondText)
- .setTitle("Second text")
- .setDescription("This is the second text.")
- .setMessageLayoutResId(R.layout.layout_instruction_simple_message_black)
- .setHighlightHorizontalPadding(R.dimen.space_minus_16dp)
- .setStartDelayMillis(200L)
- .build()
-
-TargetInstructions.with(this@MainActivity)
- .setTargets(arrayListOf(target1, target2, target3))
- .start()
+TargetInstructions.with(this@SimpleUsageActivity)
+ .setTargets(arrayListOf(target1, target2))
+ .setFadeDuration(200L)
+ .setFadeInterpolator(LinearOutSlowInInterpolator())
+ .setOverlayColorResId(R.color.black_alpha) // Background color
+ .start()
+ // .finish() // Call this method when you want to finish tutorial.
```
+## Dependencies
+This library depends on Kotlin.
+
+## Thanks
+This library is inspired from these awesome code. Thank you so much!
+- https://github.com/TakuSemba/Spotlight
+- https://github.com/itzikBraun/TutorialView
+- https://github.com/sjwall/MaterialTapTargetPrompt
+
## Contributing
We are always welcome your contribution!
If you find a bug or want to add new feature, please raise issue.
diff --git a/art/customize_message_layout.png b/art/customize_message_layout.png
new file mode 100644
index 0000000..c8a6ef9
Binary files /dev/null and b/art/customize_message_layout.png differ
diff --git a/art/demo.gif b/art/demo.gif
new file mode 100644
index 0000000..8013afc
Binary files /dev/null and b/art/demo.gif differ
diff --git a/example/src/main/java/co/kyash/androidtargetinstructions/example/SimpleUsageActivity.kt b/example/src/main/java/co/kyash/androidtargetinstructions/example/SimpleUsageActivity.kt
index 391b280..0998832 100644
--- a/example/src/main/java/co/kyash/androidtargetinstructions/example/SimpleUsageActivity.kt
+++ b/example/src/main/java/co/kyash/androidtargetinstructions/example/SimpleUsageActivity.kt
@@ -3,12 +3,16 @@ package co.kyash.androidtargetinstructions.example
import android.content.Context
import android.content.Intent
import android.databinding.DataBindingUtil
+import android.net.sip.SipSession
import android.os.Bundle
+import android.support.v4.view.animation.FastOutSlowInInterpolator
+import android.support.v4.view.animation.LinearOutSlowInInterpolator
import android.support.v7.app.AppCompatActivity
import android.view.ViewTreeObserver
import co.kyash.androidtargetinstructions.example.databinding.ActivitySimpleUsageBinding
import co.kyash.targetinstructions.TargetInstructions
import co.kyash.targetinstructions.targets.SimpleTarget
+import co.kyash.targetinstructions.targets.Target
class SimpleUsageActivity : AppCompatActivity() {
@@ -40,23 +44,38 @@ class SimpleUsageActivity : AppCompatActivity() {
}
private fun showInstructions() {
+ // Create Target and set
val target1 = SimpleTarget.Builder(this@SimpleUsageActivity)
.setTarget(binding.fab)
+ // .setTarget(0f, 0f, 100f, 100f)
.setTitle("Floating Action Button")
- .setHighlightRadius(100f)
+ .setHighlightRadius(100f) // Circle shape
.setDescription("This is the floating action button.")
.build()
val target2 = SimpleTarget.Builder(this@SimpleUsageActivity)
.setTarget(binding.firstText)
.setTitle("First text")
+ .setMessageInterpolator(FastOutSlowInInterpolator())
.setDescription("This is the first text.")
.setHighlightPadding(R.dimen.simple_highlight_padding)
+ .setMessageAnimationDuration()
+ .setPositionType(Target.Position.ABOVE)
+ .setStartDelayMillis(200L)
+ .setListener(object: Target.OnStateChangedListener {
+ override fun onClosed() {
+ // Do after target is closed
+ }
+ })
.build()
TargetInstructions.with(this@SimpleUsageActivity)
.setTargets(arrayListOf(target1, target2))
+ .setFadeDuration(200L)
+ .setFadeInterpolator(LinearOutSlowInInterpolator())
+ .setOverlayColorResId(R.color.black_alpha) // Background color
.start()
+ // .finish()
}
}
\ No newline at end of file
diff --git a/example/src/main/res/values/colors.xml b/example/src/main/res/values/colors.xml
index 7aa9531..d4064ac 100644
--- a/example/src/main/res/values/colors.xml
+++ b/example/src/main/res/values/colors.xml
@@ -6,6 +6,7 @@
#D0011B
#000000
+ #000000
#EEEEEE
#9E9E9E
#FFFFFF