Modules | UIKit Android SDK

UIKit Android v3

UIKit Android

UIKit

Android

Version 3

Home

UIKit

Android

Modules

In v3 of UIKit for Android, you need a module and components to create a view. Components are the smallest unit of customizable views that can make up a whole screen and the module coordinates these components to be shown as the fragment's view. Each module also has its own customizable style per screen. You can change these style resources to create and customize your own module.

Create a view

To compose the screen of the fragment, you need to first create a view. In UIKit for Android, each screen has a module that can build a view. When the onCreate() method of the fragment is called, it first creates a module. Then using the module, the fragment automatically builds a view by calling the onCreateView() method. Refer to the codes below to see how a module uses different components to compose a screen.

Note: All modules in UIKit inherit the BaseModule class and components are created simultaneously as when the module is created.

public class ChannelListModule extends BaseModule {
    private HeaderComponent headerComponent;
    private ChannelListComponent channelListComponent;

    @Override
    public View onCreateView(Context context, LayoutInflater inflater, 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);

        // Add `HeaderComponent` to the top of screen.
        final View header = this.headerComponent.onCreateView(context, inflater, parent, args);
        parent.addView(header);

        // Add `channelListLayout` to the bottom of `HeaderComponent`.
        final View channelListLayout = this.channelListComponent.onCreateView(context, inflater, parent, args);
        parent.addView(channelListLayout);
        return parent;
    }
}

The view created from the module above is then used as a view in the fragment to display the screen.

public abstract class BaseModuleFragment extends Fragment {
    private BaseModule module;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        this.module = onCreateModule(getArguments());
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        // Use the view created from the module.
        return module.onCreateView(getContext(), inflater, getArguments());
    }

    protected abstract BaseModule onCreateModule(Bundle args);
}

Modules and their components

The following table shows a list of all components used in each module.

Module	Components
ChannelListModule	HeaderComponent ChannelListComponent StatusComponent
ChannelModule	ChannelHeaderComponent MessageListComponent MessageInputComponent StatusComponent
OpenChannelModule	OpenChannelHeaderComponent OpenChannelMessageListComponent OpenChannelMessageInputComponent StatusComponent
CreateChannelModule	SelectUserHeaderComponent CreateChannelUserListComponent StatusComponent
ChannelSettingsModule	ChannelSettingsHeaderComponent ChannelSettingsInfoComponent ChannelSettingsMenuComponent
OpenChannelSettingsModule	OpenChannelSettingsHeaderComponent OpenChannelSettingsInfoComponent OpenChannelSettingsMenuComponent
InviteUserModule	SelectUserHeaderComponent InviteUserListComponent StatusComponent
RegisterOperatorModule	SelectUserHeaderComponent RegisterOperatorListComponent StatusComponent
OpenChannelRegisterOperatorModule	SelectUserHeaderComponent OpenChannelRegisterOperatorListComponent StatusComponent
ModerationModule	HeaderComponent ModerationListComponent
OpenChannelModerationModule	HeaderComponent OpenChannelModerationListComponent
MemberListModule	HeaderComponent MemberListComponent StatusComponent
BannedUserListModule	HeaderComponent BannedUserListComponent StatusComponent
OpenChannelBannedUserListModule	HeaderComponent OpenChannelBannedUserListComponent StatusComponent
MutedMemberListModule	HeaderComponent MutedMemberListComponent StatusComponent
OpenChannelMutedParticipantListModule	HeaderComponent OpenChannelMutedParticipantListComponent StatusComponent
OperatorListModule	HeaderComponent OperatorListComponent StatusComponent
OpenChannelOperatorListModule	HeaderComponent OpenChannelOperatorListComponent StatusComponent
MessageSearchModule	MessageSearchHeaderComponent MessageSearchListComponent StatusComponent
MessageThreadModule	MessageThreadHeaderComponent ThreadListComponent MessageThreadInputComponent StatusComponent
ParticipantListModule	HeaderComponent ParticipantListComponent StatusComponent

Set initial data values of a view

The initial data values of a view, such as UI-related resources, need to be set before creating the view because they decide what values the onConfigureParams class of the module and components will be. After the view has been created, you can bind event handlers to each component using an onBind* method, such as onBindHeaderComponent, so that the fragment can receive events that occur in the view. If you want to override and set your own event handler to the component, we recommend you to do so after the onBind* method has already been called. Refer to the code below to see how ChannelListFragment binds event handlers to the HeaderComponent and ChannelListComponent.

Note: If you're using a custom fragment and have overrided the onBeforeReady() method, you need to call super.onBeforeReady() in order to use the binding method of the component.

public class ChannelListFragment extends BaseModuleFragment<ChannelListModule, ChannelListViewModel> {

    // Call from `onBeforeReady()`.
    protected void onBindHeaderComponent(HeaderComponent headerComponent, ChannelListViewModel viewModel) {
        headerComponent.setOnLeftButtonClickListener(v -> {
            // Implement callback method.
        });
        headerComponent.setOnRightButtonClickListener(v -> {
            // Implement callback method.
        });
    }

    // Call from `onBeforeReady()`.
    protected void onBindChannelListComponent(ChannelListComponent channelListComponent, ChannelListViewModel viewModel) {
        channelListComponent.setOnItemClickListener((view, position, channel) -> {
            // Implement callback method.
        });
        channelListComponent.setOnItemLongClickListener((view, position, channel) -> {
            // Implement callback method.
        });
    }
}

If you wish to customize default data and event handlers used in the modules and components, you can change the APIs of each fragment's builder class. There are some APIs in the builder that allows you to create fragments, modules, and components without the need for customization. Refer to the code below to see a list of all APIs in a builder.

final ChannelListFragment fragment = new ChannelListFragment.Builder()
    .withArguments(args)
    .setCustomFragment(new CustomChannelListFragment())
    .setUseHeader(true)
    .setHeaderTitle("Channels")
    .setUseHeaderLeftButton(true)
    .setUseHeaderRightButton(true)
    .setHeaderLeftButtonIconResId(R.drawable.icon_arrow_left)
    .setHeaderRightButtonIconResId(R.drawable.icon_create)
    .setOnHeaderLeftButtonClickListener(leftButtonListener)
    .setOnHeaderRightButtonClickListener(rightButtonListener)
    .setChannelListAdapter(adapter)
    .setOnItemClickListener(itemClickListener)
    .setOnItemLongClickListener(itemLongClickListener)
    .setGroupChannelListQuery(query)
    .setEmptyIcon(R.drawable.icon_chat)
    .setEmptyText(R.string.empty_text)
    .setErrorText(R.string.sb_text_error_retry_request)
    .build();