CODEWITHSUNDEEP
androidandroid-actionbarandroid-toolbar
Uppa
Uppa

Reputation: 23

Put two buttons on left side of ActionBar in Android

I'm trying to build an ActionBar with two icons on left side of it, and the rest of them on the right side. These two items would be a logo, that when is clicked it redirects the user to the home page, and a back button, that when is clicked it redirects the user to the "Page Up". Logo should appear at the most left place, and the default back arrow should appear after.

Currently, I already achieved the "Page Up" functionality (with the default back arrow), and the item appears on left side, but I've been unsuccessful on putting the logo there too.

Here is what I have until now (code is simplified to focus on what matters to the question):

layout_action_bar.xml:

<!-- Custom layout for the action bar, so that we are able to center the text in it -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:orientation="vertical" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingRight="@dimen/action_bar_text_padding_right"
        android:id="@+id/txt_action_bar_title"
        android:singleLine="true"
        android:ellipsize="end"
        style="@style/Widget.ActionBar.Text"/>

</LinearLayout>

menu_base.xml (Not needed, but just to give context about what I have on the right side of ActionBar):

<menu xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:tools="http://schemas.android.com/tools"
      xmlns:app="http://schemas.android.com/apk/res-auto"
      tools:context=".BaseActivity">

     <item
        android:id="@+id/action_menu"
        android:icon="@drawable/ic_menu"
        android:orderInCategory="1"
        android:title="@string/menu_drawer_open_accessibility"
        app:showAsAction="always"/>

     <item android:id="@+id/search"
          android:title="@string/actionbar_search_button_tooltip"
          android:icon="@drawable/ic_navigation_search"
          app:showAsAction="always|collapseActionView"
          app:actionViewClass="androidx.appcompat.widget.SearchView"
        />

</menu>

menu_base is inflated onCreateOptionsMenu() and on that side of the ActionBar everything is ok.

BaseActivityMenu.java:

protected final void createMenu(CharSequence actionBarText) {
        
     ActionBar actionBar = getSupportActionBar();
     if(actionBar != null) {
          actionBar.setCustomView(R.layout.layout_action_bar);
          TextView title = actionBar.getCustomView().findViewById(R.id.txt_action_bar_title);
          title.setText(actionBarText);

          actionBar.setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);
          actionBar.setDisplayHomeAsUpEnabled(true);
          actionBar.setHomeButtonEnabled(false);
     }
}

Visually, this is what I have at the moment: My ActionBar

How can I achieve this?

Upvotes: 1

Views: 1026

Answers (1)

Harsh Modani
Harsh Modani

Reputation: 221

Inside your layout_action_bar.xml, add the following code in the LinearLayout:

<ImageButton
    android:id="@+id/homeBtn"
    android:layout_width="40dp"
    android:layout_height="40dp"
    android:background="@android:color/transparent"
    android:src="@drawable/ic_home"/>

<ImageButton
    android:id="@+id/topBtn"
    android:layout_width="40dp"
    android:layout_height="40dp"
    android:background="@android:color/transparent"
    android:src="@drawable/ic_back_up"/>

And then in your activity, add the following lines of code:

ImageButton toHome = actionBar.findViewById(R.id.homeBtn);
ImageButton toTop = actionBar.findViewById(R.id.topBtn);
toHome.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        //do what you want here
    }
});
toTop.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        //do what you want here
    }
});

Upvotes: 1

Related Questions