CODEWITHSUNDEEP
androidandroid-toolbarandroid-coordinatorlayout
dev
dev

Reputation: 11319

Progressbar below Toolbar in CoordinatorLayout

I have a layout XMl like this :

<CoordinatorLayout>
    <AppBarLayout>
        <CollapsingToolbarLayout>
            <RelativeLayout/>
            <Toolbar/>
        </CollapsingToolbarLayout>
    </AppBarLayout>
    <RecyclerView/>
</CoordinatorLayout>

I want to add a horizontal progressbar just below the toolbar and above the recycler view to indicate data loading for recycler view items.

With a relative layout, I could have simply provided a android:layout_below property for progressbar below action bar. But being new to Coordinator Layout and Toolbar, I am unable to get the results.

Upvotes: 4

Views: 4702

Answers (3)

Luis &#193;ngel Berr&#237;os
Luis &#193;ngel Berr&#237;os

Reputation: 61

Place the ProgressBar as a direct child of the CoordinatorLayout.

<CoordinatorLayout>
    <AppBarLayout>
        <CollapsingToolbarLayout>
            <ImageView/>
            <Toolbar/>
        </CollapsingToolbarLayout>
    </AppBarLayout>
    <NestedScrollView>
    </NestedScrollView>
    <ProgressBar/>
    <BottomAppBar/>
    <FloatingActionButton/>
</CoordinatorLayout>

For the ProgressBar, use layout_anchor and anchor it the AppBarLayout (equal to AppBarLayout id). Set the layout_anchorGravity to bottom.

    <ProgressBar
    android:id="@+id/progressBar"
    style="?android:attr/progressBarStyleHorizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:indeterminate="true"
    android:visibility="@{viewModel.loading ? View.VISIBLE : View.GONE}"
    app:layout_anchor="@id/appBarLayout"
    app:layout_anchorGravity="bottom" />

I'm attaching the code and the preview screenshot. Horizontal Progress Bar showing properly

Upvotes: 3

R. Zag&#243;rski
R. Zag&#243;rski

Reputation: 20268

If you want to hide ProgressBar with Toolbar wrap Toolbar inside LinearLayout and put ProgressBar as a first child of this LinearLayout. Assign 

orientation="vertical"

If you would like ProgressBar to be always visible, then wrap RecyclerView inside LinearLayout and put ProgressBar as a first child. Set the orientation. Remember to add 

app:layout_behavior="@string/appbar_scrolling_view_behavior"

as a paramter of LinearLayout (It must pass the scrolling to the child)

Upvotes: 2

Ben
Ben

Reputation: 1295

<CoordinatorLayout>
    <AppBarLayout>
        <CollapsingToolbarLayout>
            <RelativeLayout/>
            <Toolbar/>
        </CollapsingToolbarLayout>
    </AppBarLayout>
    <LinearLayout>
      <ProgressBar>
      <RecyclerView/>
    </LinearLayout>
</CoordinatorLayout>

The above should work for what you want. Make sure the orientation on the linear layout is vertical. The only caveat is that if your recycler view is large you may need to wrap the linear layout in a nest scroll view assuming you want the progress bar to scroll as well.

Upvotes: 1

Related Questions