How to Declare an Extended Height Toolbar/Action Bar on Android Lollipop

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

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.

How do i make an action bar like this

If you don't want a CollapsingToolbar , you can use a simple Toolbar using a custom minHeight.

Inside the Toolbar you can put your views, for example TextView or TextInputLayout.

Finally use a FloatingActionButton. It is important to set the attributes
app:layout_anchorand app:layout_anchorGravity

 <android.support.design.widget.CoordinatorLayout>

<android.support.v7.widget.Toolbar
android:id="@+id/toolbar_main"
android:layout_width="match_parent"
android:layout_height="256dp"
android:minHeight="?attr/actionBarSize"
android:theme="@style/ToolbarMainTheme" >

<android.support.design.widget.TextInputLayout>

<TextView>

</android.support.v7.widget.Toolbar>

<!-- your scrollable view here -->

<android.support.design.widget.FloatingActionButton
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:borderWidth="0dp"
app:elevation="4dp"
app:pressedTranslationZ="6dp"
android:layout_marginRight="@dimen/fab_margin_card"
android:src="@drawable/ic_youricon"
app:layout_anchor="@id/toolbar_main"
app:layout_anchorGravity="bottom|right|end" />

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

How to change action bar size

Use height attribute, actionBarSize if for something else.

<item name="android:height">@dimen/bar_height</item>

Explanantion:

From source code of ActionBar:

mContentHeight = a.getLayoutDimension(R.styleable.ActionBar_height, 0);

We can see that R.styleable.ActionBar_height is being used for height. Stylable property names are generated as component_attribute (If you have ever used a custom stylable view, you'd have notice this). Hence, Actionbar is the name of component and height is the name of the attribute to use. Since this is a system attribute, hence defined under android namespace.

Update Dec-2014:

AppCompat library is now provided to extend support for latest ActionBar (or Toolbar) and theme support to old android versions. Below is an example of such an application theme /res/values/styles.xml:

<resources>

<!-- Application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light">

<!-- Main theme colors -->
<!-- your app branding color for the app bar -->
<item name="colorPrimary">@color/primary</item>

<!-- darker variant for the status bar and contextual app bars -->
<item name="colorPrimaryDark">@color/primary_dark</item>

<!-- theme UI controls like checkboxes and text fields -->
<!-- native widgets will now be "tinted" with accent color -->
<item name="colorAccent">@color/accent</item>

<!--Action bar style-->
<item name="android:actionBarStyle">@style/AppTheme.ActionBar</item>
<item name="actionBarStyle">@style/AppTheme.ActionBar</item>

</style>

<style name="AppTheme.ActionBar" parent="Widget.AppCompat.Light.ActionBar">
<item name="android:titleTextStyle">@style/AppTheme.ActionBar.TitleText</item>
<item name="titleTextStyle">@style/AppTheme.ActionBar.TitleText</item>
<item name="android:height">@dimen/bar_height</item>
<item name="height">@dimen/bar_height</item>
</style>

<style name="AppTheme.ActionBar.TitleText" parent="TextAppearance.AppCompat.Widget.ActionBar.Title">
<item name="android:textSize">@dimen/bar_text_size</item>
<item name="android:textColor">@color/bar_text_color</item>
</style>
</resources>

This style can now be set as app theme by using android:theme="@style/AppTheme" in <application> tag of the AndroidManifest.xml.

Note the use of duplicate entries

<item name="android:actionBarStyle">
<item name="actionBarStyle">

The ones without android namespace are there for supporting both compatibility library and native attributes.Some of these attributes didn't exist under android namespace on older versions and belong to support library.

In some other places, you'll need to use app namespace (xmlns:app="http://schemas.android.com/apk/res-auto"), for example app:showAsAction="always" in menu xml files.

Update Apr 2015

AppCompat Library v22 is also available. Read through the article to know what's new.

What's the height of the Android Toolbar?

The Toolbar (if not extended) has the height of:

  • 56dp (default)
  • 48dp (landscape)
  • 64dp (sw600dp; i.e. tablet)

The Toolbar is higher than the pre-lollipop ActionBar; it was 48dp by default, 40dp in landscape and 56dp in sw600dp.

And to retrieve the height of the Toolbar in XML, just use

?android:attr/actionBarSize

or if you're using the AppCompat library this

?attr/actionBarSize

Appcompat v21 Toolbar elevation pre-lollipop

This worked for me very well:

<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/primary"
card_view:cardElevation="4dp"
card_view:cardCornerRadius="0dp">

<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/primary"
android:minHeight="?attr/actionBarSize" />

</android.support.v7.widget.CardView>

Extended Toolbar with Custom View not Displaying with Full Width

So in order to achieve this and have complete control over the padding in the toolbar I created two toolbars. The first toolbar with standard height of 56dp and second with height of 72dp which together made a double layered toolbar as specified by material design.

And because I am not inflating any menu items in the second toolbar all my cusotm views inside behave as desired.

These lines still need to be used though

    app:contentInsetStart="0dp"
app:contentInsetEnd="0dp"
app:contentInsetLeft="0dp"
app:contentInsetRight="0dp"
android:clipToPadding="false"

This solved my issue so now I'm including two toolbars into my XMl.

How to get the ActionBar height?

While @birdy's answer is an option if you want to explicitly control the ActionBar size, there is a way to pull it up without locking the size that I found in support documentation. It's a little awkward but it's worked for me. You'll need a context, this example would be valid in an Activity.

// Calculate ActionBar height
TypedValue tv = new TypedValue();
if (getTheme().resolveAttribute(android.R.attr.actionBarSize, tv, true))
{
int actionBarHeight = TypedValue.complexToDimensionPixelSize(tv.data,getResources().getDisplayMetrics());
}

Kotlin:

val tv = TypedValue()
if (requireActivity().theme.resolveAttribute(android.R.attr.actionBarSize, tv, true)) {
val actionBarHeight = TypedValue.complexToDimensionPixelSize(tv.data, resources.displayMetrics)
}


Related Topics



Leave a reply



Submit