ツールバー
改造の第1弾として、アクションバーの代わりにツールバーを導入します。
今までのアプリで使用してきたアクションバーは、「ツールバーサンプル」とアプリ名を表示しているように、アプリ名の表示やオプションメニューの表示ぐらいしか機能を持ち合わせていませんでした。アクションバー部分の表示をもっと柔軟にカスタマイズできるものに、Toolbarというものがあります。これを導入しましょう。
activity_scroll_article.xmlのLinearLayoutとScrollViewの間に以下のタグを記述してください。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
…>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/colorPrimary"
android:elevation="10dp"/>
<ScrollView
…
</ScrollView>
</LinearLayout>
さらに、styles.xmlの<style>タグのparent属性を以下のように書き換えてください。
parent="Theme.AppCompat.Light.NoActionBar"
ツールバーをアクションバーの代わりに使用するためには、まず標準のアクションバーを非表示にする必要があります。これはテーマで指定します。それが、styles.xmlの<style>タグのparent属性の指定です。ここを「NoActionBar」とすることで非表示となります。
アクションバーを非表示にした代わりに、画面の最上部にToolbarタグを指定します。それがリスト3の書き換えです。ただし、Toolbar自体はAndroid標準のSDKではなくサポートライブラリに含まれているので、タグ指定も単に<Toolbar>ではなく、以下のようになっています。
<android.support.v7.widget.Toolbar>
このタグの属性の記述についていくつか補足します。まず、layout_heightの記述ですが、ここで指定されている「?attr/」というのは、テーマに含まれる属性を指定する記述です。したがって、「?attr/actionBarSize」というのは、今回適用しているテーマの、アクションバーの高さを表しています。
次に、android:backgroundですが、ここでは「@color/colorPrimary」を指定しています。マテリアルデザインは4色を基本としており、アクションバーは「colorPrimary」が基本の色になっています。したがって、アクションバーの代わりとなるツールバーもこの色を指定しているのです。
最後にandroid:elevationですが、こちらもマテリアルデザインで影を付けることによって画面部品の3次元表現をしています。その陰の付け具合を指定しているのがこの属性です。
［Note］elevationの値
このサンプルではandroid:elevationに10dpを指定しています｡この値を任意の値に変更してアプリを起動し直してみると、影の付き具合も変わるはずです。
なお、このサンプルでは、影の付き具合をわかりやすくするために、10dpという大きめの値を指定しています。elevationについて、どういう値が適切かは、こちらのページに詳細が書かれています。これによると、アクションバー（App Bar）は4dpとなっています。
この状態でアプリを起動しても、下図のように青いバーが表示されるだけです。
ツールバーはアクションバーと違い、柔軟な表現が可能な代わりに、表示内容を自分で設定する必要があります。これはActivityで行います。ScrollArticleActivityのonCreate()に以下のコードを追記してください。
protected void onCreate(Bundle savedInstanceState) {
～省略～
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); // （1）
toolbar.setLogo(R.mipmap.ic_launcher); // （2）
toolbar.setTitle(R.string.toolbar_title); // （3）
toolbar.setTitleTextColor(Color.WHITE); // （4）
toolbar.setSubtitle(R.string.toolbar_subtitle); // （5）
toolbar.setSubtitleTextColor(Color.LTGRAY); // （6）
setSupportActionBar(toolbar); // （7）
}
ここでアプリを再起動してみてください。以下のような画面に変わっているはずです。
図1のアクションバーとは違い、かなり柔軟に表示されていることが分かると思います。
まず、（1）で画面部品としてのToolbarを取得しています。
ロゴの表示を設定しているのが（2）で、setLogo()メソッドを使います。引数はロゴ用リソースのR値です。ここでは、もともと用意されているアプリのロゴを使用しています。任意の画像をdrawableなどの画像フォルダに格納し、それを指定してもかまいません。
次にタイトルを設定しているのが（3）です。これは、setTitle()メソッドを使います。引数は表示文字列のR値です。
同様に、サブタイトルを設定しているのが（5）で、setSubtitle()メソッドを使い、表示文字列のR値を引数として渡します。
さらに、タイトルとサブタイトルの文字色を指定しているのが、（4）と（6）です。それぞれ、setTitleTextColor()メソッド、setSubtitleTextColor()メソッドを使います。これは、「#ffffff」のようにRGBのカラーコードを指定してもいいですが、わかりやすい色であれば、Colorクラスの定数として用意されています。ここではそれを利用しています。（4）で白色（WHITE）を、（6）で明るい灰色（LTGRAY）を指定しています。
最後に、このように設定したToolbarをアクションバーの代わりとして使用するように設定しているのが（7）です。これは、ActivityクラスのsetSupportActionBar()メソッドを使用します（より正確には、AppCompatActivityクラスのメソッドです）。
以上の実装で、アクションバーと同様に、ツールバー上でオプションメニューを扱えるようになります。
まとめ
ツールバーを使用すると、アクションバーよりも柔軟な表現が可能になります。しかし、現状では当初の目的であるスクロールとツールバーが連動するところまで実装されていません。次回は、その実装から行っていきます。
