What is the difference between ToolBar and CollapsingToolBar in android?
I tried finding it online but couldn't get any useful resource
A toolBar looks like this:
You can move it anywhere on the screen you want. its treated just like a view.
Lets look how you can put it in its own layout file with other views:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="56dp">
</Toolbar>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#color/gray"/>
and a collapsingtoolbar is a wrapper for doing a sort of animation on the toolbar and adding views like images to the tool bar. Here is an example:
When you swipe down on the collapsing toolbar it shows other views.
Here is a code example and notice how i put the toolbar inside of the collapsable toolbar, it wraps it:
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="48dp"
app:expandedTitleMarginEnd="64dp"
android:fitsSystemWindows="true">
<com.antonioleiva.materializeyourapp.SquareImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax"/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
note: you probably want to put that in a coordinator layout but i didnt' want to add more confusion.
Related
i am using collapsing toolbar with toolbar only here my purpose
is to use default parallex feature for toolbar,but the problem i am facing that back arrow and title in expanded form overlapping each other i tried to set expandedtitlegravity to bottom didn't work either
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="140dp"
android:background="#color/white"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white"
android:fitsSystemWindows="true"
app:collapsedTitleTextAppearance="#style/SavedCollapsedAppBar"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="20dp"
app:expandedTitleMarginStart="20dp"
app:expandedTitleTextAppearance="#style/SavedExpandedAppBar"
app:layout_scrollFlags="scroll|exitUntilCollapsed|enterAlways">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/white"
android:fontFamily="sans-serif-medium"
android:theme="#style/SavedToolbarColoredBackArrow"
app:layout_collapseMode="pin"
app:popupTheme="#style/AppTheme"
app:titleTextAppearance="#style/SavedCollapsedAppBar"
app:titleTextColor="#color/black" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
It's seems like, the problem is with the Toolbar.
set app:contentInsetStart in Toolbar i.e.
<android.support.v7.widget.Toolbar
...
app:contentInsetStart="72dp"
It may solve the problem.
I've been experimenting with CollapsingToolbarLayout in Android. I am trying to change the shape of the Toolbar when it's collapsed. And like this when collapsed.
I want the Toolbar to look something like this when collapsed. I can do it to a normal Toolbar when it's not in a CollapsingToolbarLayout by creating a custom background for it as shown above. But I'm not able to set it to the toolbar in CollapsingToolbarLayout as setting a background simply leads it to showing up in the expanded view and then shifting upwards when in collapsed form.
Any idea how this can be implemented?
XML Code for the CollapsingToolbar
<android.support.design.widget.CoordinatorLayout
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"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/white"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true"
>
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="?attr/colorPrimary"
android:fitsSystemWindows="true"
app:titleEnabled="true"
app:title="LOL1"
app:expandedTitleGravity="center_horizontal"
app:collapsedTitleGravity="center_horizontal"
app:collapsedTitleTextAppearance="#color/colorAccent"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="250dp"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax"
android:id="#+id/image"
android:src="#drawable/head"
/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin"
/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
[![see image][3]][3]
[3]:
I have a linnear layout at the top of recyclerview. I used nestedscrollview to drag it from bottom. When linear lyout reaches the top scroll behaviour of recyclerview should activated. Top linear should act as toolbar. I want bottom sheet similar to google maps navigation screens bottomsheet.
Thanks in advance
Instead of that you can go with CollapsingToolbarLayout. This will fulfill your requirement.
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="48dp"
app:expandedTitleMarginEnd="64dp"
android:fitsSystemWindows="true">
//your linear layout content will be here
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:scrollbars="vertical" />
</android.support.design.widget.CoordinatorLayout>
trying to build an Android app with a collapsingtoolbarlayout and a view element that always sticks directly below the bottom of the toolbar.
I think I'm just messing up my organization within the whole appbarlayout, but I can't seem to figure out the right ordering.
Any help would be great!
Thanks-
Here's my Activity xml
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="244dp"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/toolbarLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:collapsedTitleTextAppearance="#style/CollapsedTheme"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleGravity="center|bottom"
app:expandedTitleMarginBottom="20dp"
app:expandedTitleMarginEnd="20dp"
app:expandedTitleMarginStart="20dp"
app:expandedTitleTextAppearance="#style/ExpandedTheme"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:theme="#style/ToolbarColoredBackArrow">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="180dp"
android:orientation="vertical">
</LinearLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_product" />
And I'm trying to add in
<RelativeLayout
android:layout_below="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="20dp"
android:background="#color/blue"/>
So that it always stays below the toolbar, but when the collapsingtoolbarlayout scrolls to the top of the screen, it stays sticking below it.
An AppBarLayout extends LinearLayout - just add your RelativeLayout below your CollapsingToolbarLayout and don't include any layout_scrollFlags.
<AppBarLayout>
<CollapsingToolbarLayout />
<RelativeLayout />
</AppBarLayout>
I have a title on the left side in a Toolbar and in a CollapsingToolbarLayout. I want to move it to the center horizontally.
Please help me.
Pictures of my current layout and what I want to achieve:
Code:
<android.support.design.widget.CoordinatorLayout
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/coordinator_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.sagar.materialdesigndemo.CollapsingToolbarFragment">
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar_layout"
android:layout_width="match_parent"
android:layout_height="256dp"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:elevation="#dimen/toolbar_elevation"
app:expandedTitleTextAppearance="#style/HeaderTitleStyle"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/flexible_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/backmain"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:titleTextAppearance="#style/ToolbarTitleStyle"
android:layoutDirection="rtl"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
Set this parameter in your CollapsingToolbarLayout
app:expandedTitleGravity="center_horizontal"
To achieve this, you can get reference to the collapsing toolbar from the corresponding Java class and set the gravity of your title:
CollapsingToolbarLayout collapsingToolbar = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
//now that you have access to your toolbar, set the directions.
collapsingToolbar.setExpandedTitleGravity(Gravity.CENTER_HORIZONTAL);
collapsingToolbar.setCollapsedTitleGravity(Gravity.CENTER_HORIZONTAL);