UIKit Android v3
UIKit Android
UIKit
Android
Home
/
UIKit
/
Android
This is the new Docs for UIKit v3 beta for Android. To see the previous Docs, click here.

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(headerThemeContext, headerInflater, parent, args);
        parent.addView(header);

        // Add `channelListLayout` to the bottom of `HeaderComponent`.
        final View channelListLayout = this.channelListComponent.onCreateView(listThemeContext, listInflater, 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(context, 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.

ModuleComponents

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

PromoteOperatorModule

SelectUserHeaderComponent

PromoteOperatorListComponent

StatusComponent

ModerationModule

HeaderComponent

ModerationListComponent

MemberListModule

HeaderComponent

MemberListComponent

StatusComponent

BannedUserListModule

HeaderComponent

BannedUserListComponent

StatusComponent

MutedMemberListModule

HeaderComponent

MutedMemberListComponent

StatusComponent

OperatorListModule

HeaderComponent

OperatorListComponent

StatusComponent

MessageSearchModule

MessageSearchHeaderComponent

MessageSearchListComponent

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 -> {
            ...
        });
        headerComponent.setOnRightButtonClickListener(v -> {
            ...
        });
    }

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

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()
    .setUseHeader(true)
    .setHeaderTitle("Channels")
    .setUseHeaderLeftButton(true)
    .setUseHeaderRightButton(true)
    .setHeaderLeftButtonIconResId(R.drawable.icon_arrow_left)
    .setHeaderRightButtonIconResId(R.drawable.icon_create)
    .setHeaderLeftButtonListener(leftButtonListener)
    .setHeaderRightButtonListener(rightButtonListener)
    .setChannelListAdapter(adapter)
    .setOnItemClickListener(itemClickListener)
    .setOnItemLongClickListener(itemLongClickListener)
    .setGroupChannelListQuery(query)
    .setEmptyIcon(R.drawable.icon_chat)
    .setEmptyText(R.string.empty_text)
    .build();