292

I guess you have seen the new Android design guidelines, with the new "Floating Action Button" a.k.a "FAB"

For instance this pink button:

enter image description here

My question sounds stupid, and I have already tried a lot of things, but what is the best way to put this button at the intersection of two layouts?

In the above exemple, this button is perfectly placed between what we can imagine to be an ImageView and a relativeLayout.

I have already tried a lot of tweaks, but I am convinced there is a proper way to do it.

Carl Anderson
  • 3,446
  • 1
  • 25
  • 45
Waza_Be
  • 39,407
  • 49
  • 186
  • 260

11 Answers11

476

Best practice:

  • Add compile 'com.android.support:design:25.0.1' to gradle file
  • Use CoordinatorLayout as root view.
  • Add layout_anchorto the FAB and set it to the top view
  • Add layout_anchorGravity to the FAB and set it to: bottom|right|end

enter image description here

<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

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

        <LinearLayout
            android:id="@+id/viewA"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="0.6"
            android:background="@android:color/holo_purple"
            android:orientation="horizontal"/>

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

    </LinearLayout>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:clickable="true"
        android:src="@drawable/ic_done"
        app:layout_anchor="@id/viewA"
        app:layout_anchorGravity="bottom|right|end"/>

</android.support.design.widget.CoordinatorLayout>
David
  • 37,109
  • 32
  • 120
  • 141
  • getting error while run this code : `java.lang.RuntimeException: Unable to start activity ComponentInfo{snackbar.k8.com.snackbar/snackbar.k8.com.snackbar.FloatActionButton}: android.view.InflateException: Binary XML file line #1: Error inflating class android.support.design.widget.CoordinatorLayout` – Mansukh Ahir Jul 07 '15 at 10:46
  • @acrespo I believe it needs citations on why this is a best practice. What makes this a better implementations than the one mentioned on HughJeffner's answer? – goncalotomas Aug 12 '15 at 10:21
  • 4
    @Aprendiz I would also like a citation but I can see why this a better answer than HughJeffner's. I find it simpler, more flexible, less hackish. You don't hardcode any layout_height or margin values, which could vary in time or be defined dynamically. Hugh's answer could work in some simple cases, and perhaps could be a workaround for some third-party libraries that don't fully support ```CoordinatorLayout``` and ```layout_anchor``` and ```layout_anchorGravity``` features, like the one he's using, [futuresimples](https://github.com/futuresimple/android-floating-action-button). – acrespo Aug 13 '15 at 14:37
  • 1
    Btw [futuresimples](https://github.com/futuresimple/android-floating-action-button) is an AWESOME library, and in case someone is wondering there is a fork that combine this ```CoordinatorLayout``` approach with that library, [look](http://andydyer.org/blog/2015/06/28/using-a-third-party-fab-with-coordinatorlayout/). And there's also a fork for older versions. – acrespo Aug 13 '15 at 14:40
  • 2
    I was looking for exactly THIS. +1 for simplicity. – Emiliano De Santis Nov 16 '15 at 19:37
  • 31
    Why isn’t all this in Android’s documentation? – Mostafa Dec 29 '15 at 05:53
  • what is drawable/ic_done? It's not picked up automatically. – Stealth Rabbi Mar 05 '16 at 21:28
  • @StealthRabbi you can replace it with any other icon you want – David Mar 05 '16 at 21:34
  • yes, I know. I was more concerned that it wasn't mentioned in the post. – Stealth Rabbi Mar 05 '16 at 21:39
  • 1
    This works, but Cordinator layout is shifting my ViewA above the appBar. Any suggestions ? – AndroidGuy Jul 08 '16 at 11:10
  • Avoid using "android:layout_margin", on pre lollipop devices it takes extra space, should use app:useCompatPadding="true" :) – Jonatan Aug 18 '16 at 17:48
  • what if this is a tab? The two layout is defined inside fragment, but this FAB should be defined in the activity. So how can I achieve this? – He Yifei 何一非 Aug 19 '16 at 07:00
  • 3
    using app:layout_anchor causing me a rendering problem (linearlayout layoutparams cannot be cast to coordinatorlayout. :( – DAVIDBALAS1 Aug 23 '16 at 18:43
  • 1
    @DAVIDBALAS1 "linearlayout layoutparams cannot be cast to coordinatorlayout" error was fixed in com.android.support:design:24.2.1, change it in your build.gradle file – kashlo Sep 29 '16 at 15:14
  • How to hide it while scrolling? I am facing a issue, where if I scroll the page, fab remains on top and not hiding! Please help – Anish Kumar Apr 19 '17 at 14:02
  • In case you use androidx libs, instead of: "android.support.design.widget.FloatingActionButton", use: "com.google.android.material.floatingactionbutton.FloatingActionButton" – Gad Wissberg Mar 15 '20 at 21:01
91

Seems like the cleanest way in this example is to:

  • Use a RelativeLayout
  • Position the 2 adjacent views one below the other
  • Align the FAB to the parent right/end and add a right/end margin
  • Align the FAB to the bottom of the header view and add a negative margin, half the size of the FAB including shadow

Example adapted from shamanland implementation, use whatever FAB you wish. Assume FAB is 64dp high including shadow:

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

    <View
        android:id="@+id/header"
        android:layout_width="match_parent"
        android:layout_height="120dp"
    />

    <View
        android:id="@+id/body"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/header"
    />

    <fully.qualified.name.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignBottom="@id/header"
        android:layout_marginBottom="-32dp"
        android:layout_marginRight="20dp"
    />

</RelativeLayout>

FAB Layout example

Hugh Jeffner
  • 2,936
  • 4
  • 32
  • 31
  • This layout did the trick for me! I'm using `FAB` by [futuresimple](https://github.com/futuresimple/android-floating-action-button) - it's pretty simple to add & use, enjoy! – Roman Jan 12 '15 at 19:34
  • Like you said "Position the 2 adjacent views one below the other" -> this was the problem I got, I just overlooked that my "container-layout" was messed up by not matching brackets :D Thanks :P – Martin Pfeffer Mar 02 '15 at 06:03
  • This is not a good solution. The negative margin seems to eliminate the bottom half of the button's touch target. Clicks are not registered if I press the bottom half of the fab. – Doronz Apr 16 '15 at 07:07
  • 1
    @Doronz Hmm, I don't seem to have that problem. Are your views in the right order i.e. the FAB is the top layer? – Hugh Jeffner Apr 16 '15 at 16:19
  • This is one of the best answers i've seen on SO. Clear bullet points with code. Simple and sweet. +1 from me. – Subby May 15 '15 at 13:34
  • 24
    android:layout_marginBottom="-32dp" hardcoded value with button's wrap_content is bad solution – Lester May 28 '15 at 10:38
  • @Lester Good point, I did make the assumption the FAB is 64dp high so you can use that for layout_height. Alternatively, if you have different FAB sizes depending on the screen you can use a resource but I wanted to keep the example simple. – Hugh Jeffner Jun 01 '15 at 13:18
  • It's a fully-qualified name of the FAB view you chose to use. There are many and any of them could be used in this way. – Hugh Jeffner Jun 15 '15 at 18:42
  • It is just a generic view to show the concept, check the image I added to the answer. – Hugh Jeffner Jun 16 '15 at 13:13
  • android:layout_marginBottom="-32dp" <-- 32dp value is FAB height/2. It dose like HTML+CSS Vertical Center Align of one way. Nice trick. – 최봉재 Mar 08 '17 at 01:13
  • How to hide it while scrolling? I am facing a issue, where if I scroll the page, fab remains on top and not hiding! Please help – Anish Kumar Apr 19 '17 at 14:01
  • Isn't this exactly what CoordinatorLayout is for? – TheRealChx101 Sep 25 '19 at 17:34
51

You can import the sample project of Google in Android Studio by clicking File > Import Sample...

Import sample

This Sample contains a FloatingActionButton View which inherits from FrameLayout.

Edit With the new Support Design Library you can implement it like in this example: https://github.com/chrisbanes/cheesesquare

Roel
  • 3,089
  • 2
  • 30
  • 34
16

With AppCompat 22, the FAB is supported for older devices.

Add the new support library in your build.gradle(app):

compile 'com.android.support:design:22.2.0'

Then you can use it in your xml:

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    android:src="@android:drawable/ic_menu_more"
    app:elevation="6dp"
    app:pressedTranslationZ="12dp" />

To use elevation and pressedTranslationZ properties, namespace app is needed, so add this namespace to your layout: xmlns:app="http://schemas.android.com/apk/res-auto"

Oded Breiner
  • 28,523
  • 10
  • 105
  • 71
14

Now it is part of official Design Support Library.

In your gradle:

compile 'com.android.support:design:22.2.0'

http://developer.android.com/reference/android/support/design/widget/FloatingActionButton.html

Veronnie
  • 313
  • 1
  • 3
  • 8
  • 5
    Your answer is a bit unclear and vague, could you explain further what is part of the DSL and maybe quote the relevant info from that page. – SuperBiasedMan May 29 '15 at 10:42
  • Sorry, I've seen a lot of references to external libraries, so I wanted to point out to the official library. The library can only create a button, but the positioning is on developers. So my post is not very relevant, sorry. – Veronnie Jun 01 '15 at 08:35
12

Try this library (javadoc is here), min API level is 7:

dependencies {
    compile 'com.shamanland:fab:0.0.8'
}

It provides single widget with ability to customize it via Theme, xml or java-code.

light between

It's very simple to use. There are available normal and mini implementation according to Promoted Actions pattern.

<com.shamanland.fab.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_action_my"
    app:floatingActionButtonColor="@color/my_fab_color"
    app:floatingActionButtonSize="mini"
    />

Try to compile the demo app. There is exhaustive example: light and dark themes, using with ListView, align between two Views.

Oleksii K.
  • 5,359
  • 6
  • 44
  • 72
  • 3
    Just to add to this answer ^ You can also use the other available backport libraries like: https://github.com/FaizMalkani/FloatingActionButton, and https://github.com/makovkastar/FloatingActionButton. Both of which might seem to have more backing. But just follow the Detail view from the source listed in this answer. Works great. – John Shelley Sep 30 '14 at 18:24
  • is it the official library ? – Cocorico Nov 15 '14 at 09:40
  • there is no official library. this one is my lib with opened sources. – Oleksii K. Nov 15 '14 at 12:01
  • This floating action button is a bad example how to implement it. It doesn't follow the true material design guidelines. – Michael Jan 12 '15 at 23:04
  • @Mike Milla, what's wrong with this lib? which requirements are not satisfied? – Oleksii K. Jan 12 '15 at 23:06
  • @OleksiiKropachov the shadow is not proportioned incorrectly and the icon is too large. My point is it looks sketchy. This is a better implementation of it closer to guidelines (compile 'com.getbase:floatingactionbutton:1.5.1') this is the best (https://gist.github.com/Jogan/9def6110edf3247825c9#file-floatingactionbutton-java) – Michael Jan 12 '15 at 23:09
  • @MikeMilla, these screenshots are taken from pre-lollipop, with the API 21 I used elevation property. You can also control inner size of icon manually (24dp). – Oleksii K. Jan 12 '15 at 23:16
  • Is there anyway I can us this library with Eclipse? I'm not using Android Studio for that Gradle dependency and I can't find jar to use with eclipse neither. – Min Naing Oo Mar 02 '15 at 05:53
  • you can catch `aar` file from maven central: http://search.maven.org/remotecontent?filepath=com/shamanland/fab/0.0.8/fab-0.0.8.aar – Oleksii K. Mar 02 '15 at 13:26
9

Here is one aditional free Floating Action Button library for Android. It has many customizations and requires SDK version 9 and higher

enter image description here

Full Demo Video

dependencies {
    compile 'com.scalified:fab:1.1.2'
}
Vladyslav Baidak
  • 348
  • 3
  • 5
  • 3
    The question is not *how do you use a FAB*, but how do you *position* it so that it straddles two Views. Sigh. – SMBiggs Sep 15 '16 at 22:31
6

Keep it Simple Adding Floating Action Button using TextView by giving rounded xml background. - Add compile com.android.support:design:23.1.1 to gradle file

  • Use CoordinatorLayout as root view.
  • Before Ending the CoordinatorLayout introduce a textView.
  • Inside Drawable draw a circle.

Circle Xml is

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">

    <solid
        android:color="@color/colorPrimary"/>
    <size
        android:width="30dp"
        android:height="30dp"/>
</shape>

Layout xml is

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


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

    <RelativeLayout
        android:id="@+id/viewA"
        android:layout_height="0dp"
        android:layout_width="match_parent"
        android:layout_weight="1.6"
        android:background="@drawable/contact_bg"
        android:gravity="center_horizontal|center_vertical"
        >
        </RelativeLayout>

    <LinearLayout
        android:layout_height="0dp"
        android:layout_width="match_parent"
        android:layout_weight="3.4"
        android:orientation="vertical"
        android:padding="16dp"
        android:weightSum="10"
        >

        <LinearLayout
            android:layout_height="0dp"
            android:layout_width="match_parent"
            android:layout_weight="1"
            >
            </LinearLayout>

        <LinearLayout
            android:layout_height="0dp"
            android:layout_width="match_parent"
            android:layout_weight="1"
            android:weightSum="4"
            android:orientation="horizontal"
            >
            <TextView
                android:layout_height="match_parent"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:text="Name"
                android:textSize="22dp"
                android:textColor="@android:color/black"
                android:padding="3dp"
                />

            <TextView
                android:id="@+id/name"
                android:layout_height="match_parent"
                android:layout_width="0dp"
                android:layout_weight="3"
                android:text="Ritesh Kumar Singh"
                android:singleLine="true"
                android:textSize="22dp"
                android:textColor="@android:color/black"
                android:padding="3dp"
                />

            </LinearLayout>



        <LinearLayout
            android:layout_height="0dp"
            android:layout_width="match_parent"
            android:layout_weight="1"
            android:weightSum="4"
            android:orientation="horizontal"
            >
            <TextView
                android:layout_height="match_parent"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:text="Phone"
                android:textSize="22dp"
                android:textColor="@android:color/black"
                android:padding="3dp"
                />

            <TextView
                android:id="@+id/number"
                android:layout_height="match_parent"
                android:layout_width="0dp"
                android:layout_weight="3"
                android:text="8283001122"
                android:textSize="22dp"
                android:textColor="@android:color/black"
                android:singleLine="true"
                android:padding="3dp"
                />

        </LinearLayout>



        <LinearLayout
            android:layout_height="0dp"
            android:layout_width="match_parent"
            android:layout_weight="1"
            android:weightSum="4"
            android:orientation="horizontal"
            >
            <TextView
                android:layout_height="match_parent"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:text="Email"
                android:textSize="22dp"
                android:textColor="@android:color/black"
                android:padding="3dp"
                />

            <TextView
                android:layout_height="match_parent"
                android:layout_width="0dp"
                android:layout_weight="3"
                android:text="ritesh.singh@betasoftsystems.com"
                android:textSize="22dp"
                android:singleLine="true"
                android:textColor="@android:color/black"
                android:padding="3dp"
                />

        </LinearLayout>


        <LinearLayout
            android:layout_height="0dp"
            android:layout_width="match_parent"
            android:layout_weight="1"
            android:weightSum="4"
            android:orientation="horizontal"
            >
            <TextView
                android:layout_height="match_parent"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:text="City"
                android:textSize="22dp"
                android:textColor="@android:color/black"
                android:padding="3dp"
                />

            <TextView
                android:layout_height="match_parent"
                android:layout_width="0dp"
                android:layout_weight="3"
                android:text="Panchkula"
                android:textSize="22dp"
                android:textColor="@android:color/black"
                android:singleLine="true"
                android:padding="3dp"
                />

        </LinearLayout>

    </LinearLayout>

</LinearLayout>


    <TextView
        android:id="@+id/floating"
        android:transitionName="@string/transition_name_circle"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_margin="16dp"
        android:clickable="false"
        android:background="@drawable/circle"
        android:elevation="10dp"
        android:text="R"
        android:textSize="40dp"
        android:gravity="center"
        android:textColor="@android:color/black"
        app:layout_anchor="@id/viewA"
        app:layout_anchorGravity="bottom"/>

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

Click here to se how it Will look like

Anuj Sharma
  • 4,294
  • 2
  • 37
  • 53
Ritesh
  • 876
  • 9
  • 14
5

Add this to your gradle file

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:appcompat-v7:23.0.0'
    compile 'com.android.support:design:23.0.1'
}

This to your activity_main.xml

<android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

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

            <LinearLayout
                android:id="@+id/viewOne"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="0.6"
                android:background="@android:color/holo_blue_light"
                android:orientation="horizontal"/>

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

        </LinearLayout>

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/floatingButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="16dp"
            android:clickable="true"
            android:src="@drawable/ic_done"
            app:layout_anchor="@id/viewOne"
            app:layout_anchorGravity="bottom|right|end"
            app:backgroundTint="#FF0000"
            app:rippleColor="#FFF" />

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

You can find the full example with android studio project to download at http://www.ahotbrew.com/android-floating-action-button/

Gurinder Singh
  • 867
  • 7
  • 9
1

here is working code.

i use appBarLayout to anchor my floatingActionButton. hope this might helpful.

XML CODE.

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_height="192dp"
        android:layout_width="match_parent">

        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:toolbarId="@+id/toolbar"
            app:titleEnabled="true"
            app:layout_scrollFlags="scroll|enterAlways|exitUntilCollapsed"
            android:id="@+id/collapsingbar"
            app:contentScrim="?attr/colorPrimary">

            <android.support.v7.widget.Toolbar
                app:layout_collapseMode="pin"
                android:id="@+id/toolbarItemDetailsView"
                android:layout_height="?attr/actionBarSize"
                android:layout_width="match_parent"></android.support.v7.widget.Toolbar>
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="android.support.design.widget.AppBarLayout$ScrollingViewBehavior">

        <android.support.constraint.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            tools:context="com.example.rktech.myshoplist.Item_details_views">
            <RelativeLayout
                android:orientation="vertical"
                android:focusableInTouchMode="true"
                android:layout_width="match_parent"
                android:layout_height="match_parent">


                <!--Put Image here -->
                <ImageView
                    android:visibility="gone"
                    android:layout_marginTop="56dp"
                    android:layout_width="match_parent"
                    android:layout_height="230dp"
                    android:scaleType="centerCrop"
                    android:src="@drawable/third" />


                <ScrollView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent">

                    <RelativeLayout
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:layout_gravity="center"
                        android:orientation="vertical">

                        <android.support.v7.widget.CardView
                            android:layout_width="match_parent"
                            android:layout_height="match_parent"
                            app:cardCornerRadius="4dp"
                            app:cardElevation="4dp"
                            app:cardMaxElevation="6dp"
                            app:cardUseCompatPadding="true">

                            <RelativeLayout
                                android:layout_width="match_parent"
                                android:layout_height="match_parent"
                                android:layout_margin="8dp"
                                android:padding="3dp">


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


                                    <TextView
                                        android:id="@+id/txtDetailItemTitle"
                                        style="@style/TextAppearance.AppCompat.Title"
                                        android:layout_width="match_parent"
                                        android:layout_height="wrap_content"
                                        android:layout_marginLeft="4dp"
                                        android:text="Title" />

                                    <LinearLayout
                                        android:layout_width="match_parent"
                                        android:layout_height="match_parent"
                                        android:layout_marginTop="8dp"
                                        android:orientation="horizontal">

                                        <TextView
                                            android:id="@+id/txtDetailItemSeller"
                                            style="@style/TextAppearance.AppCompat.Subhead"
                                            android:layout_width="wrap_content"
                                            android:layout_height="wrap_content"
                                            android:layout_marginLeft="4dp"
                                            android:layout_weight="1"
                                            android:text="Shope Name" />

                                        <TextView
                                            android:id="@+id/txtDetailItemDate"
                                            style="@style/TextAppearance.AppCompat.Subhead"
                                            android:layout_width="wrap_content"
                                            android:layout_height="wrap_content"
                                            android:layout_marginRight="4dp"
                                            android:gravity="right"
                                            android:text="Date" />


                                    </LinearLayout>

                                    <TextView
                                        android:id="@+id/txtDetailItemDescription"
                                        style="@style/TextAppearance.AppCompat.Medium"
                                        android:layout_width="match_parent"
                                        android:minLines="5"
                                        android:layout_height="wrap_content"
                                        android:layout_marginLeft="4dp"
                                        android:layout_marginTop="16dp"
                                        android:text="description" />

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

                                        <TextView
                                            android:id="@+id/txtDetailItemQty"
                                            style="@style/TextAppearance.AppCompat.Medium"
                                            android:layout_width="wrap_content"
                                            android:layout_height="wrap_content"
                                            android:layout_marginLeft="4dp"
                                            android:layout_weight="1"
                                            android:text="Qunatity" />

                                        <TextView
                                            android:id="@+id/txtDetailItemMessure"
                                            style="@style/TextAppearance.AppCompat.Medium"
                                            android:layout_width="wrap_content"
                                            android:layout_height="wrap_content"
                                            android:layout_marginRight="4dp"
                                            android:layout_weight="1"
                                            android:gravity="right"
                                            android:text="Messure in Gram" />
                                    </LinearLayout>


                                    <TextView
                                        android:id="@+id/txtDetailItemPrice"
                                        style="@style/TextAppearance.AppCompat.Headline"
                                        android:layout_width="match_parent"
                                        android:layout_height="wrap_content"
                                        android:layout_marginRight="4dp"
                                        android:layout_weight="1"
                                        android:gravity="right"
                                        android:text="Price" />
                                </LinearLayout>

                            </RelativeLayout>
                        </android.support.v7.widget.CardView>
                    </RelativeLayout>
                </ScrollView>
            </RelativeLayout>

        </android.support.constraint.ConstraintLayout>

    </android.support.v4.widget.NestedScrollView>

    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        app:layout_anchor="@id/appbar"
        app:fabSize="normal"
        app:layout_anchorGravity="bottom|right|end"
        android:layout_marginEnd="@dimen/_6sdp"
        android:src="@drawable/ic_done_black_24dp"
        android:layout_height="wrap_content" />

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

Now if you paste above code. you will see following result on your device. Result Image

Rk215 Tech
  • 532
  • 1
  • 4
  • 17
0

enter image description here

Using ConstraintLayout

<androidx.constraintlayout.widget.ConstraintLayout 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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp"
    android:background="@drawable/bg_gradient"
    tools:context=".MainActivity">

    <LinearLayout
        android:id="@+id/linearLayout"
        android:layout_width="match_parent"
        android:layout_height="250dp"
        android:background="@android:color/white"
        android:orientation="vertical"
        android:paddingStart="16dp"
        android:paddingTop="16dp"
        android:paddingEnd="16dp"
        android:paddingBottom="40dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.498"
        tools:layout_editor_absoluteX="69dp">


        <ImageView
            android:id="@+id/imageView"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:scaleType="centerCrop"
            app:srcCompat="@drawable/ic_quote" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="16dp"
            android:textColor="@android:color/black"
            android:textSize="20sp" />

    </LinearLayout>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        app:layout_constraintBottom_toBottomOf="@+id/linearLayout"
        app:layout_constraintEnd_toEndOf="@+id/linearLayout"
        app:layout_constraintTop_toBottomOf="@+id/linearLayout" />
</androidx.constraintlayout.widget.ConstraintLayout>
Manish Rathi
  • 1