Android RelativeLayout view clumping up

Question

I'm trying to create a menu by using FloatingActionButtons with accompanying TextViews to the left of each menu item as a title. I'm having difficulties making the layout appear as I would like it to. I'd like all the FloatingActionButtons on the right, and a TextView beside each one. This is my code right now:

<LinearLayout
    android:id="@+id/fab_menu_container"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:layout_alignParentBottom="true"
    android:layout_alignParentRight="true">

    <RelativeLayout
        android:id="@+id/fab_menu"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:visibility="invisible">

        <TextView
            android:id="@+id/txt_button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button 1"
            android:layout_margin="8dp"/>
        <android.support.design.widget.FloatingActionButton
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@id/txt_button1"/>

        <TextView
            android:id="@+id/txt_button2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button 2"
            android:layout_below="@id/txt_button1"/>
        <android.support.design.widget.FloatingActionButton
            android:id="@+id/button2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@id/txt_button2"
            android:layout_below="@id/button1"/>

        <TextView
            android:id="@+id/txt_button3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button 3"
            android:layout_below="@id/txt_button2"/>
        <android.support.design.widget.FloatingActionButton
            android:id="@+id/button3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@id/txt_button3"
            android:layout_below="@id/button2"/>
    </RelativeLayout>

    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:clickable="true"
        android:onClick="generateMenu"/>
</LinearLayout>

score 0 · Answer 1 · answered Jul 19 '16 at 04:12

0

According to its documentation, Floating action buttons are used for a special type of promoted action. Avoid using floating action buttons for minor and destructive actions. Only one floating action button is recommended per screen to increase its prominence. It should represent only the most common action.

Read this link https://material.google.com/components/buttons-floating-action-button.html#buttons-floating-action-button-floating-action-button

for better FAB usage

answered Jul 19 '16 at 04:12

Fatah Rizqy

11
2

I'm using it for a menu, so at first view there would only be one Floating action button on the screen. Upon clicking that, the other buttons become visible and you can navigate from there. Similar to the way the Facebook Messenger app has it. – Jesse Jul 19 '16 at 04:17

score 0 · Answer 2 · answered Jul 19 '16 at 04:23

Are you want it ?. Make easy with LinearLayout, why don't you use it.

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <TextView
                android:id="@+id/txt_button1"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:gravity="center_vertical"
                android:layout_margin="8dp"
                android:layout_weight="0.8"
                android:text="Button 1" />

            <android.support.design.widget.FloatingActionButton
                android:id="@+id/button1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_toRightOf="@id/txt_button1"
                android:gravity="right" />

        </LinearLayout>


        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <TextView
                android:id="@+id/txt_button2"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_margin="8dp"
                android:gravity="center_vertical"
                android:layout_weight="0.8"
                android:text="Button 1" />

            <android.support.design.widget.FloatingActionButton
                android:id="@+id/button2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_toRightOf="@id/txt_button1" />

        </LinearLayout>


        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <TextView
                android:id="@+id/txt_button3"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_margin="8dp"
                android:layout_weight="0.8"
                android:gravity="center_vertical"
                android:text="Button 1" />

            <android.support.design.widget.FloatingActionButton
                android:id="@+id/button3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_toRightOf="@id/txt_button1" />

        </LinearLayout>


        <android.support.design.widget.FloatingActionButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="16dp"
            android:layout_gravity="center_horizontal"
            android:clickable="true"
            android:onClick="generateMenu" /> </LinearLayout>

score 0 · Accepted Answer · answered Jul 19 '16 at 04:37

I think this is what you are looking for

 <LinearLayout
    android:id="@+id/fab_menu_container"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_alignParentRight="true"
    android:gravity="right"
    android:orientation="vertical" >

    <LinearLayout
        android:id="@+id/fab_menu"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical" >

        <LinearLayout
            android:id="@+id/fab1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center_vertical"
            android:orientation="horizontal" >

            <TextView
                android:id="@+id/txt_button1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button 1" />

            <android.support.design.widget.FloatingActionButton
                android:id="@+id/button1"
                android:layout_margin="16dp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
        </LinearLayout>


        <LinearLayout
            android:id="@+id/fab2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center_vertical"
            android:orientation="horizontal" >

            <TextView
                android:id="@+id/txt_button2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button 2" />

            <android.support.design.widget.FloatingActionButton
                android:id="@+id/button2"
                android:layout_margin="16dp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/fab3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center_vertical"
            android:orientation="horizontal" >

            <TextView
                android:id="@+id/txt_button3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button 3" />

            <android.support.design.widget.FloatingActionButton
                android:id="@+id/button3"
                android:layout_margin="16dp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
        </LinearLayout>
    </LinearLayout>

    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:clickable="true"
        android:onClick="generateMenu" />

</LinearLayout>

Result

But still i recommend you to use FloatingActionButton library. it is simple as tea ;)

Happy coding..

Yes! That's exactly what I'm looking for :D The library is even better! — Jesse, Jul 19 '16 at 04:51

score 0 · Answer 4 · edited May 23 '17 at 10:28

I think you want to make floating action button menu,If so then instead making it manually you can go for libraries it's a better and more organized way to do that and can be more interactive,

If you want to make something like this,

then see this question its about that same thing you might trying to achieve.

see this library and this library too.

A pretty nice tutorial explaining a good way to make it is here

Android RelativeLayout view clumping up

4 Answers4