Creating Interactive Keyboard GIFs and Stickers with Jetpack Compose
Written on
Chapter 1: Introduction to GIFs and Stickers
Let's settle in with a coffee ☕ as we delve into how to incorporate keyboard GIFs and stickers using Jetpack Compose.
When to Utilize GIFs and Stickers?
These elements are essential in chat applications, allowing users to engage not only through text but also via expressive stickers and GIFs.
Dependencies Required
To begin, ensure you are using the latest 1.7.0-alpha02 version of Compose UI. Add the following dependencies to your :app/build.gradle.kts file. Additionally, include the Coil library to enable the display of stickers and GIFs.
dependencies {
// Compose UI
implementation("androidx.compose.ui:ui:1.7.0-alpha02")
// Coil
implementation("io.coil-kt:coil-compose:2.5.0")
implementation("io.coil-kt:coil-gif:2.5.0")
}
Chapter 2: Building the Composable Function
Let's create a new composable function where we will manage the state for the TextField and the imageUri. We will utilize rememberTextFieldState() since only BasicTextField2 can accept GIFs and stickers, though you can also implement the traditional way with mutableStateOf.
@Composable
fun MyScreen() {
val text = rememberTextFieldState()
// OR
var text by remember {
mutableStateOf("")}
var imageUri by remember {
mutableStateOf(Uri.EMPTY)}
}
Now, we will set up a column to showcase the image above the text field. The AsyncImage component from Coil will facilitate the display of stickers and GIFs.
Column {
AsyncImage(
model = imageUri,
contentDescription = null,
contentScale = ContentScale.FillHeight,
modifier = Modifier.height(160.dp)
)
Spacer(modifier = Modifier.height(20.dp))
BasicTextField2(
state = text)
}
Section 2.1: Customizing the Text Field
Next, let’s enhance the text field's appearance and prepare it to receive content.
BasicTextField2(
state = text,
modifier = Modifier
.fillMaxWidth()
.background(Color.LightGray)
.padding(20.dp)
// This is necessary for accepting GIFs and Stickers
.receiveContent(setOf(MediaType.All)) { content ->
// Validate if the content is of image type
if (content.hasMediaType(MediaType.Image)) {
val clipData = content.clipEntry.clipData
for (index in 0 until clipData.itemCount) {
val item = clipData.getItemAt(index) ?: continue
// Set the image URI
imageUri = item.uri ?: continue}
}
content
})
Section 2.2: Configuring GIF Support
However, if you run the application now, you will find that the GIFs do not animate and are displayed as static images. To resolve this, we need to create a MyApplication class and implement the GIF ImageLoaderFactory.
class MyApplication : Application(), ImageLoaderFactory {
override fun newImageLoader(): ImageLoader {
return ImageLoader.Builder(this)
.components {
if (Build.VERSION.SDK_INT >= 28) {
add(ImageDecoderDecoder.Factory())} else {
add(GifDecoder.Factory())}
}
.build()
}
}
Finally, update your AndroidManifest.xml to include the new application class.
Section 2.3: Testing the Application
After completing these steps, run your application to confirm that GIFs can be added successfully. For the latest updates, feel free to follow me and subscribe to the newsletter. If you want to see more content, connect with me on X and subscribe to my YouTube channel! Thank you for your time! 😊☕️
This video showcases the process of using Keyboard GIFs and Stickers in Jetpack Compose. Learn how to enhance your chat applications with fun visuals!
Explore the new course on building an Android Gif Builder App, where you'll gain insights into incorporating GIFs seamlessly into your apps.