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 attributesapp:layout_anchor
and 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
Using Collate in Android Sqlite - Locales Is Ignored in Like Statement
How to Parse JSON Array Without Any Object in Retrofit
Clearing Notification After a Few Seconds
Gstreamer Examples in Android Studio
Kotiln: Pass Data from Adapter to Activity
I'M Getting a Nullpointerexception When I Use Action_Image_Capture to Take a Picture
Android Attaching Multiple Adapters to One Adapter
How to Open One Particular Folder from Gallery in Android
Send File to Server via Retrofit2 as Object
Error Inflating Class Android.Support.V4.View.Viewpager
How to Paging Query from Firebase Using Android Firebaseui
Android: Velocity-Based Viewpager Scrolling
How to Download Xml File from Server and Save It in Sd Card
Using Katzer Local Notification in Ibm Worklight
How to Develop Android App Completely Using Python
How to Access Adb in Os X Through Terminal, "Command Not Found"
Get Android .Apk File Versionname or Versioncode Without Installing APK