Quick Implementation
You can integrate Stipop SDK into your app in a minute with StipopImageView. Just place the imageView. Then our SDK will do the rest complicated things. If a user touches the imageView, it'll automatically show . You can choose which one to appear.
All you have to care is to make wonderful features with our stickers.
Before you begin
Please make sure you completed all processes in Before You Begin - downloaded Stipop.json file, included it in your project, and set it up to complete the SDK integration.
1. Implement 'StipopDelegate' interface
The StipopDelegate Interface will send the selected sticker or package information.
The returned value allows you to control which stickers and sticker packs are available to your users.
If you want to know more about 'StipopDelegate,' please refer to 2. Integrating Stipop - Event Listener
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
class MainActivity : AppCompatActivity() {
private val stipopDelegate: StipopDelegate = object : StipopDelegate {
override fun onStickerSingleTapped(sticker: SPSticker): Boolean {
// This function will be executed when user chooses a sticker.
return true
}
/* If you want to use double tap feature, change the plist file and implement this function. */
override fun onStickerDoubleTapped(sticker: SPSticker): Boolean {
// This function will be executed when user clicks a sticker twice.
return true
}
override fun onStickerPackRequested(spPackage: SPPackage): Boolean {
return true
}
}
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
}
}
2. Connect 'App' and 'Stipop' using 'Stipop.connect()'
Now it's time to connect your app and Stipop SDK by calling 'Stipop.connect'.
If you want to know about 'Stipop.connect', please refer to Optional Settings - Connect
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
class MainActivity : AppCompatActivity() {
private val stipopButton: StipopImageView by lazy { findViewById(R.id.stipopButton) }
private val stipopImageView: StipopImageView by lazy { findViewById(R.id.stipopImageView) }
private val stipopDelegate: StipopDelegate = object : StipopDelegate {
override fun onStickerSingleTapped(sticker: SPSticker): Boolean {
// This function will be executed when user chooses a sticker.
return true
}
/* If you want to use double tap feature, change the plist file and implement this function. */
override fun onStickerDoubleTapped(sticker: SPSticker): Boolean {
// This function will be executed when user clicks a sticker twice.
return true
}
override fun onStickerPackRequested(spPackage: SPPackage): Boolean {
return true
}
}
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
// If you want to custom your PickerView's position, add StickerPickerFragment. or not, set StickerPickerFragment to null.
val fragment = supportFragmentManager.findFragmentById(R.id.picker_view_fragment) as StickerPickerFragment
Stipop.connect(
activity = this,
userId = "userID",
delegate = stipopDelegate,
stipopButton = stipopButton,
StickerPickerFragment = fragment
)
// If you use 'PopupWindow' type and 'custom layout' for Sticker Picker View, please set Sticker Picker View's 'Y' value and 'Height' value.
Stipop.setCustomPopupWindowYAndHeightValue(500, 700)
}
}
3. Show stickers in your app
Use Stipop by calling Stipop.show() or Stipop.showSearch().
When a sticker pack is selected, data is passed to 'onStickerPackRequested()'.
When a sticker is selected, data is passed to 'onStickerSelected()'.
Below we are going to add both layouts and display the received sticker in ImageView.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
class MainActivity : AppCompatActivity() {
private val stipopButton: StipopImageView by lazy { findViewById(R.id.stipopButton) }
private val stipopImageView: StipopImageView by lazy { findViewById(R.id.stipopImageView) }
private val stipopDelegate: StipopDelegate = object : StipopDelegate {
override fun onStickerSingleTapped(sticker: SPSticker): Boolean {
// This function will be executed when user chooses a sticker.
stipopImageView.loadImage(sticker.stickerImg)
return true
}
/* If you want to use double tap feature, change the plist file and implement this function. */
override fun onStickerDoubleTapped(sticker: SPSticker): Boolean {
// This function will be executed when user clicks a sticker twice.
return true
}
override fun onStickerPackRequested(spPackage: SPPackage): Boolean {
return true
}
}
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
// If you want to custom your PickerView's position, add StickerPickerFragment. or not, set StickerPickerFragment to null.
val fragment = supportFragmentManager.findFragmentById(R.id.picker_view_fragment) as StickerPickerFragment
Stipop.connect(
activity = this,
userId = "userID",
delegate = stipopDelegate,
stipopButton = stipopButton,
StickerPickerFragment = fragment
)
// If you use 'PopupWindow' type and 'custom layout' for Sticker Picker View, please set Sticker Picker View's 'Y' value and 'Height' value.
Stipop.setCustomPopupWindowYAndHeightValue(500, 700)
stipopButton.setOnClickListener {
Stipop.show()
}
}
}
Below code is 'activity_main.xml':
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<fragment
android:id="@+id/picker_view_fragment"
android:name="io.stipop.view.pickerview.StickerPickerFragment"
android:layout_width="match_parent"
android:layout_height="300dp"
app:layout_constraintTop_toTopOf="parent"
/>
<io.stipop.custom.StipopImageView
android:id="@+id/stipopButton"
android:layout_width="100dp"
android:layout_height="100dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/stipopImageView"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent" />
<io.stipop.custom.StipopImageView
android:id="@+id/stipopImageView"
android:layout_width="100dp"
android:layout_height="100dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="@+id/stipopButton"/>
</androidx.constraintlayout.widget.ConstraintLayout>
Next step: Choose layout
Search View provides instant access to stickers with search keywords.
Sticker Picker View let's users download stickers from a well-organized sticker library to have an all-time access later.
Back