# CatGPT - or How to Position Elements on Overlays

DevFeed: [CatGPT - or How to Position Elements on Overlays](<https://devfeed.tech/articles/catgpt-or-how-to-position-elements-on-overlays-38464.md>)

Original publisher: [Read original article](<https://eevis.codes/blog/2023-10-22/catgpt-or-how-to-position-elements-on-overlays/>)

Author: Eevis Panula

Published: 2023-10-22T06:55:09.601000Z

Content type: tutorial

Language: en

Sources: [Eevis Blog](<https://devfeed.tech/sources/eevis-blog.md>)

Topics: [constraintlayout](<https://devfeed.tech/topics/constraintlayout.md>), [Kotlin](<https://devfeed.tech/topics/kotlin.md>), [Code](<https://devfeed.tech/topics/code.md>)

Tags: [code](<https://devfeed.tech/tags/code.md>), [constraintlayout](<https://devfeed.tech/tags/constraintlayout.md>), [how-to](<https://devfeed.tech/tags/how-to.md>), [kotlin](<https://devfeed.tech/tags/kotlin.md>), [ui-components](<https://devfeed.tech/tags/ui-components.md>)

## AI overview

A tutorial showing how to position a reaction element as an overlay on a message in a Kotlin chat client. It demonstrates using a ConstraintLayout, references, and modifiers to anchor the reaction in the message component.

## Source excerpt

Have you ever wondered how to display an element with an overlay while keeping it in the same position? The same way that, for example, many messaging apps highlight the message you want to react to. I had this type of challenge in one of my work projects. It took some trial and error to get it working, but I was so proud of myself when I finally found the correct modifiers (and numbers). I want to share one way to do it with you in this blog post. The Example App Okay, I must say that I maybe, just maybe, got a little bit carried away with this example app. But it's a CatGPT - a chat client where you can ask anything from a cat. Here's a short video: This app is simple; It doesn't use any third-party APIs, so the cat in question lives in the code. The app has one Room database, where it stores messages, and it has one screen called ChatScreen which displays messages. If you want to see the code, the starting point for the app is in the starting-point-branch, and the final code is in CatGPT-repository's main-branch. Showing Reaction with Message To simplify this app, each message can have only one reaction. In the Message data class, the reaction is already present: // data/Message.kt @Entity data class Message( @PrimaryKey(autoGenerate = true) val id: Long = 0, val text: String = "", val sender: Sender = Sender.ME, @TypeConverters(ReactionConverter::class) val reaction: Reaction? = null, ) And it's a nullable Reaction-enum. The complete code and converters for Reaction are in Message.kt. Let's first add code for showing that reaction before building the actual reaction picker. In the MessageRow.kt-file, there is already a ConstraintLayout, which contains the component for the message. We want to show the reaction in the bottom right corner of that component, so we'll add the reaction inside the constraint layout. The component for reaction looks like this: // ui/components/MessageRow.kt message.reaction?.let { Text( modifier = Modifier .clip(ChatScreen.shape) .back