Francisco Souza
Francisco Souza

Reputation: 828

How to set Custom ActionBar to fixed top position inside ScrollView layout?

How do I set this action bar in a way even when scroll the long data screen it keeps visible on the top of the screen?

toolbar.xml:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:orientation="vertical" >

Guys please see my update: I tried everything but it seems that next component after actionBar is not being set after actionBar but behind it:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:background="@drawable/background_telas"
android:orientation="vertical" >

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

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

    <ScrollView
        android:id="@+id/scrollView"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:fillViewport="true" >

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

            <TextView
                android:id="@+id/textView1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="TextView" />
        </LinearLayout>
    </ScrollView>
</LinearLayout>

enter image description here

<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/actionBar"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:background="@color/actionBarBackgroundColor"
    app:contentInsetEnd="0dp"
    app:contentInsetStart="0dp" >
</android.support.v7.widget.Toolbar>

<View
    android:layout_width="match_parent"
    android:layout_height="1dp"
    android:background="#A0A09F" />

Project (eclipse): Project in eclipse IDE

Screen stopped: Screen stopped showing acationbar on top

Screen scrolled up: Screen scrolled up showing the actionbar going up with other data

Java:

    Toolbar actionBar = (Toolbar) findViewById(R.id.actionBar);
    actionBar.setTitle("ProTaxi Passageiro");
    actionBar.setSubtitle("Cadastro");
    actionBar.setTitleTextColor(Color.parseColor("#846A1A"));
    setSupportActionBar(actionBar);

Upvotes: 3

Views: 5907

Answers (4)

Egy Ramschie
Egy Ramschie

Reputation: 53

To fix the layout above the bar, try doing the following. Wrap the whole activity in a relative layout. Then give an id to the Top Action Bar Relative layout. Afterwards on your scroll view, add this line layout_below/@id/top_profile_bar to have the layout scroll below the bar.

<RelativeLayout 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">

<!--Top Action Bar-->

<RelativeLayout
    android:id="@+id/topprofilebar"
    android:layout_width="match_parent"
    android:layout_height="50dp">

    <include layout="@layout/top_actions_bar" />
</RelativeLayout>

<!--Add a layout_below/@id/top_profile_bar to have it below the bar-->
<ScrollView
    android:layout_below="@id/topprofilebar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <!--Some Content-->
</ScrollView>    

then in your top_actions_bar.xml add app:layout_scrollFlags="enterAlways" to the tool bar.

    <com.google.android.material.appbar.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    >

    <androidx.appcompat.widget.Toolbar
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:id="@+id/profileToolBar"
        app:layout_scrollFlags="enterAlways"
        android:background="@drawable/bg_white_grey_border_bottom">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            <ImageView
                android:id="@+id/ivBack"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"/>
            <TextView
                android:layout_toRightOf="@+id/ivBack"
                android:id="@+id/top_actions_bar"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:textSize="20sp"
                android:textColor="@color/colorBlack"
                android:layout_marginLeft="15dp"
                android:text="Scoper Settings"
                />
        </RelativeLayout>


    </androidx.appcompat.widget.Toolbar>

</com.google.android.material.appbar.AppBarLayout>

Hope this helps!

Upvotes: 0

codemoonger
codemoonger

Reputation: 663

You can also set the layout_scrollFlags to enterAlways to get rid of the toolbar scrolling.

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

    </android.support.v7.widget.Toolbar>

Upvotes: 2

Lamorak
Lamorak

Reputation: 11137

I had a similar problem with the layout behind the toolbar, setting fixed height to the Toolbar helped me, try android:layout_height="?attr/actionBarSize". Also use the layout @Floern adviced you.

Upvotes: 1

Floern
Floern

Reputation: 33904

If you don't want the Toolbar to scroll with the content, then you have to put it outside the ScrollView.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

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

    <ScollView
        ...>

        you content here..

    </ScollView>

</LinearLayout>

Upvotes: 6

Related Questions