CODEWITHSUNDEEP
androidandroid-layoutmaterial-designfloating-action-button
Orell Buehler
Orell Buehler

Reputation: 116

FAB between layouts

Here is my xml:

<?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"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/coordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

<include
    android:id="@+id/toolbar"
    layout="@layout/toolbar" />

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <LinearLayout
        android:id="@+id/layout_first"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="0.8"
        android:background="@color/ColorPrimary"
        android:orientation="horizontal" />

    <LinearLayout
        android:id="@+id/layout_second"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="0.4"
        android:background="@color/ColorPrimaryLight"
        android:orientation="horizontal" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="20dp"
        android:clickable="true"
        android:src="@drawable/ic_search_black_48dp"
        app:backgroundTint="#df0909"
        app:elevation="4dp"
        app:layout_anchor="@id/layout_first"
        app:layout_anchorGravity="bottom|right|end" />

    </LinearLayout>

</android.support.design.widget.CoordinatorLayout>

And that's how it looks: enter image description here

I tried it from this answer: How can I add the new “Floating Action Button” between two widgets/layouts

But when I changed compile 'com.android.support:design:23.4.0' to compile 'com.android.support:design:25.0.1' I'm getting an error:

apply plugin: 'com.android.application'
android {
 compileSdkVersion 23
 buildToolsVersion "23.0.3"

defaultConfig {
    applicationId "com.test.test"
    minSdkVersion 21
    targetSdkVersion 23
    versionCode 1
    versionName "1.0"
}
buildTypes {
    release {
        minifyEnabled false
        proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
} 
dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:appcompat-v7:23.4.0'
    compile 'com.android.support:design:23.4.0'
}

So is there a way to achieve a look like this, where the fab is between two layouts (no scrolling needed): enter image description here

Upvotes: 3

Views: 706

Answers (3)

Mike M.
Mike M.

Reputation: 39191

Your FloatingActionButton is inside a LinearLayout. For the layout_anchor* attributes to work, it needs to be a direct child of the CoordinatorLayout.

Simply move the FloatingActionButton element to after the closing LinearLayout tag.

Upvotes: 2

Binil
Binil

Reputation: 454

android:layout_margin="-20dp"

use negative margin (half of FAB height)

Upvotes: 0

Vulovic Vukasin
Vulovic Vukasin

Reputation: 1748

You can use next:

<FloatingButton
 app:layout_anchor="@id/layout_first"
    app:layout_anchorGravity="bottom|left|end"/>

Use this on the layout you want, and try to google it to get the desired effect. there are a lot of tutorials for anchoring, so look it up. But, main point is that you need to anchor it to the layout you want to be on.

Upvotes: 0

Related Questions