Skip to content

Commit 692bd11

Browse files
imhappipekingme
imhappi
authored and
pekingme
committed
[Lists] Add more optional styles and update demos to show more variety of sample list content
PiperOrigin-RevId: 831979827
1 parent 235e8cf commit 692bd11

16 files changed

+418
-59
lines changed

‎catalog/java/io/material/catalog/listitem/ListsMainDemoFragment.java‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@
3434
import androidx.annotation.NonNull;
3535
import androidx.annotation.Nullable;
3636
import com.google.android.material.card.MaterialCardView;
37+
import com.google.android.material.checkbox.MaterialCheckBox;
3738
import com.google.android.material.listitem.ListItemViewHolder;
3839
import io.material.catalog.feature.DemoFragment;
3940
import java.util.ArrayList;
@@ -127,13 +128,15 @@ public static class CustomItemViewHolder extends ListItemViewHolder {
127128

128129
private final TextView textView;
129130
private final MaterialCardView cardView;
131+
private final MaterialCheckBox checkBox;
130132

131133
private final ImageView leadingIcon;
132134
public CustomItemViewHolder(@NonNull View itemView) {
133135
super(itemView);
134136
textView = itemView.findViewById(R.id.cat_list_item_text);
135137
cardView = itemView.findViewById(R.id.cat_list_item_card_view);
136138
leadingIcon = itemView.findViewById(R.id.cat_list_item_start_icon);
139+
checkBox = itemView.findViewById(R.id.cat_list_item_checkbox);
137140
}
138141

139142
public void bind(@NonNull CustomListItemData data) {
@@ -145,6 +148,7 @@ public void bind(@NonNull CustomListItemData data) {
145148
Toast.makeText(v.getContext(), R.string.mtrl_list_item_clicked, Toast.LENGTH_SHORT)
146149
.show();
147150
cardView.toggle();
151+
checkBox.setChecked(cardView.isChecked());
148152
leadingIcon.setSelected(cardView.isChecked());
149153
data.checked = !data.checked;
150154
});

‎catalog/java/io/material/catalog/listitem/MultiSectionListDemoFragment.java‎

Lines changed: 1 addition & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -29,10 +29,8 @@
2929
import android.view.View;
3030
import android.view.ViewGroup;
3131
import android.widget.TextView;
32-
import android.widget.Toast;
3332
import androidx.annotation.NonNull;
3433
import androidx.annotation.Nullable;
35-
import com.google.android.material.card.MaterialCardView;
3634
import com.google.android.material.listitem.ListItemViewHolder;
3735
import io.material.catalog.feature.DemoFragment;
3836
import java.util.ArrayList;
@@ -105,7 +103,7 @@ public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int position) {
105103
(ViewGroup)
106104
LayoutInflater.from(parent.getContext())
107105
.inflate(
108-
R.layout.cat_list_item_segmented_viewholder,
106+
R.layout.cat_list_multisection_viewholder,
109107
parent,
110108
/* attachToRoot= */ false);
111109
return new CustomItemViewHolder(item);
@@ -174,27 +172,15 @@ public void getItemOffsets(@NonNull Rect outRect,
174172
public static class CustomItemViewHolder extends ListItemViewHolder {
175173

176174
private final TextView textView;
177-
private final MaterialCardView cardView;
178-
179175

180176
public CustomItemViewHolder(@NonNull View itemView) {
181177
super(itemView);
182178
textView = itemView.findViewById(R.id.cat_list_item_text);
183-
cardView = itemView.findViewById(R.id.cat_list_item_card_view);
184179
}
185180

186181
public void bind(@NonNull CustomListItemData data) {
187182
super.bind(data.indexInSection, data.sectionCount);
188183
textView.setText(data.text);
189-
190-
cardView.setChecked(data.checked);
191-
cardView.setOnClickListener(
192-
v -> {
193-
Toast.makeText(v.getContext(), R.string.mtrl_list_item_clicked, Toast.LENGTH_SHORT)
194-
.show();
195-
cardView.toggle();
196-
data.checked = !data.checked;
197-
});
198184
}
199185
}
200186

‎catalog/java/io/material/catalog/listitem/res/layout/cat_list_item_segmented_viewholder.xml‎

Lines changed: 30 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -23,11 +23,11 @@
2323
android:paddingHorizontal="8dp">
2424

2525
<com.google.android.material.listitem.ListItemCardView
26+
style="?attr/listItemCardViewSegmentedStyle"
2627
android:id="@+id/cat_list_item_card_view"
2728
android:checkable="true"
2829
android:clickable="true"
2930
android:focusable="true"
30-
style="?attr/listItemCardViewSegmentedStyle"
3131
android:layout_height="wrap_content"
3232
android:layout_width="match_parent"
3333
app:swipeToPrimaryActionEnabled="true">
@@ -38,22 +38,37 @@
3838
android:orientation="horizontal"
3939
tools:ignore="UseCompoundDrawables">
4040
<ImageView
41+
style="@style/Widget.Material3.ImageView.ListItem.LeadingIcon"
4142
android:id="@+id/cat_list_item_start_icon"
42-
style="@style/Widget.Material3.ImageView.ListItem.Leading"
4343
android:contentDescription="@string/cat_list_item_icon_content_description"
4444
android:layout_height="20dp"
4545
android:layout_width="20dp"
46-
android:layout_marginBottom="16dp"
47-
android:layout_marginEnd="16dp"
48-
android:layout_marginStart="16dp"
49-
android:layout_marginTop="16dp"
5046
app:srcCompat="@drawable/ic_star_icon_checkable_24px" />
47+
<LinearLayout
48+
android:layout_height="wrap_content"
49+
android:layout_width="0dp"
50+
android:layout_weight="1"
51+
android:orientation="vertical"
52+
android:layout_marginStart="12dp">
5153
<TextView
54+
style="@style/Widget.Material3.TextView.ListItem.LabelText"
5255
android:id="@+id/cat_list_item_text"
5356
android:layout_height="wrap_content"
54-
android:layout_width="0dp"
55-
android:layout_weight="1"
56-
android:textAppearance="?attr/textAppearanceBodyLarge" />
57+
android:layout_width="wrap_content"/>
58+
<TextView
59+
style="@style/Widget.Material3.TextView.ListItem.SupportingText"
60+
android:layout_height="wrap_content"
61+
android:layout_width="wrap_content"
62+
android:text="@string/cat_list_item_supporting_text"/>
63+
</LinearLayout>
64+
<com.google.android.material.checkbox.MaterialCheckBox
65+
android:id="@+id/cat_list_item_checkbox"
66+
android:layout_width="wrap_content"
67+
android:layout_height="wrap_content"
68+
android:clickable="false"
69+
android:focusable="false"
70+
android:importantForAccessibility="no"
71+
android:layout_marginStart="12dp"/>
5772
</LinearLayout>
5873
</com.google.android.material.listitem.ListItemCardView>
5974

@@ -64,20 +79,20 @@
6479
style="?attr/materialIconButtonFilledStyle"
6580
android:insetLeft="0dp"
6681
android:insetRight="0dp"
67-
android:layout_height="56dp"
82+
android:layout_height="match_parent"
83+
android:layout_width="64dp"
6884
android:layout_marginEnd="2dp"
6985
android:layout_marginStart="2dp"
70-
android:layout_width="wrap_content"
7186
app:icon="@drawable/ic_add_24px"
72-
app:iconGravity="top" />
87+
app:iconGravity="textStart" />
7388
<com.google.android.material.button.MaterialButton
7489
style="?attr/materialIconButtonFilledStyle"
7590
android:insetLeft="0dp"
7691
android:insetRight="0dp"
77-
android:layout_height="56dp"
92+
android:layout_height="match_parent"
93+
android:layout_width="64dp"
7894
android:layout_marginEnd="2dp"
79-
android:layout_width="wrap_content"
8095
app:icon="@drawable/ic_add_24px"
81-
app:iconGravity="top" />
96+
app:iconGravity="textStart" />
8297
</com.google.android.material.listitem.ListItemRevealLayout>
8398
</com.google.android.material.listitem.ListItemLayout>

‎catalog/java/io/material/catalog/listitem/res/layout/cat_list_item_viewholder.xml‎

Lines changed: 37 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -14,46 +14,58 @@
1414
See the License for the specific language governing permissions and
1515
limitations under the License.
1616
-->
17-
<com.google.android.material.listitem.ListItemLayout xmlns:android="http://schemas.android.com/apk/res/android"
17+
<com.google.android.material.listitem.ListItemLayout
18+
xmlns:android="http://schemas.android.com/apk/res/android"
19+
xmlns:app="http://schemas.android.com/apk/res-auto"
1820
xmlns:tools="http://schemas.android.com/tools"
19-
android:layout_width="match_parent"
2021
android:layout_height="wrap_content"
21-
xmlns:app="http://schemas.android.com/apk/res-auto"
22+
android:layout_width="match_parent"
2223
android:paddingHorizontal="8dp">
24+
2325
<com.google.android.material.listitem.ListItemCardView
2426
android:id="@+id/cat_list_item_card_view"
25-
android:layout_width="match_parent"
26-
android:layout_height="wrap_content"
2727
android:checkable="true"
2828
android:clickable="true"
29-
android:focusable="true">
30-
29+
android:focusable="true"
30+
android:layout_height="wrap_content"
31+
android:layout_width="match_parent">
3132
<LinearLayout
32-
android:orientation="horizontal"
33-
android:layout_width="match_parent"
34-
android:layout_height="wrap_content"
3533
android:gravity="center_vertical"
34+
android:layout_height="wrap_content"
35+
android:layout_width="match_parent"
36+
android:orientation="horizontal"
3637
tools:ignore="UseCompoundDrawables">
37-
3838
<ImageView
39+
style="@style/Widget.Material3.ImageView.ListItem.LeadingIcon"
3940
android:id="@+id/cat_list_item_start_icon"
40-
android:layout_width="20dp"
41+
android:contentDescription="@string/cat_list_item_icon_content_description"
4142
android:layout_height="20dp"
42-
android:layout_marginTop="16dp"
43-
android:layout_marginBottom="16dp"
44-
android:layout_marginStart="16dp"
45-
android:layout_marginEnd="16dp"
46-
style="@style/Widget.Material3.ImageView.ListItem.Leading"
47-
app:srcCompat="@drawable/ic_star_icon_checkable_24px"
48-
android:contentDescription="@string/cat_list_item_icon_content_description" />
49-
50-
<TextView
51-
android:id="@+id/cat_list_item_text"
52-
android:layout_width="0dp"
43+
android:layout_width="20dp"
44+
app:srcCompat="@drawable/ic_star_icon_checkable_24px" />
45+
<LinearLayout
5346
android:layout_height="wrap_content"
47+
android:layout_width="0dp"
5448
android:layout_weight="1"
55-
android:textAppearance="?attr/textAppearanceBodyLarge"/>
56-
49+
android:orientation="vertical"
50+
android:layout_marginStart="12dp">
51+
<TextView
52+
style="@style/Widget.Material3.TextView.ListItem.LabelText"
53+
android:id="@+id/cat_list_item_text"
54+
android:layout_height="wrap_content"
55+
android:layout_width="wrap_content"/>
56+
<TextView
57+
style="@style/Widget.Material3.TextView.ListItem.SupportingText"
58+
android:layout_height="wrap_content"
59+
android:layout_width="wrap_content"
60+
android:text="@string/cat_list_item_supporting_text"/>
61+
</LinearLayout>
62+
<com.google.android.material.checkbox.MaterialCheckBox
63+
android:id="@+id/cat_list_item_checkbox"
64+
android:layout_width="wrap_content"
65+
android:layout_height="wrap_content"
66+
android:clickable="false"
67+
android:focusable="false"
68+
android:layout_marginStart="12dp"/>
5769
</LinearLayout>
5870
</com.google.android.material.listitem.ListItemCardView>
5971
</com.google.android.material.listitem.ListItemLayout>

‎catalog/java/io/material/catalog/listitem/res/layout/cat_list_multisection_viewholder.xml‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<!--
3+
Copyright 2025 The Android Open Source Project
4+
5+
Licensed under the Apache License, Version 2.0 (the "License");
6+
you may not use this file except in compliance with the License.
7+
You may obtain a copy of the License at
8+
9+
http://www.apache.org/licenses/LICENSE-2.0
10+
11+
Unless required by applicable law or agreed to in writing, software
12+
distributed under the License is distributed on an "AS IS" BASIS,
13+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14+
See the License for the specific language governing permissions and
15+
limitations under the License.
16+
-->
17+
<com.google.android.material.listitem.ListItemLayout
18+
xmlns:android="http://schemas.android.com/apk/res/android"
19+
xmlns:app="http://schemas.android.com/apk/res-auto"
20+
xmlns:tools="http://schemas.android.com/tools"
21+
android:layout_height="wrap_content"
22+
android:layout_width="match_parent"
23+
android:paddingHorizontal="8dp">
24+
25+
<com.google.android.material.listitem.ListItemCardView
26+
style="?attr/listItemCardViewSegmentedStyle"
27+
android:id="@+id/cat_list_item_card_view"
28+
android:checkable="true"
29+
android:clickable="true"
30+
android:focusable="true"
31+
android:layout_height="wrap_content"
32+
android:layout_width="match_parent">
33+
<LinearLayout
34+
android:gravity="center_vertical"
35+
android:layout_height="wrap_content"
36+
android:layout_width="match_parent"
37+
android:orientation="horizontal"
38+
tools:ignore="UseCompoundDrawables">
39+
<com.google.android.material.imageview.ShapeableImageView
40+
style="@style/Widget.Material3.ShapeableImageView.ListItem.LeadingImage"
41+
android:id="@+id/cat_list_item_image"
42+
android:contentDescription="@string/cat_list_item_leading_image_content_description"
43+
android:layout_height="56dp"
44+
android:layout_width="56dp"
45+
app:srcCompat="@drawable/cat_image"
46+
android:scaleType="centerCrop"/>
47+
<LinearLayout
48+
android:layout_height="wrap_content"
49+
android:layout_width="0dp"
50+
android:layout_weight="1"
51+
android:orientation="vertical"
52+
android:layout_marginStart="16dp">
53+
<TextView
54+
style="@style/Widget.Material3.TextView.ListItem.Overline"
55+
android:layout_height="wrap_content"
56+
android:layout_width="wrap_content"
57+
android:text="@string/cat_list_item_overline_text"/>
58+
<TextView
59+
style="@style/Widget.Material3.TextView.ListItem.LabelText"
60+
android:id="@+id/cat_list_item_text"
61+
android:layout_height="wrap_content"
62+
android:layout_width="wrap_content"/>
63+
</LinearLayout>
64+
<TextView
65+
style="@style/Widget.Material3.TextView.ListItem.TrailingSupportingText"
66+
android:id="@+id/cat_list_item_trailing_text"
67+
android:layout_height="wrap_content"
68+
android:layout_width="wrap_content"
69+
android:text="@string/cat_list_item_trailing_text"/>
70+
</LinearLayout>
71+
</com.google.android.material.listitem.ListItemCardView>
72+
</com.google.android.material.listitem.ListItemLayout>

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,5 +31,9 @@
3131
<string name="cat_list_item_icon_content_description" description="Description for sample icon in custom list item demo. [CHAR_LIMIT=100]">List item icon</string>
3232
<string name="cat_lists_multi_section_demo_title" description="Label for the demo that shows multi-section list content. [CHAR_LIMIT=100]">Multi-section List Demo</string>
3333
<string name="cat_list_item_text" description="Label for the list item that denotes the number of the list item. [CHAR_LIMIT=100]">List item %d</string>
34+
<string name="cat_list_item_supporting_text" description="Placeholder for supporting text for the list item. [CHAR_LIMIT=100]">Supporting text</string>
35+
<string name="cat_list_item_overline_text" description="Placeholder for supporting overline for the list item. [CHAR_LIMIT=100]">Overline</string>
36+
<string name="cat_list_item_trailing_text" description="Placeholder for trailing supporting text for the list item. [CHAR_LIMIT=100]">100+</string>
37+
<string name="cat_list_item_leading_image_content_description" description="Description for sample leading image in custom list item demo. [CHAR_LIMIT=100]">Image of cat</string>
3438
</resources>
3539

‎lib/java/com/google/android/material/imageview/res/values/public.xml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,5 +18,6 @@
1818

1919
<public name="contentPaddingStart" type="attr" />
2020
<public name="contentPaddingEnd" type="attr" />
21+
<public name="Widget.MaterialComponents.ShapeableImageView" type="style"/>
2122

2223
</resources>

‎lib/java/com/google/android/material/listitem/res-public/values/public.xml‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,13 @@
2828
<public name="ShapeAppearance.Material3.ListItem.Last" type="style"/>
2929
<public name="ShapeAppearance.Material3.ListItem.Single" type="style"/>
3030
<public name="ShapeAppearance.Material3.ListItem.Checked" type="style"/>
31-
<public name="Widget.Material3.ImageView.ListItem.Leading" type="style"/>
31+
<public name="Widget.Material3.ImageView.ListItem.LeadingIcon" type="style"/>
32+
<public name="Widget.Material3.ImageView.ListItem.TrailingIcon" type="style"/>
33+
<public name="Widget.Material3.ShapeableImageView.ListItem.LeadingImage" type="style"/>
34+
<public name="Widget.Material3.TextView.ListItem.Overline" type="style"/>
35+
<public name="Widget.Material3.TextView.ListItem.LabelText" type="style"/>
36+
<public name="Widget.Material3.TextView.ListItem.SupportingText" type="style"/>
37+
<public name="Widget.Material3.TextView.ListItem.TrailingSupportingText" type="style"/>
3238

3339
<public name="listItemShapeAppearanceSingle" type="attr"/>
3440
<public name="listItemShapeAppearanceFirst" type="attr"/>

‎lib/java/com/google/android/material/listitem/res/color/m3_list_item_label_text_color_selector.xml‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<!--
3+
Copyright 2025 The Android Open Source Project
4+
5+
Licensed under the Apache License, Version 2.0 (the "License");
6+
you may not use this file except in compliance with the License.
7+
You may obtain a copy of the License at
8+
9+
https://www.apache.org/licenses/LICENSE-2.0
10+
11+
Unless required by applicable law or agreed to in writing, software
12+
distributed under the License is distributed on an "AS IS" BASIS,
13+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14+
See the License for the specific language governing permissions and
15+
limitations under the License.
16+
-->
17+
18+
<selector xmlns:android="http://schemas.android.com/apk/res/android">
19+
<!-- Disabled and selected state -->
20+
<item android:alpha="@dimen/material_emphasis_disabled" android:color="?attr/colorOnSurface" android:state_enabled="false" android:state_selected="true"/>
21+
<!-- Hovered and selected state -->
22+
<item android:color="?attr/colorOnSecondaryContainer" android:state_hovered="true" android:state_selected="true"/>
23+
<!-- Focused and selected state -->
24+
<item android:color="?attr/colorOnSecondaryContainer" android:state_focused="true" android:state_selected="true"/>
25+
<!-- Pressed and selected state -->
26+
<item android:color="?attr/colorOnSecondaryContainer" android:state_pressed="true" android:state_selected="true"/>
27+
<!-- Pressed state -->
28+
<item android:color="?attr/colorOnSurface" android:state_pressed="true"/>
29+
<!-- Focused state -->
30+
<item android:color="?attr/colorOnSurface" android:state_focused="true"/>
31+
<!-- Disabled state -->
32+
<item android:alpha="@dimen/material_emphasis_disabled" android:color="?attr/colorOnSurface" android:state_enabled="false"/>
33+
<!-- Selected state -->
34+
<item android:color="?attr/colorOnSecondaryContainer" android:state_selected="true"/>
35+
<!-- Hovered state -->
36+
<item android:color="?attr/colorOnSurface" android:state_hovered="true"/>
37+
<!-- Default, Enabled state -->
38+
<item android:color="?attr/colorOnSurface"/>
39+
40+
</selector>

0 commit comments

Comments
 (0)