読者です 読者をやめる 読者になる 読者になる

Androidプログラミングブログ

Androidプログラミングを勉強していく中でわかったことをメモする

【Androidプログラミング入門 #033】ActionBarを追加する

はじめに

ActionBarが導入された後、ActionBarより柔軟性が高い
ToolBarというウィジェットが導入されたようです。

Android Studioで新規プロジェクトを作成すると、
ToolBarが使われていて、ActionBarの表示は非表示にされています。 今後はTooBarを使っていく流れなのでしょう。

ToolBarについては↓の記事が詳しい。
AndroidのToolBar(新しいActionBar)メモ - Qiita

勉強に使っている参考書がActionBarを使ってサンプルを書いていて、 ActionBarを使えるようにするにはどうしたらよいかわからなかったので、
調べてメモ。

下記、新規プロジェクト作成し、ActionBarを表示にするまでを書きます。

1. プロジェクト作成

f:id:fjswkun:20151124104249p:plain

f:id:fjswkun:20151124104315p:plain

f:id:fjswkun:20151124104329p:plain

f:id:fjswkun:20151124104340p:plain

2. Activityのテーマを変更

初期はActionBarが非表示になっているので、表示に変更します。

AndroidManifest.xmlを開き、Activityのテーマを
android:theme="@style/AppThem
に変更します。

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.swift_studying.sampleactionbar" >

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme" >
        <activity
            android:name=".MainActivity"
            android:label="@string/app_name"
            android:theme="@style/AppTheme" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

3. ToolBarの削除

ActionBarとToolBarの2つが存在する状態なので、
ToolBarを削除します。

①レイアウトからToolBarを削除

activity_main.xmlを開き、下記のタグの部分を削除します。
<android.support.design.widget.AppBarLayout ・・・>

結果、↓になる。

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="match_parent" android:fitsSystemWindows="true"
    tools:context=".MainActivity">

    <include layout="@layout/content_main" />

    <android.support.design.widget.FloatingActionButton android:id="@+id/fab"
        android:layout_width="wrap_content" android:layout_height="wrap_content"
        android:layout_gravity="bottom|end" android:layout_margin="@dimen/fab_margin
        android:src="@android:drawable/ic_dialog_email" />

</android.support.design.widget.CoordinatorLayout>
②ソースから削除

MainActivity.javaを開き、onCreateメソッドの中にある下記2行を削除します。

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);

結果、onCreateメソッドは↓になります。

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
    fab.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
                    .setAction("Action", null).show();
        }
    });
}
③アクションバーが表示されているときの表示変更

ToolBarを削除して、ActionBarを表示しました。
このままだと、見た目が変わず、本当にActionBar表示できてるの?
となるので、少し修正。

ActionBarが表示されているときはタイトルに
アクションバー
と表示するようにします。

MainActivity.javaを開き、onCreateメソッドを↓のように書き換え。
なお、Support Libraryを使用している場合?はgetSupportActionbarを使わないと
例外になるので注意。

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
    fab.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
                    .setAction("Action", null).show();
        }
    });

    if ((getSupportActionBar() != null)
        || (getActionBar() != null)){
        setTitle("アクションバー");
    }else{
        setTitle("ツールバー");
    }
}

4. 実行

f:id:fjswkun:20151124110337p:plain

参考情報

参考

Androidアプリ開発逆引きレシピ (PROGRAMMER’S RECiPE)

Androidアプリ開発逆引きレシピ (PROGRAMMER’S RECiPE)

開発用デバイス

Androidの勉強をはじめた人は知っているようにエミュレーターはちょー遅い。
開発用に安いAndroidを買えば、勉強がはかどります!
iPhoneと比較すると安いので買ったほうがいいと思います。

おすすめデバイス

勉強用に使うだけなので価格が高い最新デバイスは必要ないと思います。
最新のデバイスは一人前のAndroidプログラマーになったら購入を検討しましょう。

nexus5 16GBASUS Nexus7 ( 2013 ) TABLET

その他に探すなら↓から。
Android nexus5を勉強用に購入