Comment placer un FAB à la fin d'une vue?

-1

J'essaye de créer une disposition comme ci-dessous.Comment placer un FAB à la fin d'une vue?

Le problème est que le FAB change de position dans certains périphériques parce que j'ai codé en dur la marge inférieure.

Je veux le FAB comme dans l'image ci-dessous.

PRESENT CODE

<RelativeLayout 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="@drawable/mlogin"> 

    <RelativeLayout 
     android:layout_width="match_parent" 
     android:layout_height="match_parent"> 

     <android.support.v7.widget.CardView 
      android:id="@+id/card" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:layout_centerHorizontal="true" 
      android:layout_margin="30dp" 
      android:elevation="8dp" 
      app:cardCornerRadius="10dp"> 

      <LinearLayout 
       android:layout_width="fill_parent" 
       android:layout_height="fill_parent" 
       android:layout_margin="30dp" 
       android:orientation="vertical"> 

       <ImageView 
        android:id="@+id/logo" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_gravity="center" 
        android:padding="10dp" 
        android:src="@drawable/selfiel" /> 

       <TextView 
        android:layout_width="wrap_content" 
        android:layout_height="match_parent" 
        android:layout_gravity="center" 
        android:text="Login" 
        android:textAlignment="center" 
        android:textColor="@color/colorAccent" 
        android:textSize="22sp" /> 

       <!-- Email Label --> 
       <android.support.design.widget.TextInputLayout 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content"> 

        <EditText 
         android:id="@+id/input_email" 
         android:layout_width="match_parent" 
         android:layout_height="wrap_content" 
         android:hint="Email" 
         android:inputType="textEmailAddress" 
         android:textColor="@color/white" /> 
       </android.support.design.widget.TextInputLayout> 

       <!-- Password Label --> 
       <android.support.design.widget.TextInputLayout 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" 
        android:layout_marginBottom="40dp"> 

        <EditText 
         android:id="@+id/input_password" 
         android:layout_width="match_parent" 
         android:layout_height="wrap_content" 
         android:hint="Password" 
         android:inputType="textPassword" 
         android:textColor="@color/white" /> 
       </android.support.design.widget.TextInputLayout> 
      </LinearLayout> 
     </android.support.v7.widget.CardView> 

     <android.support.design.widget.FloatingActionButton 
      android:id="@+id/fab" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_above="@+id/forgot" 
      android:layout_centerHorizontal="true" 
      android:layout_marginBottom="103dp" 
      android:src="@drawable/ic_done" /> 

     <TextView 
      android:id="@+id/forgot" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_above="@+id/submit" 
      android:layout_centerHorizontal="true" 
      android:layout_gravity="center" 
      android:text="Forgot password?" 
      android:textColor="@color/white" 
      android:textSize="18sp" /> 

     <android.support.v7.widget.AppCompatButton 
      android:id="@+id/submit" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:layout_alignParentBottom="true" 
      android:layout_centerHorizontal="true" 
      android:layout_margin="20dp" 
      android:background="@color/colorAccent" 
      android:onClick="submit" 
      android:text="Sign Up" 
      android:textColor="@color/white" 
      android:textSize="18sp" /> 

    </RelativeLayout> 
</RelativeLayout>

Source

2015-12-15 user3467240

un FAB a l'air bizarre – njzk2

Quel est le résultat de votre code actuel? S'il vous plaît poster une capture d'écran. –

La capture d'écran ci-dessus est le résultat actuel. Mais la position FAB est en train de changer dans d'autres appareils. – user3467240

Vous souhaitez probablement utiliser le CoordinatorLayout.

La structure de base serait comme suit:

<?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" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"> 

    <android.support.design.widget.AppBarLayout 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:background="@drawable/mlogin"> 

     <android.support.v7.widget.CardView 
      android:id="@+id/card" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:layout_centerHorizontal="true" 
      android:layout_margin="30dp" 
      android:elevation="8dp" 
      app:cardCornerRadius="10dp"> 

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

       <ImageView 
        android:id="@+id/logo" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_gravity="center" 
        android:padding="10dp" 
        android:src="@drawable/selfiel" /> 

       <TextView 
        android:layout_width="wrap_content" 
        android:layout_height="match_parent" 
        android:layout_gravity="center" 
        android:text="Login" 
        android:textAlignment="center" 
        android:textColor="@color/colorAccent" 
        android:textSize="22sp" /> 

       <!-- Email Label --> 
       <android.support.design.widget.TextInputLayout 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content"> 

        <EditText 
         android:id="@+id/input_email" 
         android:layout_width="match_parent" 
         android:layout_height="wrap_content" 
         android:hint="Email" 
         android:inputType="textEmailAddress" 
         android:textColor="@color/white" /> 

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

       <!-- Password Label --> 
       <android.support.design.widget.TextInputLayout 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" 
        android:layout_marginBottom="40dp"> 

        <EditText 
         android:id="@+id/input_password" 
         android:layout_width="match_parent" 
         android:layout_height="wrap_content" 
         android:hint="Password" 
         android:inputType="textPassword" 
         android:textColor="@color/white" /> 

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

      </LinearLayout> 

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

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

      <TextView 
       android:id="@+id/forgot" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_gravity="center_horizontal" 
       android:text="Forgot password?" 
       android:textColor="@color/white" 
       android:textSize="18sp" /> 

      <android.support.v7.widget.AppCompatButton 
       android:id="@+id/submit" 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:layout_margin="20dp" 
       android:text="Sign Up" 
       android:onClick="submit" 
       android:background="@color/colorAccent" 
       android:textColor="@color/white" 
       android:textSize="18sp" 
       android:layout_gravity="bottom|center_horizontal" /> 

     </LinearLayout> 

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

    <android.support.design.widget.FloatingActionButton 
     android:id="@+id/fab" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:src="@drawable/ic_done" 
     app:layout_anchor="@id/card" 
     app:layout_anchorGravity="bottom|center"/> 

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

Les lignes magiques ici sont dans le FloatingActionButton qui disent:

app:layout_anchor="@id/card" 
app:layout_anchorGravity="bottom|center"

Cela indique essentiellement votre mise en page que la FAB est liée à la carte , et qu'il doit être positionné par rapport à la carte (centré en bas).

Vous pouvez trouver la documentation CoordinatorLayout here, et un très bon tutoriel here.

Bonne chance!

Source

2015-12-15 19:46:22

FAB fonctionne très bien. Mais le Textview & Button sont cachés? – user3467240

Oui, vous aviez raison. J'ai modifié ma réponse pour refléter les changements appropriés. Vous remarquerez que j'ai également supprimé certains attributs inutiles dans certaines de vos vues. L'astuce consistait à inclure le lien "oublié" et le bouton à l'intérieur de l'AppBarLayout. Je les ai mis à l'intérieur d'un LinearLayout afin que je puisse profiter des lignes suivantes: android: orientation = "vertical" android: gravity = "bottom" –

utiliser Android: layout_gravity = "bottom" au lieu de régler ensuite les marges si vous voulez. donc vous pouvez le faire:

<android.support.design.widget.FloatingActionButton 
      android:id="@+id/fab" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_above="@+id/forgot" 
      android:layout_centerHorizontal="true" 
      android:layout_marginBottom="13dp" 
      android:layout_gravity="bottom" 
      android:src="@drawable/ic_done" />

Source

2015-12-15 19:05:52 j2emanue

Comment placer un FAB à la fin d'une vue?

Répondre

Questions connexes