LoginSignup
3

More than 5 years have passed since last update.

BottomNavigationViewの上に何かを重ねたい

Last updated at Posted at 2017-05-25

やりたいこと

備忘録っぽく。

Designサポートライブラリに入ってる
BottomNavigationView
の上に何かを重ねたい。
!マークとかそーゆーの。

試したこと

その1

FrameLayoutとかにBottomNavigationViewと重ねたいViewと同居させるとか。
駄目だった。

その2

BottomNavigationViewはたぶんZオーダーがつおいんだと思う。
ので、レイアウトでもコードでもいいんだけど
それより手前に指定してあげたら重なった。

レイアウトだとこんな

android:translationZ=xxdp  xxには極端な数値

でも、minSDKバージョンが○○以上でしか使えないってことで没

その3

↓のように
BottomNavigationViewの外周をFrameLayoutで囲って
さらに重ねたいものを別途用意したら重なった。

    <!-- 外周を囲う -->
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:layout_alignParentBottom="true"
        >

        <android.support.design.widget.BottomNavigationView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="bottom"
            android:background="?android:attr/windowBackground"
            app:menu="@menu/navigation"
            />

    </FrameLayout>

    <!-- 上に兼ねたいのを別途用意する -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:orientation="horizontal"
        android:layout_alignParentBottom="true"
        >

        <ここに重ねるなにかを>

    </LinearLayout>

その4

Xperia Z ultraとか変態解像度の端末で動かしたり
横画面で見るとボタンが中央に寄ってバランスが崩れてガッカリ。

BottomNavigationViewのChildを辿って色をつけてみたら左右にスペースが。。。

BottomNavigationMenuView menuView = (BottomNavigationMenuView) mNavigation.getChildAt(0);
menuView.setBackgroundColor(Color.RED);

ので、真面目に計算することにしました。

final LinearLayout view;  // 重ねる用のView達

int width = getResources().getDimensionPixelSize(android.support.design.R.dimen.design_bottom_navigation_active_item_max_width);
int height = (int) getResources().getDimension(R.dimen.hogehoge);

RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(
        width * view.getChildCount(),
        height
);

layoutParams.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM);
layoutParams.addRule(RelativeLayout.CENTER_HORIZONTAL);

view.setLayoutParams(layoutParams);

子要素の数で幅を計算して
あとはそれを中央と下段に寄せてます。

おまけ。

ボタン画像のサイズを変更するサンプル。
画像そのものを変更もできるようだけど、触るともとに戻る。。

BottomNavigationMenuView menuView = (BottomNavigationMenuView) navigation.getChildAt(0);
for (int i = 0; i < menuView.getChildCount(); i++) {
    Drawable drawable = ContextCompat.getDrawable(this, R.drawable.icon);

    BottomNavigationItemView item = (BottomNavigationItemView) menuView.getChildAt(i);

    final View iconView = menuView.getChildAt(i).findViewById(android.support.design.R.id.icon);

    final ViewGroup.LayoutParams layoutParams = iconView.getLayoutParams();
    final DisplayMetrics displayMetrics = getResources().getDisplayMetrics();
    // set your height here
    layoutParams.height = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 32, displayMetrics);
    // set your width here
    layoutParams.width = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 32, displayMetrics);
    iconView.setLayoutParams(layoutParams);
}

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
3