Feuille inférieure et marge FAB

Comment ajouter une marge entre une feuille inférieure et un bouton d'action flottante dans Android. Je l'ai fait travailler en utilisant un autre FAB et le rendre invisible, mais le FAB est juste au-dessus de la feuille de fond. Voir cette image: 1 Feuille inférieure et marge FAB

Et le code:

<android.support.design.widget.CoordinatorLayout 
android:id="@+id/coordinator" 
android:layout_height="match_parent" 
android:layout_width="match_parent" 
android:theme="@style/Theme.AppCompat.NoActionBar" 
xmlns:android="http://schemas.android.com/apk/res/android" 
xmlns:app="http://schemas.android.com/apk/res-auto"> 

<RelativeLayout 
    android:id="@+id/search_relativeLayout" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:theme="@style/Theme.AppCompat.NoActionBar"> 

    <com.google.android.gms.maps.MapView 
     android:id="@+id/mapView" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" /> 

</RelativeLayout> 

<android.support.v4.widget.NestedScrollView 
    android:id="@+id/bottom_sheet" 
    android:layout_width="match_parent" 
    android:layout_height="300dp" 
    android:background="@android:color/white" 
    android:elevation="1dp" 
    app:behavior_hideable="true" 
    app:behavior_peekHeight="0dp" 
    app:layout_behavior="@string/bottom_sheet_behavior"> 

    <RelativeLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:orientation="vertical"> 
     <de.hdodenhof.circleimageview.CircleImageView 
      android:id="@+id/circle_picture" 
      android:src="@mipmap/login_background" 
      android:layout_margin="10dp" 
      android:layout_width="50dp" 
      android:layout_height="50dp" /> 
     <TextView 
      android:id="@+id/name_bottom_sheet" 
      android:layout_toEndOf="@id/circle_picture" 
      android:text="Title" 
      android:textColor="@color/buttonLoginColor" 
      android:layout_margin="10dp" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" /> 
     <TextView 
      android:id="@+id/address_bottom_sheet" 
      android:layout_below="@id/name_bottom_sheet" 
      android:layout_toEndOf="@id/circle_picture" 
      android:layout_marginStart="10dp" 
      android:textColor="@color/btn_create" 
      android:text="" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" /> 
    </RelativeLayout> 
</android.support.v4.widget.NestedScrollView> 

<android.support.design.widget.FloatingActionButton 
    android:id="@+id/fab2" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:visibility="invisible" 
    android:layout_margin="15dp" 
    app:layout_anchor="@id/bottom_sheet" 
    app:layout_anchorGravity="top|end"/> 

<android.support.design.widget.FloatingActionButton 
    android:id="@+id/floatingButton" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_marginBottom="50dp" 
    android:layout_marginEnd="15dp" 
    app:backgroundTint="@color/buttonLoginColor" 
    app:borderWidth="0dp" 
    app:elevation="6dp" 
    app:layout_anchor="@id/fab2" 
    app:layout_anchorGravity="top"/> 

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

J'utilise un NestedScrollView pour afficher la feuille de fond.

Source

2017-03-22 Emile Netter

pouvez-vous afficher le XML complet pour th est la disposition peut donc vous aider à mieux comprendre? certains comment vous pouvez réaliser ceci par disposition relative ou de coordonnée – 9spl

J'emploie une disposition de coordonnateur oui. J'ai édité ma question. –

oui RelativeLayout fera un travail, vous pouvez essayer avec elle, si vous le trouvez utile que ne pas oublier de le marquer vrai, merci. – 9spl

Oui, vous pouvez essayer avec RelativeLayout, je ne suis toujours pas en mesure de comprendre pourquoi vous avez donné la hauteur fixe de feuille inférieure avec 300dp, de toute façon cela fera sans un autre bouton fabuleux ..

<RelativeLayout 
    android:id="@+id/coordinator" 
    android:layout_height="match_parent" 
    android:layout_width="match_parent" 
    android:theme="@style/Theme.AppCompat.NoActionBar" 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto"> 

    <RelativeLayout 
     android:id="@+id/search_relativeLayout" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:theme="@style/Theme.AppCompat.NoActionBar"> 

     <com.google.android.gms.maps.MapView 
      android:id="@+id/mapView" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" /> 

    </RelativeLayout> 

    <android.support.v4.widget.NestedScrollView 
     android:id="@+id/bottom_sheet" 
     android:layout_width="match_parent" 
     android:layout_height="300dp" 
     android:layout_alignParentBottom="true" 
     android:background="@android:color/white" 
     android:elevation="1dp" 
     app:behavior_hideable="true" 
     app:behavior_peekHeight="0dp" 
     app:layout_behavior="@string/bottom_sheet_behavior"> 

     <RelativeLayout 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:orientation="vertical"> 
      <de.hdodenhof.circleimageview.CircleImageView 
       android:id="@+id/circle_picture" 
       android:src="@mipmap/login_background" 
       android:layout_margin="10dp" 
       android:layout_width="50dp" 
       android:layout_height="50dp" /> 
      <TextView 
       android:id="@+id/name_bottom_sheet" 
       android:layout_toEndOf="@id/circle_picture" 
       android:text="Title" 
       android:textColor="@color/buttonLoginColor" 
       android:layout_margin="10dp" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" /> 
      <TextView 
       android:id="@+id/address_bottom_sheet" 
       android:layout_below="@id/name_bottom_sheet" 
       android:layout_toEndOf="@id/circle_picture" 
       android:layout_marginStart="10dp" 
       android:textColor="@color/btn_create" 
       android:text="" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" /> 
     </RelativeLayout> 
    </android.support.v4.widget.NestedScrollView> 



    <android.support.design.widget.FloatingActionButton 
     android:id="@+id/floatingButton" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_above="@+id/bottom_sheet" 

     android:layout_margin="15dp" 
     app:backgroundTint="@color/buttonLoginColor" 
     app:borderWidth="0dp" 
     android:layout_alignParentRight="true" 
     app:elevation="6dp" 
     app:layout_anchorGravity="top"/> 

</RelativeLayout>

Vous peut également définir vos marges fab bouton selon vos besoins.

Source

2017-03-22 10:14:56 9spl

Lorsque la feuille du bas est à l'état EXPANSE, je veux qu'elle soit seulement 300dp en hauteur. De plus, je ne peux pas utiliser Relative Layout comme vue parent car la vue avec Behavior doit être un enfant direct d'un CoordinatorLayout –

donc vous voulez déplacer le bouton Fab vers le haut en conséquence Nested Scroll View? C'est pourquoi vous utilisez CoordinatorLayout..right? – 9spl

Oui, c'est vrai, je veux un espace entre le FAB et la feuille de fond. Mais le rembourrage ne fonctionne pas –

J'ai eu le même problème. Après des heures de recherches, j'ai compris que cela ne pouvait pas être fait par layout_anchor en raison des directives de conception de matériel. Vous devez utiliser un truc comme celui ci-dessous. J'utilise une vue transparente qui fait une marge entre la vue du contenu de la feuille fab et celle du bas.

Voilà comment je résolu la question:

FAB lui-même:

<android.support.design.widget.FloatingActionButton 
    ... 
    app:layout_anchor="@+id/bottomPanel" 
    app:layout_anchorGravity="right"/>

BottomSheet:

<FrameLayout 
    android:id="@+id/bottomPanel" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:backgound="@android:color/transparent" 
    app:layout_behavior="@string/bottom_sheet_behavior"> 

    <ContentView 
     android:layout_width="match_parent" 
     android:layout_height="300dp" 
     android:layout_marginTop="44dp" 
     android:backgound="@color/colorPrimary" /> 

</FrameLayout>

Assurez la vue racine transparente et votre point de vue du contenu mis à l'intérieur que et ajouter marge de 44dp (taille fab = 56dp fab padding = 16dp 56/2 + 16 = 44)

Source

2017-09-22 16:21:21

Feuille inférieure et marge FAB

Répondre

Questions connexes