How do I declare an extended height Toolbar/Action Bar on Android Lollipop?

Question

I've seen extended height app bar's in the Google Design App Bar guidelines. How do I implement these in Android Lollipop?

Answer 1

You need to use the new Toolbar widget to achieve this. Toolbar has special handling for it's minimum height to declare the amount of space which is used for buttons (and actions).

In the example below, we're setting the height to be 128dp (which is 56dp + 72dp as defined in the spec), but keeping the android:minHeight as the standard actionBarSize (which is usually 56dp). This means that the buttons and actions are constrained to be positioned vertically in the top 56dp. We can then use android:gravity to position the title at the bottom.

<Toolbar
    android:id="@+id/toolbar"
    android:layout_height="128dp"
    android:layout_width="match_parent"
    android:minHeight="?android:attr/actionBarSize"
    android:background="?android:attr/colorPrimary"
    android:gravity="bottom" />

If you're using AppCompat, then change the declaration to use android.support.v7.widget.Toolbar instead and use it's attributes.

Answer 2

Thanks for your question, its answer, and moreover for the implementation of the toolbar in the native and the supportlibrary :)

And we can play more. We can, at runtime, play with the Height and the MinimalHeight.

The height is the ToolBar height, it's simple, every body understand, and the gravity acts according to that height.

The minimalHeight is more tricky and should not be at minimum 56dp. This minHeight is used to place the line of your menuItem. This line is at the midlle of your minHeight.

So you can add this code to your activity to see by yourself the difference. :)

Runnable toolBarAnimator=new Runnable() {
        @Override
        public void run() {
            if(postICS){
//                toolbar.setTranslationX(iteration);
//                toolbar.setElevation(iteration);
                toolbar.setMinimumHeight(iteration * 5);
                toolbar.getLayoutParams().height++;
            }
            uiThreadHanlder.postDelayed(this,16);
            iteration++;
            if(iteration>150)iteration=0;
        }
    };
    Handler uiThreadHanlder=new Handler();
    int iteration=0;


    @Override
    protected void onResume() {
        super.onResume();
        //launch the animation
        uiThreadHanlder.postDelayed(toolBarAnimator, 1000);
    }


    @Override
    protected void onPause() {
        super.onPause();
        //stop the animation
        uiThreadHanlder.removeCallbacks(toolBarAnimator);
    }

Where toolbar is:

toolbar = (Toolbar) findViewById(R.id.toolbar);

When doing this you obtain:

but if you leave the animation continue you obtain:

This is why, setting your toolbar android:layout_height to wrap_content is a good option in most of the case, because the Toolbar will adapt its height according to its contents (and you can change the content at runtime :)

And this is also how you change your toolbar size at runtime.

Thanks Chris Banes for the amazing work you did on the actionbar.