bottomnavでselectorの使い方を知りたい

Question

bottomnavigationで「マイページ」を開いた際に、マイページの部分が青く光るようにしたいのですが、グレーのままになってしまいます。

調べた所、「drawableにselectorを作って、state_pressed=trueにする」と書かれているものがありましたので、やってみましたがうまくいきませんでした。

不足している情報等がありましたら、指摘していただけると幸いです。よろしくお願いします。

bottom_nav.xml

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

    <item
        android:id="@+id/originFriendActivity"
        android:icon="@drawable/ic_action_friend"
        android:title="@string/bottomnav_friend" />
    <item
        android:id="@+id/originEventActivity"
        android:icon="@drawable/ic_action_event"
        android:title="@string/bottomnav_event" />
    <item
        android:id="@+id/originMyPageActivity"
        android:icon="@drawable/ic_action_mypage"
        android:title="@string/bottomnav_mypage" />

</menu>

activity_origin_my_page.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:id="@+id/originmypage_relativelayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:background="@color/colorPrimary"
    tools:context=".originMyPage.OriginMyPageActivity">


    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/btm_nav"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_alignParentBottom="true"
        android:layout_marginStart="-2dp"
        android:layout_marginBottom="-7dp"
        app:itemBackground="@color/whiteColor"
        app:menu="@menu/bottom_nav" />

    <LinearLayout
        android:id="@+id/originmypage_linearlayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        android:orientation="vertical">

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="?attr/colorPrimary"
            android:minHeight="?attr/actionBarSize"
            android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
            app:titleTextColor="@android:color/white" />

        <FrameLayout
            android:id="@+id/originmypage_framelayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

        </FrameLayout>

    </LinearLayout>


</RelativeLayout>

selector.xml

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

<item android:drawable="@drawable/ic_action_friend"
    android:state_pressed="true" />
<item android:drawable="@drawable/ic_action_friend" />

    <item android:drawable="@drawable/ic_action_event"
        android:state_pressed="true" />
    <item android:drawable="@drawable/ic_action_event" />


    <item android:drawable="@drawable/ic_action_mypage"
        android:state_pressed="true" />
    <item android:drawable="@drawable/ic_action_mypage" />

</selector>

(補足)

https://gyazo.com/1af373aad44d1ebd5cc1b1d83963a346

OnNavigationItemSelectedListenerの一番下をtrueに返した所、画面遷移後にもう一度ボタンを押せば光るようにはなったのですが、遷移と同時に光ってはくれませんでした。

OriginMyPageActivity.kt

  private val mOnNavigationItemSelectedListener =
        BottomNavigationView.OnNavigationItemSelectedListener {
                item ->
            when (item.itemId){
                R.id.originFriendActivity -> {
                    val intent = Intent(this, OriginFriendActivity::class.java)
                    startActivity(intent)
                    return@OnNavigationItemSelectedListener true
                }
                R.id.originEventActivity -> {

                }
                R.id.originMyPageActivity ->{
                    val intent = Intent(this, OriginMyPageActivity::class.java)
                    startActivity(intent)
                    return@OnNavigationItemSelectedListener true
                }

            }
            true
        }

Answer 1

まず、色が変わらない点についてですが、BottomNavigationのアイテムが選択されていないのではないでしょうか？BottomNavigationView.OnNavigationItemSelectedListenerの実装でtrueを返すようにしないと、タップしたアイテムが選択されません。falseを返すようになっていないか確認してみてください。

BottomNavigationのアイテムが正しく選択されていれば、アプリのテーマ内で設定したprimaryColorがアイテムの選択色になっているはずです。これを任意の色に変更したい場合は、BottomNavigationViewのapp:itemIconTintを利用してselectorのXMLを設定します。

• res/color/bottom_navigation_tint.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 選択時 -->
    <item android:color="..." android:state_selected="true"/>
    <!-- 通常時 -->
    <item android:color="..."/>
</selector>

• layout内

<com.google.android.material.bottomnavigation.BottomNavigationView
    ...
    app:itemIconTint="@color/bottom_navigation_tint"
    app:itemTextColor="@color/bottom_navigation_tint"
    />

参考: ドキュメント
https://material.io/develop/android/components/bottom-navigation/

Comments

[myokiya]

丁寧なご回答ありがとうございます。
ご指摘いただいた点を反映したのですが、解決することができませんでした。

補足に書きました通り、OnNavigationItemSelectedListenerも入っておりました。

また、MVP構成でFragmentではなく、Activityの部分にbottomnavを記入していることも理由の１つではないかと思っているのですが、そこは関係ないでしょうか？

よろしくお願いいたします。

[kakajika]

OnNavigationItemSelectedListenerでtrueを返すようにしないと、アイテムは選択されません。ご提示のコードの "R.id.originMyPageActivity ->" の箇所は何も返していないので、一番下でfalseを返してしまっていますよね。そちらを修正してみてください。

[myokiya]

一番最後の部分をtrueに変更したのですが、あってますでしょうか？

現状を再び補足に記入いたしましたので、ご確認お願いいたします。

[kakajika]

trueを返す点については補足のコードで問題ないと思います。ただ、アイテムの選択時に新しいActivityへ遷移するようになっていますね。だとしたら、遷移先のActivityでもBottomNavigationViewのアイテムを選択するように実装しないといけないはずです。

BottomNavigationViewは基本的にはActivityを起動するのではなく、コンテンツ部分のFragmentを切り替えるように利用するものですので、そのように実装した方がお望みの挙動を実現しやすいと思います。

[myokiya]

遅くなってしまい申し訳ありません。

自分で調べてみたのですが、「遷移先のactivityでアイテムの選択をする」の具体的な方法が分かりませんので、教えていただけないでしょうか？
自分なりには、onoptionsitemselectedやonnavdestinationselectedの使用かと考えました。

そうなのですね、全く知りませんでした。
この問題の解決ができ次第、fragmentへの切り替えも仲間と話してみます！

[kakajika]

返信遅くなりすみません。

> 自分で調べてみたのですが、「遷移先のactivityでアイテムの選択をする」の具体的な方法が分かりませんので、教えていただけないでしょうか？

遷移先のActivityでBottomNavigationViewに対してsetSelectedItemIdメソッドを呼んであげればOKです。

[myokiya]

なんとかできました…
詳らかにありがとうございます！