Search code examples
androidandroid-actionbarandroid-toolbar

How to set my toolbar fixed while scrolling android


I am currently working in e-commerce android app, i need to fix the toolbar while scrolling.

As i attached the screenshot below. while scrolling the action bar need to be fixed and the body content scroll behind the toolbar

enter image description here

Here is the layout xml:

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

    <include
        android:id="@+id/toolbar_reg"
        layout="@layout/app_bar" />
</LinearLayout>

<ScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:elevation="3dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="?android:attr/actionBarSize"
        android:background="#ffffff"
        android:orientation="vertical">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="150dp"
            android:layout_marginTop="15dp"
            android:src="@drawable/logo" />


        <android.support.design.widget.TextInputLayout
            android:id="@+id/input_layout_name"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="5dp"
            android:layout_marginLeft="15dp"
            android:layout_marginRight="15dp"
            android:layout_marginTop="5dp">

            <EditText
                android:id="@+id/input_name"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"

                android:hint="@string/reg_name"
                android:singleLine="true" />
        </android.support.design.widget.TextInputLayout>

        <android.support.design.widget.TextInputLayout
            android:id="@+id/input_layout_email"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="5dp"
            android:layout_marginLeft="15dp"
            android:layout_marginRight="15dp"
            android:layout_marginTop="5dp">

            <EditText
                android:id="@+id/input_email"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"

                android:hint="@string/reg_email"
                android:inputType="textEmailAddress" />
        </android.support.design.widget.TextInputLayout>

        <android.support.design.widget.TextInputLayout
            android:id="@+id/input_layout_password"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="5dp"
            android:layout_marginLeft="15dp"
            android:layout_marginRight="15dp"
            android:layout_marginTop="5dp">

            <EditText
                android:id="@+id/input_password"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"

                android:hint="@string/reg_password"
                android:inputType="textPassword" />
        </android.support.design.widget.TextInputLayout>

        <android.support.design.widget.TextInputLayout
            android:id="@+id/input_layout_cpassword"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="5dp"
            android:layout_marginLeft="15dp"
            android:layout_marginRight="15dp"
            android:layout_marginTop="5dp">

            <EditText
                android:id="@+id/input_cpassword"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"

                android:hint="Confirm Password"
                android:inputType="textPassword" />
        </android.support.design.widget.TextInputLayout>

        <android.support.design.widget.TextInputLayout
            android:id="@+id/input_layout_mobile"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="5dp"
            android:layout_marginLeft="15dp"
            android:layout_marginRight="15dp"
            android:layout_marginTop="5dp">

            <EditText
                android:id="@+id/input_mobile"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"

                android:hint="Mobile No"
                android:inputType="number" />
        </android.support.design.widget.TextInputLayout>

        <android.support.design.widget.TextInputLayout
            android:id="@+id/input_layout_dob"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="5dp"
            android:layout_marginLeft="15dp"
            android:layout_marginRight="15dp"
            android:layout_marginTop="5dp">

            <EditText
                android:id="@+id/input_dob"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"

                android:hint="Date of Birth" />
        </android.support.design.widget.TextInputLayout>

        <android.support.design.widget.TextInputLayout
            android:id="@+id/input_layout_address"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="5dp"
            android:layout_marginLeft="15dp"
            android:layout_marginRight="15dp"
            android:layout_marginTop="5dp">

            <EditText
                android:id="@+id/input_address"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="Permanent Address" />
        </android.support.design.widget.TextInputLayout>

        <Button
            android:id="@+id/btn_signup"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="15dp"
            android:layout_marginRight="15dp"
            android:layout_marginTop="25dp"
            android:background="@color/colorPrimary"
            android:text="@string/btn_sign_up"
            android:textColor="@android:color/white" />

        <TextView
            android:id="@+id/link_login"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="150dp"
            android:layout_marginTop="15dp"
            android:gravity="center"
            android:text="@string/req_login"
            android:textSize="16dp" />

    </LinearLayout>
</ScrollView>


Solution

  • You should structure your XML so that it's like this:

    Relative layout
    |-->Toolbar    (android:id="@+id/toolbar")
    |-->ScrollView (android:layout_below="@id/toolbar")
        |-->ViewGroup(For example, CoordinatorLayout)
            |-->Child
            |-->Child
            |-->Child
    

    Example code:

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <android.support.v7.widget.Toolbar
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:theme="@style/WelcomeActivityTheme.Toolbar"
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="56dp"
            />
        <ScrollView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_below="@id/toolbar">
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
            />
        </ScrollView>
    </RelativeLayout>