How to place static positioned button in a co-ordinator layout such that contents don't overlap?

Question

I have created a co-ordinator layout which has an Appcompat button placed at the bottom. I also have a relative layout inside that co-ordinator layout which is inside a nested scroll view. Output I am getting is like the fixed button overlaps the contents of the relative layout which does not let some of the elements inside the relative layout to be viewed. Please help me out guys! Regards, Thanks.`

<?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/main_content"
    android:clipToPadding="false"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:layout_height="match_parent"
    tools:context=".Hashmapretrieval"
    app:contentScrim="#000000"
    android:fitsSystemWindows="true"
    app:statusBarBackground="@android:color/transparent"
    android:background="#ffffff"
    >


    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:fitsSystemWindows="true"
        android:background="#000000"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="#000000"
            android:background="#000000"
            app:expandedTitleMarginEnd="64dp"
            app:expandedTitleMarginStart="48dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="fitXY"
                android:id="@+id/imagev"
                android:background="#000000"
                android:fitsSystemWindows="true"
                app:layout_collapseMode="parallax"
                android:minHeight="100dp"/>

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_scrollFlags="scroll|enterAlways"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
            </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"
        android:id="@+id/ns"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">


<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:id="@+id/rr1"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:background="#ffffff"
    android:fitsSystemWindows="true"
    android:layout_alignParentBottom="true"
    android:paddingBottom="@dimen/activity_vertical_margin"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    >


    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="5dp"
        android:background="#ffffff">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text=""
            android:textSize="15sp"
            android:textColor="#000000"
            android:id="@+id/placeid" />

        <RelativeLayout
            android:layout_width="match_parent"
            android:id="@+id/rel1"
            android:layout_height="0.3dp" android:background="#000000" android:layout_below="@+id/placeid" android:layout_marginTop="20dp">
        </RelativeLayout>

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/rel3"
            android:background="#ffffff"
            android:layout_below="@+id/rel1"
            android:layout_marginTop="10dp">

            <TableLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:id="@+id/tablelayout"
                android:layout_marginTop="10dp"
                android:background="#ffffff">
                <TableRow android:id="@+id/tableRow1"
                    android:layout_height="0dp"
                    android:layout_width="match_parent"
                    >
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:textSize="17sp"
                    android:text="Teaching Skills"
                    android:id="@+id/QF"
                    android:layout_weight="3"
                    android:gravity="left"
                    android:padding="5dp"

                    />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="No Ratings"
                    android:textSize="17sp"
                    android:id="@+id/rate1"
                    android:gravity="center"
                    android:padding="5dp"
                    android:layout_weight="0"
                    />

                </TableRow>






            <TableRow android:id="@+id/tableRow2"
                android:layout_height="0dp"
                android:layout_width="match_parent"
                >
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:textSize="17sp"
                    android:text="Classroom Culture"

                    android:layout_weight="3"
                    android:gravity="left"
                    android:padding="5dp"

                    android:id="@+id/QS"

                    />
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="No Ratings"
                    android:textSize="17sp"
                    android:id="@+id/rate2"
                    android:layout_weight="0"
                    android:gravity="center"
                    android:padding="5dp"


                    />

            </TableRow>





            <TableRow android:id="@+id/tableRow3"
                android:layout_height="0dp"
                android:layout_width="match_parent"
                >

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:textSize="17sp"
                    android:text="Syllabus Covered"
                    android:layout_weight="3"
                    android:gravity="left"
                    android:padding="5dp"

                    android:id="@+id/QT"
                    />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:text="No Ratings"
                    android:textSize="17sp"
                    android:id="@+id/rate3"
                    android:layout_weight="0"
                    android:gravity="center"
                    android:padding="5dp"


                    />

            </TableRow>




            <TableRow android:id="@+id/tableRow4"
                android:layout_height="0dp"
                android:layout_width="match_parent"
                >
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:textSize="17sp"
                    android:text="Extra help when needed"

                    android:layout_weight="3"
                    android:gravity="left"
                    android:padding="5dp"
                    android:id="@+id/QFo"
                    />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:text="No Ratings"
                    android:textSize="17sp"
                    android:id="@+id/rate4"
                    android:layout_weight="0"
                    android:gravity="center"
                    android:padding="5dp"

                    />

            </TableRow>



                <TableRow android:id="@+id/tableRow5"
                    android:layout_height="0dp"
                    android:layout_width="match_parent"
                    android:layout_gravity="center_vertical|center_horizontal|center"
                    >

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:textSize="17sp"
                    android:layout_weight="3"
                    android:gravity="left"
                    android:padding="5dp"
                    android:text="Recommendations"
                    android:id="@+id/QFi"

                    />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:text="No Ratings"
                    android:textSize="17sp"
                    android:id="@+id/rate5"
                    android:layout_weight="0"
                    android:gravity="center"
                    android:padding="5dp"

                    />
                </TableRow>



                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="0.3dp" android:background="#000000" android:layout_marginTop="10dp" android:layout_below="@+id/tr1">
                </RelativeLayout>




        <TableRow android:id="@+id/tableRow6"
            android:layout_height="0dp"
            android:layout_width="match_parent">
        <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="match_parent"
            android:textSize="17sp"
            android:layout_weight="3"
            android:gravity="left"
            android:padding="5dp"
                        android:text="Overall Ratings"
                        android:id="@+id/Or"
                        />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="match_parent"
                        android:text="No Ratings"
                        android:textSize="17sp"
                        android:id="@+id/rateo"
                        android:layout_weight="0"
                        android:gravity="center"
                        android:padding="5dp"


                        />


            </TableRow>



                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="0.3dp" android:background="#000000" android:layout_marginTop="10dp" android:layout_below="@+id/tr2">
                </RelativeLayout>

                <TableRow
                    android:layout_height="0dp"
                    android:layout_width="match_parent" android:padding="15dp"
                    > </TableRow>




                <TableRow android:id="@+id/tableRow7"
                    android:layout_height="0dp"
                    android:layout_width="match_parent">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:text="Fees:"
            android:textSize="17sp"
            android:id="@+id/tv1"

            android:layout_weight="3"
            android:gravity="left"
            android:padding="5dp"
             />



        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:text=""
            android:textSize="17sp"

            android:id="@+id/fees"

            android:layout_weight="0"
            android:gravity="center"
            android:padding="5dp"
             />

                </TableRow>



                <TableRow android:id="@+id/tableRow8"
                    android:layout_height="0dp"
                    android:layout_width="match_parent">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:text="Installment:"
            android:textSize="17sp"

            android:id="@+id/tv2"
            android:layout_weight="3"
            android:gravity="left"
            android:padding="5dp"
            />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:text=""
            android:id="@+id/instavl"
            android:layout_below="@+id/fees"
            android:layout_weight="0"
            android:gravity="center"
            android:textSize="17sp"

            android:padding="5dp"
            />
                </TableRow>



                <TableRow android:id="@+id/tableRow9"
                    android:layout_height="0dp"
                    android:layout_width="match_parent">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:text="Duration:"
            android:id="@+id/tv3"
            android:layout_weight="3"
            android:textSize="17sp"

            android:gravity="left"
            android:padding="5dp"
            />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:text=""
            android:id="@+id/duration"
            android:layout_weight="0"
            android:textSize="17sp"

            android:gravity="center"
            android:padding="5dp"
            />
                </TableRow>


                <TableRow android:id="@+id/tableRow10"
                    android:layout_height="0dp"
                    android:layout_width="match_parent">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:text="Group Discount:"
            android:textSize="17sp"

            android:layout_weight="3"
            android:gravity="left"
            android:padding="5dp"
            />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:text=""
            android:textSize="17sp"

            android:id="@+id/groupdiscount"
            android:layout_weight="0"
            android:gravity="center"
            android:padding="5dp"
            />
                </TableRow>


                <TableRow android:id="@+id/tableRow11"
                    android:layout_height="0dp"
                    android:layout_width="match_parent">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:text="One Time Discount:"
            android:textSize="17sp"

            android:id="@+id/tv5"
            android:layout_weight="3"
            android:gravity="left"
            android:padding="5dp"
            />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:text=""
            android:textSize="17sp"


            android:id="@+id/otpdiscount"
            android:layout_weight="0"
            android:gravity="center"
            android:padding="5dp"
            />
                </TableRow>



            </TableLayout>

                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="10dp"
                    android:id="@+id/rr3"
                    android:layout_below="@+id/tablelayout">

                    <Button android:id="@+id/add_wishlist"
                        android:layout_height="@dimen/buttonheight"
                        android:layout_width="match_parent"
                        android:onClick="addtowishlist"
                        android:textAllCaps="false"
                        android:textSize="@dimen/buttonTextsize"
                        android:text="Add to my List"/>

                </RelativeLayout>


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


    <Button android:id="@+id/book_demo"
        android:onClick="bookdemo"
        android:layout_height="40dp"
        android:clickable="true"

        android:layout_width="match_parent"
        android:layout_gravity="end|bottom"        android:textColor="#ffffff"
        android:textSize="@dimen/buttonTextsize"

        android:textAllCaps="false"
        android:text="Come for Demo Lecture"
        android:background="#3b3b3b"
        />
</android.support.design.widget.CoordinatorLayout>

So, it is right: it is usual as design placing an overlapping button at bottom of the scrolling view (i.e. FloatingActionButton on right/bottom). Then the button can hide/show on scrolling changes. — GPack, Oct 17 '16 at 09:47
So, you are suggesting me to hide the button on scroll down? How do I achieve that? — Avinash Jaiswal, Oct 17 '16 at 09:51
This is the usual design. If you dont like it, you can try reserving a margin bottom for the button. Im sending a reply. — GPack, Oct 17 '16 at 09:56

score 1 · Answer 1 · edited May 23 '17 at 12:00

1

To hide/show FloatingActionButton there are different ways (and examples online), I like the way through a Behavior i.e. like this.

If you dont want the usual overlap, you can try adding a margin bottom of x dp (the eight of the button) to the NestedScrollView by:

android:layout_marginBottom="xdp"

edited May 23 '17 at 12:00

Community

1
1

answered Oct 17 '16 at 10:17

GPack

2,494
4
19
50

I am not using the floating action button! So, how do I change the behaviour in case of a normal appcompat button – Avinash Jaiswal Oct 17 '16 at 10:21
I wanted to create something like on scroll down the button is visible and after scroll ends the button becomes like all the other elements. – Avinash Jaiswal Oct 17 '16 at 11:07

How to place static positioned button in a co-ordinator layout such that contents don't overlap?

1 Answers1