Add a TextView to the elements of a Toolbar

Question

I have made a material design toolbar. The menu item includes a cart. I want a number to be shown along with the cart icon indicating the number of items present in the cart.

toolbar.xml

 <?xml version="1.0" encoding="utf-8"?>
 <android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:theme="@style/ThemeOverlay.AppCompat.Light"
android:id="@+id/tool_bar"
android:elevation="6dp">

menu_cart.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/action_cart" android:icon="@drawable/bag"
    android:title="Cart"
    android:orderInCategory="100" app:showAsAction="always" />
    </menu>

The textview should be visible on top of the cart icon hiding it a bit,maybe. Not as a textview beside the cart icon.

Something like this -

for this use you should use coordinativelayout, into it relativelayout, put an white bag drawable, in right bottom corner blue circle. TextView would be set as alignParentCenter of this blue circle — piotrek1543, Dec 28 '15 at 17:49
@piotrek1543 Could you show this to me with the help of some code please. — TeeKay, Dec 28 '15 at 17:53

piotrek1543 · Accepted Answer · 2015-12-28T19:03:04.200

First, please learn how to create your own customized toolbar.

Search for topics like this: http://code.tutsplus.com/tutorials/getting-started-with-android-creating-a-customized-toolbar--cms-24223

Then you can create your toolbar as below ;-)

Here is an example of your wannabe toolbar

        <ImageView
            android:id="@+id/shopping_bag"
            android:layout_width="44dp"
            android:layout_height="44dp"
            android:src="@drawable/bag"
            android:layout_alignParentLeft="true"
            android:layout_centerInParent="true"></ImageView>

        <ImageView
            android:id="@+id/arrow"
            android:layout_width="48dp"
            android:layout_height="wrap_content"
            android:src="@drawable/usability_bidirectionality_guidelines_when3"
            android:layout_alignParentRight="true"></ImageView>

        <ImageView
            android:id="@+id/number"
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:src="@drawable/one"
            android:layout_alignTop="@+id/shopping_bag"
            android:layout_alignRight="@+id/shopping_bag"/>

    </RelativeLayout>

and it looks like:

To have a better look, find Material Design inspired icons.

Hope it help

Where do i have to add thsi code? In the tool_bar.xml?\ – TeeKay Dec 28 '15 at 18:52 — TeeKay, Dec 28 '15 at 18:52

Add a TextView to the elements of a Toolbar

1 Answers1

Linked