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>
いい例
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); }
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のことはググらなくてすむ...。 調べるのが辛いというか、どこまで調べて適用してあるのか調べることが多すぎて忘れていくのが辛い。