Search code examples
androidandroid-layoutandroid-relativelayoutandroid-framelayoutfloating-action-button

How to Place a FAB at the end of a View?


I'm trying to create a layout like below.

The problem is that the FAB is changing position in some devices because i have hardcoded the bottom margin.

I want the FAB as like in the below image.

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>

Solution

  • You probably want to use the CoordinatorLayout.

    The basic layout would be as follows:

    <?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>
    

    The magic lines here are in the FloatingActionButton that say:

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

    This essentially tells your layout that the FAB is related to the card, and that it should be positioned relative to the card (centered at the bottom).

    You can find the CoordinatorLayout documentation here, and a pretty good tutorial here.

    Best of luck!