Skip to content

Commit 72e61c9

Browse files
afohrmandrchen
afohrman
authored and
drchen
committed
[FloatingToolbar] Added new Floating Toolbar component with package and updated catalog demo.
PiperOrigin-RevId: 693561861
1 parent 43fa5b6 commit 72e61c9

File tree

14 files changed

+461
-6
lines changed

14 files changed

+461
-6
lines changed

‎catalog/java/io/material/catalog/assets/res/drawable/ic_format_bold_24px.xml‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!--
2+
Copyright 2024 The Android Open Source Project
3+
4+
Licensed under the Apache License, Version 2.0 (the "License");
5+
you may not use this file except in compliance with the License.
6+
You may obtain a copy of the License at
7+
8+
https://www.apache.org/licenses/LICENSE-2.0
9+
10+
Unless required by applicable law or agreed to in writing, software
11+
distributed under the License is distributed on an "AS IS" BASIS,
12+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
See the License for the specific language governing permissions and
14+
limitations under the License.
15+
-->
16+
<vector xmlns:android="http://schemas.android.com/apk/res/android"
17+
android:width="24dp"
18+
android:height="24dp"
19+
android:viewportWidth="960"
20+
android:viewportHeight="960"
21+
android:tint="?attr/colorControlNormal">
22+
<path
23+
android:fillColor="@android:color/white"
24+
android:pathData="M272,760L272,200L493,200Q558,200 613,240Q668,280 668,351Q668,402 645,429.5Q622,457 602,469L602,469Q627,480 657.5,510Q688,540 688,600Q688,689 623,724.5Q558,760 501,760L272,760ZM393,648L497,648Q545,648 555.5,623.5Q566,599 566,588Q566,577 555.5,552.5Q545,528 494,528L393,528L393,648ZM393,420L486,420Q519,420 534,403Q549,386 549,365Q549,341 532,326Q515,311 488,311L393,311L393,420Z"/>
25+
</vector>

‎catalog/java/io/material/catalog/assets/res/drawable/ic_format_color_fill_24px.xml‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!--
2+
Copyright 2024 The Android Open Source Project
3+
4+
Licensed under the Apache License, Version 2.0 (the "License");
5+
you may not use this file except in compliance with the License.
6+
You may obtain a copy of the License at
7+
8+
https://www.apache.org/licenses/LICENSE-2.0
9+
10+
Unless required by applicable law or agreed to in writing, software
11+
distributed under the License is distributed on an "AS IS" BASIS,
12+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
See the License for the specific language governing permissions and
14+
limitations under the License.
15+
-->
16+
<vector xmlns:android="http://schemas.android.com/apk/res/android"
17+
android:width="24dp"
18+
android:height="24dp"
19+
android:viewportWidth="960"
20+
android:viewportHeight="960"
21+
android:tint="?attr/colorControlNormal">
22+
<path
23+
android:fillColor="@android:color/white"
24+
android:pathData="M247,56L304,0L647,343Q670,366 670,400Q670,434 647,457L457,647Q434,670 400,670Q366,670 343,647L153,457Q130,434 130,400Q130,366 153,343L343,152L247,56ZM400,209L209,400Q209,400 209,400Q209,400 209,400L591,400Q591,400 591,400Q591,400 591,400L400,209ZM760,680Q727,680 703.5,656.5Q680,633 680,600Q680,579 692.5,555Q705,531 720,510Q729,498 739,485Q749,472 760,460Q771,472 781,485Q791,498 800,510Q815,531 827.5,555Q840,579 840,600Q840,633 816.5,656.5Q793,680 760,680ZM80,960L80,800L880,800L880,960L80,960Z"/>
25+
</vector>

‎catalog/java/io/material/catalog/assets/res/drawable/ic_format_color_text_24px.xml‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!--
2+
Copyright 2024 The Android Open Source Project
3+
4+
Licensed under the Apache License, Version 2.0 (the "License");
5+
you may not use this file except in compliance with the License.
6+
You may obtain a copy of the License at
7+
8+
https://www.apache.org/licenses/LICENSE-2.0
9+
10+
Unless required by applicable law or agreed to in writing, software
11+
distributed under the License is distributed on an "AS IS" BASIS,
12+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
See the License for the specific language governing permissions and
14+
limitations under the License.
15+
-->
16+
<vector xmlns:android="http://schemas.android.com/apk/res/android"
17+
android:width="24dp"
18+
android:height="24dp"
19+
android:viewportWidth="960"
20+
android:viewportHeight="960"
21+
android:tint="?attr/colorControlNormal">
22+
<path
23+
android:fillColor="@android:color/white"
24+
android:pathData="M80,960L80,800L880,800L880,960L80,960ZM220,680L430,120L530,120L740,680L644,680L594,536L368,536L316,680L220,680ZM396,456L564,456L482,224L478,224L396,456Z"/>
25+
</vector>

‎catalog/java/io/material/catalog/assets/res/drawable/ic_format_italic_24px.xml‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!--
2+
Copyright 2024 The Android Open Source Project
3+
4+
Licensed under the Apache License, Version 2.0 (the "License");
5+
you may not use this file except in compliance with the License.
6+
You may obtain a copy of the License at
7+
8+
https://www.apache.org/licenses/LICENSE-2.0
9+
10+
Unless required by applicable law or agreed to in writing, software
11+
distributed under the License is distributed on an "AS IS" BASIS,
12+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
See the License for the specific language governing permissions and
14+
limitations under the License.
15+
-->
16+
<vector xmlns:android="http://schemas.android.com/apk/res/android"
17+
android:width="24dp"
18+
android:height="24dp"
19+
android:viewportWidth="960"
20+
android:viewportHeight="960"
21+
android:tint="?attr/colorControlNormal">
22+
<path
23+
android:fillColor="@android:color/white"
24+
android:pathData="M200,760L200,660L360,660L480,300L320,300L320,200L720,200L720,300L580,300L460,660L600,660L600,760L200,760Z"/>
25+
</vector>

‎catalog/java/io/material/catalog/assets/res/drawable/ic_format_underlined_24px.xml‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!--
2+
Copyright 2024 The Android Open Source Project
3+
4+
Licensed under the Apache License, Version 2.0 (the "License");
5+
you may not use this file except in compliance with the License.
6+
You may obtain a copy of the License at
7+
8+
https://www.apache.org/licenses/LICENSE-2.0
9+
10+
Unless required by applicable law or agreed to in writing, software
11+
distributed under the License is distributed on an "AS IS" BASIS,
12+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
See the License for the specific language governing permissions and
14+
limitations under the License.
15+
-->
16+
<vector xmlns:android="http://schemas.android.com/apk/res/android"
17+
android:width="24dp"
18+
android:height="24dp"
19+
android:viewportWidth="960"
20+
android:viewportHeight="960"
21+
android:tint="?attr/colorControlNormal">
22+
<path
23+
android:fillColor="@android:color/white"
24+
android:pathData="M200,840L200,760L760,760L760,840L200,840ZM480,680Q379,680 323,617Q267,554 267,450L267,120L370,120L370,456Q370,512 398,547Q426,582 480,582Q534,582 562,547Q590,512 590,456L590,120L693,120L693,450Q693,554 637,617Q581,680 480,680Z"/>
25+
</vector>

‎catalog/java/io/material/catalog/floatingappbar/FloatingAppBarMainDemoFragment.java‎

Lines changed: 73 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,15 +17,22 @@
1717

1818
import io.material.catalog.R;
1919

20+
import android.graphics.Color;
21+
import android.graphics.Paint;
22+
import android.graphics.Typeface;
2023
import android.os.Bundle;
2124
import android.view.LayoutInflater;
2225
import android.view.View;
2326
import android.view.ViewGroup;
27+
import android.widget.TextView;
28+
import androidx.annotation.ColorInt;
2429
import androidx.annotation.NonNull;
2530
import androidx.annotation.Nullable;
31+
import com.google.android.material.button.MaterialButton;
2632
import io.material.catalog.feature.DemoFragment;
33+
import java.util.Random;
2734

28-
/** A fragment that displays the main Floating App Bar demos for the Catalog app. */
35+
/** A fragment that displays the main Floating App Bar demo for the Catalog app. */
2936
public class FloatingAppBarMainDemoFragment extends DemoFragment {
3037

3138
@NonNull
@@ -35,7 +42,70 @@ public View onCreateDemoView(
3542
@Nullable ViewGroup viewGroup,
3643
@Nullable Bundle bundle) {
3744

38-
return layoutInflater.inflate(
39-
R.layout.cat_floating_app_bar_fragment, viewGroup, false /* attachToRoot */);
45+
View view =
46+
layoutInflater.inflate(
47+
R.layout.cat_floating_app_bar_fragment, viewGroup, /* attachToRoot= */ false);
48+
49+
TextView bodyText = (TextView) view.findViewById(R.id.body_text);
50+
51+
// Initialize bold format button.
52+
MaterialButton boldButton = view.findViewById(R.id.floating_toolbar_button_bold);
53+
boldButton.addOnCheckedChangeListener(
54+
(button, isChecked) -> {
55+
Typeface typeface = bodyText.getTypeface();
56+
if (isChecked) {
57+
bodyText.setTypeface(
58+
typeface, typeface.isItalic() ? Typeface.BOLD_ITALIC : Typeface.BOLD);
59+
} else {
60+
bodyText.setTypeface(
61+
Typeface.create(
62+
bodyText.getTypeface(),
63+
typeface.isItalic() ? Typeface.ITALIC : Typeface.NORMAL));
64+
}
65+
});
66+
67+
// Initialize italics format button.
68+
MaterialButton italicsButton = view.findViewById(R.id.floating_toolbar_button_italic);
69+
italicsButton.addOnCheckedChangeListener(
70+
(button, isChecked) -> {
71+
Typeface typeface = bodyText.getTypeface();
72+
if (isChecked) {
73+
bodyText.setTypeface(
74+
typeface, typeface.isBold() ? Typeface.BOLD_ITALIC : Typeface.ITALIC);
75+
} else {
76+
bodyText.setTypeface(
77+
Typeface.create(
78+
bodyText.getTypeface(), typeface.isBold() ? Typeface.BOLD : Typeface.NORMAL));
79+
}
80+
});
81+
82+
// Initialize underlined format button.
83+
MaterialButton underlinedButton = view.findViewById(R.id.floating_toolbar_button_underlined);
84+
underlinedButton.addOnCheckedChangeListener(
85+
(button, isChecked) -> {
86+
int paintFlags = bodyText.getPaintFlags();
87+
if (isChecked) {
88+
bodyText.setPaintFlags(paintFlags | Paint.UNDERLINE_TEXT_FLAG);
89+
} else {
90+
bodyText.setPaintFlags(paintFlags & ~Paint.UNDERLINE_TEXT_FLAG);
91+
}
92+
});
93+
94+
// Initialize color text format button.
95+
MaterialButton colorTextButton = view.findViewById(R.id.floating_toolbar_button_color_text);
96+
colorTextButton.setOnClickListener(v -> bodyText.setTextColor(getRandomColor()));
97+
98+
// Initialize color fill format button.
99+
MaterialButton colorFillButton = view.findViewById(R.id.floating_toolbar_button_color_fill);
100+
colorFillButton.setOnClickListener(v -> view.setBackgroundColor(getRandomColor()));
101+
102+
return view;
103+
}
104+
105+
@ColorInt
106+
private int getRandomColor() {
107+
Random random = new Random();
108+
final int bound = 256;
109+
return Color.rgb(random.nextInt(bound), random.nextInt(bound), random.nextInt(bound));
40110
}
41111
}

‎catalog/java/io/material/catalog/floatingappbar/res/layout/cat_floating_app_bar_fragment.xml‎

Lines changed: 72 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,82 @@
1414
~ See the License for the specific language governing permissions and
1515
~ limitations under the License.
1616
-->
17-
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
17+
<FrameLayout
18+
xmlns:android="http://schemas.android.com/apk/res/android"
19+
xmlns:app="http://schemas.android.com/apk/res-auto"
1820
android:layout_width="match_parent"
1921
android:layout_height="match_parent">
2022

23+
<androidx.core.widget.NestedScrollView
24+
android:layout_width="match_parent"
25+
android:layout_height="match_parent">
2126
<TextView
22-
android:layout_width="wrap_content"
27+
android:id="@+id/body_text"
28+
android:layout_width="match_parent"
2329
android:layout_height="wrap_content"
24-
android:text="@string/cat_floating_app_bar_title" />
30+
android:paddingTop="16dp"
31+
android:paddingBottom="16dp"
32+
android:paddingLeft="16dp"
33+
android:paddingRight="16dp"
34+
android:lineSpacingMultiplier="1.2"
35+
android:text="@string/cat_floating_toolbar_filler_text"/>
36+
</androidx.core.widget.NestedScrollView>
2537

38+
<com.google.android.material.floatingtoolbar.FloatingToolbarLayout
39+
android:id="@+id/floating_toolbar"
40+
style="@style/Widget.Material3.FloatingToolbar"
41+
android:layout_width="wrap_content"
42+
android:layout_height="wrap_content"
43+
android:layout_margin="36dp"
44+
android:layout_gravity="bottom|center"
45+
android:paddingHorizontal="8dp">
46+
<LinearLayout
47+
android:id="@+id/floating_toolbar_child"
48+
android:layout_width="match_parent"
49+
android:layout_height="wrap_content"
50+
android:layout_gravity="center"
51+
android:orientation="horizontal">
52+
<Button
53+
android:id="@+id/floating_toolbar_button_bold"
54+
style="?attr/materialIconButtonStyle"
55+
android:layout_width="wrap_content"
56+
android:layout_height="wrap_content"
57+
android:layout_marginEnd="2dp"
58+
android:checkable="true"
59+
app:icon="@drawable/ic_format_bold_24px"/>
60+
<Button
61+
android:id="@+id/floating_toolbar_button_italic"
62+
style="?attr/materialIconButtonStyle"
63+
android:layout_width="wrap_content"
64+
android:layout_height="wrap_content"
65+
android:layout_marginStart="2dp"
66+
android:layout_marginEnd="2dp"
67+
android:checkable="true"
68+
app:icon="@drawable/ic_format_italic_24px"/>
69+
<Button
70+
android:id="@+id/floating_toolbar_button_underlined"
71+
style="?attr/materialIconButtonStyle"
72+
android:layout_width="wrap_content"
73+
android:layout_height="wrap_content"
74+
android:layout_marginStart="2dp"
75+
android:layout_marginEnd="2dp"
76+
android:checkable="true"
77+
app:icon="@drawable/ic_format_underlined_24px"/>
78+
<Button
79+
android:id="@+id/floating_toolbar_button_color_text"
80+
style="?attr/materialIconButtonStyle"
81+
android:layout_width="wrap_content"
82+
android:layout_height="wrap_content"
83+
android:layout_marginStart="2dp"
84+
android:layout_marginEnd="2dp"
85+
app:icon="@drawable/ic_format_color_text_24px"/>
86+
<Button
87+
android:id="@+id/floating_toolbar_button_color_fill"
88+
style="?attr/materialIconButtonStyle"
89+
android:layout_width="wrap_content"
90+
android:layout_height="wrap_content"
91+
android:layout_marginStart="2dp"
92+
app:icon="@drawable/ic_format_color_fill_24px"/>
93+
</LinearLayout>
94+
</com.google.android.material.floatingtoolbar.FloatingToolbarLayout>
2695
</FrameLayout>

‎catalog/java/io/material/catalog/floatingappbar/res/values/strings.xml‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,4 +23,11 @@
2323
description="Body text describing the Floating App Bar component within the design system [CHAR LIMIT=NONE]">
2424
The floating toolbar floats above the body content and can be used to display contextual actions relevant to the body content or the specific page.
2525
</string>
26+
<string name="cat_floating_toolbar_filler_text" translatable="false">
27+
\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.
28+
\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.
29+
\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.
30+
\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.
31+
\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.
32+
</string>
2633
</resources>

‎lib/build.gradle‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,7 @@ def srcDirs = [
6565
'com/google/android/material/elevation',
6666
'com/google/android/material/expandable',
6767
'com/google/android/material/floatingactionbutton',
68+
'com/google/android/material/floatingtoolbar',
6869
'com/google/android/material/imageview',
6970
'com/google/android/material/internal',
7071
'com/google/android/material/loadingindicator',

0 commit comments

Comments
 (0)