CODEWITHSUNDEEP
javaandroidlayoutkotlin
Usama Jawad
Usama Jawad

Reputation: 79

How to always show Toolbar in Android even when there is scrolling?

After looking up various answers and suggestions on the site, I implemented a custom toolbar in my app instead of using the default ActionBar. For the most part, it works fine, however, one thing that is different from the standard action bar is that it auto-hides whenever I scroll. In the default ActionBar, it was always visible on the activity regardless of whether I was scrolling or not. Can anyone please explain how to implement this behavior in the custom toolbar as well? I have attached my xml below:

EDIT: I have tried moving the toolbar out of the scrollview which fixes the toolbar but then when I scroll, then other views in my activity also overlap on the toolbar because the top-most view is bound to the scrollview and other views are bound to it. So, the current implementation is better than the overlapping problem, but it is still not the solution I desire.

<?xml version="1.0" encoding="utf-8"?>
<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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

<ScrollView
    android:id="@+id/sc1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginBottom="8dp"
    android:layout_marginEnd="0dp"
    android:layout_marginLeft="0dp"
    android:layout_marginRight="0dp"
    android:layout_marginStart="0dp"
    android:layout_marginTop="0dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="1.0"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="1.0">


    <android.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <EditText
            android:id="@+id/searchBar"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginEnd="8dp"
            android:layout_marginLeft="8dp"
            android:layout_marginRight="8dp"
            android:layout_marginStart="8dp"
            android:ems="10"
            android:hint="Search..."
            android:textColorHint="@color/myWhite"
            android:inputType="textPersonName"
            android:textColor="@color/myWhite"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.503"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/subtitleBtn" />

        <android.support.v7.widget.Toolbar
            android:id="@+id/myToolbar"
            android:layout_alignParentBottom="true"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="@color/colorPrimary"
            app:titleTextColor="@color/myWhite"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            android:contentInsetLeft="48dp"
            android:contentInsetStart="48dp"
            app:titleMarginStart="24dp"
            app:contentInsetLeft="12dp"
            app:contentInsetStart="12dp"
            android:contentInsetRight="0dp"
            android:contentInsetEnd="0dp"
            app:contentInsetRight="0dp"
            app:contentInsetEnd="0dp"/>

        <Button
            android:id="@+id/splitDrawableBackgroundBtn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="8dp"
            android:layout_marginLeft="8dp"
            android:layout_marginRight="8dp"
            android:layout_marginStart="8dp"
            android:layout_marginTop="24dp"
            android:text="Set Split Drawable Background"
            android:fontFamily="@font/roboto_black"
            android:textAllCaps="false"
            android:textSize="20sp"
            android:textStyle="bold"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.517"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/stackedDrawableBackgroundBtn" />

        <Button
            android:id="@+id/subtitleBtn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="8dp"
            android:layout_marginLeft="8dp"
            android:layout_marginRight="8dp"
            android:layout_marginStart="8dp"
            android:layout_marginTop="24dp"
            android:text="Show Subtitle"
            android:fontFamily="@font/roboto_black"
            android:textAllCaps="false"
            android:textSize="20sp"
            android:textStyle="bold"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/iconBtn" />

        <Button
            android:id="@+id/iconBtn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="8dp"
            android:layout_marginLeft="8dp"
            android:layout_marginRight="8dp"
            android:layout_marginStart="8dp"
            android:layout_marginTop="24dp"
            android:text="Set Icon"
            android:fontFamily="@font/roboto_black"
            android:textAllCaps="false"
            android:textSize="20sp"
            android:textStyle="bold"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/alternateBackBtn" />

        <Button
            android:id="@+id/alternateBackBtn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="8dp"
            android:layout_marginLeft="8dp"
            android:layout_marginRight="8dp"
            android:layout_marginStart="8dp"
            android:layout_marginTop="24dp"
            android:text="Set Alternate Back Button"
            android:fontFamily="@font/roboto_black"
            android:textAllCaps="false"
            android:textSize="20sp"
            android:textStyle="bold"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/hideBarBtn" />

        <Button
            android:id="@+id/hideBarBtn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="8dp"
            android:layout_marginLeft="8dp"
            android:layout_marginRight="8dp"
            android:layout_marginStart="8dp"
            android:layout_marginTop="24dp"
            android:text="Hide Action Bar"
            android:fontFamily="@font/roboto_black"
            android:textAllCaps="false"
            android:textSize="20sp"
            android:textStyle="bold"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/elevationBtn" />

        <Button
            android:id="@+id/elevationBtn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="8dp"
            android:layout_marginLeft="8dp"
            android:layout_marginRight="8dp"
            android:layout_marginStart="8dp"
            android:layout_marginTop="24dp"
            android:text="Set Elevation"
            android:fontFamily="@font/roboto_black"
            android:textAllCaps="false"
            android:textSize="20sp"
            android:textStyle="bold"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/logoBtn" />

        <Button
            android:id="@+id/logoBtn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="8dp"
            android:layout_marginLeft="8dp"
            android:layout_marginRight="8dp"
            android:layout_marginStart="8dp"
            android:layout_marginTop="24dp"
            android:text="Set Logo"
            android:fontFamily="@font/roboto_black"
            android:textAllCaps="false"
            android:textSize="20sp"
            android:textStyle="bold"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/hideAllBtn" />

        <Button
            android:id="@+id/hideAllBtn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="8dp"
            android:layout_marginLeft="8dp"
            android:layout_marginRight="8dp"
            android:layout_marginStart="8dp"
            android:layout_marginTop="24dp"
            android:text="Hide Everything"
            android:fontFamily="@font/roboto_black"
            android:textAllCaps="false"
            android:textSize="20sp"
            android:textStyle="bold"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/hideBackBtn" />

        <Button
            android:id="@+id/hideBackBtn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="8dp"
            android:layout_marginLeft="8dp"
            android:layout_marginRight="8dp"
            android:layout_marginStart="8dp"
            android:layout_marginTop="24dp"
            android:text="Hide Back Button"
            android:fontFamily="@font/roboto_black"
            android:textAllCaps="false"
            android:textSize="20sp"
            android:textStyle="bold"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.502"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/splitDrawableBackgroundBtn" />

        <Button
            android:id="@+id/stackedDrawableBackgroundBtn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="8dp"
            android:layout_marginLeft="8dp"
            android:layout_marginRight="8dp"
            android:layout_marginStart="8dp"
            android:layout_marginTop="24dp"
            android:text="Set Stacked Drawable Background"
            android:fontFamily="@font/roboto_black"
            android:textAllCaps="false"
            android:textSize="20sp"
            android:textStyle="bold"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/drawableBackgroundBtn" />

        <Button
            android:id="@+id/drawableBackgroundBtn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="8dp"
            android:layout_marginLeft="8dp"
            android:layout_marginRight="8dp"
            android:layout_marginStart="8dp"
            android:layout_marginTop="24dp"
            android:text="Set Drawable Background"
            android:fontFamily="@font/roboto_black"
            android:textAllCaps="false"
            android:textSize="20sp"
            android:textStyle="bold"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/customViewBtn" />

        <Button
            android:id="@+id/customViewBtn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="8dp"
            android:layout_marginLeft="8dp"
            android:layout_marginRight="8dp"
            android:layout_marginStart="8dp"
            android:layout_marginTop="24dp"
            android:text="Show Custom View"
            android:fontFamily="@font/roboto_black"
            android:textAllCaps="false"
            android:textSize="20sp"
            android:textStyle="bold"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/hideOffsetBtn" />

        <Button
            android:id="@+id/hideOffsetBtn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="8dp"
            android:layout_marginLeft="8dp"
            android:layout_marginRight="8dp"
            android:layout_marginStart="8dp"
            android:layout_marginTop="24dp"
            android:text="Hide Offset"
            android:fontFamily="@font/roboto_black"
            android:textAllCaps="false"
            android:textSize="20sp"
            android:textStyle="bold"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/backBtn" />

        <Button
            android:id="@+id/backBtn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="8dp"
            android:layout_marginLeft="8dp"
            android:layout_marginRight="8dp"
            android:layout_marginStart="8dp"
            android:layout_marginTop="24dp"
            android:text="Show back button"
            android:fontFamily="@font/roboto_black"
            android:textAllCaps="false"
            android:textSize="20sp"
            android:textStyle="bold"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/titleBtn" />

        <Button
            android:id="@+id/titleBtn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="8dp"
            android:layout_marginLeft="8dp"
            android:layout_marginRight="8dp"
            android:layout_marginStart="8dp"
            android:layout_marginTop="88dp"
            android:text="Set Title"
            android:fontFamily="@font/roboto_black"
            android:textAllCaps="false"
            android:textSize="20sp"
            android:textStyle="bold"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
    </android.support.constraint.ConstraintLayout>
</ScrollView>
</android.support.constraint.ConstraintLayout>

Upvotes: 0

Views: 2503

Answers (4)

Gautam V.
Gautam V.

Reputation: 536

Your Toolbar is in the Scrollview, you can place on top of the CoordinatorLayout to solve the issue. so your code will look like this,

<?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:id="@+id/root"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

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


    <ScrollView
        android:id="@+id/sc1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <android.support.constraint.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <EditText />
            <!-- other controls -->
        </android.support.constraint.ConstraintLayout>
    </ScrollView>


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

Upvotes: 0

Amir Hossein Mirzaei
Amir Hossein Mirzaei

Reputation: 2375

move your toolbar to our side of the scroll view

your view hierarchy should be something like this : 

<LinearLayout>
  <Toolbar/>
  <FrameLayout>
    <ScrollView/>
  </FrameLayoyt>
</LinearLayout>

Upvotes: 0

user8959091
user8959091

Reputation:

Since the toolbar is inside the scrollview it will scroll.
Take it out and constraint it to the top of the Constraint Layout.

Upvotes: 1

Viswanath Kumar Sandu
Viswanath Kumar Sandu

Reputation: 2274

Please place the toolbar before scrollview. Then it becomes not scrollable and the rest of the area is scrollable

Upvotes: 0

Related Questions