# Create the UI layouts and message adapter

## In this learning path

- [Introduction](https://learn.arm.com/learning-paths/mobile-graphics-and-gaming/android-ai-chat-lib/)
- [Create the Android project](https://learn.arm.com/learning-paths/mobile-graphics-and-gaming/android-ai-chat-lib/setup-1/)
- [Configure the AI Chat library dependency](https://learn.arm.com/learning-paths/mobile-graphics-and-gaming/android-ai-chat-lib/add-ai-chat-lib-2/)
- [Create the UI layouts and message adapter](https://learn.arm.com/learning-paths/mobile-graphics-and-gaming/android-ai-chat-lib/add-layouts-adapter-3/)
- [Implement the main activity logic](https://learn.arm.com/learning-paths/mobile-graphics-and-gaming/android-ai-chat-lib/use-lib-in-code-4/)
- [Download a model and run the app](https://learn.arm.com/learning-paths/mobile-graphics-and-gaming/android-ai-chat-lib/add-model-run-5/)
- [Next Steps](https://learn.arm.com/learning-paths/mobile-graphics-and-gaming/android-ai-chat-lib/_next-steps/)

## Create the main activity layout
Currently the `activity_main.xml` layout file in your `app\src\main\res\layout` directory is nearly empty, containing only a “Hello World!” text element. Replace the entire contents with the following XML, which creates a status area at the top, a message list in the middle, and a text input area with a send button at the bottom:

```xml
<?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"
    android:id="@+id/root"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/status_text"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        android:text="Loading model..."
        android:textAppearance="@style/TextAppearance.MaterialComponents.Body1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/messages"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginStart="16dp"
        android:layout_marginTop="12dp"
        android:layout_marginEnd="16dp"
        android:clipToPadding="false"
        android:paddingBottom="8dp"
        app:layout_constraintBottom_toTopOf="@+id/input_row"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/status_text" />

    <LinearLayout
        android:id="@+id/input_row"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:orientation="horizontal"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent">

        <EditText
            android:id="@+id/user_input"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:enabled="false"
            android:hint="Model is loading..."
            android:inputType="textMultiLine"
            android:maxLines="4"
            android:minHeight="48dp"
            android:padding="12dp" />

        <com.google.android.material.button.MaterialButton
            android:id="@+id/send_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="12dp"
            android:enabled="false"
            android:text="Import model" />
    </LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
```

## Create message bubble layouts
Create two helper layouts to format messages from the user and the AI assistant. In the `layout` folder alongside the main layout, first create `item_message_user.xml` and insert the following:

```xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingTop="6dp"
    android:paddingBottom="6dp">

    <TextView
        android:id="@+id/msg_content"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end"
        android:background="#D7F0FF"
        android:padding="12dp"
        android:textAppearance="@style/TextAppearance.MaterialComponents.Body1" />
</FrameLayout>
```

Then create `item_message_assistant.xml` and put the following as its contents:

```xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingTop="6dp"
    android:paddingBottom="6dp">

    <TextView
        android:id="@+id/msg_content"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="start"
        android:background="#EFEFEF"
        android:padding="12dp"
        android:textAppearance="@style/TextAppearance.MaterialComponents.Body1" />
</FrameLayout>
```

## Create the MessageAdapter class
Create a `MessageAdapter.kt` code file to bind chat messages to the appropriate layout. The file should sit alongside the `MainActivity` class that was auto-created with the project.

The package name below has to match that of your project name. If you named your project `simpleaichat`, you can copy the block without changes. If you named your project differently as you started out this Learning Path, make sure you update it after populating the file.

The file contents of `MessageAdapter.kt` are:

```kotlin
package com.example.simpleaichat

import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.TextView
import androidx.recyclerview.widget.RecyclerView

data class Message(
    val id: String,
    val content: String,
    val isUser: Boolean
)

class MessageAdapter(private val messages: List<Message>) : RecyclerView.Adapter<RecyclerView.ViewHolder>() {

    override fun getItemViewType(position: Int): Int {
        return if (messages[position].isUser) VIEW_TYPE_USER else VIEW_TYPE_ASSISTANT
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): RecyclerView.ViewHolder {
        val inflater = LayoutInflater.from(parent.context)
        return if (viewType == VIEW_TYPE_USER) {
            UserMessageViewHolder(inflater.inflate(R.layout.item_message_user, parent, false))
        } else {
            AssistantMessageViewHolder(inflater.inflate(R.layout.item_message_assistant, parent, false))
        }
    }

    override fun onBindViewHolder(holder: RecyclerView.ViewHolder, position: Int) {
        holder.itemView.findViewById<TextView>(R.id.msg_content).text = messages[position].content
    }

    override fun getItemCount(): Int = messages.size

    class UserMessageViewHolder(view: View) : RecyclerView.ViewHolder(view)
    class AssistantMessageViewHolder(view: View) : RecyclerView.ViewHolder(view)

    companion object {
        private const val VIEW_TYPE_USER = 1
        private const val VIEW_TYPE_ASSISTANT = 2
    }
}
```

Quickly going through the important parts:
- `Message` is the smallest useful chat piece: one id, the message text, and a flag saying whether it came from the user or the assistant.
- `getItemViewType(...)` decides which row layout to use for each message.
- `onCreateViewHolder(...)` inflates either the user bubble or the assistant bubble layout.
- `onBindViewHolder(...)` writes the current message text into the row.
- `getItemCount()` tells the `RecyclerView` how many chat rows it should render.

You’ve now created all the UI components for the chatbot: the main activity layout, message bubble layouts, and the adapter to display chat messages. In the next section, you’ll implement the main activity logic to integrate the AI Chat library and handle user interactions.