So, I got a wierd problem with my CollapsingToolbarLayout in my project. After my activity starts this is how my toolbar title appears:
After collapsing the layout is like this:
The original title text in the example is: "UPC VONALKODOS TERMEK"
I think the title in the expanded state should be longer (there is enough room for it) than in collapsed state. This what my activity's xml looks like:
<?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:fitsSystemWindows="true"
app:theme="#style/PolarThemeNoActionBar">
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_below="#+id/tablayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
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="142dp"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="48dp"
app:expandedTitleMarginBottom="20dp"
app:expandedTitleTextAppearance="#style/ExpandedText">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin"/>
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:id="#+id/tablayout"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_below="#+id/toolbar"
android:minHeight="?attr/actionBarSize"
android:gravity="bottom"
android:background="?attr/colorPrimary"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:tabIndicatorColor="?attr/colorPrimaryDark"/>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
My res/style/ExpandedText looks like:
<style name="ExpandedText" parent="android:TextAppearance">
<item name="android:textColor">#android:color/white</item>
<item name="android:textSize">20sp</item>
</style>
Support library version: 25.1.1.
Phone: Nexus 5
Android version: 6.0.1 (stock)
My question: Why the title have dots at the end in expanded state and not filling the space to show more from it?
[EDIT 1] Issue still remains with support library version 25.3.0
CollapsingToolbarLayout uses a helper class - CollapsingTextHelper - to draw and animate its title. At the time of writing, the recent versions of this class are restricting the available width for the expanded title to a size based on the width available in the collapsed state, scaled by the ratio of the states' text sizes.
Relevant source comments:
// If the scaled down size is larger than the actual collapsed width, we need to
// cap the available width so that when the expanded text scales down, it matches
// the collapsed width
This was apparently introduced to address some edge cases where the title would overlap other Toolbar stuff, as explained in the notes on the relevant commit.
Fix CollapsingToolbarLayout displaying over icons
CTL scales it title which works in most situations.
There are edge cases though where the title can be
drawn on the Toolbars contents, namely icons.
This CL fixes the edge cases where the collapsed
and expanded text sizes are similar in size, which
means that there is limited/no scaling happening
while scrolling. In this instance we need to cap
any available width when expanded, so that it
'scales' to match the collapsed width when collapsed.
Normally, I'm all about tearing into View classes to modify their behavior with reflection and other trickery, but in this case, the given setup is such that this would take some really heavy lifting. The helper class is not normally accessible outside the library package, its instance is private in the CollapsingToolbarLayout, and the sizing calculations are performed in a private, secondary method with mostly local variables.
If it's a possibility, the simplest solution would be to revert to a library version published before this fix. I've not determined the exact version that brought this change, and the support library revision history doesn't seem to mention it, unfortunately. However, that commit was made in the middle of last year (2016), so probably around version 24.0.0, or a little later. I can verify that the behavior is not present in 23.4.0.
You could certainly file a bug report for this, if you like, though no guarantees that they'd consider this a bug. I didn't find any previously filed issues regarding this specifically, other than this tangentially-related one complaining about the ellipsizing that was a side effect of that change.
You can turn off ellipsizing. Add this to your TextAppearance style:
<item name="android:ellipsize">none</item>
If it's necessary you can also manually change the width of the textview that is created by adding width to the style
<item name="android:width">300dp</item>
I edit your code see this may be you 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:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/tablayout"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
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="142dp"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginBottom="20dp"
app:expandedTitleMarginStart="48dp"
app:expandedTitleTextAppearance="#style/ExpandedText"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:contentInsetStartWithNavigation="0dp"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:id="#+id/tablayout"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_below="#+id/toolbar"
android:background="?attr/colorPrimary"
android:gravity="bottom"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:tabIndicatorColor="?attr/colorPrimaryDark" />
</android.support.design.widget.AppBarLayout>
and this is Activity Class
public class MainActivity extends AppCompatActivity {
private Toolbar toolbar;
private CollapsingToolbarLayout collapsingToolbar;
#Override
protected void onCreate(#Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.answer2);
toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
collapsingToolbar = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
collapsingToolbar.setTitle("UPC VONALKODOS TERMEK");
collapsingToolbar.setExpandedTitleTextAppearance(R.style.ExpandedAppBar);
collapsingToolbar.setCollapsedTitleTextAppearance(R.style.CollapsedAppBar);
}
}
and this is res/style/:
<style name="CollapsedAppBar" parent="#android:style/TextAppearance.Medium">
<item name="android:textSize">16sp</item>
<item name="android:textColor">#color/white</item>
<item name="android:textStyle">normal</item>
</style>
<style name="ExpandedAppBar" parent="#android:style/TextAppearance.Medium">
<item name="android:textSize">20sp</item>
<item name="android:textStyle">bold</item>
</style>
Related
I am trying to change collapsible toolbar font. my code is below
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appbarlayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/id_collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:contentScrim="#color/colorPrimary"
app:layout_scrollFlags="scroll|snap|enterAlways"
app:title="App Title">
<ImageView
android:layout_width="match_parent"
android:layout_height="250dp"
android:scaleType="centerCrop"
android:src="#drawable/img" />
<androidx.appcompat.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:theme="#style/TextViewCustomFont"
app:popupTheme="#style/ThemeOverlay.AppCompat.Dark" />
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<style name="TextViewCustomFont">
<item name="android:fontFamily">fonts/Montserrat-SemiBold.ttf</item>
</style>
also I'm using calligraphy3,
So, I tried fontPath instead of android:fontFamily
Then, i moved and checked android:theme="#style/TextViewCustomFont" to CollapsingToolbarLayout from Toolbar and with all those combination.
I didn't able to change font style.
Remember this is androidx not old one. there are lot of old question's are there in stackoverflow but none of them working as it is old.
In CollapsingToolbar you need to call expandedTitleTextAppearance, collapsedTitleTextAppearance
XML
<com.google.android.material.appbar.CollapsingToolbarLayout
app:expandedTitleTextAppearance="#style/TextViewCustomFont"
app:collapsedTitleTextAppearance="#style/TextViewCustomFont"/>
Java
// Java example
CollapsingToolbarLayout collapsingToolbar = findViewById(R.id.collapsing_toolbar);
collapsingToolbar.setCollapsedTitleTypeface(TyperRoboto.ROBOTO_REGULAR());
collapsingToolbar.setExpandedTitleTypeface(TyperRoboto.ROBOTO_REGULAR());
Kotlin
// Kotlin example
collapsing_toolbar.apply {
setCollapsedTitleTypeface(TyperRoboto.ROBOTO_REGULAR)
setExpandedTitleTypeface(TyperRoboto.ROBOTO_REGULAR)
}
You can get a much more detailed answer here
have one id like this in CollapsingToolbarLayout layout
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/id_collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:contentScrim="#color/colorPrimary"
app:layout_scrollFlags="scroll|snap|exitUntilCollapsed"
app:title="App Title">
Then, inside onCreate method add the below line
CollapsingToolbarLayout collapsingToolbar = findViewById(R.id.id_collapsing_toolbar);
final Typeface tf = Typeface.createFromAsset(getAssets(), "fonts/Montserrat-SemiBold.ttf");
collapsingToolbar.setCollapsedTitleTypeface(tf);
collapsingToolbar.setExpandedTitleTypeface(tf);
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 updated my dependencies to v24 but now my CollapsingToolbarLayout is broken. I used it to show an image(using setBackground) when the user didn't scroll yet, after that it would turn blue. Now it keeps showing the image and there's a white bar under it that covers my content, yet I haven't changed anything in my code. Here's an image(changed to red the background on purpose): http://imgur.com/a/lwl1Y.
See the toolbar has an image on it instead of being a solid color?also you can see the title gets cut off by a red-colored bar under the toolbar. Here are the layouts(which are simply edited layouts from the android studio template):
<android.support.design.widget.AppBarLayout
android:id="#+id/viewarticle_appbarlayout"
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/article_collapsingtoolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
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"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_view_article" />
</android.support.design.widget.CoordinatorLayout>
content_view_article.xml
</android.support.v4.widget.NestedScrollView>
Edit: I was using v 24.0.3 of the support libraries, I updated everything to 24.2.1 and the invisible bar is gone. The background problem remains though
Kindly assume everything is only for target and minSDK vesion is lollipop only.
What I want
I am trying to implement an activity similar to the following screen from play store.
I am focusing on the Hero image here. As you see,
1. hero image is drawn behind status bar. (Completely transparent. No protection)
2. Rest of the content is drawn below status bar. (Eg., Toolbar/ActionBar)
3. While scrolling the status bar is colored.
What I have done
I have used ScrimInsetsFrameLayout from GoogleIO app. Wrapped my hero image around this layout. Added proper styling in my theme. This is what I get
Help I need
I am still confused about fitsSystemWindows tag. When I set this to "true" on the hero image layout, nothing happens. That is status bar is transparent but image is drawn below status bar. If set to "false", I get the above result. Is there a clear article that explains the usage and behind the scenes of this tag.
I set the "insetForeground" on ScrimInsetFrameLayout to transparent. Also in the theme I set the status bar color as transparent. But still there is a protection over the image. How to make the status bar completely transparent.
Kindly help me with a pointers or demo projects. Also let me know if i am not clear or need more info.
This works for me.
layout.xml
<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:fitsSystemWindows="true">
<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|exitUntilCollapsed">
<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/parallax_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/fragmentContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
and set statusBarColor attribute with transparent color at styles.xml v-21
Add the following line to the view where you don't want the toolbar to overlap:
app:layout_behavior="#string/appbar_scrolling_view_behavior"
Hi i would like to remove the elevation and shadow effect from my toolbar for API 21 and greater. Below is what i have tried
setSupportActionBar(mToolbar);
getSupportActionBar().setDisplayShowTitleEnabled(false);
getSupportActionBar().setElevation(0);
My Toolbar in XML. I have tried to set elevation to 0dp
<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="wrap_content"
android:background="#color/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:elevation="0dp"
android:theme="#style/ToolbarStyle"
app:theme="#style/ToolbarStyle"
>
And this is ToolbarStyle if it helps
<style name="ToolbarStyle" parent="ThemeOverlay.AppCompat.Dark">
<item name="colorControlNormal">#android:color/white</item>
</style>
Edit 1: Tried the following in styles v21. Still same result
<style name="ToolbarStyle" parent="ThemeOverlay.AppCompat.Dark">
<item name="colorControlNormal">#android:color/white</item>
<item name="android:elevation">0dp</item>
</style>
Edit 2: Where the toolbar is in my layout
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.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<include layout="#layout/toolbar" />
You can do that with an easy step. Don't remove the android.support.design.widget.AppBarLayout from your layout, instead add the attribute app:elevation="0dp" to it. Your final layout will be:
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:elevation="0dp">
...
</android.support.design.widget.AppBarLayout>
This remove elevation on toolbar (android:stateListAnimator="#null"), stateListAnimator is for API level 21 or higher, so insert a tools prop (before namespace declaration) like this:
//xmlns:tools="http://schemas.android.com/tools" in parent or start element
<android.support.design.widget.AppBarLayout
android:id="#+id/appBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:stateListAnimator="#null"
android:theme="#style/AppTheme.AppBarOverlay"
tools:targetApi="21">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:elevation="0dp"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
//your content goes here like RecyclerView, Card or other layout
Here is my sample result:
Use setOutlineProvider(null); on your appBar. Just be sure to check the SDK version. :)
Use app:elevation="0dp" in your AppBarLayout. Make sure you put Toolbar inside your AppBarLayout like this -
<android.support.design.widget.AppBarLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:theme="#style/AppTheme.AppBarOverlay"
android:fitsSystemWindows="true"
app:elevation="0dp">
<android.support.v7.widget.Toolbar
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/firstOption"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.AppBarLayout>
and add this line to your activity - findViewById(R.id.appBarLayout).bringToFront();
This will bring the AppBar to front.
Just remove this part of you layout hierarchy:
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
It's responsible for creating shadow. Toolbar itself doesn't cast any shadow.
Go to the activity you want to remove the ActionBar's Elevation.
Before setContent(....), request the ActionBar feature(That is if you have not declared it directly)
getWindow().requestFeature(Window.FEATURE_ACTION_BAR);
getSupportActionBar().setElevation(0);
or else just call the declared Toolbar variable
e.g
toolbar.setElevation(0);
Get the appbarlayout in code:
var appbarLayout = findviewbyid<AppBarLayout>(resource.id. );
set the property
appbarLayout.StateListAnimator=null;
Create another style for v21 and add
<item name="android:elevation">#dimen/toolbar_elevation</item> to that style. On normal style don't use elevation and don't use it in xml, just use style="#style/yourCustomToolbarStyle"
Solution is simple. Just add following line into your AppBar layout. No need to add elevation for the Toolbar or AppBar layout after this.
android:stateListAnimator="#null"
use android:outlineSpotShadowColor=" assign transparent colour" your shadow will disappear its work for my as below
enter image description here
To remove elevation by using java code use the line below...
getSupportActionBar().setElevation(0);