I am having my first contact with expanding/collapsing toolbars. I've got some results following this great tutorial.
Now, I would like (if that's possible) to replace the static title (see title "Anthoriro" below)
for couple of EditTexts so that I have something similar to this
In this case, the text to be shown when the toolbar is collapsed would be the title Project Priorities.
Create your layout like this
<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/htab_maincontent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/htab_appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/htab_collapse_toolbar"
android:layout_width="match_parent"
android:layout_height="200dp"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<RelativeLayout
android:id="#+id/htab_header"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax"
>
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="text"
android:ems="10"
android:id="#+id/editText2"
android:hint="Title"
android:text="Project"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"/>
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Name"
android:ems="10"
android:id="#+id/editText3"
android:layout_below="#+id/editText2"
android:layout_alignLeft="#+id/editText2"
android:layout_alignStart="#+id/editText2"
android:layout_marginTop="28dp"
android:inputType="text"/>
</RelativeLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/mToolbar"
android:layout_width="match_parent"
android:layout_height="56dp"
android:gravity="top"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<--Swap this with your scrollable view -->
<android.support.v4.view.ViewPager
android:id="#+id/mViewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>
and that in your activity/fragment set
//Dont forget to find your CoolapsingLayout first :)
//set The custom text
mCollapisngToolbar.setTitle("TEXTTTs");
//Set the color of collapsed toolbar text
mCollapisngToolbar.setCollapsedTitleTextColor(ContextCompat.getColor(this, R.color.White));
//This will set Expanded text to transparent so it wount overlap the content of the toolbar
mCollapisngToolbar.setExpandedTitleColor(ContextCompat.getColor(this, R.color.Transparent));
Related
I have an odd problem with my layouts. I have a CoordinatorLayout with a CollapsingToolBarLayout in it. I have a transparent status bar to better display the image in the top. Thus I have fitsSystemWindow set on this ImageView. The problem I now have is that when the Toolbar is fully collapsed, the top part of the toolbar scrolls behind the system status bar. Is there a way to prevent this behavior?
Here are the screenshots:
Here is my layout:
<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/coordinatorLayout">
<android.support.design.widget.AppBarLayout
android:id="#+id/main_appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/main_collapsing"
android:layout_width="match_parent"
android:layout_height="350dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="140dp"
app:expandedTitleMarginBottom="90dp"
app:expandedTitleMarginEnd="64dp"
android:fitsSystemWindows="true">
<ImageView
app:layout_collapseMode="parallax"
android:id="#+id/icon"
android:transitionName="pic"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="#drawable/missing_album_art"
android:tint="#AA000000"
android:fitsSystemWindows="true"/>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="20dp"
app:layout_collapseMode="parallax">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:padding="20dp"
android:orientation="horizontal">
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:id="#+id/smallicon"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_gravity="bottom"
android:padding="20dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/artist"
android:ellipsize="end"
android:singleLine="true"
android:textSize="24sp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:singleLine="true"
android:id="#+id/date"/>
</LinearLayout>
</LinearLayout>
</FrameLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/main_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:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:id="#+id/list"
android:dividerHeight="2dp"
android:transitionName="bottom">
</android.support.v7.widget.RecyclerView>
</android.support.design.widget.CoordinatorLayout>
Also, I tweak the layout parameters a bit when creating the activity:
getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_STABLE | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);
Add android:fitsSystemWindows="true" to the root of your layout i.e. CoordinatorLayout
Most of the time, your app won’t need to draw under the status bar or the navigation bar, but if you do: you need to make sure interactive elements (like buttons) aren’t hidden underneath them. That’s what the default behavior of the android:fitsSystemWindows=“true” attribute gives you: it sets the padding of the View to ensure the contents don’t overlay the system windows.
Read more on this here.
I am trying to get the title of the Collapsed Toolbar to the center. But there seems to be some bug in the basic layout itself. The title has an offset for some reason.
Unable to figure out how to fix this. Also there seems to be no property to apply negative margin/padding to the collapsedTitle.
<android.support.design.widget.CoordinatorLayout
android:id="#+id/coordinator_layout"
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:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="#dimen/app_bar_height"
android:fitsSystemWindows="true"
android:theme="#style/XXXXAppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsingToolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:collapsedTitleGravity="center"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleGravity="top|center_horizontal"
app:expandedTitleMarginTop="-10dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:title="REGISTER">
<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/XXXXAppTheme.PopupOverlay"/>
<ImageView
android:id="#+id/ivContent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/white_background"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
app:layout_collapseMode="parallax"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
android:orientation="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<FrameLayout
android:id="#+id/flContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
Try this within your "Toolbar"
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_top"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="#color/color"
app:theme="#style/ToolBarTheme" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Register"
android:layout_gravity="center"
android:id="#+id/toolbar_title" />
</android.support.v7.widget.Toolbar>
To make it centered, please follow the steps:
To use a custom title in your Toolbar all you need to do is remember
is that Toolbar is just a fancy ViewGroup so you can add a custom
title like so:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_top"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="#color/action_bar_bkgnd"
app:theme="#style/ToolBarTheme" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Toolbar Title"
android:layout_gravity="center"
android:id="#+id/toolbar_title" />
</android.support.v7.widget.Toolbar>
This means that you can style the TextView however you would like
because it's just a regular TextView. So in your activity you can
access the title like so:
Toolbar toolbarTop = (Toolbar) findViewById(R.id.toolbar_top);
TextView mTitle = (TextView) toolbarTop.findViewById(R.id.toolbar_title);
From: Android toolbar center title and custom font
To remove the default app name title, do this:
setSupportActionBar(toolbar_top);
getSupportActionBar().setDisplayShowTitleEnabled(false);
Hope it help
You should use this. To add TextView in side Toolbar
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="130dp"
android:id="#+id/toolbar">
<android.support.v7.widget.AppCompatTextView
android:id="#+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/app_name"
android:layout_gravity="center"/>
</android.support.v7.widget.Toolbar>
Im currently trying to get the title from collapsingtoolbarlayout as textview. I want to do an shared element transition between an item in a recyclerview in a previous activity. The title from the item in the recyclerview should be translated to my collapsingtoolbarlayout title.
In activity A i have a recyclerview with that list layout:
<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/row_container"
android:layout_height="220dp"
android:layout_width="match_parent"
android:layout_margin="5dp"
card_view:cardBackgroundColor="#282828"
card_view:cardCornerRadius="3dp"
android:foreground="?attr/selectableItemBackground"
android:elevation="3dp"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_vertical"
>
<ImageView
android:id="#+id/cover"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:elevation="2dp"
/>
<ProgressBar
android:id="#+id/progress"
style="?android:attr/progressBarStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:visibility="invisible"/>
</RelativeLayout>
<LinearLayout
android:id="#+id/item_top"
android:layout_gravity="top"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="3dp"
android:padding="5dp"
>
<TextView
android:id="#+id/title"
android:textColor="#d3d3d3"
android:textStyle="bold"
android:maxLines="1"
android:gravity="left|top"
android:textSize="15sp"
android:elevation="3dp"
android:ellipsize="end"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<TextView
android:id="#+id/text"
android:textColor="#d3d3d3"
android:elevation="3dp"
android:gravity="left|top"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</LinearLayout>
</android.support.v7.widget.CardView>
And the #id/title should animate to the collapsingtoolbarlayout title of this activity B:
<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/rootlayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
>
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="150dp"
>
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_height="match_parent"
android:layout_width="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:expandedTitleMarginStart="28dp"
app:expandedTitleMarginEnd="20dp"
app:contentScrim="?attr/colorPrimary"
>
<ImageView
android:id="#+id/toolbar_image"
android:visibility="invisible"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:transitionName="toolbar_image"
app:layout_collapseMode="parallax"
/>
<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/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:elevation="0dp"
/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:id="#+id/scrollView"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#252525"
>
...
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
Any suggestions?
If your item is:
<RelativeLayout>
<TextView
...
android:transitionName="#string/transition_name"/>
</RelativeLayout>
and the Detail Activity:
<CoordinatorLayout>
<AppBarLayout>
<CollapsingToolbarLayout
...
android:minHeight="100dp"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
<Toolbar
android:title=""
android:gravity="top"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<TextView
...
android:transitionName="#string/transition_name"/>
</Toolbar>
</CollpasingToolbarLayout>
</AppBarLayout>
<RecyclerView
...
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</CoordinatorLayout>
Here the catch is transitionName element which is common property in both the activity's TextView, and both the names should be same. That is all for the XML work.
In Java,
Intent i = new Intent(MainActivity.this, DetailsActivity.class);
View sharedView = textview;
String transitionName = getString(R.string.transition_name);
ActivityOptions transitionActivityOptions = ActivityOptions.makeSceneTransitionAnimation(MainActivity.this, sharedView, transitionName);
startActivity(i, transitionActivityOptions.toBundle());
Please refer to the best documentation in detail here:
https://github.com/lgvalle/Material-Animations
Read about intents from the Android developers page or any tutorial online.
Create an intent to the new activity on the click of RecyclerView item in the previous activity.
Use .putExtra() to transmit the name of the item as a string through the intent
In the new activity onCreate() method, use:
.getStringExtra()
String title = intent.getStringExtra("title_name");
tv = (TextView)findViewById(R.id.textview);
tv.setText(title);
This is a generic code. Modify accordingly.
I hope this is what you required.
As far as I've looked into the collapsing toolbar code, being it only a wrapper for toolbar, and the setTitle() function it has, it only sets a collapsingtexthelper which implements a charsequence, and uses it to display in a view in the layout.
There is no textview as far as I have seen in the code.
It appears that children of the CollapsingToolbarLayout (a custom FrameLayout) do not adhere to the expected stack behavior of FrameLayouts. I expect the views to be drawn on top of each other in the order they are provided in the XML layout.
In the example below, when collapsing the CollapsingToolbarLayout, the "layout_button_bar" LinearLayout scrolls underneath the "button_follow" and "button_like" buttons. Provided that the LinearLayout is defined after the above mentioned buttons, I expect the LinearLayout to scroll over the two buttons, obscuring them, rather than below them. Is anyone familiar with a workaround?
<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">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="#dimen/collapsible_app_bar_height"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="#color/background_content_frame"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal"
android:src="#drawable/some_image"
app:layout_collapseMode="parallax"/>
<ImageView
android:id="#+id/image_header_gradient"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/scrim_top_bottom_banner"
app:layout_collapseMode="parallax"
tools:ignore="ContentDescription"/>
<android.support.v7.widget.Toolbar
android:id="#+id/collapsible_toolbar"
android:layout_width="match_parent"
android:layout_height="104dp"
android:minHeight="?attr/actionBarSize"
android:gravity="top"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_collapseMode="pin"/>
<Button
android:id="#+id/button_follow"
android:layout_width="#dimen/text_button_width"
android:layout_height="wrap_content"
android:layout_gravity="bottom|start"
android:layout_marginStart="#dimen/bottom_landing_button_margin"
android:layout_marginBottom="#dimen/slide_handle_height"
android:gravity="center_vertical|start"
android:drawablePadding="#dimen/spacing_xsmall"
android:drawableStart="#drawable/selector_follow"
android:visibility="gone"
android:textColor="#color/vertigo_alabaster_white"
app:layout_collapseMode="parallax"/>
<Button
android:id="#+id/button_like"
android:layout_width="#dimen/text_button_width"
android:layout_height="wrap_content"
android:layout_gravity="bottom|start"
android:layout_marginStart="#dimen/bottom_landing_button_margin"
android:layout_marginBottom="#dimen/slide_handle_height"
android:gravity="center_vertical|start"
android:drawablePadding="#dimen/spacing_xsmall"
android:drawableStart="#drawable/selector_like"
android:visibility="gone"
android:textColor="#color/vertigo_alabaster_white"
app:layout_collapseMode="parallax"/>
<LinearLayout
android:id="#+id/layout_button_bar"
android:layout_width="match_parent"
android:layout_height="#dimen/button_bar_height"
android:layout_gravity="bottom"
android:gravity="center_vertical"
android:orientation="horizontal"
android:background="#color/slide_handle">
<!-- 3 Buttons -->
</LinearLayout>
</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="match_parent"
android:scrollbars="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>
Library: com.android.support:design 23.0.1 | Theme: Theme.AppCompat.NoActionBar
Pre-collapse:
Mid-collapse:
Just wrap the like Button and the follow Button inside a Layout. For example a LinearLayout:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:gravity="center_vertical"
android:orientation="horizontal"
android:layout_marginBottom="80dp"
app:layout_collapseMode="parallax">
<Button
android:id="#+id/button_follow"
...
/>
<Button
android:id="#+id/button_like"
...
/>
</LinearLayout>
I want to design a layout like above image with Collapsing toolbar Effect, I have already tried collapsing toolbar with viewpager but with that I can add only Image and viewpgaer, I want to add the below information and then viewpager, please help me here, if anyone have any idea.
Thank you so much in advanced !!!
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="#dimen/collapsing_tool_bar_margin_end"
app:expandedTitleMarginBottom="#dimen/collapsing_tool_bar_margin_bottom"
app:expandedTitleMarginStart="#dimen/collapsing_tool_bar_margin_bottom">
<ImageView
android:id="#+id/coverImage"
android:layout_width="match_parent"
android:layout_height="200dp"
app:layout_collapseMode="parallax"
android:scaleType="centerCrop"/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:theme="#style/ActionBarThemeOverlay"
app:popupTheme="#style/ActionBarPopupThemeOverlay"
app:layout_collapseMode="pin"
android:background="#drawable/gradient_bg" />
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways">
<android.support.design.widget.TabLayout
android:id="#+id/slidingTabs"
android:fitsSystemWindows="true"
android:layout_width="match_parent"
app:tabMode="scrollable"
app:tabGravity="fill"
android:background="#color/transparent"
android:layout_height="wrap_content"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_height="wrap_content">
</android.support.v4.view.ViewPager>
You can add different view inside your collapsing toolbar like:
<LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content"
android:id="#+id/header_layout"
android:orientation="vertical"
android:layout_marginLeft="20dp"
android:layout_marginBottom="10dp"
android:layout_gravity="bottom|left">
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content"
android:text="Title"
android:textColor="#ffffff"
android:textSize="25dp"/>
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content"
android:text="subtitle"
android:textColor="#ffffff"/>
</LinearLayout>
Adjust the textsize,margin,and the rest as you wish.
But then add a this code to make sure that your added layout fades in when the toolbar collapses
headerLayout=(LinearLayout) findViewById(R.id.header_layout);
AppBarLayout appBarLayout = (AppBarLayout) findViewById(R.id.app_bar_layout);
appBarLayout.addOnOffsetChangedListener(this);
And make your activity class implement AppBarLayout.OnOffsetChangedListener
Then your onOffsetChanged method should be like this.
#Override
public void onOffsetChanged(AppBarLayout appBarLayout, int offset) {
float scaleFactor=1+(offset*0.005f);
if(!(scaleFactor<0)){
headerLayout.setAlpha(scaleFactor);
}
if(scaleFactor<0.3){
headerLayout.setAlpha(0);
}
}
Adjust the float value "0.005f" for the desired effect.
I hope this is helpful
I changed theme to solve this issue:
you should use ThemeOverlay.AppCompat.Light;