What Is the Size of Actionbar in Pixels

What is the size of ActionBar in pixels?

To retrieve the height of the ActionBar in XML, just use

?android:attr/actionBarSize

or if you're an ActionBarSherlock or AppCompat user, use this

?attr/actionBarSize

If you need this value at runtime, use this

final TypedArray styledAttributes = getContext().getTheme().obtainStyledAttributes(
new int[] { android.R.attr.actionBarSize });
mActionBarSize = (int) styledAttributes.getDimension(0, 0);
styledAttributes.recycle();

If you need to understand where this is defined:

  1. The attribute name itself is defined in the platform's /res/values/attrs.xml
  2. The platform's themes.xml picks this attribute and assigns a value to it.
  3. The value assigned in step 2 depends on different device sizes, which are defined in various dimens.xml files in the platform, ie. core/res/res/values-sw600dp/dimens.xml

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

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)
}

What is the recommended ActionBar icon size in Material Design (Android API 21+)?


  1. There are recommendation for most features. Toolbar icons should always be 24dp, while as you say circular features (including images and floating buttons) should be 40dp. You might find different values for different views, in the page you linked or in the "Components" side menu.

    I downloaded material icons some time ago, from here or here. In both cases icons are provided in different sizes, 18dp, 24dp, 36dp and 48dp. It's up to you to choose the best size and to set an appropriate padding on the view, to ensure a 48dp clickable area. In most cases if you chose an AppCompat or Material theme it will handle sizing and padding for you.

    Apart from that, e.g. when sizing a button, I would choose Buttons from the "Components" menu, and get size info there.

  2. Yes.

  3. You are probably right, 48dp icons for xxhdpi should be 144x144 pixels.

Actionbar Logo size?

I looked into the resources of the YouTube app, since that seems to be the only official Google app (besides I/O) that uses an action bar logo at the moment.

It contains three drawables for the logo:

  • drawable-mdpi/ic_logo_wide.png (75 x 32 px)
  • drawable-hdpi/ic_logo_wide.png (112 x 48 px)
  • drawable-xhdpi/ic_logo_wide.png (149 x 64 px)

According to Iconography from the Android design guidelines, those images' heights match the specification for the action bar icons, which is 32 x 32 dp.

  • 32 dp = 32 px (MDPI)
  • 32 dp * 1.5 = 48 px (HDPI)
  • 32 dp * 2 = 64 px (XHDPI)

You'll notice that the 72 px (XHDPI) from the I/O app don't show up. I guess, they just wanted to increase the logo's height a bit.

If a drawable is only provided in XHDPI, Android scales it down, which is a little less performant than providing the images in the proper sizes. I guess, this was just accepted by the developers of the I/O app.

New Theme.AppCompat ActionBar height

There's no workaround needed. If you're using ?android:attr/actionBarSize android will look up the value in the plattform you're currently using. The result will be 48dp if you're running an Android-Version below 5.0, obviously.

Since you're using the appcompat-v7 library in your project you should use ?actionBarSize. This will return 56dp as expected, because the system will look up the value in your project, which has the actionBarSize defined because of the appcompat-library.

If you wanna try this on your own, here's a little code-snippet to test the described behaviour:

int[] textSizeAttr = new int[] { android.R.attr.actionBarSize, R.attr.actionBarSize };
TypedArray a = obtainStyledAttributes(new TypedValue().data, textSizeAttr);
float heightHolo = a.getDimension(0, -1);
float heightMaterial = a.getDimension(1, -1);

Log.d("DEBUG", "Height android.R.attr.: " + heightHolo + "");
Log.d("DEBUG", "Height R.attr.: " + heightMaterial + "");

Note: This will return the size in pixels. As an example on my Nexus 5, which is running 4.4 at the moment, it returns 144px(48dp) for android.R.attr.actionBarSize and 168px (56dp) for R.attr.actionBarSize.

Action Bar icon size

UPDATE: this answer is no longer valid, see the below answer for more up-to-date guidelines.

I believe they have to be 32x32dp, but the actual image itself should be 24dpx24dp centred. The Android design website has the correct guidelines.

I've submitted a bug report about this but have yet to hear anything...

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.



Related Topics



Leave a reply



Submit