イトナブ石巻のとみぎです。
今回はAndroid5.0(Lollipop)と同時に追加された、ActionBarの代替となる「ToolBar」を使い、簡単なサンプルを作ってみました。
[今回の開発環境]
Mac OS X 10.9.5AndroidStudio 1.0.2
◯ アプリのレイアウトスタイル(style.xml)を変更
【style.xml】
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<!-- アクションバー(Toolbar)の背景色 -->
<item name="colorPrimary">#ffe10446</item>
<!-- ステータスバーの背景色 -->
<item name="colorPrimaryDark">#ffe1799c</item>
<!-- colorAccent is used as the default value for colorControlActivated,
which is used to tint widgets -->
<item name="colorAccent">#ff0000</item>
<!-- ActionModeを使うのに必要 -->
<item name="windowActionModeOverlay">true</item>
</style>
</resources>
◯ レイアウトファイルにToolBarを追加
【activity_main.xml】
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_height="match_parent"
tools:context=".MainActivity">
<!-- ToolBar -->
<android.support.v7.widget.Toolbar
android:id="@+id/tool_bar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
app:theme="@style/ThemeOverlay.AppCompat.ActionBar"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true">
</android.support.v7.widget.Toolbar>
<!-- ToolBar end -->
<TextView android:text="@string/hello_world" android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/tool_bar"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
</RelativeLayout>
◯ アクティビティ側を変更
【MainActivity.java】
public class MainActivity extends ActionBarActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// 追加
setToolBar();
}
// 追加
protected void setToolBar() {
Toolbar toolbar = (Toolbar) findViewById(R.id.tool_bar);
// ツールバーのタイトルを設定
toolbar.setTitle("ActionBar Title");
// ツールバーをアクションバーとしてセット
setSupportActionBar(toolbar);
}
}
◯ 実行
アクションバーが表示されました！
ステータスバーの色もちゃんと変わっています。
◯ サブタイトルを追加してみる
【MainActivity.java】
public class MainActivity extends ActionBarActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
setToolBar();
}
protected void setToolBar() {
Toolbar toolbar = (Toolbar) findViewById(R.id.tool_bar);
toolbar.setTitle("ActionBar Title");
// 追加
toolbar.setSubtitle("Subtitle");
setSupportActionBar(toolbar);
}
}
こうなりました↓
◯ アプリアイコンを追加してみる【MainActivity.java】
public class MainActivity extends ActionBarActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
setToolBar();
}
protected void setToolBar() {
Toolbar toolbar = (Toolbar) findViewById(R.id.tool_bar);
toolbar.setTitle("ActionBar Title");
toolbar.setSubtitle("Subtitle");
// 追加
toolbar.setLogo(R.drawable.ic_launcher);
setSupportActionBar(toolbar);
}
}
こうなりました↓
◯ (おまけ)ナビゲーションバーの色を変えてみた
※ナビゲーションバーの色変更が可能なのはAPI Level 21(Lollipop)からなので、こちらを実装する場合は、v21専用のxml「values-v21/styles.xml」を作成し、そちらへ追加しなければなりません。
【values-v21/styles.xml】
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimaryDark">#ff007435</item>
<item name="colorPrimary">#ff00c859</item>
<!-- 追加 ナビゲーションバーの背景色 -->
<item name="android:navigationBarColor">#ff00a57f</item>
<item name="colorAccent">#ff0000</item>
<item name="windowActionModeOverlay">true</item>
</style>
</resources>
以上、AndroidのToolBarを使ってみたでした。
この他にも色々と設定可能なメソッドがあるようなので、
他にも色々と試してみたいと思います。
最後まで読んで頂き、ありがとうございました！
【参考サイト】
AndroidのToolBar（新しいActionBar）メモ - Qiita
Android Developers
posted by イトナブ石巻 とみぎ
