Change Toolbar Text Size (CTTS)


CTTS:   SOLD       



Hi dev, a little bit of sharing a silly experience when holding the title of the newbietol android developer. This story begins when I wanted to try changing the size of the title action bar, I didn't know that it also affected the text in the toolbar menu item.

Long story short, I made some small attempts to solve the problem. Okay, as an illustration, here is the scope of the code.

Menu Item

    android:id="@+id/try"
    app:showAsAction="ifRoom"
    android:title="0"
    />

Styles Xml

<style name="ActionBar.nameText" parent="TextAppearance.AppCompat.Widget.ActionBar.Title">
        <item name="android:textSize">50sp</item>
        <item name="android:textStyle">bold</item>
    </style>

Toolbar

android.support.v7.widget.Toolbar

        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        android:elevation="4dp"
        android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
android:titleTextAppearance="@style/ActionBar.nameText"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"

        />

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"

        android:id="@+id/header">


        <Button
            android:id="@+id/level_text"
            android:background="@drawable/levelstar"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:text="15"
            android:textSize="15sp"
            android:layout_centerHorizontal="true"/>

        />

    </RelativeLayout>

Preview

There are two ways to solve this problem depending on the desired result, whether functionally or just UI-wise.

Solution 1

Create a custom style specifically for popup menus. This style allows altering/overriding parameters in menu items, applicable to ALL menu items.

Style 1

<style name="MyMenu">
    <item name="android:textSize">17sp</item> //size desired.
    <item name="android:textColor">@color/colorAccent</item> //font color
    <item name="android:background">#FFFFFF</item> //background
</style>

Apply the style in your toolbar.

<android.support.v7.widget.Toolbar
  android:id="@+id/toolbar"
  android:layout_width="match_parent"
  android:layout_height="?attr/actionBarSize"
  android:background="?attr/colorPrimary"
  app:popupTheme="@style/MyMenu" //Important line/>

The result,

Solution 2

You can do it programmatically to set the size of each menu item. You need to use the index of each menu item as a reference.

First, create a callback  onCreateOptionsMenu, then apply the following code.

  @Override
public boolean onCreateOptionsMenu(Menu menu) {
    // Inflate the menu; this adds items to the action bar if it is present.
    getMenuInflater().inflate(R.menu.main, menu);
    MenuItem item = menu.getItem(0); //here we are getting our menu item.
    SpannableString s = new SpannableString(item.getTitle()); //get text from our menu item.
    s.setSpan(new ForegroundColorSpan(Color.RED), 0, s.length(), 0); //here I am just setting a custom color to the menu item. leave this out if you want it left at black.
    s.setSpan(new RelativeSizeSpan(.7f),0,s.length(),0); //here is where we are actually setting the size with a float (proportion).
    item.setTitle(s); //Then just set the menu item to our SpannableString.

    return true;
}

The result.

Done!


Post a Comment

Previous Next

نموذج الاتصال