0

In my application there will be in-app notifications and I wish for the amount of notifications to be displayed adjacent to the hamburger icon which opens the navigation drawer which contains the button to actually view the notifications.

The image below shows what I have at the moment

enter image description here

Below is the code which carries this out

<android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:minHeight="?attr/actionBarSize"
        android:background="@color/colorPrimary"
        android:layout_width="match_parent"
        app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        android:layout_height="wrap_content">

        <TextView
            android:id="@+id/notification"
            android:text="99"
            android:padding="1dp"
            android:background="@drawable/circle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="start|top"
            />

        <TextView
            android:id="@+id/toolbarTitle"
            android:text="test"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            />
    </android.support.v7.widget.Toolbar>

This is what I would like to achieve for now

enter image description here

As you can see the TextView is closer to the hamburger icon since the right padding of the icon has been reduced

This is my dream (if it can be possible) enter image description here

What I have tried

I have tried to adjust the contentInsetStart and contentInsetEnd as stated in this answer but did not work as I intended Android API 21 Toolbar Padding

Please help. Thanks!

EDIT 1: Adding negative left padding to text view

enter image description here

Community
  • 1
  • 1
Ersen Osman
  • 7,067
  • 8
  • 47
  • 80

2 Answers2

0

You could try setting a negative padding, i.e. 

<TextView
    android:id="@+id/notification"
    android:paddingLeft="-10dp"
    />
Ziem
  • 6,579
  • 8
  • 53
  • 86
natario
  • 24,954
  • 17
  • 88
  • 158
0

Yes it is possible. For that you just have to design a custom AppBar in which you have to put you hamburger icon and notification textView in a RelativeLayout. Then make hamburger icon centerInParent="true" and notification textView alignParentRight="true" and alignParentTop="true". Make sure that you use an ImageView for the hamburger icon and set its padding and margin to 0. And also use the image as a background resource and not as source for the ImageView. Like use android:background="@drawable/hamburger_icon" instead android:src="@drawable/hamburger_icon" in the ImageView. Let me know if it works for you.

Abhishek
  • 920
  • 13
  • 23
  • Could you give me a detailed example of how to make a custom AppBar please – Ersen Osman May 25 '15 at 12:24
  • Just design a layout file and use it as ActionBar by using this code -- getActionBar().setCustomView(R.layout.custom_action_bar); Use this link as a reference too. http://developer.android.com/guide/topics/ui/actionbar.html# – Abhishek May 25 '15 at 12:28