Skip to content

Commit

Permalink
[CollapsingToolbarLayout] Fix CollapsingToolbar multiline position
Browse files Browse the repository at this point in the history
GIT_ORIGIN_REV_ID=7dbd8905bf58eb5811c4661ee77512d4d9c59c19

Co-authored-by: ymarian <38727469+ymarian@users.noreply.github.com>
PiperOrigin-RevId: 321294325
  • Loading branch information
2 people authored and hunterstich committed Jul 15, 2020
1 parent d868be2 commit 8210b3a
Show file tree
Hide file tree
Showing 7 changed files with 159 additions and 52 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
See the License for the specific language governing permissions and
limitations under the License.
-->
<resources>
<resources xmlns:tools="http://schemas.android.com/tools">

<style name="Widget.Catalog.Toolbar" parent="Widget.MaterialComponents.Toolbar.PrimarySurface">
<!-- Toolbar should always be within an AppBarLayout which provides the background. -->
Expand Down Expand Up @@ -47,6 +47,13 @@
<style name="ThemeOverlay.Catalog.AppBarLayout" parent="">
<item name="android:textColorPrimary">?attr/colorOnPrimarySurface</item>
<item name="colorControlNormal">?attr/colorOnPrimarySurface</item>
<item name="android:popupTheme" tools:targetApi="lollipop">@style/Theme.Catalog.PopupMenu</item>
<item name="popupTheme">@style/Theme.Catalog.PopupMenu</item>
</style>


<style name="Theme.Catalog.PopupMenu" parent="">
<item name="android:textColorPrimary">?attr/colorOnSurface</item>
<item name="colorControlNormal">?attr/colorOnSurface</item>
</style>

</resources>
Original file line number Diff line number Diff line change
Expand Up @@ -21,15 +21,39 @@
import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.Toolbar;
import android.text.SpannableString;
import android.text.style.ForegroundColorSpan;
import android.util.SparseIntArray;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuInflater;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
import androidx.annotation.ColorInt;
import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import com.google.android.material.appbar.CollapsingToolbarLayout;
import com.google.android.material.color.MaterialColors;
import io.material.catalog.feature.DemoFragment;

/** A fragment that displays a collapsing Top App Bar demo for the Catalog app. */
public class TopAppBarCollapsingMultilineDemoFragment extends DemoFragment {

private SparseIntArray linesMap;
@ColorInt private int colorPrimary;

@Override
public void onCreate(@Nullable Bundle bundle) {
super.onCreate(bundle);
setHasOptionsMenu(true);

linesMap = new SparseIntArray();
linesMap.put(R.id.maxLines1, 1);
linesMap.put(R.id.maxLines2, 2);
linesMap.put(R.id.maxLines3, 3);
}

@Override
public View onCreateDemoView(
LayoutInflater layoutInflater, @Nullable ViewGroup viewGroup, @Nullable Bundle bundle) {
Expand All @@ -40,10 +64,48 @@ public View onCreateDemoView(
Toolbar toolbar = view.findViewById(R.id.toolbar);
AppCompatActivity activity = (AppCompatActivity) getActivity();
activity.setSupportActionBar(toolbar);
colorPrimary = MaterialColors.getColor(view, R.attr.colorPrimary);

return view;
}

@Override
public void onCreateOptionsMenu(Menu menu, MenuInflater menuInflater) {
menuInflater.inflate(R.menu.cat_topappbar_menu_maxlines, menu);

super.onCreateOptionsMenu(menu, menuInflater);
}

@Override
public void onPrepareOptionsMenu(@NonNull Menu menu) {
super.onPrepareOptionsMenu(menu);

CollapsingToolbarLayout collapsingToolbarLayout =
requireView().findViewById(R.id.collapsingtoolbarlayout);
int maxLines = collapsingToolbarLayout.getMaxLines();
for (int i = 0; i < linesMap.size(); i++) {
int value = linesMap.valueAt(i);
int itemId = linesMap.keyAt(i);
MenuItem item = menu.findItem(itemId);
CharSequence title = getString(R.string.menu_max_lines, value);
if (maxLines == value) {
SpannableString spannable = new SpannableString(title);
spannable.setSpan(new ForegroundColorSpan(colorPrimary), 0, title.length(), 0);
title = spannable;
}

item.setTitle(title);
}
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
CollapsingToolbarLayout collapsingToolbarLayout =
requireView().findViewById(R.id.collapsingtoolbarlayout);
collapsingToolbarLayout.setMaxLines(linesMap.get(item.getItemId(), 1));
return super.onOptionsItemSelected(item);
}

@Override
public boolean shouldShowDefaultDemoActionBar() {
return false;
Expand Down
Original file line number Diff line number Diff line change
@@ -1,17 +1,20 @@
<?xml version="1.0" encoding="utf-8"?>
<!--
Copyright 2020 The Android Open Source Project
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
https://www.apache.org/licenses/LICENSE-2.0
https://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<androidx.coordinatorlayout.widget.CoordinatorLayout
<androidx.coordinatorlayout.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"
Expand All @@ -23,22 +26,21 @@
<com.google.android.material.appbar.AppBarLayout
android:id="@+id/appbarlayout"
android:layout_width="match_parent"
android:layout_height="170dp"
android:layout_height="192dp"
android:fitsSystemWindows="true"
android:theme="@style/ThemeOverlay.Catalog.AppBarLayout">

<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="@+id/collapsingtoolbarlayout"
style="?attr/catalogToolbarStyle"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:collapsedTitleTextAppearance="?attr/textAppearanceHeadline6"
app:expandedTitleGravity="bottom"
app:expandedTitleMarginBottom="24dp"
app:expandedTitleMarginStart="16dp"
app:expandedTitleTextAppearance="?attr/textAppearanceHeadline5"
app:maxLines="3"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
app:maxLines="3">

<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar"
Expand All @@ -57,7 +59,7 @@
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">

<include layout="@layout/cat_topappbar_filler_text_view"/>
<include layout="@layout/cat_topappbar_filler_text_view" />
</androidx.core.widget.NestedScrollView>

</androidx.coordinatorlayout.widget.CoordinatorLayout>
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
<?xml version="1.0" encoding="utf-8"?><!--
Copyright 2020 The Android Open Source Project
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
tools:ignore="MenuTitle">
<item android:id="@+id/maxLines1" />
<item android:id="@+id/maxLines2" />
<item android:id="@+id/maxLines3" />
</menu>
36 changes: 26 additions & 10 deletions catalog/java/io/material/catalog/topappbar/res/values/strings.xml
Original file line number Diff line number Diff line change
Expand Up @@ -15,45 +15,61 @@
limitations under the License.
-->

<resources>
<resources xmlns:xliff="urn:oasis:names:tc:xliff:document:1.2">
<!-- Title for the Top App Bar demo [CHAR_LIMIT=NONE] -->
<string name="cat_topappbar_title">Top App Bar</string>
<!-- Description for the Top App Bar demo [CHAR_LIMIT=NONE] -->
<string name="cat_topappbar_description">The Top App Bar, formerly known as the action bar in Android, is a special kind of toolbar that’s used for branding, navigation, search, and actions.</string>
<string name="cat_topappbar_scrolling_title">Scrolling Demo</string>
<string name="cat_topappbar_scrolling_transparent_title">Scrolling Demo (transparent status bar)</string>
<string name="cat_topappbar_collapsing_title">Collapsing Demo</string>
<string name="cat_topappbar_scrolling_title" translatable="false">Scrolling Demo</string>
<string name="cat_topappbar_scrolling_transparent_title" translatable="false">Scrolling Demo (transparent status bar)</string>
<string name="cat_topappbar_collapsing_title" translatable="false">Collapsing Demo</string>
<string name="cat_topappbar_toolbar_title" translatable="false">Toolbar Demo</string>
<string name="cat_topappbar_collapsing_multiline_title" description="Title for a demo containing a multiline Toolbar [CHAR_LIMIT=NONE]">Collapsing Demo (Multiline title)</string>
<string name="cat_topappbar_action_bar_title">Action Bar Demo</string>
<string name="cat_topappbar_dark_action_bar_title">Dark Action Bar Demo</string>

<string name="cat_topappbar_collapsing_multiline_title" translatable="false">Collapsing Demo (Multiline title)</string>
<string name="cat_topappbar_action_bar_title" translatable="false">Action Bar Demo</string>
<string name="cat_topappbar_dark_action_bar_title" translatable="false">Dark Action Bar Demo</string>
<string name="cat_topappbar_lorem_ipsum" translatable="false">
\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit. Nam in scelerisque sem. Mauris volutpat, dolor id interdum ullamcorper, risus dolor egestas lectus, sit amet mattis purus dui nec risus. Maecenas non sodales nisi, vel dictum dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse blandit eleifend diam, vel rutrum tellus vulputate quis. Aliquam eget libero aliquet, imperdiet nisl a, ornare ex. Sed rhoncus est ut libero porta lobortis. Fusce in dictum tellus.
\n\n\t\tSuspendisse interdum ornare ante. Aliquam nec cursus lorem. Morbi id magna felis. Vivamus egestas, est a condimentum egestas, turpis nisl iaculis ipsum, in dictum tellus dolor sed neque. Morbi tellus erat, dapibus ut sem a, iaculis tincidunt dui. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur et eros porttitor, ultricies urna vitae, molestie nibh. Phasellus at commodo eros, non aliquet metus. Sed maximus nisl nec dolor bibendum, vel congue leo egestas.
\n\n\t\tSed interdum tortor nibh, in sagittis risus mollis quis. Curabitur mi odio, condimentum sit amet auctor at, mollis non turpis. Nullam pretium libero vestibulum, finibus orci vel, molestie quam. Fusce blandit tincidunt nulla, quis sollicitudin libero facilisis et. Integer interdum nunc ligula, et fermentum metus hendrerit id. Vestibulum lectus felis, dictum at lacinia sit amet, tristique id quam. Cras eu consequat dui. Suspendisse sodales nunc ligula, in lobortis sem porta sed. Integer id ultrices magna, in luctus elit. Sed a pellentesque est.
\n\n\t\tAenean nunc velit, lacinia sed dolor sed, ultrices viverra nulla. Etiam a venenatis nibh. Morbi laoreet, tortor sed facilisis varius, nibh orci rhoncus nulla, id elementum leo dui non lorem. Nam mollis ipsum quis auctor varius. Quisque elementum eu libero sed commodo. In eros nisl, imperdiet vel imperdiet et, scelerisque a mauris. Pellentesque varius ex nunc, quis imperdiet eros placerat ac. Duis finibus orci et est auctor tincidunt. Sed non viverra ipsum. Nunc quis augue egestas, cursus lorem at, molestie sem. Morbi a consectetur ipsum, a placerat diam. Etiam vulputate dignissim convallis. Integer faucibus mauris sit amet finibus convallis.
\n\n\t\tPhasellus in aliquet mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In volutpat arcu ut felis sagittis, in finibus massa gravida. Pellentesque id tellus orci. Integer dictum, lorem sed efficitur ullamcorper, libero justo consectetur ipsum, in mollis nisl ex sed nisl. Donec maximus ullamcorper sodales. Praesent bibendum rhoncus tellus nec feugiat. In a ornare nulla. Donec rhoncus libero vel nunc consequat, quis tincidunt nisl eleifend. Cras bibendum enim a justo luctus vestibulum. Fusce dictum libero quis erat maximus, vitae volutpat diam dignissim.
</string>
<!-- Title for the regular toolbar demo [CHAR_LIMIT=NONE] -->
<string name="cat_topappbar_main_demo_toolbar_title">Regular Title</string>
<!-- Title for the scrolling toolbar demo [CHAR_LIMIT=NONE] -->
<string name="cat_topappbar_scrolling_demo_toolbar_title">Scrolling Title</string>
<!-- Title for the collpasing toolbar demo [CHAR_LIMIT=NONE] -->
<string name="cat_topappbar_collapsing_demo_toolbar_title">Collapsing Title</string>

<!-- Label for a button in the menu [CHAR_LIMIT=NONE] -->
<string name="cat_topappbar_edit_menu_item_title">Edit</string>
<!-- Label for a button in the menu [CHAR_LIMIT=NONE] -->
<string name="cat_topappbar_favorite_menu_item_title">Favorite</string>
<!-- Label for a button in the menu [CHAR_LIMIT=NONE] -->
<string name="cat_topappbar_settings_menu_item_title">Settings</string>
<!-- Label for a button in the menu [CHAR_LIMIT=NONE] -->
<string name="cat_topappbar_help_and_feedback_menu_item_title">Help &amp; feedback</string>

<!-- Sample subitle [CHAR_LIMIT=NONE] -->
<string name="cat_topappbar_action_bar_subtitle">Subtitle text</string>
<!-- The description of the AppBar component [CHAR_LIMIT=NONE] -->
<string name="cat_topappbar_action_bar_description">
Action Bars within a Material Components theme will default to a titleTextStyle of
textAppearanceHeadline6 and a subtitleTextStyle of textAppearanceSubtitle1.
\n\nAdditionally, the height of Material Action Bars will be the same in portrait and landscape,
in order to avoid vertical space concerns with the above-mentioned text appearances.
</string>
<!-- Label for a button to toggle the action mode [CHAR_LIMIT=NONE] -->
<string name="cat_topappbar_action_bar_toggle_action_mode_button">Toggle Action Mode</string>
<!-- Sample title for an action bar [CHAR_LIMIT=NONE] -->
<string name="cat_topappbar_action_bar_action_mode_title">Action Mode Title</string>
<!-- Sample subtitle [CHAR_LIMIT=NONE] -->
<string name="cat_topappbar_action_bar_action_mode_subtitle">Action Mode Subtitle</string>
<!-- sample action in a menu [CHAR_LIMIT=NONE] -->
<string name="cat_topappbar_action_bar_action_mode_menu_item1">Action 1</string>
<!-- sample action in a menu [CHAR_LIMIT=NONE] -->
<string name="cat_topappbar_action_bar_action_mode_menu_item2">Action 2</string>
<!-- Sample long title [CHAR_LIMIT=NONE] -->
<string name="cat_topappbar_collapsing_multiline_demo_toolbar_title" description="Long title [CHAR_LIMIT=NONE]">This Collapsing Title is
extremely long and thus will be displayed in multiple lines.</string>
<!-- Label for a button to change the maximum number of lines [CHAR_LIMIT=32] -->
<string name="menu_max_lines">Max lines = <xliff:g id="max">%d</xliff:g></string>
</resources>
Original file line number Diff line number Diff line change
Expand Up @@ -482,7 +482,7 @@ protected void onLayout(boolean changed, int left, int top, int right, int botto
collapsingTextHelper.setCollapsedBounds(
tmpRect.left + (isRtl ? toolbar.getTitleMarginEnd() : toolbar.getTitleMarginStart()),
tmpRect.top + maxOffset + toolbar.getTitleMarginTop(),
tmpRect.right + (isRtl ? toolbar.getTitleMarginStart() : toolbar.getTitleMarginEnd()),
tmpRect.right - (isRtl ? toolbar.getTitleMarginStart() : toolbar.getTitleMarginEnd()),
tmpRect.bottom + maxOffset - toolbar.getTitleMarginBottom());

// Update the expanded bounds
Expand Down

0 comments on commit 8210b3a

Please sign in to comment.