Superposition de contenu au-dessus d'AppBarLayout en utilisant la nouvelle conception de matériaux

Je veux réaliser quelque chose comme ça. (Pas le FAB ou la Snackbar). Comment puis-je créer une mise en page, superposer l'AppBarLayout? Comme ça! (Par exemple)

AppBarLayout avec un contenu superposé

J'aime Play Store:

Tout comme sur Play Store

Mon AppBarLayout avec CoordinatorLayout et NestedScrollView avec RelativeLayout comme contenu ressemble à ceci:

<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/rootLayout" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="@dimen/_118sdp" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/collapsingToolbarLayout" android:layout_width="match_parent" android:layout_height="match_parent" app:contentScrim="@color/mpc_pink" app:expandedTitleMarginStart="@dimen/_40sdp" app:layout_scrollFlags="scroll|exitUntilCollapsed"> <de.mypostcardstore.widgets.ItemImageView android:id="@+id/header" android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="centerCrop" android:src="@color/mpc_pink" app:layout_collapseMode="parallax" app:layout_collapseParallaxMultiplier="0.7" /> <android.support.v7.widget.Toolbar android:id="@+id/article_toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:minHeight="?attr/actionBarSize" app:contentScrim="@color/mpc_pink" app:layout_collapseMode="pin" app:layout_scrollFlags="scroll|enterAlways" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" /> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout> <android.support.v4.widget.NestedScrollView android:layout_width="match_parent" android:layout_height="match_parent" android:background="?android:colorBackground" android:fillViewport="true" app:layout_behavior="@string/appbar_scrolling_view_behavior"> <RelativeLayout android:layout_width="match_parent".....> 

Ce serait génial si quelqu'un pouvait m'aider. Je ne trouve rien sur Internet …

Merci d'avance!

  • Comment afficher les éléments d'action en bas à l'aide de la barre d'outils
  • Pourquoi existe-t-il différentes oppositions pour les icônes actives et inactives dans la conception matérielle?
  • CardView ne présente pas Shadow dans Android L
  • Styling le menu contextuel dans Android 5.0
  • Modifier la conception des matériaux AppCompat ActionBar Couleur
  • Comment faire pour que le menu contextuel de débordement évite d'entraver la barre d'action?
  • Getting AppCompat ne prend pas en charge l'exception des caractéristiques du thème actuel après la mise à niveau vers la version AppCompat v22.1.0 issue
  • Comment cliquer sur les vues derrière une barre d'outils?
  • 4 Solutions collect form web for “Superposition de contenu au-dessus d'AppBarLayout en utilisant la nouvelle conception de matériaux”

    Ajoutez simplement quelque chose comme

     app:behavior_overlapTop="64dp" 

    À votre NestedScrollView et sera placé au-dessus de la barre d'outils étendue.

    De plus, vous devez ajouter quelque chose comme

     app:expandedTitleMarginBottom="70dp" 

    À votre CollapsingToolbarLayout afin que le titre n'apparaisse pas sous votre contenu de défilement superposé.

    C'est plutôt simple, vraiment. Vous pouvez le faire en utilisant une combinaison de ToolBar , FrameLayout et votre vue de contenu (pourrait être un ListView comme votre premier exemple ou tout).

    L'idée est de faire en sorte que votre FrameLayout possède la même couleur que votre ToolBar , ce qui donne l'illusion de ToolBar étant beaucoup plus grand qu'il ne l'est. Ensuite, tout ce qu'il reste à faire est de faire de votre vue de contenu le dernier (ou dans l'API 21 et plus haut: posséder l'attribut d' elevation le plus élevé) afin qu'il apparaisse comme s'il flottait au-dessus de FrameLayout précité.

    Voir l'illustration ci-dessous:

    Entrez la description de l'image ici

    Maintenant que vous avez la grande idée, ci-dessous est un véritable extrait XML en direct pour ce faire. (J'utilise effectivement cette mise en page dans l'une de mes applications):

     <!-- Somewhere in your layout.xml --> .... <android.support.v7.widget.Toolbar android:id="@+id/tb_toolbar" android:layout_width="match_parent" android:layout_height="@dimen/abc_action_bar_default_height_material" android:background="?attr/colorPrimary" android:minHeight="?attr/actionBarSize" app:contentInsetStart="72dp" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/> <!-- This is the 'faux' ToolBar I've been telling you about. This is the part that will be overlaid by the content view below. --> <FrameLayout android:id="@+id/v_toolbar_extension" android:layout_width="match_parent" android:layout_height="64dp" android:layout_below="@+id/tb_toolbar" android:background="?attr/colorPrimary" android:elevation="2dp"/> <!-- Normally, I use this FrameLayout as a base for inflating my fragments. You could just use put your content view here. --> <FrameLayout android:id="@+id/ly_content" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_below="@+id/tb_toolbar" android:elevation="3dp"/> .... 

    Notez que mon ly_content a une valeur d'élévation plus élevée que celle de v_toolbar_extension . C'est ce qui vous donnera l'effet désiré de la barre d'outils "superposée".

    Last but not least, vous souhaitez ajouter cette ligne quelque part dans onCreate() votre activité:

     /* Assuming mToolbar exists as a reference to your ToolBar in XML. */ setSupportActionBar(mTbToolbar); getSupportActionBar().setElevation(0); 

    Ce que ces codes font est de régler votre élévation ToolBar à zéro; En supprimant les ombres prédéfinies qui ont été données par défaut dans ToolBars. Si vous ne faites pas cela, cette ombre créera une "couture" entre votre ToolBar et votre FrameLayout , brisant ainsi l'illusion de ces deux étant les mêmes.

    Ps , Il est également important de donner à votre contenu une forme de rembourrage de chaque côté. Dans ce cas, votre vue de contenu ne couvrira pas toute la largeur de l'écran (ce qui rendrait cet effet inutile).


    Remarque: Je vois quelques bonnes réponses ici qui ont mentionné l'absence de FrameLayout et plutôt que la FrameLayout d' FrameLayout plus grande. Bien que, en théorie, cela puisse fonctionner aussi bien que ma solution proposée, vous pourriez avoir des problèmes lorsque vous essayez de manipuler le défilement; En faisant cela, vous ne pourrez pas séparer ToolBar et son extension. Vous serez forcé de rendre la Toolbar d' Toolbar statique ou de défiler complètement la Toolbar d' Toolbar (rend le déplacement un peu bizarre).

    Ajoutez à cela, le fait que vous ne pouvez pas facilement attribuer un dessin personnalisé dans une Toolbar . Par conséquent, il est difficile de suivre l'exemple Google Play que vous avez donné ci-dessus. Bien que si vous utilisez ma solution, tout ce que vous devriez faire est de rendre votre Toolbar transparente et d'assigner le Drawable à FrameLayout à la place.

    J'ai essayé de mettre en œuvre des effets comme vous l'avez mentionné, appelé Card Toolbar in Android , et cela a fonctionné comme prévu. Voici ma mise en page, jetez un oeil:

     <FrameLayout 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:background="@color/background_material_light" > <android.support.v7.widget.Toolbar android:layout_width="match_parent" android:layout_height="@dimen/toolbar_double_height" android:background="?attr/colorPrimary" /> <android.support.v7.widget.CardView android:layout_width="match_parent" android:layout_height="match_parent" android:layout_marginLeft="@dimen/cardview_toolbar_spacer" android:layout_marginRight="@dimen/cardview_toolbar_spacer" android:layout_marginTop="?attr/actionBarSize" app:cardBackgroundColor="@android:color/white"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <android.support.v7.widget.Toolbar android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" /> <View android:layout_width="match_parent" android:layout_height="1dp" android:alpha="0.12" android:background="@android:color/black" /> </LinearLayout> </android.support.v7.widget.CardView> </FrameLayout> 

    J'espère que vous serez inspiré.

    J'avais une exigence similaire et je l'ai réalisé comme ci-dessous.

    Votre thème d'activité devrait étendre Theme.AppCompat.Light.NoActionBar. J'ai créé un fichier XML de mise en page comme suit:

     <android.support.v7.widget.Toolbar android:id="@+id/toolbar_main" android:layout_width="match_parent" android:layout_height="@dimen/action_bar_size_x2" android:background="@color/colorPrimary" android:minHeight="?attr/actionBarSize" /> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:layout_marginLeft="15dp" android:layout_marginRight="15dp" android:layout_marginTop="@dimen/action_bar_size" android:orientation="vertical" > <android.support.v7.widget.CardView android:layout_width="match_parent" android:layout_height="match_parent" > <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="10dp" android:text="@string/app_name" android:textSize="24sp" /> </LinearLayout> </android.support.v7.widget.CardView> </LinearLayout> 

    Et l'activité devrait être comme ceci:

     public class MainActivity extends ActionBarActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); Toolbar maintoolbar = (Toolbar) findViewById(R.id.toolbar_main); setSupportActionBar(maintoolbar); getSupportActionBar().setDisplayHomeAsUpEnabled(true); } } 

    J'ai eu une vue comme celle-ci: Entrez la description de l'image ici

    coAndroid est un fan Android de Google, tout sur les téléphones Android, Android Wear, Android Dev et Android Games Apps.