読者です 読者をやめる 読者になる 読者になる

woshidan's blog

そんなことよりコードにダイブ。

ツールバーの上のmenuの 一番右側の「:」のアイコンのカスタマイズ

Android Toolbar menu OverflowButton

調べ直したくない一心でまとめています。主に参考にしていたのは下記ブログです。

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

一番右側の「:」のアイコンのカスタマイズ

neverに設定しているメニューの要素は右側に「:」みたいな感じで表示されている アイコンをタップすると利用できますが、その要素のカスタマイズについて。

まず、この「:」の要素は、ActionOverflowButtonというそうです。

直接いじりにくいですが、Activityで利用しているテーマのスタイルのactionOverflowButtonStyleという要素の設定からいじることが可能らしく、下記に例を示します。

<!-- styles.xml -->
<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="actionOverflowButtonStyle">@style/MyOverFlow</item>
    </style>

    <!-- Styles -->
    <style name="MyOverFlow" parent="Widget.AppCompat.ActionButton.Overflow">
        <item name="android:src">@drawable/black_square_48dp</item>
        <item name="android:paddingRight">48dp</item>
    </style>
</resources>

<!-- toolbar -->
        <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:layout_width="match_parent"
            android:theme="@style/AppTheme"
            android:layout_height="?attr/actionBarSize"
            >
        </android.support.v7.widget.Toolbar>

f:id:woshidan:20151108164422p:plain

もっと詳しくは、サポートライブラリのリポジトリを落っことして、ActionButton.Overflow全文検索をかけてください。

https://github.com/android/platform_frameworks_support

ポイントはAppCompatのスタイルを継承し、ActivityもAppcompatActivityを利用することです*1

参考:

http://stackoverflow.com/questions/26475918/change-actionoverflowbuttonstyle-with-appcompat-v21

一番右以外のアイコンについては、うまくスタイルの指定が効いているのを確認できなかったし、アイコンの指定で対応しやすいのでアイコン画像側で対応するか、Toolbarの子要素として用意する方向で...。

*1:AppcompatActivityを利用しないとAPI20以下で指定が効きません。