Android FAB not at right place

Question

My Floating button is not aligned where I want it. I want it next to the InputBox but also a bit more down on the layout. It is currently a bit above the InputBox I have seen the following Link and I have tried it but I could't get it working, Here is my layout

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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/activity_chat"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <include
        android:id="@+id/toolbar"
        layout="@layout/toolbar" />
    <RelativeLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/main_content"
        android:padding="10dp"
        android:focusable="true"
        android:focusableInTouchMode="true"
        android:layout_below="@id/toolbar">
        <android.support.design.widget.FloatingActionButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_send_black_24dp"
            android:id="@+id/fsend"
            android:clickable="true"
            android:layout_alignParentBottom="true"
            android:layout_alignParentEnd="true"
            android:tint="@android:color/white"
            android:layout_gravity="bottom|right"
            app:backgroundTint="#2196F3"
            app:elevation="6dp"
            app:fabSize="mini" />
        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Write message here"
            android:layout_toLeftOf="@+id/fsend"
            android:background="@drawable/bubble_reciever"
            android:layout_alignParentBottom="true"
            android:layout_alignParentStart="true"
            android:id="@+id/chat_input" />
        <ListView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_alignParentTop="true"
            android:layout_alignParentStart="true"
            android:layout_above="@id/fsend"
            android:dividerHeight="16dp"
            android:divider="@android:color/transparent"
            android:id="@+id/list_of_messages"
            android:layout_marginBottom="16dp" />
    </RelativeLayout>
</RelativeLayout>

Here is a screenshot

EDIT 1:

<EditText
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Write message here"
    android:layout_toLeftOf="@+id/fsend"
    android:background="@drawable/bubble_reciever"
    android:layout_alignParentBottom="true"
    android:layout_alignParentStart="true"
    android:id="@+id/chat_input" />
<android.support.design.widget.FloatingActionButton
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
      android:layout_alignParentBottom="true"
      android:layout_alignParentEnd="true"
  android:layout_alignBaseline="@id/chat_input"
      android:src="@drawable/ic_send_black_24dp"
      android:id="@+id/fsend"
      android:clickable="true"
      android:tint="@android:color/white"
      app:backgroundTint="#2196F3"
      app:fabSize="mini" />

put fab and edittext in horizontal linearlayout, and align fab and edittext in center of linear layout, then align this linearlayout to parentBottom. — AKSHAY MANAGOOLI, May 02 '17 at 09:38
set EditText's width, in ur current layout it is match_parent, so it will occupy all space and push fab out of screen, — AKSHAY MANAGOOLI, May 02 '17 at 11:49

Mohammad Zarei · Answer 1 · 2017-05-02T11:59:18.253

0

I think if you add android:layout_alignBaseline="@id/chat_input" in your fab view it would do the work.

ATTENTION : you must swap the position of your fab and your edittext in your xml file.

edited May 02 '17 at 11:59

answered May 02 '17 at 09:36

Mohammad Zarei

1,773
14
33

Didn't work, I am now trying what the guy in comments suggested – Donald Jansen May 02 '17 at 11:39
oh...sorry to hear that, let me know if that worked. And if it didn't work, I may have other solutions for your problem – Mohammad Zarei May 02 '17 at 11:46
His suggestion removed the fab completely :( – Donald Jansen May 02 '17 at 11:47
@DonaldJansen you want it a little more close to input box yeah?? – Mohammad Zarei May 02 '17 at 11:51
the fab is slightly higher than the edittext, so I want the fab to go down slightly – Donald Jansen May 02 '17 at 11:54
my approach make it in the same level as the edit text. I'll change it now, and let me know the result. – Mohammad Zarei May 02 '17 at 11:58
I think I my do it wrong, but if I add 'android:layout_alignBaseline="@id/chat_input"' then the fab goes under the chat_input and stretches the width of the screen, see my updated question below is the change that I made – Donald Jansen May 02 '17 at 12:06
@DonaldJansen what if you remove these 2 lines? `android:layout_alignParentBottom="true"` `android:layout_alignParentEnd="true"` – Mohammad Zarei May 03 '17 at 11:25

Android FAB not at right place

1 Answers1