CODEWITHSUNDEEP
androidandroid-layoutandroid-linearlayoutfloating-action-button
AmirMahdi K
AmirMahdi K

Reputation: 41

How to align two FloatingActionButtons together in a LinearLayout?

So I'm trying to align two FloatingActionButtons in a LinearLayout inside a RelativeLayout. Something like this:

<LinearLayout>
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/submitBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/DeleteBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</LinearLayout>

But I want them to behave like any other element like a TextView when you put them inside a LinearLayout. I mean I want them each to take half of the LinearLayout's width. But they would stick at the LinearLayout's start and they won't move no matter what I try.

I tried using android:layout_width="1" on each of them but no luck, they won't move at all they are just stuck together at the start of the LinearLayout.

Here's how it looks:

It looks like this

I would be so glad if there's any suggestions! Thanks in advance.

Upvotes: 2

Views: 259

Answers (5)

F.Mysir
F.Mysir

Reputation: 4176

With some simple math you could have the perfect alignment with this code, just copy paste:

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

    <RelativeLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1">

    </RelativeLayout>

    <RelativeLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1">

        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/submitBtn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true" />

    </RelativeLayout>

    <RelativeLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1">

    </RelativeLayout>

    <RelativeLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1">

        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/DeleteBtn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true" />

    </RelativeLayout>

    <RelativeLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1">

    </RelativeLayout>

</LinearLayout>

Centered exactly without big gap at the center:

enter image description here

Upvotes: 1

AgentP
AgentP

Reputation: 7240

One way to achieve it is like this ...

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

    <FrameLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1">

        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/submitBtn"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            app:srcCompat="@drawable/ic_add_black_24dp" />

    </FrameLayout>

    <FrameLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_weight="1">

        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/deleteButton"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            app:srcCompat="@drawable/ic_delete_forever_black_24dp" />

    </FrameLayout>

</LinearLayout>

It will look something like this ....enter image description here

You can play with layout_gravity to align those as you want...

Upvotes: 1

mohosyny
mohosyny

Reputation: 1062

in LinearLayout you can set layout_weight=1 to share parent :

 <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/submitBtn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"/>

Upvotes: 0

Kabilan
Kabilan

Reputation: 191

Kindly use Below this XML code 

    <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:weightSum="2"
    >
    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
       >
        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/submitBtn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </LinearLayout>
    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:layout_gravity="right"
        android:gravity="right"
        >
        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/DeleteBtn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </LinearLayout>
</LinearLayout>

Upvotes: 1

MMG
MMG

Reputation: 3268

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:orientation="horizontal">
        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/submitBtn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"/>

        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/DeleteBtn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"/>
</LinearLayout>

Upvotes: 0

Related Questions