LoginSignup
9
4

More than 5 years have passed since last update.

BottomNavigationViewをiOSのTabBarっぽくする

Last updated at Posted at 2019-03-06

概要

MaterialDesignから提供されているBottomNavigationViewを用いることでiOSのTabBarのような下タブのナビゲーションを作成することが容易に可能になりました.
そこでiOSライクにAndroidでも下タブのアプリを開発してやるぜー!と思っていると選択範囲しかアイテム名が表示されなかったりとBottomNavigationView 独特のクセが目立ちました.
もちろんこれがMaterialDesignガイドラインが示している解だとはわかっているものの下タブといえばiOSのアレをどうしても想像してしまうためクセは気になります.
この記事ではそれらのクセ完全に断ち切って消してiOSライクな下タブを目指します

アイテムの色を選択状態によって変える

リソースファイルにcolorフォルダなどを作成し以下のファイルを追加します.
選択・非選択時の色は各自変えてください.
選択状態の色がプライマリーカラーにする場合は以下の操作は不要で一番下のcheckedtrueをセットしてやるだけで可能です.

nav_color.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:color="@color/colorPrimary" />
    <item android:state_checked="false" android:color="@android:color/darker_gray"/>
</selector>

次にBottomNavigationViewが記述されているレイアウトファイルに以下の文を追加します

activity_main.xml
app:itemIconTint="@color/nav_color"
app:itemTextColor="@color/nav_color"

最後にコード上から選択時に選択状態を直接変更すれば,選択に合わせてアイテムの色を変更できます.

MainActivity.java
menuItem.setChecked(true);

アイテムの名前を常に表示させる

デフォルトの設定ではアイテム数が増えるとアイテムの名前は選択状態のものだけが表示されていて,常時表示にはなっていません.
これを常時表示にするにはBottomNavigationViewに以下のパラメータを指定することで解決できます.

activity_main.xml
app:labelVisibilityMode="labeled"

選択時のアイコン拡大アニメーションを無効化

このアニメーションは選択・非選択の状態においてアイテム内のアイコン・テキストの大きさが変動するために起きています.そもそも標準のフォントサイズは若干大きいのでiOSと同じ10spに統一します.
dimes.xmlに以下の文を追加します.

dimes.xml
<dimen name="design_bottom_navigation_text_size" tools:override="true">10sp</dimen>
<dimen name="design_bottom_navigation_active_text_size" tools:override="true">10sp</dimen>

これで選択・非選択でも文字の大きさが固定され選択中のアイテムが大きくなるアニメーションなどは起こらなくなります.

BottomNavigationViewが手前に来るのを防ぐ

どういうわけかデフォルトではBottomNavigationViewは画面下に固定されている状態ではなく,EditText時などにはFloatingActionButtonの様にNavigationViewごとキーボード上に浮上してきます.
それを防ぐのが以下のコードです.

AndroidManifest.xml
<activity android:name=".MainActivity"
          android:windowSoftInputMode="adjustPan"></activity>

ManifestファイルのBottomNavigationViewが入っているActivityの部分をこのように書き換えることで,BottomViewNavigationが文章編集時でも所定の位置にいてくれます.

9
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9
4