home.


Tagged: android-toolbar


Android: Style Toolbar/ActionBar and centre text

In recent support library updates, we have the Toolbar to use instead of the standard ActionBar to style via various properties in your style xml files.

You add this manually to your layout XML file.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  xmlns:tools="http://schemas.android.com/tools">
  <android.support.v7.widget.Toolbar
      android:id="@+id/toolbar"
      android:layout_alignParentTop="true"
      android:layout_width="match_parent"
      android:layout_height="?attr/actionBarSize"
      android:background="@color/toolbar_background"
      >
  ...

If you want to centre the title text, for example, you now just add a normal TextView and centre align it.

      <TextView
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:textColor="@color/toolbar_text"
          android:gravity="center"
          tools:text="Some title"
          android:id="@+id/toolbar_text"
          style="@style/TextAppearance.AppCompat.Widget.ActionBar.Title"/>

Obviously this is a lot to put at the top of every activity, you can instead place it in a separate layout file and use an include directive:

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <include android:id="@+id/toolbar_layout"
        layout="@layout/toolbar_layout" />
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/toolbar_layout">
...

In order to give this the title of your activity, you add this code in your onStart() method, or anywhere after the layout has been inflated:

TextView toolbarText = (TextView) findViewById(R.id.toolbar_text);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
if(toolbarText!=null && toolbar!=null) {
    toolbarText.setText(getTitle());
    setSupportActionBar(toolbar);
}

This will grab our toolbar, grab the text view which will hold our title, set the text on our text view and set the toolbar as our ActionBar.

Now when options menu etc, it will appear in that toolbar.

android android-toolbar

Android: Loading an NavigationIcon image into Toolbar via Picasso

Let’s first include the Picasso image loading library in our app’s gradle file:

compile 'com.squareup.picasso:picasso:2.5.2'

And in our beautiful AndroidManifest.xml let us not forget the all important permissions:

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

Let’s now use Picasso to load our image into a mysterious Target:

Picasso.with(toolbar.getContext())
        .load("https://HELLOTHERE.com/YOURIMAGEHERE.png")
        .into(target);

What’s the target? Well, since we’re not loading directly into a ImageView, we need this object. It can’t, apparently, be inline either, lest Picasso may garbage collect it. Here it is:

Target target = new Target() {
  @Override
  public void onBitmapLoaded(Bitmap bitmap, Picasso.LoadedFrom from) {
    Log.d("HIYA", "onBitmapLoaded");
    Bitmap b = Bitmap.createScaledBitmap(bitmap, 120, 120, false);
    BitmapDrawable icon = new BitmapDrawable(toolbar.getResources(), b);
    toolbar.setNavigationIcon(icon);
  }

  @Override
  public void onBitmapFailed(Drawable errorDrawable) {
    Log.d("HIYA", "onBitmapFailed");
  }

  @Override
  public void onPrepareLoad(Drawable placeHolderDrawable) {
    Log.d("HIYA", "onPrepareLoad");
  }
};

We get a reference to the toolbar, and set the navigation icon, after first resizing the image.

Actually, this may not be enough to ensure this isn’t garbage collection. You could make it a field. Ensure you stop the Picasso loader it when your activity/fragment/dog dies.

If you want to go wild, crazy, put it in a BindingAdapter:

@BindingAdapter("app:loadingimage")
public static void setLoadingimage(final Toolbar toolbar, String s) {
...
}

And then in your XML, with databinding, set it like this:

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    app:loadingimage="@{appState.avatarUrl}"
    android:background="?attr/colorPrimary"
    app:popupTheme="@style/AppTheme.PopupOverlay"
    />

The fun thing about this is you may need to make the Target a static variable, else it may be garbage collected.

android android-databinding android-toolbar android-picasso

Android Toolbar: The ActionBar replacement

The old Actionbar was inflexible. So google created the aptly named Toolbar.

To use it, you need to disable the old Actionbar and window title in your styles.xml entries:

<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>

Then your layout.xml should look something like this, with the height being the device’s default and the background your preset primary colour, if you’re using a plain LinearLayout for example:

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
  <android.support.v7.widget.Toolbar
      android:id="@+id/toolbar"
      android:layout_width="match_parent"
      android:layout_height="?attr/actionBarSize"
      android:background="@color/colorPrimary"
      >
  </android.support.v7.widget.Toolbar>
</LinearLayout>

You can also use the popupTheme attribute of the Toolbar to style the items that popup in the menu on the right.

Now the code for the initialisation in onCreate is simple enough, ensuring your Activity extends the right class, AppCompatActivity in my case:

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
android android-toolbar

Page 1 of 1