All geek questions in one place

Title in extended CollapsingToolbarLayout not displaying correctly

So, I had a strange problem with my CollapsingToolbarLayout in my project. After my activity starts, the following toolbar name appears:

extended name has dots at the end

After folding, the layout is as follows:

collapsed name with dots at the end

The source text of the title in the example: "UPC VONALKODOS TERMEK"

I think that the header in the expanded state should be longer (there is enough space for it) than in the folded state. This looks like my xml activity:

 <?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 this:

 <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 is: Why does the title have dots at the end in an expanded state and do not fill in the space to show more from it?

[EDIT 1] The problem still persists with support version version 25.3.0

+6
source share
3 answers

CollapsingToolbarLayout uses a helper class - CollapsingTextHelper - to draw and animate its name. At the time of writing, the latest versions of this class limit the available width of the extended header to a size based on the width available in the minimized state, scalable by the ratio of the sizes of the text of the states.

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, apparently, was introduced to address some cases of edges where the title would overlap other things of the Toolbar , as described in the notes for the corresponding commit .

Fix CollapsingToolbarLayout show above icons

CTL scales the header, which works in most situations. There are edge cases, although the name can be drawn on the contents of the Toolbar, namely the icons.

This CL captures boundary cases where collapsed and expanded text sizes are similar in size, which means that there is limited / no scaling when scrolling. In this case, we need any available width when expanding, so that it “scales” to coincide with the collapsed width when changing.

As a rule, I’m all about breaking into View classes in order to change their behavior with reflection and other tricks, but in this case this setting is such that it takes some really hard climb. The helper class is usually not available outside the library package, its instance is private in CollapsingToolbarLayout , and calibration calculations are performed in a private, secondary method with predominantly local variables.

If possible, the easiest solution would be to revert to the version of the library published before this fix. I have not determined the exact version that brought this change, and the history of changes in the support library does not seem to mention it, unfortunately. However, this commission was made in the middle of last year (2016), therefore, probably around version 24.0.0 or a little later. I can check for behavior in 23.4.0.

You could write an error report for this if you want, although you did not guarantee that they would consider it an error. I have not found previously asked questions regarding this, other than this tangent related to it , complaining of ellipsis, which was a side effect that are changing.

+4
source

You can turn off ellipse. Add this to your TextAppearance style:

 <item name="android:ellipsize">none</item>

If necessary, you can also manually change the width of the text view, which is created by adding width to the style

 <item name="android:width">300dp</item>
0
source

I am editing your code, see, it may be you like

 <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 an 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>
0
source

Source: https://habr.com/ru/post/1015651/

More articles:


All Articles