Déplacer le casse-croûte au-dessus de la barre inférieure

Question

Je suis confronté à quelques problèmes avec la nouvelle barre inférieure. Je ne peux pas forcer à déplacer le casse-croûte au-dessus de la barre du bas (c'est ainsi que la directive de conception m'a dit devrait être https://www.google.com/design/spec/components/bottom-navigation.html#bottom-navigation-specs).

Ceci est mon activity_main.xml

<?xml version="1.0" encoding="utf-8"?> 
<android.support.v4.widget.DrawerLayout 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/drawer_layout" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:fitsSystemWindows="true" 
tools:openDrawer="start"> 

<include 
    layout="@layout/app_bar_main_activity" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" /> 

<android.support.design.widget.NavigationView 
    android:id="@+id/nav_view" 
    android:layout_width="wrap_content" 
    android:layout_height="match_parent" 
    android:layout_gravity="start" 
    android:fitsSystemWindows="true" 
    app:headerLayout="@layout/nav_header_main_activity" 
    app:menu="@menu/activity_main_drawer" /> 

</android.support.v4.widget.DrawerLayout> 

Ceci est mon app_bar_main_activity.xml

<?xml version="1.0" encoding="utf-8"?> 
<android.support.design.widget.CoordinatorLayout 
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/main_content" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:fitsSystemWindows="true" 
tools:context="test.tab_activity"> 

<android.support.design.widget.AppBarLayout 
    android:id="@+id/appbar" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:paddingTop="@dimen/appbar_padding_top" 
    android:theme="@style/MyAppTheme.NoActionBar.AppBarOverlay"> 

    <android.support.v7.widget.Toolbar 
     android:id="@+id/main_activity_toolbar" 
     android:layout_width="match_parent" 
     android:layout_height="?attr/actionBarSize" 
     android:background="?attr/colorPrimary" 
     app:layout_scrollFlags="scroll|enterAlways" 
     app:popupTheme="@style/MyAppTheme.NoActionBar.PopupOverlay"> 

    </android.support.v7.widget.Toolbar> 

</android.support.design.widget.AppBarLayout> 



<android.support.v4.view.ViewPager 
    android:id="@+id/container" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    app:layout_behavior="@string/appbar_scrolling_view_behavior" /> 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:orientation="vertical"> 

    <android.support.v4.view.ViewPager 
     android:id="@+id/view_pager" 
     android:layout_width="match_parent" 
     android:layout_height="0dp" 
     android:layout_weight="1" /> 

    <android.support.design.widget.FloatingActionButton 
     android:id="@+id/fab" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_gravity="end|bottom" 
     android:layout_margin="@dimen/fab_margin" 
     android:src="@drawable/ic_add_white_24dp" /> 

    <android.support.design.widget.TabLayout 
     android:id="@+id/tab_layout" 
     style="@style/AppTabLayout" 
     android:layout_width="match_parent" 
     android:layout_height="56dp" 
     android:background="?attr/colorPrimary" 
     /> 

</LinearLayout> 

Le snack-bar à main_activity.java ressemble à ce

FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab); 
    fab.setOnClickListener(new View.OnClickListener() { 
     @Override 
     public void onClick(View view) { 
      Snackbar.make(findViewById(R.id.main_content), "Replace with your own action", Snackbar.LENGTH_LONG) 
        .setAction("Action", null).show(); 
     } 
    }); 

Answer 1

remplacer votre xml ->

<?xml version="1.0" encoding="utf-8"?> 
<android.support.design.widget.CoordinatorLayout 
    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/main_content" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:fitsSystemWindows="true" 
    tools:context="test.tab_activity"> 

    <android.support.design.widget.AppBarLayout 
     android:id="@+id/appbar" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content"> 

     <android.support.v7.widget.Toolbar 
      android:id="@+id/main_activity_toolbar" 
      android:layout_width="match_parent" 
      android:layout_height="?attr/actionBarSize" 
      android:background="?attr/colorPrimary" 
      app:layout_scrollFlags="scroll|enterAlways"> 

     </android.support.v7.widget.Toolbar> 

    </android.support.design.widget.AppBarLayout> 



    <android.support.v4.view.ViewPager 
     android:id="@+id/container" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     app:layout_behavior="@string/appbar_scrolling_view_behavior" /> 

    <LinearLayout 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:orientation="vertical"> 

     <android.support.design.widget.CoordinatorLayout 
      android:layout_width="match_parent" 
      android:layout_height="0dp" 
      android:layout_weight="1" 
      android:id="@+id/placeSnackBar"> 

      <android.support.v4.view.ViewPager 
       android:id="@+id/view_pager" 
       android:layout_width="match_parent" 
       android:layout_height="0dp" 
       android:layout_weight="1" /> 

      <android.support.design.widget.FloatingActionButton 
       android:id="@+id/fab" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_gravity="end|bottom" 
       android:layout_margin="@dimen/fab_margin" 
       android:src="@drawable/ic_menu_gallery" /> 

     </android.support.design.widget.CoordinatorLayout> 

     <android.support.design.widget.TabLayout 
      android:id="@+id/tab_layout" 
      android:layout_width="match_parent" 
      android:layout_height="56dp" 
      android:background="?attr/colorPrimary" /> 

    </LinearLayout> 

</android.support.design.widget.CoordinatorLayout> 

et le code Snack-bar sera

Snackbar.make(findViewById(R.id.placeSnackBar), "Replace with your own action", Snackbar.LENGTH_LONG) 
      .setAction("Action", null).show(); 

Answer 2

Vous pouvez le faire par programme sans encombrer votre xml avec CoordinatorLayouts supplémentaires en changeant les marges du snack-bar.

exemple Java:

Snackbar snack = Snackbar.make(findViewById(R.id.coordinatorLayout), 
    "Your message", Snackbar.LENGTH_LONG); 
CoordinatorLayout.LayoutParams params = (CoordinatorLayout.LayoutParams) 
    snack.getView().getLayoutParams(); 
params.setMargins(leftMargin, topMargin, rightMargin, bottomBar.height); 
snack.getView().setLayoutParams(params); 
snack.show(); 

Kotlin seule ligne:

Snackbar.make(coordinatorLayout, "Your message", Snackbar.LENGTH_LONG).apply {view.layoutParams = (view.layoutParams as CoordinatorLayout.LayoutParams).apply {setMargins(leftMargin, topMargin, rightMargin, bottomBar.height)}}.show() 

Answer 3

J'utilise le BottomNavigationView et Snack-bar de la version de la bibliothèque de support de conception 25.3.1 sur OS cible KitKat, sucettes et Marshmallow. Sur la sucette et au-dessus Snackbar se cache derrière BottomNavigationView mais dans Kitkat BottomNavigationView est caché derrière Snackbar.

J'ai essayé de montrer le Snackbar avec une approche différente. Lorsque Snackbar est affiché, BottomNavigationView est traduit sur l'axe Y (défilement vers le bas) à l'aide de la propriété translationY et d'Interpolator. Une fois que Snackbar est parti, BottomNavigationView apparaît de nouveau avec la même propriété translationY.

Hiding la BottomNavigationView (vers le bas):

CoordinatorLayout.LayoutParams layoutParams = (CoordinatorLayout.LayoutParams) bottomNavigationView.getLayoutParams(); 
bottomNavigationView.animate().translationY(bottomNavigationView.getHeight() + layoutParams.bottomMargin).setInterpolator(new LinearInterpolator()).start(); 

Afficher le BottomNavigationView retour à l'écran:

bottomNavigationView.animate().translationY(0).setInterpolator(new LinearInterpolator()).start(); 

Answer 4

En supposant que votre travaillent avec CoordinatorLayout vous pouvez modifier les layoutparams de snack bar avant appeler show(). En définissant anchorId et anchorGravity, le snackBar s'affiche au-dessus de la barre de navigation inférieure:

val layoutParams = snackbar.view.layoutParams as CoordinatorLayout.LayoutParams 
layoutParams.anchorId = R.id.navigation //Id for your bottomNavBar or TabLayout 
layoutParams.anchorGravity = Gravity.TOP 
layoutParams.gravity = Gravity.TOP 
snackbar.view.layoutParams = layoutParams