woshidan's blog

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

API16以下でツールバーのアイコンを一番左端まで表示したい

Toolbarに載せるアイコンについて、基本的に余白は空けるものなのですが、ここぞというところで、どうしても左端まで表示したいの、という場面がありますよね、ということで実装してみました。

API16以下の場合の実装で、17以上はandroid:paddingLeftの負の値が有効なので、それを使えば楽チンです。

API16以下の場合、NavigationIconを使うと、どうしてもToolbarのpaddingの4dp程度の分が取れなかった感じです。

基本的な方針

NavigationIconにIconを設定せず、Toolbarの子要素にImageViewを置く。

ポイント

タイトルは、Toolbar要素の子要素より左側に表示されるので、タイトルを入れたい場合は、TextViewを使う。

駄目な例

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar mToolbar = (Toolbar) findViewById(R.id.custom_toolbar);
        mToolbar.setTitle("Title");

        mToolbar.inflateMenu(R.menu.menu_main);
    }
  <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"
      app:contentInsetStart="0dp"
      android:paddingLeft="0dp"
      android:layout_height="?attr/actionBarSize"
      >
      <ImageView
          android:layout_height="wrap_content"
          android:layout_width="wrap_content"
          android:src="@drawable/black_square_48dp"
          />
  </android.support.v7.widget.Toolbar>

f:id:woshidan:20151108153404p:plain

いい例

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar mToolbar = (Toolbar) findViewById(R.id.custom_toolbar);

        mToolbar.inflateMenu(R.menu.menu_main);
    }

f:id:woshidan:20151108153422p:plain

Drawerを動かしてみる

Toolbarを利用する場合、アイコンをタップしたらサイドバーが出てくる、という場合にもまあ、手動で頑張って対応できますよっていう例だけ置いておきます。

参考: http://developer.android.com/intl/ja/reference/android/support/v4/widget/DrawerLayout.html#closeDrawer(int) http://techbooster.org/android/application/16318/

public class MainActivity extends Activity {
    private ImageView mLogoImage;
    private DrawerLayout mDrawerLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar mToolbar = (Toolbar) findViewById(R.id.custom_toolbar);

        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);

        mLogoImage = (ImageView) findViewById(R.id.logo_image);
        mLogoImage.setOnClickListener(new View.OnClickListener() {
                                         @Override
                                         public void onClick(View v) {
                                            mDrawerLayout.openDrawer(Gravity.LEFT);
                                         }
                                     }

        );

        mToolbar.inflateMenu(R.menu.menu_main);

    }
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/drawer_layout"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:background="@android:color/white"
    tools:context=".MainActivity"
    android:orientation="vertical">

    <!-- メインの要素 -->
    <LinearLayout
        android:layout_height="match_parent"
        android:layout_width="match_parent"
        >
        <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"
            app:contentInsetStart="0dp"
            android:paddingLeft="0dp"
            android:layout_height="?attr/actionBarSize"
            >
            <ImageView
                android:id="@+id/logo_image"
                android:layout_height="wrap_content"
                android:layout_width="wrap_content"
                android:src="@drawable/black_square_48dp"
                />
            <TextView
                android:layout_height="wrap_content"
                android:layout_width="wrap_content"
                android:layout_marginLeft="24dp"
                android:text="Title"
                />
        </android.support.v7.widget.Toolbar>
    </LinearLayout>
    <!-- サイドバーで表示される要素 -->
    <LinearLayout
        android:id="@+id/left_layout"
        android:layout_width="240dp"
        android:background="#ccc"
        android:layout_gravity="start"
        android:layout_height="wrap_content">
        <TextView
            android:layout_height="48dp"
            android:layout_width="wrap_content"
            android:text="Test Side bar"
            />
    </LinearLayout>
</android.support.v4.widget.DrawerLayout>

あと、もう1個右側の方の問題について書いたらしばらくToolbarのことはググらなくてすむ...。 調べるのが辛いというか、どこまで調べて適用してあるのか調べることが多すぎて忘れていくのが辛い。