Change the background of a CollapsingToolabarLayout - android

I'd like to change the background of in ImageView inside a CollaspingToolbarLayout. Here is what I tried to do:
activity_main.xml
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="250dp"
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"
app:contentScrim="#color/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/collapsingimage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:background="#drawable/teszt1"
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>
</android.support.design.widget.AppBarLayout>
MainActivity.java
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
collapsingimage = (ImageView)findViewById(R.id.collapsingimage);
collapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
collapsingToolbarLayout.setTitle(" ");
dynamicToolbarColor();
}
private void dynamicToolbarColor() {
Bitmap b = imageUrltoBitmap(imgurl);
collapsingimage.setImageBitmap(b);
Bitmap bitmap = BitmapFactory.decodeResource(getResources(),R.drawable.hhg);
Palette.from(bitmap).generate(new Palette.PaletteAsyncListener() {
#Override
public void onGenerated(Palette palette) {
int colorPrimary = getResources().getColor(R.color.colorPrimary);
int colorPrimaryDark = getResources().getColor(R.color.colorPrimaryDark);
collapsingToolbarLayout.setContentScrimColor(palette.getMutedColor(colorPrimary));
collapsingToolbarLayout.setStatusBarScrimColor(palette.getMutedColor(colorPrimary));
collapsingToolbarLayout.setContentScrimColor(getResources().getColor(R.color.colorPrimary));
}
});
}
So I'd like to load another image instead of I added in the xml file and I set the ImageView's background but nothing happens. Have you any idea how to do it?

To change the color use the property app:contentScrim, i see that you are using the color color/colorPrimary:
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="#color/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
If you need to do this programatically donĀ“t use pallete, use directly:
collapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
int colorPrimary = getResources().getColor(R.color.colorPrimary);
collapsingToolbarLayout.setBackgroundColor(colorPrimary);
collapsingToolbarLayout.setContentScrimColor(colorPrimary);
collapsingToolbarLayout.setStatusBarScrimColor(colorPrimary);

Related

Floating button between action bar and Frame Layout

I want something like this:
I have the following now:
With the following XML:
<?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.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_height="130dp"
android:layout_width="match_parent">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:toolbarId="#+id/toolbar"
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
app:contentScrim="?attr/colorPrimary">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent">
</android.support.v7.widget.Toolbar>
</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"
app:layout_behavior="android.support.design.widget.AppBarLayout$ScrollingViewBehavior">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/book_detail">
</FrameLayout>
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="#android:drawable/ic_input_add"
android:layout_margin="16dp"
android:clickable="true"
android:focusable="true"
app:layout_anchor="#id/appbar"
app:layout_anchorGravity="bottom|end"/>
</android.support.design.widget.CoordinatorLayout>
But I have some problems:
The Title is on top instead of bottom
There's something like a separator on top
I'm using a coordinator now, but I don't need a collapsing toolbar, so I think that there must be another solution maybe. How can I solve this?
Let's first start by making the toolbar taller. I think what you're looking for is CollapingToolbarLayout
To use the CollapsingToolbarLayout you have to change your ConstraintLayout to CoordinatorLayout.
Then you have to create an AppBarLayout to hold the CollapsingToolbarLayout and the Toolbar.
Then to make the floating button in that place you have to anchor it to the AppBarLayout created earlier like below:
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|end"
android:layout_margin="16dp"
app:layout_anchor="#id/app_bar"
app:layout_anchorGravity="bottom|end"
android:clickable="true"
android:src="#drawable/message"
android:focusable="true"
app:elevation="30dp"/>
That way it will be anchored to the AppBarLayout so it will go up and down as the AppBarLayout goes up or down.
EDIT #1 :
To remove the title from the top and remove the separator you have to set your activity's theme to NoActionBar. In your AndroidManifest.xml file go to your activity and change its code to the following:
<activity
android:name="YOUR_ACTIVITY_PATH.BookDetailActivity"
android:theme="#style/AppTheme.NoActionBar" />
This way the activity will be declared without an action bar which means no separator and no title.
Then to add the title to the bottom you just have to set the title of the CollapsingToolbarLayout to the text you want.
You can set it in the xml with app:title="YOUR_TITLE" attribute or you can set it programmatically by calling the function setTitle("YOUR_TITLE") for your CollapsingToolbarLayout variable .
Here is what the full code could look like:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".BookDetailActivity">
<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/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:title="YOUR_TITLE"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:toolbarId="#+id/toolbar">
<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>
<FrameLayout
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginTop="8dp"
app:layout_constraintStart_toStartOf="parent"
android:layout_marginLeft="8dp"
android:layout_marginStart="8dp"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginBottom="8dp"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:id="#+id/book_detail">
</FrameLayout>
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|end"
android:layout_margin="16dp"
app:layout_anchor="#id/app_bar"
app:layout_anchorGravity="bottom|end"
android:clickable="true"
android:src="#drawable/message"
android:focusable="true"
app:elevation="30dp"/>
</android.support.design.widget.CoordinatorLayout>
EDIT 2:
In your activity set your action bar by this :
setSupportActionBar(YOUR_TOOLBAR_VARIABLE) then you can use getSupportActionBar().setDisplayHomeAsUpEnabled(true)
Note that the toolbar should be the id of this one:
android.support.v7.widget.Toolbar so in our case the toolbar with the id toolbar
Use this layout
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="192dp">
<android.support.design.widget.CollapsingToolbarLayout
android:elevation="4dp"
android:id="#+id/collapsing_toolbar"
android:background="#color/primary"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<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>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<android.support.design.widget.FloatingActionButton
style="#style/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
app:layout_anchor="#id/app_bar_layout"
app:layout_anchorGravity="bottom|right|end" />
The use this class for action of FAB
public class FlexibleSpaceExampleActivity extends AppCompatActivity
implements AppBarLayout.OnOffsetChangedListener {
private static final int PERCENTAGE_TO_SHOW_IMAGE = 20;
private View mFab;
private int mMaxScrollSize;
private boolean mIsImageHidden;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_flexible_space);
mFab = findViewById(R.id.flexible_example_fab);
Toolbar toolbar = (Toolbar) findViewById(R.id.flexible_example_toolbar);
toolbar.setNavigationOnClickListener(new View.OnClickListener() {
#Override public void onClick(View v) {
onBackPressed();
}
});
AppBarLayout appbar = (AppBarLayout) findViewById(R.id.flexible_example_appbar);
appbar.addOnOffsetChangedListener(this);
}
#Override
public void onOffsetChanged(AppBarLayout appBarLayout, int i) {
if (mMaxScrollSize == 0)
mMaxScrollSize = appBarLayout.getTotalScrollRange();
int currentScrollPercentage = (Math.abs(i)) * 100
/ mMaxScrollSize;
if (currentScrollPercentage >= PERCENTAGE_TO_SHOW_IMAGE) {
if (!mIsImageHidden) {
mIsImageHidden = true;
ViewCompat.animate(mFab).scaleY(0).scaleX(0).start();
/**
* Realize your any behavior for FAB here!
**/
}
}
if (currentScrollPercentage < PERCENTAGE_TO_SHOW_IMAGE) {
if (mIsImageHidden) {
mIsImageHidden = false;
ViewCompat.animate(mFab).scaleY(1).scaleX(1).start();
/**
* Realize your any behavior for FAB here!
**/
}
}
}
public static void start(Context c) {
c.startActivity(new Intent(c, FlexibleSpaceExampleActivity.class));
}
}
There are some Github Implementation to develope this view and many other
Collapsing Toolbar with Fab

How to set an OnClickListener to CollapsingToolbarLayout Title

I have the default AppBar layout inside a coordinator layout
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
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/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="#dimen/activity_horizontal_margin"
app:expandedTitleMarginEnd="#dimen/activity_horizontal_margin"
app:expandedTitleGravity="start|bottom"
app:collapsedTitleTextAppearance="#style/TextAppearance.Widget.AppCompat.Toolbar.Title"
app:expandedTitleTextAppearance="#style/TextAppearance.AppCompat.Widget.ActionBar.Title.Inverse"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FAFAFA"
android:fitsSystemWindows="true"
android:orientation="vertical"
app:layout_collapseMode="parallax">
<com.petronas.laniakea.view.FixedRatioImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
android:src="#drawable/logo_blue" />
</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>
How do I set an OnClickListener for the title TextView? I was able to get the Toolbar private Title TextView, make it public and set an OnClickListener to that view:
toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
Field titleField = null;
try {
titleField =Toolbar.class.getDeclaredField("mTitleTextView");
titleField.setAccessible(true);
TextView barTitleView = (TextView) titleField.get(toolbar);
barTitleView.setOnClickListener(v -> {});
} catch (NoSuchFieldException e) {
e.printStackTrace();
} catch (IllegalAccessException e) {
e.printStackTrace();
}
The code above works fine but I still don't get a click event when I click the title. Any Ideas?
Here is my view hierarchy as it appears on Stetho:
View Hierarchy
As far as I know, there is no way to set an OnClickListener on the TextView in any sort of an ActionBar or toolbar. The way you are using uses reflection APIs, which, when packaged in a release app, will promptly crash.
You can try by wrapping the TextView by Toolbar. So, your layout structure be like:
<Toolbar ...>
<TextView android:id="#+id/toolbarTextId" ..../>
</Toolbar>
Now, use OnClickListener for tap on text.
yourTextView.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
// some action
}
});

CollapsingToolbarLayout not showing Title

In my case, the toolbar disappears when I scroll through the list. I am using a CollapsingToolbarLayout and I need to set the title text. But in my case the title text is not showing, even though I've set it (See code below). What is wrong?
Layout code:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.CoordinatorLayout
android:id="#+id/coordinator"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.AppBarOverlay"
app:elevation="0dp">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|enterAlways">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:elevation="0dp"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/AppTheme.PopupOverlay">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="#layout/app_nav_header_main"
app:menu="#menu/main_drawer" />
</android.support.v4.widget.DrawerLayout>
Activity code:
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.app_activity_with_left_panel);
mPreferences = PreferenceManager.getDefaultSharedPreferences(this);
mToolbar = (Toolbar) findViewById(R.id.toolbar);
mCollapsingToolbarLayout = (CollapsingToolbarLayout)findViewById(R.id.collapsing);
setSupportActionBar(mToolbar);
setTitle(getIntent().getStringExtra(TITLE));
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setHomeButtonEnabled(true);
}
#Override
public void setTitle(CharSequence title) {
if (title != null && !title.toString().isEmpty()) {
mTitle = title.toString();
mCollapsingToolbarLayout.setTitle(mTitle);
}
}
Remove this
#Override
public void setTitle(CharSequence title) {
if (title != null && !title.toString().isEmpty()) {
mTitle = title.toString();
mCollapsingToolbarLayout.setTitle(mTitle);
}
}
and add this on your OnCreate().
mCollapsingToolbarLayout = (CollapsingToolbarLayout)findViewById(R.id.collapsing);
mCollapsingToolbarLayout.setTitleEnabled(false);
mToolbar.setTitle("title");
This disables the default title with collapsing behaviour and adds the static title to the toolbar.
For who searches for disabling the title just add
app:titleEnabled="false"
Then the title of the toolbar itself would appear so we will disable it with
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayShowTitleEnabled(false);
or with those line in the style xml
<item name="android:displayOptions">showHome|useLogo</item>
<item name="displayOptions">showHome|useLogo</item>
Searched too much to make this search summary, wish it helps.
The above answers are correct, but it took me multiple tries to get it right. I ended up setting app:titleEnabled="false" for my CollapsingToolbarLayout in the xml, setting nothing for the Toolbar itself.
In the code, I set supportActionBar.setDisplayShowTitleEnabled(true), and supportActionBar.title = "my title".
My code:
layout.xml:
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/fragment_main_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:toolbarId="#id/toolbar"
app:titleEnabled="false">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:menu="#menu/menu_main" />
</com.google.android.material.appbar.CollapsingToolbarLayout>
fragment.kt:
val toolbar = view.findViewById<androidx.appcompat.widget.Toolbar>(R.id.toolbar)
myTitle = "This is my app title"
(activity as AppCompatActivity).let { myActivity ->
myActivity.setSupportActionBar(toolbar)
myActivity.supportActionBar?.setDisplayShowTitleEnabled(true)
myActivity.supportActionBar?.title = myTitle
// these are not needed:
//collapsingToolbar.title = myTitle
//collapsingToolbar.isTitleEnabled = true
//toolbar.title = myTitle
//myActivity.title = myTitle
}
In my case the problem was due to setting Toolbar layout_height to "wrap_content". After setting this property to a specific value like ?attr/actionBarSize, CollapsingToolbarLayout title become visible.
use this :
app:expandedTitleTextAppearance="#android:color/transparent" with your CollapsingToolbarLayout

How to use CollapsingToolbarLayout to have only 2 position, Expanded and collapsed after scroll ended

I'm trying to have CollapsingToolbarLayout to be expand/collapse when certain amount of scroll happened and scroll ended.
I got it working as supposed to be, but what I need is that toolbar is either visible or hidden, not semi, so basically to be expanded or collabsed.
I tried to find solution without luck.
Here is how I have it now:
my_activity.xml
<?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/myLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:padding="0dp"
android:layout_margin="0dp"
android:id="#+id/myPager"/>
<android.support.design.widget.AppBarLayout
android:id="#+id/appBar"
android:layout_width="match_parent"
android:layout_height="112dp"
android:minHeight="?attr/actionBarSize">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:titleEnabled="false"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.v7.widget.Toolbar
android:id="#+id/appToolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
>
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
style="#style/AppTheme.TabLayout"
android:id="#+id/appTabs"
android:scrollbars="horizontal"
android:layout_gravity="bottom"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:tabMode="fixed"
app:tabGravity="fill"
app:layout_scrollFlags="scroll|enterAlways" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
If I use onOffsetChanged, my app freezes, so is it reason, it happens everytime when scroll changing?
MyActivity.java
public class MyActivity extends AppCompatActivity {
private AppBarLayout appBarLayout;
private android.support.v7.app.ActionBar mToolbar;
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.my_activity);
appBarLayout = (AppBarLayout)findViewById(R.id.appBar);
mToolbar = getSupportActionBar();
appBarLayout.setExpanded(true);
appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
#Override
public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
if(verticalOffset == 0 || verticalOffset <= mToolbar.getHeight()) {
appBarLayout.setExpanded(false);
} else {
appBarLayout.setExpanded(true);
}
}
});
}
}
Just specify snap...
app:layout_scrollFlags="exitUntilCollapsed|scroll|snap"
... inside your XML definition:
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:titleEnabled="false"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
I found the solution, write this in your AppCompatActivity and adapts it to your code:
#Override
public boolean dispatchTouchEvent(MotionEvent ev) {
try {
AppBarLayout appBarLayout;
appBarLayout = ((AppBarLayout) findViewById(R.id.layout_toolbar));
if (ev.getAction() == ev.ACTION_UP) {
if ((collapsingToolbarLayout.getBottom() - collapsingToolbarLayout.getTop()) > appBarLayout.getBottom() * 2) {
appBarLayout.setExpanded(false);
} else {
appBarLayout.setExpanded(true);
}
}
return super.dispatchTouchEvent(ev);
} catch (Exception e) {
Log.e(TAG, "dispatchTouchEvent " + e.toString());
return false;
}
}
It gets the ACTION_UP event and checks only at this moment if the CollapsingToolbarLayout is taller than half its height.
Edit : Outdated, see this response

CollapsingToolbarLayout Menu and Up Indicator

I am using the new android design CollapsingToolbarLayout. However, I am unable to get the menu to appear. Also, the homeasup indicator does not appear.
Can someone point me in the right direction? Or is this simply not possible?
EDIT
So, I finally got my laptop back. Here is the code.
The Activity
public class CheeseDetailActivity extends AppCompatActivity {
public static final String EXTRA_NAME = "cheese_name";
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_detail);
Intent intent = getIntent();
final String cheeseName = intent.getStringExtra(EXTRA_NAME);
final Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
CollapsingToolbarLayout collapsingToolbar =
(CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
collapsingToolbar.setTitle(cheeseName);
loadBackdrop();
}
#Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case android.R.id.home:
finish();
return true;
}
return super.onOptionsItemSelected(item);
}
private void loadBackdrop() {
final ImageView imageView = (ImageView) findViewById(R.id.backdrop);
Glide.with(this).load(Cheeses.getRandomCheeseDrawable()).centerCrop().into(imageView);
}
#Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu_player, menu);
return true;
}
}
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"
android:id="#+id/main_content"
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="#dimen/detail_backdrop_height"
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"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="24dp"
app:expandedTitleMarginEnd="48dp">
<ImageView
android:id="#+id/backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
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"
android:layout_marginTop="#dimen/toolbar_top_margin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin"
app:borderWidth="#dimen/fab_border" />
</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"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingTop="24dp">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="#dimen/card_margin">
<LinearLayout
style="#style/Widget.CardContent"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Info"
android:textAppearance="#style/TextAppearance.AppCompat.Title" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/cheese_ipsum" />
</LinearLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
The menu
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto" >
<item android:id="#+id/action_settings" android:title="#string/action_settings"
android:orderInCategory="100" app:showAsAction="ifRoom" />
</menu>
As we can see, there is no overflow, nothing. But when I press the physical menu button, the menu pops up fine.
So, I guess I was really really dumb. I used the wrong margin for the toolbar. android:layout_marginTop="#dimen/toolbar_top_margin"
The margin was supposed to be -48dp, but I was using 48dp.
I had this in my dimens. I forgot to change to toolbar_top_margin_neg after I refactored.
<dimen name="toolbar_top_margin">48dp</dimen>
<dimen name="toolbar_top_margin_neg">-48dp</dimen>

Categories

Resources