Create button in actionbar with text on it

Question

Currently I am showing score in my app like this. But I want to give some material effect or background to this text to improve look and feel. I want something like this, Is it possible to achieve this?

<?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/scorePointsText"
        android:title="@string/scorePoints"
        app:showAsAction="always" />
    <item
        android:id="@+id/scoreBoard"
        android:icon="@drawable/main_score"
        android:title="@string/scorePoints"
        app:showAsAction="always" />
</menu>

I inflated the action bar using above code.

I just gave an example that it can be circular. What I really want is to give some background to this text to improve look and feel of score. — Surabhi Choudhary, Feb 11 '18 at 10:42
Ok, I already described that in question. I am very new to android. I am sorry if this qn wasted your time. — Surabhi Choudhary, Feb 11 '18 at 11:22

score 1 · Answer 1 · answered Feb 11 '18 at 09:56

you can add a TextView on ImageView that is circule and put into AppBarLayout. and above Toolbar. like this:

<android.support.design.widget.AppBarLayout
        android:theme="@style/Base.ThemeOverlay.AppCompat.Dark"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextView
            android:id="@+id/textView"
            android:text="5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
        <ImageView
            android:id="@+id/Image_view"
            android:src="@drawable/circule"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar_single_poem"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_scrollFlags="scroll|enterAlways" />

    </android.support.design.widget.AppBarLayout>

score 0 · Accepted Answer · answered Feb 11 '18 at 12:01

0

try implementing toolbar like this

 <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar_single_poem"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_scrollFlags="scroll|enterAlways" >

      <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text = "5"
            android:layout_gravity = "right"
            android:background = "@drawable/circle"/>
</android.support.v7.widget.Toolbar>

answered Feb 11 '18 at 12:01

prat

284
1
3

1

While this code snippet may solve the question, [including an explanation](http://meta.stackexchange.com/questions/114762/explaining-entirely-‌code-based-answers) really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. – Rosário Pereira Fernandes Feb 11 '18 at 16:02

Create button in actionbar with text on it

2 Answers2