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>
Related
I am using CollapsingToolbarLayout for my activity. Is there a way to pin RelativeLayout that contains Toolbar within instead of pinning Toolbar? I tried to do the following but the RelativeLayout does not pin on top when layout collapses.
<?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"
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/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="0dp"
android:theme="#style/AppTheme.AppBarOverlay"
app:elevation="0dp"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="#color/pale_red"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:fitsSystemWindows="true">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="230dp"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax">
<android.support.v4.view.ViewPager
android:id="#+id/carViewPager"
android:layout_width="match_parent"
android:layout_height="230dp"/>
<LinearLayout
android:id="#+id/image_count"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center"
android:layout_gravity="bottom|center"
android:background="#android:color/transparent" />
</FrameLayout>
<RelativeLayout
android:id="#+id/toolbarLayout"
android:layout_width="match_parent"
android:layout_height="#dimen/toolbar_height"
app:layout_collapseMode="pin"
app:popupTheme="#style/AppTheme.PopupOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="#dimen/toolbar_height"
app:popupTheme="#style/AppTheme.PopupOverlay">
</android.support.v7.widget.Toolbar>
<TextView
android:id="#+id/activityTitle"
android:layout_width="match_parent"
android:layout_height="48dp"
android:layout_gravity="center"
android:gravity="center"
android:textSize="16sp"
android:text="#string/shop_info"
android:textColor="#color/white" />
</RelativeLayout>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_shop" />
</android.support.design.widget.CoordinatorLayout>
Like its name Collapsing,everthing except Toolbar is going to be collapsed when scroll up, the only way to pin it is to use "pin" on ToolBar, and only the ToolBar works with "pin".
Hence try placing your RelativeLayout outside of CollapsingToolBarLayout ,but inside of AppBarLayout, maybe that's what you need.
I solved it through this question:
How to use a TabLayout with Toolbar inside CollapsingToolbarLayout?
just treat your layout as the TabLayout mentioned in this question.
Hope it helps.
i have this coordinator layout. Currently, i when i collapse the image, the supportActionBar title gets shown at the top. But, how do I have a textView in the toolbar AND menu options show up in my toolbar, when i collapse the image?
Here is my layout not collapsed.
I want my toolbar textview and my optionsMenu "Edit" button to show up whether the toolbar is collapsed or not.
And this is when i collapse the image.
So my supportActionBar text shows up when image is collapsed. I dont want it appearing infront my image when the image is not collapsed.
Here is my xml code:
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:ignore="RtlHardcoded"
android:focusable="true"
android:focusableInTouchMode="true"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<!--ViewPager goes here-->
<android.support.v4.view.ViewPager
android:id="#+id/image_viewpager"
android:layout_width="match_parent"
android:layout_height="256dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
/>
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="parallax"
android:id="#+id/card_info_polished_toolbar">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Card Info"
android:textColor="#color/white"
android:textSize="20dp"/>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<include layout="#layout/activity_5a_card_info_final_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
And here is my activity java code:
In onCreate i have:
myToolbar = (Toolbar) findViewById(R.id.card_info_polished_toolbar);
setSupportActionBar(myToolbar);
//getSupportActionBar().setDisplayShowTitleEnabled(false);
//IF you use setSupportACtionBar, then you cannot use a textView for the title, the title is hidden. This is the only way to change it...
Spannable text = new SpannableString("Sample Card info");
text.setSpan(new ForegroundColorSpan(Color.WHITE), 0, text.length(), Spannable.SPAN_INCLUSIVE_INCLUSIVE);
getSupportActionBar().setTitle(text);
getSupportActionBar().setHomeButtonEnabled(true);
And then for my edit button on the toolbar i have:
public void editButtonClick(MenuItem item)
{
Intent i = new Intent(CardInfo_Polished.this, EditCardInfo.class);
startActivity(i);
}
#Override
public boolean onCreateOptionsMenu(Menu menu)
{
getMenuInflater().inflate(R.menu.menu_card_info,menu);
if(Global_Class.getInstance().getValue().clickedCard.getCreatorName() == null || Global_Class.getInstance().getValue().user.getUsername() == null)
{
menu.getItem(0).setVisible(true);
}
//Code for later.
/*if(Global_Class.getInstance().getValue().cardClicked.getUser_id().equals(Global_Class.getInstance().getValue().currentUserOUTDATED.getUUID()))
{
menu.getItem(0).setVisible(true);
}
else
{
menu.getItem(0).setVisible(false);
}*/
return true;
}
Use like this:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay">
<TextView
android:id="#+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Toolbar Title"
android:textColor="#ffffff"
android:textSize="22dp"
android:textStyle="bold" />
</android.support.v7.widget.Toolbar>
I actually figured out. All you have to do is add this one line of code. inside toolbar.
app:layout_collapseMode="pin"
What i had was this:
app:layout_collapseMode="collapse"
This is an Example ...U can figure out using this...Hope if u can...else u can ask me
Layout of app bar layout only rest node added
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:fitsSystemWindows="true"
android:layout_height="#dimen/app_bar_height_new"
android:layout_width="match_parent"
android:popupTheme="#style/ThemeOverlay.AppCompat.Light"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_collapseMode="parallax"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleTextAppearance="#style/TransparentText"
app:collapsedTitleTextAppearance="#style/WhiteText">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/img_main_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:adjustViewBounds="true"
android:maxWidth="500dp"/>
<ProgressBar
android:id="#+id/progressBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone"
android:layout_centerInParent="true" />
<com.zl.reik.dilatingdotsprogressbar.DilatingDotsProgressBar
android:id="#+id/progress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:radius="5dp"
android:color="#ffffff"
app:dd_numDots="3"
app:dd_scaleMultiplier="1.5"
android:layout_centerInParent="true"
app:dd_animationDuration="500"
app:dd_horizontalSpacing="4dp"
/>
</RelativeLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent"
app:layout_collapseMode="pin"
app:popupTheme="#style/Base.ThemeOverlay.AppCompat.Light"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
In Activity:
CollapsingToolbarLayout collapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.toolbar_layout);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
collapsingToolbarLayout.setTitle("Enter the title Here");
Please check below code
<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:background="#color/white"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="#dimen/scale_300dp"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsingToolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax">
<android.support.v4.view.ViewPager
android:id="#+id/mPager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<android.support.v7.widget.AppCompatImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/bottom_shadow" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:gravity="center_vertical|end"
android:orientation="horizontal"
android:padding="#dimen/scale_10dp">
<!--<android.support.v7.widget.AppCompatTextView-->
<!--android:id="#+id/tvBidPrice"-->
<!--android:layout_width="0dp"-->
<!--android:layout_height="wrap_content"-->
<!--android:layout_weight="1"-->
<!--android:text="Forging Scrap"-->
<!--android:textColor="#color/white"-->
<!--android:textSize="17sp"-->
<!--android:textStyle="bold" />-->
<android.support.v7.widget.AppCompatTextView
android:id="#+id/tvCountry"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:drawableLeft="#drawable/india"
android:drawablePadding="#dimen/scale_10dp"
android:padding="#dimen/scale_5dp"
android:text="#string/CountryHint"
android:textColor="#color/white" />
</LinearLayout>
</FrameLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:gravity="center"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/AppTheme.PopupOverlay"
app:theme="#style/AppTheme" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayShowTitleEnabled(false);
toolbar.setTitle("Your Title Here")
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));
I want toolbar_title layout center in toolbar, but itlooks like there is some margin on left, if I remove CollapsingToolbarLayout it is ok.
Inorder to center toolbar_title text I set toolbar_title's margin right manualy in code, but the only after the fragment resumed I toolbar_title.getX() can get the correct value, so I postDelayed 50 ms to do this.
now ther is the question:
how to center toolbar_title in CoordinatorLayout on a better way?
<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"
xmlns:tools="http://schemas.android.com/tools">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:expandedTitleMarginStart="?attr/actionBarSize"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<LinearLayout
android:id="#+id/layout_header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#f5f5f5"
android:orientation="vertical"
app:layout_collapseMode="parallax">
</LinearLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:theme="#style/AppTheme.ToolBar"
app:layout_collapseMode="pin"
app:popupTheme="#style/AppTheme.PopupOverlay">
<TextView
android:id="#+id/toolbar_title"
style="#style/TextAppearance.AppCompat.Widget.ActionBar.Title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:textColor="#android:color/white"
android:textSize="18sp"
tools:text="title"/>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/swipe_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
You just need to add below attributes in your Toolbar.
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
See similar thread on stackoverflow: Android API 21 Toolbar Padding
See title textview position before and after attributes adding in toolbar.
Before adding attributes:
After adding attributes:
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;