woshidan's blog

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

Toolbar内の要素の表示順

Toolbarを書く必要があったのですが、各要素の表示順がちょっと分からなかったのでまとめ。

Toolbar内の要素の表示順

左から、

  • NavigationIcon
  • Logo
  • Title / SubTitle
    • Title(SubTitleと同時表示された時は上側)
    • SubTitle(Titleと同時表示された時は下側)
  • Toolbar内のView

の順に表示される(下記参照)。

Drawer を一緒に使う時の Drawer Indicator IconNavigationIcon のさらに左に表示される*1

ただ、 v7 の方のサポートライブラリでは、Drawer と一緒に使う時、 Drawer Indicator Icon を指定するために使っていた ActionBarDrawerToggleから Drawer Indicator Icon のリソースを指定するメソッドが見当たらなくなっている*2

なので、現状 Toolbarの方でNavigationIconの位置を調整するか、忘れるか*3 などの処理をしたほうがよさそう。

また、Toolbar#inflateMenu(R.menu.res)で生成するmenuの要素は上記の要素の空きスペースに右詰めで配置される感じです。

コード

// Activity
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    Toolbar mToolbar = (Toolbar) findViewById(R.id.custom_toolbar);
    mToolbar.setNavigationIcon(R.mipmap.ic_chevron_left_white_48dp);
    mToolbar.setLogo(R.mipmap.ic_launcher);
    mToolbar.setTitle("T");
    mToolbar.setSubtitle("S");
    mToolbar.inflateMenu(R.menu.menu_main);
}
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">

    <android.support.v7.widget.Toolbar
        android:id="@+id/custom_toolbar"
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="TextView"
            android:id="@+id/toolbar_title" />
    </android.support.v7.widget.Toolbar>
</RelativeLayout>

表示

f:id:woshidan:20151103015325p:plain

*1:この辺のチュートリアル用のプロジェクトによると。 https://developer.android.com/intl/ja/training/implementing-navigation/nav-drawer.html

*2:v4の頃はあったみたい http://y-anz-m.blogspot.jp/2013/05/android-navigation-drawer.html

*3: Material Design的にあんまりDrawer Indicator Iconっぽい表示はしないみたい。昨日気になったので見てみたらGmailも止めていた。 https://www.google.com/design/spec/layout/structure.html#structure-app-bar