Customize style

There are two ways to customize the style of the UI in a view. You can either use the onConfigureParams class of the module and component or customize the style resource in UIKit.

Customize using the onConfigureParams class

The module is in charge of creating and managing the view of all fragments. If you want to set the parameters of the fragment before the view is created, you can do so through the onConfigureParams class of each module and component. We recommend that you customize through the onConfigureParams() method of the BaseModuleFragment() class. You can retrieve all parameters of onConfigureParams by calling the getParams() method of the module and component. Refer to the code below.

public class CustomChannelFragment extends ChannelFragment {
    @Override
    protected void onConfigureParams(@NonNull ChannelModule module, @NonNull Bundle args) {
        super.onConfigureParams(module, args);
        // TODO : Call `getParams()` of the component and set the values.
        module.getParams().setUseHeader(false);
        module.getHeaderComponent().getParams().setTitle("title");
        module.getMessageListComponent().getParams().setUseMessageGroupUI(true);
        module.getMessageInputComponent().getParams().setUseLeftButton(true);
        module.getStatusComponent().getParams().setEmptyText("emptyText");
    }
}

Note: The parameters must all be set before the onCreateView() method is called.

Customize using the style resource

Each module has a customizable style resource. The style of a module encompasses the style of all components within the module. Refer to codes below to see how to customize the style resource and apply it to the module.

Note: The same style customization method applies to all modules and components.

Inherit the style of the module or component that you wish to customize and change the values.

<resources>
    <!--  TODO : Customize the style of the module. -->
    <style name="CustomChannelStyle" parent="Module.Channel">
        <item name="sb_component_channel_message_input">@style/CustomMessageInputStyle</item>
    </style>

    <!--  TODO : Customize the style of the component. -->
    <style name="CustomMessageInputStyle" parent="Component.ChannelMessageInput">
        <item name="sb_message_input_left_button_icon">@drawable/icon_add</item>
    </style>
</resources>

Set the custom module style when creating a module through the onConfigureParams class.

public class CustomChannelFragment extends ChannelFragment {
    @NonNull
    @Override
    protected ChannelModule onCreateModule(@NonNull Bundle args) {
        // TODO : When creating a module, pass the custom style as an argument.
        return new ChannelModule(requireContext(), new ChannelModule.Params(requireContext(), R.style.Module_Channel));
    }
}

You can apply the custom module and component style shown above to the theme, which is made up of all combined styles. To learn more about UIKit themes, go to the Themes page.