Androidアプリ【Java】 4.Toolbar作成

今回は上記のようなToolbarを実装。Toolbarを作成することでActivityごとに
違うタイトルバーを設定することが出来る。

１.アプリマニフェスト編集

manifests/AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
   package="android.example.note_app">

   <application
       android:allowBackup="true"
       android:icon="@mipmap/ic_launcher"
       android:label="@string/app_name"
       android:roundIcon="@mipmap/ic_launcher_round"
       android:supportsRtl="true"
       android:theme="@style/Theme.AppCompat.Light.NoActionBar">
       <activity android:name=".SubActivity"></activity>
       <activity android:name=".MainActivity">
           <intent-filter>
               <action android:name="android.intent.action.MAIN" />

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

</manifest>

applicationタグ内にあるandroid:themeをNoActionBarテーマに設定することでアプリにもともと提供されているアクションバーが表示されなくなる。

2.Toolbarレイアウト作成

res/layout/activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
   tools:context=".MainActivity">
   <androidx.appcompat.widget.Toolbar
       android:id="@+id/toolbar"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       app:layout_constraintLeft_toLeftOf="parent"
       app:layout_constraintRight_toRightOf="parent"
       app:layout_constraintTop_toTopOf="parent"
       android:background="@color/colorPrimaryDark"
       app:navigationIcon="@drawable/ic_menu_black_24dp"
       >
       <TextView
           android:textColor="#FFFFFF"
           android:layout_height="match_parent"
           android:layout_width="match_parent"
           android:text="マングースアプリ"/>
   </androidx.appcompat.widget.Toolbar>
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.appcompat.widget.Toolbar>タグを作成することでToolbarが作成できる。

<androidx.appcompat.widget.Toolbar>タグを作成することでToolbarが作成できる。

基本的なレイアウト要素の他、Toolbarはデフォルトは白い背景となっていてパッと見、存在しているかわからないので背景色をつけてあげる。
android:background="@color/colorPrimaryDark"
ここで指定しているcolorPrimaryDarkというのは下記ファイルに定義された色を指定しているだけで任意の色をカラーコードで指定することも可能。
res/values/color.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <color name="colorPrimary">#008577</color>
   <color name="colorPrimaryDark">#00574B</color>
   <color name="colorAccent">#D81B60</color>
</resources>

Toolbarのテキストの左にあるアイコン(ナビゲーションアイコン)を作成
app:navigationIcon="@drawable/ic_menu_black_24dp"
※ここで設定しているnavigationIconはVectorAssetから利用できるようにする必要がある。
利用方法
appの上で右クリック
↓
New
↓
VectorAsset
↓
Configure Vector Assetが表示されるのでここでClipArtのアイコン部分を押下するとアイコンのリストが表示されるのでそこで好きなものを選択。
ColorやSizeを選択してFinish
(サンプルではSize=24dp×24dp、Color=FFFFFF,ClipArt=menuを使用）
上記の手順を踏むことでapp:navigationIconとして設定可能になる。

ToolbarのタイトルはToolbarタグの中にTextViewタグを入れて作成。
TextColorにはカラーコードを指定。
android:textColor="#FFFFFF"

3.MainActivity編集

Java/android.example.任意のアプリ名/MainActivity

package android.example.note_app;

import androidx.appcompat.app.AppCompatActivity;
import android.content.Intent;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import androidx.appcompat.widget.Toolbar;

public class MainActivity extends AppCompatActivity {


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

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

}

Toolbarをインスタンス化してそこに作成したレイアウトファイルを紐づけ。
※import androidx.appcompat.widget.Toolbar;を確りimportすること。
　補完機能を使用していると誤ってimport android.widget.Toolbar;が
　importされてしまうので。
ここまででToolbarとテキスト、左側にあるnavigationiconが作成される。

4.menuicon作成

テキストの右側にある、メニューアイコンを作成。navigationiconとはやり方が変わり、まずres配下にmenuディレクトリを作成する。
appの上で右クリック
↓
New
↓
AndroidResourceDirectory
↓
New Resource Directoryの設定画面が出てくるので、Resourcetypeをmenu,Directorynameをわかりやすいようにmenuとする。

上記の方法でmenuディレクトリが出来るので次はmenuディレクトリの上で
右クリックを押下して、Menuresourcefileを作成。
res/menu/menuresourcefile(名前は任意)

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto">
   <item android:icon="@drawable/ic_add_black_24dp"
       app:showAsAction="always"
       android:title="Add"
       android:id="@+id/add_button">
   </item>

</menu>

android:icon="@drawable/ic_add_black_24dp"
で指定しているiconはnavigationicon同様のやり方でVectorAssetから使用できるようにしたものを指定。

app:showAsAction="always"
常に表示させたいのでalwaysに設定。

androidtitle="Add"
Addの部分は任意でOK。リファレンスには「アイテムのタイトルとして使用するための、文字列への参照」とあるがなぜ必要なのかは、まだ不明.....U_U

5.MainActivityでMenuiconを設定。

Java/android.example.任意のアプリ名/MainActivity

package android.example.note_app;

import androidx.appcompat.app.AppCompatActivity;


import android.content.Intent;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import androidx.appcompat.widget.Toolbar;

public class MainActivity extends AppCompatActivity {


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

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

   }

   public boolean onCreateOptionsMenu(Menu menu){
       getMenuInflater().inflate(R.menu.menuresourcefile,menu);
       return true;
   }
   


}

MenuInflaterクラスのインスタンスを取得してgetMenuInflater()というメソッドを使うことでxmlファイルの中身を読みこんでメニューに反映させることでメニューアイコンが表示される。

6.Menuiconから遷移

最初のサンプルのmenuiconを押すことで別画面に遷移させたい。
まずいつも通り、遷移先であるSubActivityを作成。
Java/android.example.任意のアプリ名/MainActivity

package android.example.note_app;

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import androidx.appcompat.widget.Toolbar;

public class SubActivity extends AppCompatActivity {

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

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

res/layout/activity_sub.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
   tools:context=".SubActivity">
   <androidx.appcompat.widget.Toolbar
       android:id="@+id/toolbar2"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       app:layout_constraintLeft_toLeftOf="parent"
       app:layout_constraintRight_toRightOf="parent"
       app:layout_constraintTop_toTopOf="parent"
       android:background="@color/colorPrimaryDark"
       app:contentInsetStart="0dp"
       >
       <TextView
           android:gravity="center"
           android:textColor="#FFFFFF"
           android:layout_height="match_parent"
           android:layout_width="match_parent"
           android:text="サブ画面"/>
   </androidx.appcompat.widget.Toolbar>

</androidx.constraintlayout.widget.ConstraintLayout>

上記で遷移先が作成できたので、MainActivityでMenuiconが押下されたときの処理を記述する
Java/android.example.任意のアプリ名/MainActivity

package android.example.note_app;

import androidx.appcompat.app.AppCompatActivity;


import android.content.Intent;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import androidx.appcompat.widget.Toolbar;

public class MainActivity extends AppCompatActivity {


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

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

   }


   public boolean onCreateOptionsMenu(Menu menu){
       getMenuInflater().inflate(R.menu.menuresourcefile,menu);
       return true;
   }
   public boolean onOptionsItemSelected(MenuItem item){
       int id = item.getItemId();
       if(id==R.id.add_button){
           Intent intent = new Intent(MainActivity.this,SubActivity.class);
           startActivity(intent);
       }
       return true;
   }


}

オプションメニューが押下されるとonOptionsItemSelectedが呼び出されるので、そこに遷移処理を記載。getItemId()で項目を選択して選択されたMenuItemが渡される。