Customize style resources

The style resource is a collection of styles applied to UIKit by default. There are three different styles that the UIKit provides: Module, Component, and Widget.Sendbird. You can customize them by inheriting the UIKit-defined style components and overriding the res/values/styles.xml file, which consists of the following xml elements.

Note: To apply the Dark theme, you can use the res/values/styles_dark.xml file, which includes Module.Dark, Component.Dark, and Widget.Sendbird.Dark. As for open channels, you can apply the overlay_mode style by using the res/values/styles_overlay.xml file, which contains Module.Overlay, Component.Overlay, and Widget.Sendbird.Overlay.

Module

Each key function has a corresponding style and the same style that's applied to the components is applied to the module. In order to customize the style of a module, you need to first inherit the component's style and create a new custom style. Then, you can apply the custom style to the module by either overwriting the default style or inheriting the style in the theme.

<resources>
    <!-- MODULES -->
    <style name="Module"/>
    <style name="Module.BannedUserList">
    </style>
    <style name="Module.ChannelList">
    </style>
    <style name="Module.Channel">
    </style>
    <style name="Module.ChannelSettings">
    </style>
    <style name="Module.CreateChannel">
    </style>
    <style name="Module.InviteUser">
    </style>
    <style name="Module.MemberList">
    </style>
    <style name="Module.MessageSearch">
    </style>
    <style name="Module.Moderation">
    </style>
    <style name="Module.MutedMemberList">
    </style>
    <style name="Module.OpenChannel">
    </style>
    <style name="Module.OpenChannelSettings">
    </style>
    <style name="Module.OperatorList">
    </style>
    <style name="Module.ParticipantList">
    </style>
    <style name="Module.RegisterOperator">
    </style>
</resources>

Component

The style of each component contains the same values as the style of the corresponding module. In UIKit for Android, the smallest unit of style that you can customize is the component. In order to customize the style of a component, you need to first inherit the component's style and create a new custom style. Then, you can apply the custom style to the component by either overwriting the default style in the module or applying it to the theme.

There's an exception to applying styles to list type components such as messageListComponent. Since you need to apply the style to each component's ViewHolder through the adapter, you must use the Widget.Sendbird.

<resources>
    <!-- COMPONENTS -->
    <style name="Component"/>
    <style name="Component.List">
    </style>
    <style name="Component.Header">
    </style>
    <style name="Component.Header.State">
    </style>
    <style name="Component.Status">
    </style>

    <style name="Component.Header.BannedUserList">
    </style>
    <style name="Component.List.BannedUserList">
    </style>
    <style name="Component.Status.BannedUserList">
    </style>

    <style name="Component.Header.ChannelList">
    </style>
    <style name="Component.List.ChannelList">
    </style>
    <style name="Component.Status.ChannelList">
    </style>

    <style name="Component.Header.Channel">
    </style>
    <style name="Component.List.Channel">
    </style>
    <style name="Component.ChannelMessageInput">
    </style>
    <style name="Component.Status.Channel">
    </style>

    <style name="Component.Header.State.ChannelSettings">
    </style>
    <style name="Component.ChannelSettingsInfo">
    </style>
    <style name="Component.ChannelSettingsMenu">
    </style>

    <style name="Component.Header.State.CreateChannel">
    </style>
    <style name="Component.List.CreateChannel">
    </style>
    <style name="Component.Status.CreateChannel">
    </style>

    <style name="Component.Header.State.InviteUser">
    </style>
    <style name="Component.List.InviteUser">
    </style>
    <style name="Component.Status.InviteUser">
    </style>

    <style name="Component.Header.MemberList">
    </style>
    <style name="Component.List.MemberList">
    </style>
    <style name="Component.Status.MemberList">
    </style>

    <style name="Component.MessageSearchHeader">
    </style>
    <style name="Component.List.MessageSearch">
    </style>
    <style name="Component.Status.MessageSearch">
    </style>

    <style name="Component.Header.Moderation">
    </style>
    <style name="Component.ModerationList">
    </style>

    <style name="Component.Header.MutedMemberList">
    </style>
    <style name="Component.List.MutedMemberList">
    </style>
    <style name="Component.Status.MutedMemberList">
    </style>

    <style name="Component.Header.OpenChannel">
    </style>
    <style name="Component.List.OpenChannel">
    </style>
    <style name="Component.OpenChannelMessageInput">
    </style>
    <style name="Component.Status.OpenChannel">
    </style>

    <style name="Component.Header.State.OpenChannelSettings">
    </style>
    <style name="Component.OpenChannelSettingsInfo">
    </style>
    <style name="Component.OpenChannelSettingsMenu">
    </style>

    <style name="Component.Header.OperatorList">
    </style>
    <style name="Component.List.OperatorList">
    </style>
    <style name="Component.Status.OperatorList">
    </style>

    <style name="Component.Header.ParticipantList">
    </style>
    <style name="Component.List.ParticipantList">
    </style>
    <style name="Component.Status.ParticipantList">
    </style>

    <style name="Component.Header.State.RegisterOperator">
    </style>
    <style name="Component.List.RegisterOperator">
    </style>
    <style name="Component.Status.RegisterOperator">
    </style>
</resources>

The Widget.Sendbird style is applied to each type of view in UIKit for Android. It includes the style of a list's ItemView and the style of dialog and toast views in the form of widgets. Theses styles, except for widgets used in the ItemView, cannot be set through the theme. You must set and customize each style in the view.

<resources>
    <!-- WIDGETS -->
    <style name="Widget.Sendbird" parent="android:Widget"/>
    <style name="Widget.Sendbird.SendbirdProgressDialog">
    </style>
    <style name="Widget.Sendbird.ChannelPreview">
    </style>
    <style name="Widget.Sendbird.SelectUserPreview">
    </style>
    <style name="Widget.Sendbird.UserPreview">
    </style>

    <!-- Message -->
    <style name="Widget.Sendbird.Message">
    </style>
    <style name="Widget.Sendbird.OgTagView">
    </style>
    <style name="Widget.Sendbird.Message.Me">
    </style>
    <style name="Widget.Sendbird.Message.Other">
    </style>
    <style name="Widget.Sendbird.Message.Me.User">
    </style>
    <style name="Widget.Sendbird.Message.Other.User">
    </style>
    <style name="Widget.Sendbird.Message.Me.File">
    </style>
    <style name="Widget.Sendbird.Message.Other.File">
    </style>
    <style name="Widget.Sendbird.Message.Admin">
    </style>
    <style name="Widget.Sendbird.Message.Timeline">
    </style>
    <style name="Widget.Sendbird.Emoji">
    </style>
    <style name="Widget.Sendbird.SelectChannelTypeView">
    </style>
    <style name="Widget.Sendbird.UserProfile">
    </style>
    <style name="Widget.Sendbird.ToastView">
    </style>

    <!-- DialogView -->
    <style name="Widget.Sendbird.DialogView">
    </style>
    <style name="Sendbird.Dialog" parent="Widget.Sendbird">
    </style>
    <style name="Sendbird.Dialog.Bottom">
    </style>
    <style name="Animation"/>
    <style name="Animation.Sendbird.Dialog" parent="Animation">
    </style>
    <style name="Widget.Sendbird.MessagePreview">
    </style>

    <!-- OpenChannel -->
    <style name="Widget.Sendbird.OpenChannel"/>
    <style name="Widget.Sendbird.OpenChannel.OgTag">
    </style>
    <style name="Widget.Sendbird.OpenChannel.Message">
    </style>
    <style name="Widget.Sendbird.OpenChannel.Message.User">
    </style>
    <style name="Widget.Sendbird.OpenChannel.Message.File">
    </style>
    <style name="Widget.Sendbird.OpenChannel.Message.Admin">
    </style>
</resources>

For an in-depth practical demonstration, see our sample code.

On this page

Module Component Widget.Sendbird

Sample app