Search code examples
javaandroiduser-experience

How to add FloatingActionButton inside RecyclerView

I m new to android programing and i have a tricky problem i passed a couple hours on trying to resolving it but without succuess, im looking how to add FloatingActionButton inside RecyclerView my template look like :

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainFragment">

<android.support.v7.widget.RecyclerView
    android:id="@+id/messages"
    android:layout_width="match_parent"
    android:layout_height="451dp"
    android:layout_weight="1"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:scrollbarStyle="outsideOverlay"
    android:scrollbars="vertical" />
<!-- TODO: fix this by adding the floating button inside the recyclerView -->
<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:src="@drawable/ic_launcher"
    android:layout_margin="16dp" />
<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin"
        android:orientation="horizontal"
        android:gravity="center_vertical">

    <EditText
            android:id="@+id/message_input"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:hint="@string/prompt_message"
            android:imeActionId="@+id/send"
            android:imeActionLabel="@string/action_send"
            android:imeOptions="actionSend"
            android:inputType="text"
            android:maxLines="1"
            android:singleLine="true"/>
    <ImageButton
            android:id="@+id/send_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@android:drawable/ic_menu_send"
            android:contentDescription="@string/action_send"/>

</LinearLayout>

Here a my target layout that i need :

enter image description here

Solution

  • you need to use Relative layout instead Linear. Look at my code for floatingActionButton, this will help you.

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_below="@layout/app_toolbar"
        android:layout_weight="0.6"
        android:orientation="vertical"
        android:stateListAnimator="@null">

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/btn_asset_photo"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentEnd="true"
            android:layout_alignParentBottom="true"
            android:layout_gravity="end|bottom"
            android:layout_margin="16dp"
            android:background="@android:color/transparent"
            android:backgroundTint="@color/white"
            android:src="@drawable/icon_camera"
            app:rippleColor="@color/white" />

        <android.support.v7.widget.RecyclerView
            android:id="@+id/messages"
            android:layout_width="match_parent"
            android:layout_height="451dp"
            android:layout_weight="1"
            android:paddingLeft="@dimen/activity_horizontal_margin"
            android:paddingRight="@dimen/activity_horizontal_margin"
            android:scrollbarStyle="outsideOverlay"
            android:scrollbars="vertical" />
 <RelativeLayout/>