Customize Navigation Bar

When TapTalk.io framework is integrated to your app with the UI/combine implementation method, you can customize chat room's navigation bar layout to your preferences.

Customize Chat Room Navigation Bar

You can follow the steps below to customize chat rooms' navigation bar layout in your app.

1. Create your custom navigation bar XML layout

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize">

    <!--Customize and add more layouts here-->

</android.support.constraint.ConstraintLayout>

2. Create your custom navigation bar fragment

Create a new fragment file inside your project folder, and set it to extend TapBaseChatRoomCustomNavigationBarFragment.

Then override onCreateView() and return your custom layout.

import io.taptalk.TapTalk.View.Fragment.TapBaseChatRoomCustomNavigationBarFragment;

public class MeetTalkChatRoomNavigationBarFragment extends TapBaseChatRoomCustomNavigationBarFragment {
    
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        // Return your custom layout
        return inflater.inflate(R.layout.your_custom_navbar_layout, container, false);
    }

    @Override
    public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
        // Setup your views here
    }
}

3. Implement callbacks from base navigation fragment class to update UI

TapBaseChatRoomCustomNavigationBarFragment class is a helper fragment class that implements TapCoreChatRoomListener to listen to chat room related callbacks from PowerTalk SDK.

The class will then handle and redirect the callbacks to the following functions, which provide the required data that you can make use of for your own custom navbar class to display and update UI elements in the custom navigation bar.

You can override the callbacks functions from the TapBaseChatRoomCustomNavigationBarFragment class to your own custom navbar class:

import io.taptalk.TapTalk.View.Fragment.TapBaseChatRoomCustomNavigationBarFragment;
import io.taptalk.TapTalk.Model.TAPMessageModel;
import io.taptalk.TapTalk.Model.TAPOnlineStatusModel;
import io.taptalk.TapTalk.Model.TAPRoomModel;
import io.taptalk.TapTalk.Model.TAPUserModel;

public class MeetTalkChatRoomNavigationBarFragment extends TapBaseChatRoomCustomNavigationBarFragment {
    
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        // Return your custom layout
        return inflater.inflate(R.layout.your_custom_navbar_layout, container, false);
    }

    @Override
    public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
        // Setup your views here
    }
    
    // Override callback methods from TapBaseChatRoomCustomNavigationBarFragment below
    
    @Override
    public void onReceiveUpdatedChatRoomData(TAPRoomModel room, @Nullable TAPUserModel recipientUser, TAPOnlineStatusModel onlineStatus) {
        // This callback is called when PowerTalk SDK receives updated chat room data through server or socket
        // Here you can update the display of your custom view given the updated data
        // Please note that recipientUser's value could be null at some cirscumstances, such in a group room
    }

    @Override
    public void onReceiveStartTyping(String roomID, TAPUserModel user) {
        // This callback is called when a participant in the current room starts typing
        // Here you can optionally show typing view in your custom navbar
    }

    @Override
    public void onReceiveStopTyping(String roomID, TAPUserModel user) {
        // This callback is called when a participant in the current room stops typing
        // Here you can optionally hide typing view in your custom navbar
    }

    @Override
    public void onReceiveOnlineStatus(TAPUserModel user, Boolean isOnline, Long lastActive) {
        // This callback is called when a participant's online status in the current room is updated
        // Here you can optionally update online status view in your custom navbar
    }

    @Override
    public void onShowMessageSelection(List<TAPMessageModel> selectedMessages) {
        // This callback is called when user opens a multiple message selection in the chat room, such as selecting forward messages
    }

    @Override
    public void onHideMessageSelection() {    
        // This callback is called when multiple message selection in the chat room is closed
    }
}

4. Make use of base navigation bar manager properties

TapBaseChatRoomCustomNavigationBarFragment also provides some properties that you can make use of to display UI elements in your custom navbar class.

You can call any of these properties provided below to help displaying your custom navbar.

// Room data of the currently open chat room
TAPRoomModel room;

// Other user's data in personal chat room
// Value could be null when currently active room is not personal
TAPUserModel recipientUser;

// Online status data of the recipient user
// Value could be null when currently active room is not personal
TAPOnlineStatusModel onlineStatus;

// Linked HashMap containing currently typing users in the chat room
LinkedHashMap<String, TAPUserModel> typingUsers;

The values of the properties above will also be updated when any related callbacks from PowerTalk SDK is received.

5. Implement TapUIChatRoomCustomNavigationBarListener

After you finished setting up your custom-made navigation bar, you will need to implement a listener from TapUI that will be invoked when the user opens a chat room. You can then return your custom navigation bar fragment through the callback function.

To do this, call the addChatRoomCustomNavigationBarListener method from TapUI class after you have initialized TapTalk. You can check the example below:

public class YourApplication extends Application {
    
    @Override
    public void onCreate() {
        super.onCreate();
        
        TapTalk.init(...);
        
        // Implement listener
        TapUI.getInstance().addChatRoomCustomNavigationBarListener(new TapUIChatRoomCustomNavigationBarListener() {
            @Override
            public TapBaseChatRoomCustomNavigationBarFragment setCustomChatRoomNavigationBar(
                Activity activity, 
                TAPRoomModel room, 
                TAPUserModel activeUser, 
                @Nullable TAPUserModel recipientUser
            ) {
                // Return your custom navigation bar fragment
                return new YourCustomNavBarFragment();
            }
        });
    }
}

setCustomChatRoomNavigationBar callback from TapUIChatRoomCustomNavigationBarListener returns a TapBaseChatRoomCustomNavigationBarFragment as a value. If you do not implement this callback or return a null, PowerTalk SDK will display the default chat room navigation bar.

PreviousCustomize Chat Message BubbleNextDeep Linking

Last updated

#621:

Change request updated