I Want to Change Actionbar Icon Size

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 navigation icon size

I found solution.
We need to access DrawerArrowToggle style attributes.

<style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar.Bridge">
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>

<item name="drawerArrowStyle">@style/DrawerArrowToggle</item>
</style>

//Style required
<style name="DrawerArrowToggle" parent="Widget.AppCompat.DrawerArrowToggle">
<item name="barLength">28dp</item>
<item name="gapBetweenBars">5dp</item>
<item name="drawableSize">24dp</item>
</style>

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.

change the size of back arrow in actionbar android

Let's say you have actionbar.xml layout file containing this code

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/action_bar_details"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:orientation="horizontal">

<ImageButton
android:id="@+id/action_bar_back"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/dimen_very_small"
android:background="@color/colorPrimary"
android:padding="@dimen/dimen_medium"
android:src="@drawable/abc_ic_ab_back_mtrl_am_alpha" />

<TextView
android:id="@+id/action_bar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="@dimen/dimen_medium"
android:text="@string/title_activity_details"
android:textColor="#ffffff"
android:textSize="24sp"
android:textStyle="normal" />
</LinearLayout>
</LinearLayout>

And you want to change size of view with id 'action_bar_back'. Here it's ImageButton, but 'ImageView' also would be good. You can do it i many ways:

  • change layout_width and layout_height with exact value like 60dp
  • scale an image using scaleX, scaleY, scaleType. It uses float values.
  • use this great tool: https://romannurik.github.io/AndroidAssetStudio/ to generate some needed sizes of image and put them in drawable-[density] folders

    • using programs like GIMP to resize the picture to desired size

Hope this article would be useful: Supporting Multiple Screens



Related Topics



Leave a reply



Submit