I'm trying to set the AppBarLayout's primary color programmatically. The XML layout is AndroidStudio's Scrolling sample:
<android.support.design.widget.AppBarLayout android:id="#+id/app_bar"
android:fitsSystemWindows="true" android:layout_height="#dimen/app_bar_height"
android:layout_width="match_parent" android:theme="#style/AppTheme.AppBarOverlay">
<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_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="?attr/colorPrimary">
<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/AppTheme.PopupOverlay" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
And in the activity, I want all items inside the AppBarLayout to have a yellow background, so I'm setting:
int barColor = Color.parseColor("#FFC107");
AppBarLayout barLayout = (AppBarLayout) this.findViewById(R.id.app_bar);
if (barLayout != null) {
barLayout.setBackgroundColor(barColor);
}
toolbar.setBackgroundColor(barColor);
CollapsingToolbarLayout collapsingToolbarLayout = (CollapsingToolbarLayout) this.findViewById(R.id.toolbar_layout);
if (collapsingToolbarLayout != null) {
collapsingToolbarLayout.setBackgroundColor(barColor);
collapsingToolbarLayout.setContentScrimColor(barColor);
}
Everything works fine, except when I'm halfway through scrolling the toolbar (in the exact point where the FAB disappears). In that state, the toolbar's color is still the default primary color (blue, not yellow), like in this image:
So, two questions:
Am I missing a method call?
Any tips on debugging these scenarios? In Android Device Monitor's view hierarchy dump I can't tell which one is the view that's tinted with this color.
I was having the same problem, you have to set the statusBar scrim color as well:
int red = ContextCompat.getColor(activity, R.color.red);
collapsingToolbar.setBackgroundColor(red);
collapsingToolbar.setContentScrimColor(red);
collapsingToolbar.setStatusBarScrimColor(red);
you can even get the color directly using:
collapsingToolbar.setBackgroundResource(R.color.red);
collapsingToolbar.setContentScrimResource(R.color.red);
collapsingToolbar.setStatusBarScrimResource(R.color.red);
Related
I want to customize toolbar title text color dynamically.
I had tried following methods, but all methods below failed.
I had also tried to set color before running setSupportActionBar(toolbar), but still failed.
I had also searched and tried methods from Stack Overflow, but all also failed.
How can I do?
textColor = Color.parseColor("#00FF00")
toolbar.setTitleTextColor(textColour)
textColor = Color.parseColor("#00FF00")
(toolbar::class.java.getDeclaredField("mTitleTextView")
.apply { isAccessible = true }
.get(toolbar) as TextView)
.setTextColor(textColour)
<androidx.appcompat.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:id="#+id/toolbar"
app:titleTextColor="#00FF00"
app:popupTheme="#style/AppTheme.PopupOverlay"
app:layout_collapseMode="pin" />
The problem was solved that I read through source code of CollapsingToolbarLayout, when there is CollapsingToolbarLayout applied, should not change title text color with Toolbar function setTitleTextColor(), but with methods setCollapsedTitleTextColor() and setExpandedTitleColor() of CollapsingToolbarLayout.
Following is my code.
In activity
val textColor = Color.parseColor("#00FF00")
collapsingToolbarLayout.setExpandedTitleColor(textColor)
collapsingToolbarLayout.setCollapsedTitleTextColor(textColor)
In xml layout
<com.google.android.material.appbar.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="270dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:toolbarId="#id/toolbar"
android:id="#+id/collapsingToolbarLayout">
...
<androidx.appcompat.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:id="#+id/toolbar"
app:popupTheme="#style/AppTheme.PopupOverlay"
app:titleTextColor="#color/black"
app:layout_collapseMode="pin" />
...
</com.google.android.material.appbar.CollapsingToolbarLayout>
I am trying to use CollapsingToolbarLayout but getting this blue space under my content. Collapsed state doesn't have this problem.
The Empty space under the expanded content seems to be equal to status bar height. I am unable to understand why that would happen.
My xml looks like this
<android.support.design.widget.CoordinatorLayout
android:fitsSystemWindows="true" ...>
<android.support.design.widget.AppBarLayout
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true" ...>
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="#color/colorPrimary"
app:layout_scrollFlags="scroll|snap|exitUntilCollapsed|enterAlwaysCollapsed"
app:statusBarScrim="#android:color/transparent">
<android.support.constraint.ConstraintLayout
android:id="#+id/expanded_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
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:elevation="6dp"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:navigationIcon="?attr/homeAsUpIndicator"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<android.support.constraint.ConstraintLayout.../>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
Update
I found a workaround for the time being
collapsingToolbar.post {
val params = (collapsingToolbar.layoutParams as ViewGroup.MarginLayoutParams)
params.height = findViewById<View>(R.id.expanded_toolbar).height
collapsingToolbar.layoutParams = params
}
I think you should try changing the layout_height of your collapsing toolbar to wrap_content instead of match_parent
I believe that the blue color is because of the toolbar within the collapsing toolbar. So you should make sure that your background is applied to the appbar layout, or the collapsing toolbar layout.
However, that may cause problems since you're using an image background instead of just a color. So I recommend that you keep track of the collapsing toolbar's status, whether it's collapsed or open, and update your background accordingly.
Setting "match_parent" in the constraint inside the CollapsingToolbarLayout works for me:
<android.support.constraint.ConstraintLayout
android:id="#+id/expanded_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax".../>
I'm newbie in Android so this might be the easy question for you guys but I'm stuck. I want to remove shadow of Toolbar so I followed thread how to remove shadow below actionbar with AppCompat.Light.NoActionBar? and using app:elevation="0dp" I was able to remove the shadow of Toolbar but that change the current height of Toolbar as displayed in [Image 2]. I want maintain the same exact size of Toolbar but without shadow. I also used android:fitsSystemWindows="true" from thread Android toolbar height difference but it move Profile text on top and also create white line at bottom [Image 3] .
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:theme="#style/AppTheme.AppBarOverlay"
app:elevation="0dp"
android:fitsSystemWindows="true">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay"
android:minHeight="?attr/actionBarSize"/>
</android.support.design.widget.AppBarLayout>
I guess we can use android:layout_height:Xdp or android:layout_height:Xpx but is this the last option or there is default way to do this.
I am trying to add shadow to a toolbar using elevation and the Design Library. The layout code is something like:
<android.support.design.widget.CoordinatorLayout ... >
<android.support.design.widget.AppBarLayout ... >
<android.support.design.widget.CollapsingToolbarLayout ... >
<android.support.v7.widget.Toolbar
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
app:contentInsetStart="16dp"
android:background="#color/colorPrimary"
android:elevation="16dp"
/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
The complete application source code it is available on github.
The problem is that the toolbar height or the shadow are not behaving as I expect. If you watch the screen capture below, you can notice the problem.
What I need to do is to display the shadow below of the blue area.
Any hint is very appreciated.
As mentioned there, it's by implementation of CollapsingToolbarLayout - elevation is removed if CollapsingToolbarLayout shows non-pinned elements:
if (Math.abs(verticalOffset) == scrollRange) {
// If we have some pinned children, and we're offset to only show those views,
// we want to be elevate
ViewCompat.setElevation(layout, layout.getTargetElevation());
} else {
// Otherwise, we're inline with the content
ViewCompat.setElevation(layout, 0f);
}
So, all I can suggest is to make your own CollapsingToolbarLayout by copying original CollapsingToolbarLayout from Google, and make changes in this condition.
Move the elevation to the AppBarLayout. CollapsingToolbarLayout changes in size, so setting it on the AppBarLayout creates the shadow at the right position.
<android.support.design.widget.CoordinatorLayout ... >
<android.support.design.widget.AppBarLayout
android:elevation="16dp">
<android.support.design.widget.CollapsingToolbarLayout ... >
<android.support.v7.widget.Toolbar ... />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
I'm trying to get the menu on the toolbar for my app.
Currently, I have a CollapsingToolbarLayout. When the user moves up the recyclerview, the image of an island reduces in size and then eventually it collapses into the toolbar.
This is what it looks like when it is expanded:
This is what it looks like when it has collapsed:
Now, you can see that when it is expanded, the heart icon is duplicated (once in the FAB and once in the toolbar. I only want the heart icon to appear in the toolbar when the FAB is no longer visible otherwise, I feel that it will be confusing to a user when you have two buttons on the screen that does exactly the same thing.
How can I only show the heart icon on the toolbar when the collapsingToolBarLayout is fully collapsed? I tried to look for some type of onCollapse listener but no luck.
This is the code for the xml:
<android.support.design.widget.AppBarLayout
android:layout_height="192dp"
android:id="#+id/appbar"
android:layout_width="match_parent">
<!-- android:fitsSystemWindows="true"-->
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="16dp"
app:expandedTitleMarginEnd="32dp">
<ImageView
android:id="#+id/backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
android:src="#drawable/ocean395"
app:layout_collapseMode="pin" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:minHeight="?attr/actionBarSize"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
hey you can add the listener like this
AppBarLayout appBarLayout = (AppBarLayout)view.findViewById(R.id.app_bar_layout);
appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
#Override
public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
if (Math.abs(verticalOffset) == appBarLayout.getTotalScrollRange()) {
// Collapsed (make button visible and fab invisible)
} else if (verticalOffset == 0) {
// Expanded (make fab visible and toolbar button invisible)
} else {
// Somewhere in between
}
}
}););
referred from How can i determine that CollapsingToolbar is collapsed?