Customize the layout

To change the layout of the view in UIKit, you can customize either the module or the component. The following table shows when to customize module or component.

Module or component	When to customize
Module	Reorganize the placement of components or add new layouts other than the basic components provided by UIKit.
Component	Change the layout of a specific part of the component.

Customize module

See the codes below to learn how to inherit a module to create a custom module and apply it to the fragment.

Note: ChannelModule is used as an example in the codes but you can replace it with any other modules in UIKit.

You must inherit ChannelModule and override the onCreateView() method first before calling the onCreateView() method of the components to build a new layout.

public class CustomChannelModule extends ChannelModule {

    @NonNull
    @Override
    public View onCreateView(@NonNull Context context, @NonNull LayoutInflater inflater, @Nullable Bundle args) {
        final LinearLayout parent = new LinearLayout(context);
        parent.setLayoutParams(new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
        parent.setOrientation(LinearLayout.VERTICAL);

        View headerView = getHeaderComponent().onCreateView(context, inflater, parent, args);
        View listView = getMessageListComponent().onCreateView(context, inflater, parent, args);
        View inputView = getMessageInputComponent().onCreateView(context, inflater, parent, args);
        View statusView = getStatusComponent().onCreateView(context, inflater, parent, args);

        // TODO : Use the components to build a layout. You can add your own view to the layout and choose not to use the provided components.
        // For example, you can write `parent.addView(headerView);` or `parent.addView(listView);`.

        return parent;
    }
}

Override the onCreateModule() method in the custom fragment to create a custom module. Then, return the new custom module to use it when calling getModule().

public class CustomChannelFragment extends ChannelFragment {
    @NonNull
    @Override
    protected ChannelModule onCreateModule(@NonNull Bundle args) {
        return new CustomChannelModule(requireContext());
    }
}

Customize component

See the codes below to learn how to customize a component and apply the custom view to the fragment.

Note: MessageInputComponent is used as an example in the codes but you can replace it with any other components in UIKit.

Inherit MessageInputComponent and override the onCreateView() method first to create a custom view. Then, return the new component.

public class CustomMessageInputComponent extends MessageInputComponent {
    @NonNull
    @Override
    public View onCreateView(@NonNull Context context, @NonNull LayoutInflater inflater, @NonNull ViewGroup parent, @Nullable Bundle savedInstanceState) {
        // TODO : Use either `inflater` or `context` parameter to create a custom view and return it.
        return inflater.inflate(R.layout.custom_message_input, parent, false);
    }
}

Override the onCreateModule() method in the custom fragment to customize a component and apply it to the module.

public class CustomChannelFragment extends ChannelFragment {
    @NonNull
    @Override
    protected ChannelModule onCreateModule(@NonNull Bundle args) {
        final ChannelModule module = super.onCreateModule(args);
        // TODO : Set the custom `MessageInputComponent` here.
        module.setInputComponent(new CustomMessageInputComponent());
        return module;
    }
}