BottomNavigationView - 影と波紋効果

Question

BottomNavigationViewが1週間前にリリースされたとき、私は本当に嬉しかったですが、私はそれを解決できないいくつかの問題に直面しています.BottomNavigationViewの影をGoogleフォトと同じ方法で見るのが好きですAndroidのアプリケーションは、私たちを示しています

我々はGoogleの写真のメニュー項目をタップすると、我々はアイコンとテキストの色（選択）のように青色の着色された波及効果を見ることができます。

Googleが提供するソリューションのみを実装すると、灰色の波紋エフェクトカラーが表示され、最悪の場合、下部ナビゲーションビュー（design:itemBackground="..."）の背景色を変更すると表示されません。

誰かがそれを解決する方法を知っていますか？

Answer 1

あなたが好きなあなたのボタンにセレクターを追加したい場合があります：

android:background="@drawable/my_selector" 

/res/drawable/my_selector.xml：

<ripple android:color="@color/my_favourite_color" 
    xmlns:android="http://schemas.android.com/apk/res/android" /> 

もっと読むRippleDrawable

Answer 2

このFrameLayoutを取ります影を描くとthis gradient drawable xml：

public class DrawShadowFrameLayout extends FrameLayout { 
    private Drawable mShadowDrawable; 
    private final int mShadowElevation = 8; 
    private int mWidth; 
    private int mHeight; 
    private boolean mShadowVisible = true; 

    public DrawShadowFrameLayout(Context context) { 
     this(context, null, 0); 
     init(); 
    } 

    public DrawShadowFrameLayout(Context context, AttributeSet attrs) { 
     this(context, attrs, 0); 
     init(); 
    } 

    public DrawShadowFrameLayout(Context context, AttributeSet attrs, int defStyleAttr) { 
     super(context, attrs, defStyleAttr); 
     init(); 
    } 

    private void init() { 
     mShadowDrawable = ContextCompat.getDrawable(getContext(), R.drawable.shadow); 
     if (mShadowDrawable != null) { 
      mShadowDrawable.setCallback(this); 
     } 
     setWillNotDraw(!mShadowVisible); 
    } 

    @Override 
    protected void onSizeChanged(int w, int h, int oldw, int oldh) { 
     super.onSizeChanged(w, h, oldw, oldh); 
     mWidth = w; 
     mHeight = h; 
     updateShadowBounds(); 
    } 


    private void updateShadowBounds() { 
     if (mShadowDrawable != null) { 
      mShadowDrawable.setBounds(0, 0, mWidth, mShadowElevation); 
     } 
     ViewCompat.postInvalidateOnAnimation(this); 
    } 

    @Override 
    public void draw(Canvas canvas) { 
     super.draw(canvas); 
     if (mShadowDrawable != null && mShadowVisible) { 
      getBackground().setBounds(0, mShadowDrawable.getBounds().bottom, mWidth, mHeight); 
      mShadowDrawable.draw(canvas); 
     } 
    } 

    public void setShadowVisible(boolean shadowVisible) { 
     setWillNotDraw(!mShadowVisible); 
     updateShadowBounds(); 
    } 

    int getShadowElevation() { 
     return mShadowVisible ? mShadowElevation : 0; 
    } 

} 

のように、この中にあなたBottomNavigationViewこのレイアウトをラップ：残念ながら、ネイティブの影がビューの下に描かれている

<DrawShadowFrameLayout> 
    <BottomNavigationView /> 
</DrawShadowFrameLayout> 

、我々はこの上向きの影に自分自身を模倣する必要があります。

DrawShadowFrameLayoutもandroid:elevation="8dp"を追加しないでください。

Another approach is extendingBottomNavigationViewそしてこれを上書きするdraw()。これは、あなたのビュー階層内でFrameLayoutを緩めるのに役立ちます。

Answer 3

これは、デザインライブラリ内の問題であるとhereを報告されています。

この質問の影部分は既に解決されているため、Support and DesignライブラリのGradle依存関係を25.0.1に更新する必要があります。

Googleのエンジニアは、波及効果の問題も修正されていると主張していますが、これを正しく機能させることができませんでした。

BottomNavigationViewためのXMLは、ここで見ることができるようになります方法の例：

<android.support.design.widget.BottomNavigationView 
    android:id="@+id/bottom_navigation" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:layout_alignParentBottom="true" 
    android:background="@android:color/black" 
    app:itemBackground="@android:color/white" 
    app:itemIconTint="@drawable/bottom_navigation_selector" 
    app:itemTextColor="@drawable/bottom_navigation_selector" 
    app:menu="@menu/bottom_navigation_menu" /> 

スター、それに意識を追加する問題。

Ripple effect + Elevation gif

を私はあなたを助けるためにdemo on GitHubを作成しました：ここ

Answer 4

は私が達成したものです。

まず第一には、それだけであなたがapp:itemBackgroundプロパティを使用するか、あなたのケースで、それはdesign:itemBackground="..."かどう波及効果が消えてしまうことを、あなたが白の背景色を設定した場合android:background="@android:color/white"

注の作品最新のサポートライブラリcompile "com.android.support:design:$SUPPORT_VERSION"

を使用し、それだけでそれを削除します。あなたがそうAppThemeにおける標準灰色の波及効果の変更colorControlHighlight propropertyを変更したい場合は

<?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:color="@android:color/darker_gray" /> 
</selector> 

：あなたはセレクタファイルを作成する必要が

：有効/無効状態を取り扱い

<android.support.design.widget.BottomNavigationView 
    android:id="@+id/bottom_navigation" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:layout_alignParentBottom="true" 
    android:background="@android:color/white" 
    app:elevation="16dp" 
    app:itemIconTint="@drawable/nav_item_color_state" 
    app:itemTextColor="@drawable/nav_item_color_state" 
    app:menu="@menu/bottom_navigation_main" /> 

次のようになります：

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"> 
    <!-- Customize your theme here. --> 
    <item name="colorPrimary">@color/colorPrimary</item> 
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item> 
    <item name="colorAccent">@color/colorAccent</item> 
    <item name="colorControlHighlight">@color/colorPrimaryRipple</item> 
</style> 

カラーリップルには26％のアルファを使用します。あなたのBottomNavigationView app:elevation="8dp"でシャドウ利用昇格を

<color name="colorPrimary">#3F51B5</color> 
<color name="colorPrimaryRipple">#423F51B5</color> 

Answer 5

1. 。
2. 波紋効果のために、あなただけのapp:itemBackgroundを削除する必要があり、下にそのandroid:background="@android:color/white"

全例のように白い色にandroid:backgroundを設定します。

<android.support.design.widget.BottomNavigationView 
     android:id="@+id/bottom_navigation" 
     android:layout_width="match_parent" 
     android:layout_height="56dp" 
     android:layout_alignParentBottom="true" 
     android:background="@android:color/white" 
     android:clickable="true" 
     app:elevation="8dp" 
     app:itemIconTint="@drawable/nav_item_color_state" 
     app:itemTextColor="@drawable/nav_item_color_state" 
     app:menu="@menu/my_navigation_items" />