# 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

{% tabs %}
{% tab title="your\_custom\_navbar\_layout.xml" %}

```markup
<?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>
```

{% endtab %}
{% endtabs %}

#### 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.

{% tabs %}
{% tab title="YourCustomNavBarFragment.java" %}

```java
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
    }
}
```

{% endtab %}

{% tab title="YourCustomNavBarFragment.kt" %}

```kotlin
import io.taptalk.TapTalk.View.Fragment.TapBaseChatRoomCustomNavigationBarFragment

class MeetTalkChatRoomNavigationBarFragment : TapBaseChatRoomCustomNavigationBarFragment() {

    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        // Return your custom layout
        return inflater.inflate(R.layout.your_custom_navbar_layout, container, false)
    }

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        // Setup your views here
    }
}
```

{% endtab %}
{% endtabs %}

#### 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:

{% tabs %}
{% tab title="YourCustomNavBarFragment.java" %}

```java
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
    }
}
```

{% endtab %}

{% tab title="YourCustomNavBarFragment.kt" %}

```kotlin
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

class MeetTalkChatRoomNavigationBarFragment : TapBaseChatRoomCustomNavigationBarFragment() {

    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        // Return your custom layout
        return inflater.inflate(R.layout.your_custom_navbar_layout, container, false)
    }

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        // Setup your views here
    }
    
    // Override callback methods from TapBaseChatRoomCustomNavigationBarFragment below

    override fun onReceiveUpdatedChatRoomData(room: TAPRoomModel?, recipientUser: TAPUserModel?, onlineStatus: TAPOnlineStatusModel?) {
        // 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 fun onReceiveStartTyping(roomID: String, user: TAPUserModel) {
        // 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 fun onReceiveStopTyping(roomID: String, user: TAPUserModel) {
        // 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 fun onReceiveOnlineStatus(user: TAPUserModel, isOnline: Boolean, lastActive: Long) {
        // 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 fun onShowMessageSelection(selectedMessages: List<TAPMessageModel>) {
        // This callback is called when user opens a multiple message selection in the chat room, such as selecting forward messages
    }

    override fun onHideMessageSelection() {
        // This callback is called when multiple message selection in the chat room is closed
    }
}
```

{% endtab %}
{% endtabs %}

#### 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.

```java
// 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:

{% tabs %}
{% tab title="Application.java" %}

```java
import io.taptalk.TapTalk.Helper.TapTalk;
import io.taptalk.TapTalk.Manager.TapUI;
import io.taptalk.TapTalk.Listener.TapUIChatRoomCustomNavigationBarListener;
import io.taptalk.TapTalk.View.Fragment.TapBaseChatRoomCustomNavigationBarFragment;
import io.taptalk.TapTalk.Model.TAPRoomModel;
import io.taptalk.TapTalk.Model.TAPUserModel;

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();
            }
        });
    }
}
```

{% endtab %}

{% tab title="Application.kt" %}

<pre class="language-kotlin"><code class="lang-kotlin">import io.taptalk.TapTalk.Helper.TapTalk
import io.taptalk.TapTalk.Manager.TapUI
import io.taptalk.TapTalk.Listener.TapUIChatRoomCustomNavigationBarListener
import io.taptalk.TapTalk.View.Fragment.TapBaseChatRoomCustomNavigationBarFragment
import io.taptalk.TapTalk.Model.TAPRoomModel
import io.taptalk.TapTalk.Model.TAPUserModel

class YourApplication : Application() {

    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        // Return your custom layout
        return inflater.inflate(R.layout.your_custom_navbar_layout, container, false)
    }

    override fun onCreate() {
        super.onCreate()
        
        TapTalk.init(...)
        
        // Implement listener
        TapUI.getInstance().addChatRoomCustomNavigationBarListener(object : TapUIChatRoomCustomNavigationBarListener() {
<strong>            override fun setCustomChatRoomNavigationBar(
</strong>                activity: Activity,
                room: TAPRoomModel,
                activeUser: TAPUserModel,
                recipientUser: TAPUserModel?
            ): TapBaseChatRoomCustomNavigationBarFragment {
                // Return your custom navigation bar fragment
                return new YourCustomNavBarFragment();
            }
        });
    }
}
</code></pre>

{% endtab %}
{% endtabs %}

{% hint style="info" %}
**`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.
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.taptalk.io/powertalk-chat-sdk-documentation/powertalk-android/customize-navigation-bar.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.