woshidan's blog

あいとゆうきとITと、とっておきの話。

Toolbarをカスタマイズする際にどこをいじればよいのか

Android Toolbar Design

Toolbar をカスタマイズしたくてその際にいじったら良いパラメータとかいじっても意味ないパラメータとか試したのでメモ。

ヘタレなので、試したのはAPI21で、サポートライブラリはgradleのcom.android.support:appcompat-v7:23.1.0のバージョンです。

新しく発見したこと等あれば追記します。

内容

  • あてがついたもの(用途別)
    • NavigationIconと画面左端の間隔を微調整したい
    • NavigationIconとタイトルの間隔を微調整したい
    • 一番右のMenuIconと右端の間隔を調整したい
    • アイコンサイズを調整したい
    • 影をつけたい
    • 背景を透明/半透明にしたい
    • タイトルの文字の大きさや色を調節したい
    • ふつうのViewみたいにアイコンとかいじりたい
  • よくわからなかったもの
    • Toolbarのapp:maxButtonHeight
    • Toolbarのapp:themeで指定したスタイルの値が有効にならない
    • menuのiconのサイズのカスタマイズ

あてがついたもの

NavigationIconと画面左端の間隔を微調整したい

Toolbar の android:paddingLeft の値を設定する。

<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingLeft="0dp" <!-- 余白分がアイコン画像にふくまれていて、アイコン画像をぴったり左につけたいなど -->
    />

NavigationIconとタイトルの間隔を微調整したい

Toolbar の android:titleMarginStart の値を設定する。 他に titleMarginBottom titleMarginTop titleMarginEnd があり、タイトル要素の上下左右のマージンが指定できる。

<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:titleMarginStart="2dp"
    />

一番右のMenuIconと右端の間隔を調整したい

Toolbar の android:paddingRight の値を設定する。

<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingRight="4dp"
    />

影をつけたい

Toolbar の android:elevation の値を設定する。

<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:elevation="5dp"
    />

背景を透明/半透明にしたい

Toolbar の背景を透明ないし半透明色に設定すればよい。透明度は#ARGB方式のAの部分で記述する。

タイトルの文字の大きさや色を調節したい

Toolbarのapp:titleTextAppearance属性を設定する。

    <android.support.v7.widget.Toolbar
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:theme="@style/CustomToolbarTheme"
        app:titleTextAppearance="@style/TextAppearance.AppCompat.Widget.Button.Inverse"
        />

style要素の指定項目の例は下記。

<style name="Base.TextAppearance.AppCompat.Title">
    <item name="android:textSize">@dimen/abc_text_size_title_material</item>
    <item name="android:textColor">?android:textColorPrimary</item>
</style>

<style name="Custom.Widget.ActionMode" parent="Widget.AppCompat.ActionMode">
  <item name="android:paddingLeft">@dimen/toolbar_h_padding</item>
  <item name="android:paddingRight">dimen/toolbar_h_padding</item>
</style>

ふつうのViewみたいにアイコンとかいじりたい

たとえば、てきとーに例を挙げるとタイトルをクリックして別のActivityへ飛ばしたいとか、画像のサイズを細かく指定したいとかする場合は、タイトル要素やNavigationIcon要素を使わずに、Toolbarの子要素としてTextViewなどを置くことも出来る。

<android.support.v7.widget.Toolbar
    android:id="@+id/custom_toolbar"
    android:background="@android:color/darker_gray"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:theme="@style/CustomToolbarTheme"
    >
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher"/>
    <TextView
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:text="TextViewでタイトル表示するぞ"
        />
</android.support.v7.widget.Toolbar>
表示例

f:id:woshidan:20151103223759p:plain

よくわからなかったもの

Toolbarのapp:maxButtonHeight

この属性を指定するとMenuのアイコンがそれより大きい場合、中央を残す形で切り取られていく。 正直使い道がピンと来なかった。

Toolbarのapp:themeで指定したスタイルの値が有効にならない

元々は下記の記事と https://github.com/android/platform_frameworks_support を参考にstyle要素を書いて試していたが、style要素上の値をいくらいじっても適用されず、 layoutリソース中で属性値を設定しないと反映されなかった。

https://medium.com/@lucasurbas/making-android-toolbar-responsive-2627d4e07129#.drjvgb9a9

下記が関係ありそう。

http://stackoverflow.com/questions/29809747/toolbar-theme-not-applied-from-styles-22-1-0

menuのiconのサイズのカスタマイズ

ぱっと見しなくても大丈夫そうに見えるけど、どうだろう...! 上記理由により、フォントの部分以外のスタイル要素での指定が効かないので、Toolbarのthemeに指定するスタイル要素が持っているitemの１つとしてスタイルを指定するらしいmenu icon の指定がどうにも行かない感じで困った。

Navigation Icon 以外48dpアイコン余白無しになってたら大丈夫な気がするが、どうしても調整したい場合、最悪手動で View を置く方向に切り替えても良いかもしれない。