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?

Niles

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.

Niles

If using layout_height is the way to go, I expect the workaround described by monsoon here is also not a workaround, but the proper way to go? code.google.com/p/android/issues/detail?id=77874 – Sloven

Great but according to the metrics in the guidelines 56+72dp if portrait. Landscape 48dp+72dp. Hence my wish for something automagic/built-in. Can't specify actionBarSize + 72dp, and would prefer not to duplicate the actionBarSize qualifiers for landscape/portrait/tablet/phone. – Jeanajeanbaptiste

I'd love to able to declare expressions for dimensions too, but we can't. – Niles

android:gravity="bottom" by itself places it too close to the bottom. Probably should add android:paddingBottom="16dp" . 16dp from the metrics spec. – Jeanajeanbaptiste

So you just use the toolbar as normal with your layour? setSupportActionBar and setTitle? – Madigan

For bonus points, size the action bar using increments, e.g. @dimen/action_bar_size_x2, and use 112dp on phones, 128dp on tablets – Xantha

android:paddingBottom introduces strange spacing when buttonGravity is set to bottom. The titleMarginBottom attribute seems like the better option here, no? – Irena

@ChrisBanes Can we set the gravity for existing text in toolbar. – Assonance

Can you please explain, what is the meaning of extended toolbar, related to app. – Broddy

ok-ok i got the meaning by viewing this link, dribbble.com/shots/… . BIG thanks. – Broddy

@RomanNurik how does the expanded toolbar in calendar app work? Any hints – Got

@RomanNurik I'd like to know how the toolbar in calendar app works too – Mathian

Can you please explain how to add floating action buttons over the toolbar? Should we use relative layouts or is there any proper way? – Rhombencephalon

@ChrisBanes how can I place the title in the middle? – Whiteman

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.

Golf

@MohammadHadi I'm imagining that postICS would be defined something like: boolean postICS = Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN; – Lenitalenitive