Search code examples
androidandroid-actionbar

Toolbar with back button, title, menu items with icon and text, update menu item text programmatically

I need an Action bar similar to this image.

enter image description here

Action bar should have--"Back button at Left side corner,Title of the activity at center,few menu items at the right side corner of Action bar."

I've tried using Custom Layout this aligns the ImageButton to the left but it is hiding the title.

If I use menu items then the left corner back button is missing..

  1. Custom Layout:

enter image description here

  1. Menu Items:

enter image description here

How could I achieve the Action bar with all these requirements.

EDIT

Answer:

I guess it could be done in 3 steps:

  1. As mentioned in accepted answer add toolbar.setDisplayHomeAsUpEnabled(true);
    to add the back button.
  2. Add Title and sub-title by toolbar.addTitle("text") and toolbar.addSubTitle("text")
  3. for icons to be visible on right side:
    By default menu icons are at right. if you want them to be visible in toolbar then in menu item add android:showAsAction="always".
    If it's value is set to "never" then items are added in those three dots.

Answer (after 4 years)

  1. Back button, title and inside overflow button are addressed earlier.
  2. Now, for icon with text and updating that text programmatically --> app:actionLayout="@layout/filter_icon"

menu.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <item
        android:id="@+id/clear"
        android:title="Clear"
        app:showAsAction="always" />

    <item
        android:id="@+id/filter"
        android:title="Filter"
        app:actionLayout="@layout/filter_icon"
        app:showAsAction="always" />

    <item
        android:title="Option"
        app:showAsAction="never" />
</menu>

filter_icon.xml

<?xml version="1.0" encoding="utf-8"?>

<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/count"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:drawableStart="@drawable/ic_filter"
    android:text="0"
    android:gravity="bottom"
    android:padding="8dp"
    android:textColor="@color/colorWhite"
    android:textSize="14sp" />

Code

override fun onCreateOptionsMenu(menu: Menu?): Boolean {
    menuInflater.inflate(R.menu.filter_menu, menu)
    countView = menu?.findItem(R.id.filter)?.actionView as TextView

    return super.onCreateOptionsMenu(menu)
}

fun updateMenuCount() {
    countView?.text = "${selectedCategoryHierarchy.size} "
}

Result

enter image description here

after update

enter image description here

Solution

  • Well certainly you don't need to implement a Custom Layout for your requirement. A toolbar is what you need.

    I can see from your image that you have given an image for the back button, which is not how it should be done. You just have to mention a parent activity in your manifest file under activity tag like this:

    android:parentActivityName="com.example.myapp.MainActivity"

    Then in your activity class write this(Instead of ActionBar you can use ToolBar also)

    ActionBar actionbar=getActionBar(); actionbar.setDisplayHomeAsUpEnabled(true);

    and back button automatically appears. Then you can add menu items which will be shown in right.

    See this tutorial for more reference.