Audio Recording Support

Introduction

The UI Components Chat SDK provides the flexibility to customize the visual presentation of audio recording. You can personalize the way audio recording is displayed and make it more unique according to your preferences and requirements.

Customization

MessageComposerView in Chat UI Components serves as the container where audio recording functionality is rendered. It provides the necessary components and elements to handle the recording process and display relevant user interface elements related to audio recording.

Theming

We'll start changing it by replacing the stock play button in favor of a flatter, semi-transparent design.

First, let's display enabled audio recording button by setting streamUiMessageComposerAudioRecordingButtonVisible and streamUiMessageComposerAudioRecordingButtonEnabled to true in our MessageComposerViewTheme:

<style name="MessageComposerViewTheme" parent="StreamUi.MessageComposerView">
    <item name="streamUiMessageComposerAudioRecordingButtonVisible">true</item>
    <item name="streamUiMessageComposerAudioRecordingButtonEnabled">true</item>
</style>

This will show the microphone button in the MessageComposerView next to the send button.

If you want to show the send button only when there's text in the input, you can do that by setting streamUiMessageComposerAudioRecordingButtonPreferred to true in the MessageComposerViewTheme. This way, the send button will only be visible when there's something typed in the composer.

<style name="MessageComposerViewTheme" parent="StreamUi.MessageComposerView">
    <item name="streamUiMessageComposerAudioRecordingButtonVisible">true</item>
    <item name="streamUiMessageComposerAudioRecordingButtonEnabled">true</item>
    <item name="streamUiMessageComposerAudioRecordingButtonPreferred">true</item>
</style>

note

Only certain attributes were used here, you can find the rest in the source code here and here .

Next, add it to your Stream theme:

<style name="StreamTheme" parent="@style/StreamUiTheme">
    <item name="streamUiMessageComposerViewStyle">@style/MessageComposerViewTheme</item>
</style>

And finally, override streamUiTheme:

<style name="AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
    <item name="streamUiTheme">@style/StreamTheme</item>
</style>

XML Attributes

The same result can be achieved by using XML attributes directly on the MessageComposerView:

<io.getstream.chat.android.ui.feature.messages.composer.MessageComposerView
    android:id="@+id/messageComposerView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:streamUiMessageComposerAudioRecordingButtonVisible="true"
    app:streamUiMessageComposerAudioRecordingButtonEnabled="true"
    app:streamUiMessageComposerAudioRecordingButtonPreferred="true"
    />

note

Only certain attributes were used here, you can find the rest in the source code here and here .

TransformStyle

The last but not least option is to use TransformStyle to modify the audio recording functionality:

Kotlin

TransformStyle.messageComposerStyleTransformer = StyleTransformer { defaultStyle ->
    defaultStyle.copy(
        audioRecordingButtonVisible = true,
        audioRecordingButtonEnabled = true,
        audioRecordingButtonPreferred = true,
    )
}

Java

TransformStyle.setMessageComposerStyleTransformer(source -> {
    // Customize the style
    return source;
});

note

Only certain attributes were used here, you can find the rest in the source code here and here .