Issues with positioning Toolbar and FAB in ConstraintLayout

Question

I have been using this code inside Co-ordinatorLayout, with no issues. I tried tweaking the code to work inside ConstraintLayout. While displaying Snackbar, the Snackbar is overlapping FAB. Also, I am unable to auto hide Toolbar. Can someone guide on how to auto-hide Toolbar and FAB inside ConstraintLayout.

<android.support.constraint.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:id="@+id/acbl_layout_parent"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.sample.android.ActivitySample">

    <!--Toolbar-->
    <android.support.design.widget.AppBarLayout
        android:id="@+id/acbl_layout_toolbar"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <include layout="@layout/toolbar" />

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

    <!--Layout-->
    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <!--FAB-->
    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/dp_16"
        app:fabSize="normal"
        app:layout_anchor="parent"
        app:layout_anchorGravity="bottom|end"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:srcCompat="@drawable/icon_add" />

</android.support.constraint.ConstraintLayout>

You should use Ctrl+K or ⌘+K to properly format your source code chunks. — Eugene Brusov, Nov 30 '17 at 15:33

score 3 · Answer 1 · answered Jan 16 '18 at 14:00

3

It is easy to do in a constraint layout, all you have to do is hook up both vertical constraints of the fab to the end of the top image, this will center it on the line:

answered Jan 16 '18 at 14:00

David A

1,828
2
20
29

However, using CoordinatorLayout is the better way to do it. – David A Oct 01 '18 at 15:36

global_warming · Answer 2 · 2017-12-01T04:33:14.013

2

With CoordinatorLayout you can interact with different child views, like Snackbar and FAB can interact to move accordingly. You can't achieve that with ConstraintLayout

Further Details: CoordinatorLayout | Android Developers

edited Dec 01 '17 at 04:33

answered Nov 29 '17 at 11:35

global_warming

785
1
6
10

Thanks for the info. When creating a new project in Android Studio, the activity by default is built with ConstraintLayout. Damn Google. Thanks again – user3314337 Nov 29 '17 at 11:54
@user3314337 You should choose "Basic Activity" type if you want CoordinatorLayout to be added by default. Look at this screenshot https://www.dropbox.com/s/iouunuy55mchdbb/30_03.png?dl=0 – Eugene Brusov Nov 30 '17 at 15:24

score 0 · Answer 3 · edited Jun 20 '20 at 09:12

Try with Co-ordinator layout instead it is similar to constraint and easy to handle

And you can wrap your elements into coordinator layout which will solve your problem and will also provide additional functionality to the 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"
    android:layout_height="match_parent"
    android:layout_width="match_parent">
    
    <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:fillViewport="true"
        >
        <!--android:background="@drawable/libertybro340x240"-->


        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:background="#fff"
            >
            <!--android:background="@color/transparent_background"-->


            <include
                layout="@layout/actvity_toolbar"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />



            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical"
                android:paddingLeft="4dp"
                android:paddingRight="3dp"
                >

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal"
                    android:layout_gravity="center_horizontal"
                    android:layout_marginTop="5dp"
                    >

                    <TextView
                        style="@style/small_title_text"
                        android:layout_width="fill_parent"
                        android:layout_height="wrap_content"
                        android:text="@string/case_number"
                        android:singleLine="true"
                        android:layout_weight="1.3"
                        />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text=":"/>

                    <TextView
                        style="@style/small_title_text"
                        android:id="@+id/display_casenum_Txt"
                        android:layout_width="fill_parent"
                        android:layout_height="wrap_content"
                        android:hint="@string/case_number"
                        android:text="26/11"
                        android:singleLine="true"
                        android:layout_weight="1"
                        />

                </LinearLayout>

                <View
                    android:layout_width="match_parent"
                    android:layout_height="2dp"
                    android:background="@color/colorPrimaryDark"
                    android:layout_marginTop="5dp"/>


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


                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:orientation="horizontal"
                        android:layout_gravity="center_horizontal"
                        android:layout_marginTop="5dp"
                        >

                        <TextView
                            style="@style/small_title_text"
                            android:layout_width="fill_parent"
                            android:layout_height="wrap_content"
                            android:text="@string/client_name"
                            android:singleLine="true"
                            android:layout_weight="1.3"
                            />

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text=":"/>


                        <TextView
                            style="@style/small_title_text"
                            android:id="@+id/display_client_Txt"
                            android:layout_width="fill_parent"
                            android:layout_height="wrap_content"
                            android:hint="@string/client_name"
                            android:text="Kaware Patil"
                            android:layout_weight="1"
                            />

                    </LinearLayout>

                    <TextView
                        style="@style/small_title_text"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="VS"
                        android:layout_gravity="center_horizontal"
                        android:singleLine="true"
                        android:editable="false"
                        android:textStyle="bold"
                        android:textColor="@color/colorPrimaryDark"
                        />


                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:orientation="horizontal"
                        android:layout_gravity="center_horizontal"
                        android:layout_marginTop="5dp"
                        >

                        <TextView
                            style="@style/small_title_text"
                            android:layout_width="fill_parent"
                            android:layout_height="wrap_content"
                            android:text="Opposition"
                            android:singleLine="true"
                            android:layout_weight="1.3"
                            />

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text=":"/>


                        <TextView
                            style="@style/small_title_text"
                            android:id="@+id/display_opposition_Txt"
                            android:layout_width="fill_parent"
                            android:layout_height="wrap_content"
                            android:hint="@string/opposition_name"
                            android:text="Mumbai High Court"
                            android:layout_weight="1"
                            />

                    </LinearLayout>


                </LinearLayout>


                <View
                    android:layout_width="match_parent"
                    android:layout_height="2dp"
                    android:background="@color/colorPrimaryDark"
                    android:layout_marginTop="5dp"/>


                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal"
                    android:layout_gravity="center_horizontal"
                    android:layout_marginTop="5dp"
                    >

                    <TextView
                        style="@style/small_title_text"
                        android:layout_width="fill_parent"
                        android:layout_height="wrap_content"
                        android:text="@string/ipc_act"
                        android:singleLine="true"
                        android:layout_weight="1.3"

                        />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text=":"/>



                    <TextView
                        style="@style/small_title_text"
                        android:id="@+id/display_ipc_Txt"
                        android:layout_width="fill_parent"
                        android:layout_height="wrap_content"
                        android:hint="@string/ipc_act"
                        android:text="420"
                        android:layout_weight="1"
                        />

                </LinearLayout>


                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal"
                    android:layout_gravity="center_horizontal"
                    android:layout_marginTop="5dp"
                    >

                    <TextView
                        style="@style/small_title_text"
                        android:layout_width="fill_parent"
                        android:layout_height="wrap_content"
                        android:text="@string/advocate_name"
                        android:singleLine="true"
                        android:layout_weight="1.3"

                        />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text=":"/>


                    <TextView
                        style="@style/small_title_text"
                        android:id="@+id/display_advocate_Txt"
                        android:layout_width="fill_parent"
                        android:layout_height="wrap_content"
                        android:hint="@string/advocate_name"
                        android:text="Prasad Gunjal"
                        android:singleLine="true"
                        android:layout_weight="1"
                        />

                </LinearLayout>



                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal"
                    android:layout_gravity="center_horizontal"
                    android:layout_marginTop="5dp"
                    >

                    <TextView
                        style="@style/small_title_text"
                        android:layout_width="fill_parent"
                        android:layout_height="wrap_content"
                        android:text="@string/on_behalf"
                        android:singleLine="true"
                        android:layout_weight="1.3"

                        />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text=":"/>


                    <TextView
                        style="@style/small_title_text"
                        android:id="@+id/display_onBehalf_Txt"
                        android:layout_width="fill_parent"
                        android:layout_height="wrap_content"
                        android:hint="@string/on_behalf"
                        android:text="Complainant"
                        android:singleLine="true"
                        android:layout_weight="1"
                        />

                </LinearLayout>



                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal"
                    android:layout_gravity="center_horizontal"
                    android:layout_marginTop="5dp"
                    >

                    <TextView
                        style="@style/small_title_text"
                        android:layout_width="fill_parent"
                        android:layout_height="wrap_content"
                        android:text="@string/casecourt_name"
                        android:singleLine="true"
                        android:layout_weight="1.3"

                        />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text=":"/>


                    <TextView
                        style="@style/small_title_text"
                        android:id="@+id/display_court_Txt"
                        android:layout_width="fill_parent"
                        android:layout_height="wrap_content"
                        android:hint="@string/casecourt_name"
                        android:text="Bombay high Court"
                        android:layout_weight="1"
                        />

                </LinearLayout>


                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal"
                    android:layout_gravity="center_horizontal"
                    android:layout_marginTop="5dp"
                    >

                    <TextView
                        style="@style/small_title_text"
                        android:layout_width="fill_parent"
                        android:layout_height="wrap_content"
                        android:text="@string/case_status"
                        android:singleLine="true"
                        android:layout_weight="1.3"

                        />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text=":"/>


                    <TextView
                        style="@style/small_title_text"
                        android:id="@+id/display_casestat_Txt"
                        android:layout_width="fill_parent"
                        android:layout_height="wrap_content"
                        android:hint="@string/case_status"
                        android:text="On Hold"
                        android:singleLine="true"
                        android:layout_weight="1"
                        />

                </LinearLayout>



                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal"
                    android:layout_gravity="center_horizontal"
                    android:layout_marginTop="5dp"
                    >

                    <TextView
                        style="@style/small_title_text"
                        android:layout_width="fill_parent"
                        android:layout_height="wrap_content"
                        android:text="@string/case_filing_date"
                        android:singleLine="true"
                        android:layout_weight="1.3"

                        />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text=":"/>


                    <TextView
                        style="@style/small_title_text"
                        android:id="@+id/display_casefiling_Txt"
                        android:layout_width="fill_parent"
                        android:layout_height="wrap_content"
                        android:hint="@string/case_filing_date"
                        android:text="26/11/2011"
                        android:singleLine="true"
                        android:layout_weight="1"
                        />

                </LinearLayout>



                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal"
                    android:layout_gravity="center_horizontal"
                    android:layout_marginTop="5dp"
                    >

                    <TextView
                        style="@style/small_title_text"
                        android:layout_width="fill_parent"
                        android:layout_height="wrap_content"
                        android:text="@string/number_of_people"
                        android:singleLine="true"
                        android:layout_weight="1.3"

                        />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text=":"/>


                    <TextView
                        style="@style/small_title_text"
                        android:id="@+id/display_peoplenumer_Txt"
                        android:layout_width="fill_parent"
                        android:layout_height="wrap_content"
                        android:hint="@string/number_of_people"
                        android:text="2"
                        android:singleLine="true"
                        android:layout_weight="1"
                        />

                </LinearLayout>

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal"
                    android:layout_gravity="center_horizontal"
                    android:layout_marginTop="5dp"
                    >

                    <TextView
                        style="@style/small_title_text"
                        android:layout_width="fill_parent"
                        android:layout_height="wrap_content"
                        android:text="Next Hearing"
                        android:singleLine="true"
                        android:layout_weight="1.3"
                        />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text=":"/>


                    <TextView
                        style="@style/small_title_text"
                        android:id="@+id/display_nextdateNtime_Txt"
                        android:layout_width="fill_parent"
                        android:layout_height="wrap_content"
                        android:hint="@string/next_hearing_date"
                        android:text="11/11/11 10:00 AM"
                        android:singleLine="true"
                        android:layout_weight="1"
                        />

                </LinearLayout>


                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal"
                    android:layout_gravity="center_horizontal"
                    android:layout_marginTop="5dp"
                    >

                    <TextView
                        style="@style/small_title_text"
                        android:layout_width="fill_parent"
                        android:layout_height="wrap_content"
                        android:text="@string/next_hearing_details"
                        android:singleLine="true"
                        android:layout_weight="1.3"
                        />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text=":"
                        />


                    <TextView
                        style="@style/small_title_text"
                        android:id="@+id/display_nextdetails_Txt"
                        android:layout_width="fill_parent"
                        android:layout_height="wrap_content"
                        android:hint="@string/next_hearing_details"
                        android:text="Jury on bench"
                        android:layout_weight="1"
                        />

                </LinearLayout>

            </LinearLayout>

        </LinearLayout>

    </ScrollView>
    
    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab_caseinfo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        android:layout_gravity="end|bottom"
        android:layout_marginRight="@dimen/fab_margin"
        android:layout_marginBottom="@dimen/fab_margin"
        android:padding="5dp"
        android:src="@android:drawable/ic_menu_edit" />

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

CoordinatorLayout and ConstraintLayout are as much similar as vodka similar to water... It's possible to drink them both, that's all the similarities :) The same about CoordinatorLayout and ConstraintLayout, you can place view inside them and that's only they're similar to each other, everything else they are completely different. — Eugene Brusov, Nov 30 '17 at 16:14
[link](https://stackoverflow.com/questions/40929686/constraintlayout-vs-coordinator-layout) difference between those two layouts. — Aqua 4, Dec 01 '17 at 04:31

Issues with positioning Toolbar and FAB in ConstraintLayout

3 Answers3

Try with Co-ordinator layout instead it is similar to constraint and easy to handle