问题
i want to make a collapsing toolbar layout like google play store. like this: https://sendvid.com/ugjspx8r
and here is my layout: http://sendvid.com/s4mx3xem
how can i do that with new android support library?
here is my layout xml file:
<android.support.design.widget.CoordinatorLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:focusableInTouchMode="true">
<android.support.design.widget.AppBarLayout
android:id="@+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/seffafCollapsingToolbarLayout"
android:layout_width="match_parent"
android:layout_height="240dp"
app:expandedTitleMarginEnd="164dp"
app:expandedTitleMarginStart="148dp"
app:layout_scrollFlags="scroll|enterAlwaysCollapsed">
<ImageView
android:id="@+id/header"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
android:src="@drawable/haber_icerik_resim"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="@+id/haber_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:theme="@style/ToolbarColoredBackArrow"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|enterAlways"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="@+id/newsRecyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="vertical"
android:clickable="true"
android:background="@color/mainBackground"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
回答1:
Here is working code, what you need.
<?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:id="@+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="@dimen/detail_backdrop_height"
android:fitsSystemWindows="true"
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="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed">
<ImageView
android:id="@+id/backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|enterAlways|snap"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<fragment
android:name="com.support.android.designlibdemo.CheeseListFragment"
class="com.support.android.designlibdemo.CheeseListFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
And here is Activity
public class SampleActivity extends AppCompatActivity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_sample);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
}
}
I hope this will solve your problem. Please let me know, if you need further help!!!
回答2:
View inside CollapsingToolbarLayout no need to set app:layout_scrollFlags. No effect. Base on my code, change app:layout_scrollFlags in CollapsingToolbarLayout to "app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed" and set minHeight for it.
As your toolbar is "pin", so enterAlwaysCollapsed will call it when you scroll down.
<android.support.design.widget.CoordinatorLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:focusableInTouchMode="true">
<android.support.design.widget.AppBarLayout
android:id="@+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/seffafCollapsingToolbarLayout"
android:layout_width="match_parent"
android:layout_height="240dp"
android:minHeight="?attr/actionBarSize"
app:expandedTitleMarginEnd="164dp"
app:expandedTitleMarginStart="148dp"
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed">
<ImageView
android:id="@+id/header"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@drawable/haber_icerik_resim"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="@+id/haber_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:theme="@style/ToolbarColoredBackArrow"
app:layout_collapseMode="pin"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="@+id/newsRecyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="vertical"
android:clickable="true"
android:background="@color/mainBackground"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
回答3:
I implemented this as shown below. I couldn't find any better solution.
public enum State {
EXPANDED,
COLLAPSED,
}
mCurrentState = State.EXPANDED;
Boolean toolbarIsTransparent = true;
// Calculate ActionBar height
TypedValue tv = new TypedValue();
int actionBarHeight = 0;
if (mContext.getTheme().resolveAttribute(android.R.attr.actionBarSize, tv, true)) {
actionBarHeight = TypedValue.complexToDimensionPixelSize(tv.data, getResources().getDisplayMetrics());
}
AppBarLayout appBarLayout = (AppBarLayout) rootView.findViewById(R.id.appbar_layout);
final CollapsingToolbarLayout collapsingToolbarLayout = (CollapsingToolbarLayout) rootView.findViewById(R.id.collapsible_toolbar);
if (appBarLayout != null) {
final int finalActionBarHeight = actionBarHeight;
appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
@Override
public void onOffsetChanged(AppBarLayout appBarLayout, int i) {
if (i == 0) {
mCurrentState = State.EXPANDED;
} else if (Math.abs(i) >= appBarLayout.getTotalScrollRange()) {
mCurrentState = State.COLLAPSED;
}
if ((collapsingToolbarLayout.getHeight() + i <= finalActionBarHeight) && mCurrentState.equals(State.COLLAPSED)) {
toolbar.setBackgroundColor(ContextCompat.getColor(mContext, R.color.colorPrimary));
toolbarIsTransparent = false;
} else if (!toolbarIsTransparent) {
mCurrentState = State.EXPANDED;
toolbar.setBackgroundColor(ContextCompat.getColor(mContext, android.R.color.transparent));
toolbarIsTransparent = true;
}
}
});
}
and xml code is `
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsible_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:orientation="vertical"
android:src="@drawable/image"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"/>
</android.support.design.widget.CollapsingToolbarLayout>
`
回答4:
I tried almost all the answers to get the same functionality but got it working after a little tweaking.
It works similar to PlayStore where the Toolbar title appears only when it is collapsed and hidden otherwise.
Here is the layout
<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/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="@style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="@color/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
app:titleEnabled="false">
<ImageView
android:id="@+id/banner"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@drawable/image"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" />
<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>
<!--Add your views here-->
<android.support.v7.widget.RecyclerView
android:id="@+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipToPadding="false"
android:fadeScrollbars="true"
android:paddingTop="10dp"
android:scrollbarStyle="insideOverlay"
android:scrollbars="vertical"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
Add this code to the onCreate method of your Activity
private Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
private AppBarLayout appBarLayout = (AppBarLayout) findViewById(R.id.appbar);
appBarLayout = (AppBarLayout) findViewById(R.id.appbar);
appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
@Override
public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
if (verticalOffset <= -appBarLayout.getTotalScrollRange() + toolbar.getHeight()) {
//Toolbar Collapsed
toolbar.setTitle("Your title here");
} else {
//Toolbar Expanded
toolbar.setTitle(" ");
}
}
});
Few things to note
- Do not set any background to Toolbar else it will overlap your view
- contentScrim attribute will take care of the Toolbar color on collapse
- titleEnabled attribute is set to false to disable collapsing title effect
I hope this will be useful to people looking for the same behaviour.
Please let me know how it works out. Cheers!
回答5:
Here is my implementation
Layout Code
<android.support.design.widget.AppBarLayout
android:id="@+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="@style/ThemeOverlay.AppCompat.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsingToolbarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed">
<ImageView
android:id="@+id/img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:layout_gravity="center_horizontal|top"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:theme="@style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<!-- YOUR LAYOUT CODE --->
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
Java Code
inside onCreateView
if (toolbar != null) {
((AppCompatActivity)getActivity()).setSupportActionBar(toolbar);
((AppCompatActivity)getActivity()).getSupportActionBar().setDisplayHomeAsUpEnabled(true);
}
// in your code
img.setImageResource(R.drawable.img1);
collapsingToolbarLayout.setTitle("<TITLE>");
回答6:
Just add the bellow tag in CollapsingToolbarLayout
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
and remove the above same tag in ImageView
, its not required there.
And it works exaclty like you see in google play
Hope this helps to someone :)
来源:https://stackoverflow.com/questions/32569824/collapsing-toolbar-layout-like-google-play-store