Skip to content

Commit a99a767

Browse files
evermind-zzevermind-zz
committed
searchfilters: make default dialog not stretch vertically
Originally stretching vertically over the whole screen was used to avoid resizing the UI each time the selected content filter selects another set of sort filters. As it turns out fullscreen vertically dialogs can be ugly and my other attempt to use View.INVISIBLE instead of (View.GONE) in order to have some sort of placeholder, didn't work well with the Spinner Views either. So we go back and let Android resize the UI. Another resizing annoyance is now avoided. The Material's Chip with the Filter style was also resized each time a Chip was selected. To avoid resizing for the Chip views the checkmark icon is removed by using a custom chip style: "@style/ChipSearchFilter". The custom chip style also improves the contrast when a chip is selected To save some space a ChipGroup that holds more than CHIP_GROUP_ELEMENTS_THRESHOLD elements will be spanned over all cells of a row in the GridLayout.
1 parent d7bfb0a commit a99a767

5 files changed

Lines changed: 69 additions & 10 deletions

File tree

‎app/src/main/java/org/schabi/newpipe/fragments/list/search/filter/SearchFilterDialogGenerator.java‎

Lines changed: 40 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44

55
import android.content.Context;
66
import android.view.Gravity;
7+
import android.view.LayoutInflater;
78
import android.view.View;
89
import android.view.ViewGroup;
910
import android.widget.AdapterView;
@@ -23,9 +24,11 @@
2324
import java.util.List;
2425

2526
import androidx.annotation.NonNull;
26-
import androidx.appcompat.view.ContextThemeWrapper;
27+
import androidx.annotation.Nullable;
2728

2829
public class SearchFilterDialogGenerator extends BaseSearchFilterUiDialogGenerator {
30+
private static final int CHIP_GROUP_ELEMENTS_THRESHOLD = 2;
31+
private static final int CHIP_MIN_TOUCH_TARGET_SIZE_DP = 40;
2932
private final GridLayout globalLayout;
3033

3134
public SearchFilterDialogGenerator(
@@ -62,8 +65,9 @@ protected void createFilterGroup(@NonNull final FilterGroup filterGroup,
6265
final UiItemWrapperViews viewsWrapper = new UiItemWrapperViews(
6366
filterGroup.getIdentifier());
6467

68+
final TextView filterLabel;
6569
if (filterGroup.getNameId() != null) {
66-
final TextView filterLabel = new TextView(context);
70+
filterLabel = new TextView(context);
6771

6872
filterLabel.setId(filterGroup.getIdentifier());
6973
filterLabel.setText(
@@ -73,13 +77,16 @@ protected void createFilterGroup(@NonNull final FilterGroup filterGroup,
7377
setZeroPadding(filterLabel);
7478

7579
filterLabel.setLayoutParams(layoutParams);
76-
globalLayout.addView(filterLabel);
7780
viewsWrapper.add(filterLabel);
7881
} else {
82+
filterLabel = null;
7983
doSpanDataOverMultipleCells = true;
8084
}
8185

8286
if (filterGroup.isOnlyOneCheckable()) {
87+
if (filterLabel != null) {
88+
globalLayout.addView(filterLabel);
89+
}
8390

8491
final Spinner filterDataSpinner = new Spinner(context, Spinner.MODE_DROPDOWN);
8592

@@ -97,6 +104,9 @@ protected void createFilterGroup(@NonNull final FilterGroup filterGroup,
97104

98105
} else { // multiple items in FilterGroup selectable
99106
final ChipGroup chipGroup = new ChipGroup(context);
107+
doSpanDataOverMultipleCells = chooseParentViewForFilterLabelAndAdd(
108+
filterGroup, doSpanDataOverMultipleCells, filterLabel, chipGroup);
109+
100110
viewsWrapper.add(chipGroup);
101111
globalLayout.addView(chipGroup);
102112
chipGroup.setLayoutParams(
@@ -110,6 +120,28 @@ protected void createFilterGroup(@NonNull final FilterGroup filterGroup,
110120
wrapperDelegate.put(filterGroup.getIdentifier(), viewsWrapper);
111121
}
112122

123+
private boolean chooseParentViewForFilterLabelAndAdd(
124+
@NonNull final FilterGroup filterGroup,
125+
final boolean doSpanDataOverMultipleCells,
126+
@Nullable final TextView filterLabel,
127+
@NonNull final ChipGroup possibleParentView) {
128+
129+
boolean spanOverMultipleCells = doSpanDataOverMultipleCells;
130+
if (filterLabel != null) {
131+
// If we have more than CHIP_GROUP_ELEMENTS_THRESHOLD elements to be
132+
// displayed as Chips add its filterLabel as first element to ChipGroup.
133+
// Now the ChipGroup can be spanned over all the cells to use
134+
// the space better.
135+
if (filterGroup.getFilterItems().size() > CHIP_GROUP_ELEMENTS_THRESHOLD) {
136+
possibleParentView.addView(filterLabel);
137+
spanOverMultipleCells = true;
138+
} else {
139+
globalLayout.addView(filterLabel);
140+
}
141+
}
142+
return spanOverMultipleCells;
143+
}
144+
113145
private void createUiElementsForSingleSelectableItemsFilterGroup(
114146
@NonNull final FilterGroup filterGroup,
115147
@NonNull final UiWrapperMapDelegate wrapperDelegate,
@@ -143,8 +175,10 @@ private void createUiElementsForMultipleSelectableItemsFilterGroup(
143175
@NonNull final UiSelectorDelegate selectorDelegate,
144176
@NonNull final ChipGroup chipGroup) {
145177
for (final FilterItem item : filterGroup.getFilterItems()) {
146-
final Chip chip = new Chip(new ContextThemeWrapper(
147-
context, R.style.Theme_MaterialComponents_Light));
178+
final Chip chip = (Chip) LayoutInflater.from(context).inflate(
179+
R.layout.chip_search_filter, chipGroup, false);
180+
chip.ensureAccessibleTouchTarget(
181+
DeviceUtils.dpToPx(CHIP_MIN_TOUCH_TARGET_SIZE_DP, context));
148182
chip.setText(ServiceHelper.getTranslatedFilterString(item.getNameId(), context));
149183
chip.setId(item.getIdentifier());
150184
chip.setCheckable(true);
@@ -205,7 +239,7 @@ private GridLayout.LayoutParams clipFreeRightColumnLayoutParams(final boolean do
205239
@NonNull
206240
private GridLayout.LayoutParams getLayoutParamsViews() {
207241
final GridLayout.LayoutParams layoutParams = new GridLayout.LayoutParams();
208-
layoutParams.setGravity(Gravity.TOP);
242+
layoutParams.setGravity(Gravity.CENTER_VERTICAL);
209243
setDefaultMargin(layoutParams);
210244
return layoutParams;
211245
}
@@ -247,7 +281,6 @@ public boolean isChecked() {
247281

248282
@Override
249283
public void setChecked(final boolean checked) {
250-
view.setSelected(checked);
251284
((Chip) view).setChecked(checked);
252285

253286
if (checked) {

‎app/src/main/res/color/mtrl_search_filter_chip_background_color.xml‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<selector xmlns:android="http://schemas.android.com/apk/res/android">
3+
<!-- adding more contrast than @color/mtrl_chip_background_color if a Chip is selected -->
4+
<item android:alpha="0.30" android:color="?attr/colorOnSurface" android:state_enabled="true" android:state_selected="true"/>
5+
<item android:alpha="0.18" android:color="?attr/colorOnSurface" android:state_enabled="true" android:state_checked="true"/>
6+
<!-- 12% of 87% opacity -->
7+
<item android:alpha="0.10" android:color="?attr/colorOnSurface" android:state_enabled="true"/>
8+
<item android:alpha="0.12" android:color="?attr/colorOnSurface"/>
9+
</selector>

‎app/src/main/res/layout/chip_search_filter.xml‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<!-- This is used to inflate a chip with a Material theme, otherwise it would crash -->
3+
<!-- Theme.MaterialComponents.DayNight is used to guarantee auto day/night switching -->
4+
<com.google.android.material.chip.Chip xmlns:android="http://schemas.android.com/apk/res/android"
5+
xmlns:app="http://schemas.android.com/apk/res-auto"
6+
style="@style/ChipSearchFilter"
7+
android:layout_width="wrap_content"
8+
android:layout_height="wrap_content"
9+
android:theme="@style/Theme.MaterialComponents.DayNight" />

‎app/src/main/res/layout/search_filter_dialog_fragment.xml‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
22
xmlns:tools="http://schemas.android.com/tools"
33
android:layout_width="match_parent"
4-
android:layout_height="match_parent" >
4+
android:layout_height="wrap_content" >
55

66
<include
77
android:id="@+id/toolbar_layout"
88
layout="@layout/toolbar_layout" />
99

1010
<ScrollView
1111
android:layout_width="match_parent"
12-
android:layout_height="match_parent"
13-
android:layout_below="@+id/toolbar_layout">
12+
android:layout_height="wrap_content"
13+
android:layout_below="@id/toolbar_layout">
1414

1515
<LinearLayout
1616
android:id="@+id/vertical_scroll"

‎app/src/main/res/values/styles.xml‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -155,4 +155,12 @@
155155

156156
<style name="RouterActivityThemeDark" parent="Base.RouterActivityThemeDark" />
157157

158+
<!-- custom Chip style for SearchFilterDialogFragment -->
159+
<style name="ChipSearchFilter" parent="Widget.MaterialComponents.Chip.Filter">
160+
<item name="checkedIconEnabled">false</item>
161+
<item name="checkedIcon">@null</item>
162+
<item name="chipBackgroundColor">@color/mtrl_search_filter_chip_background_color</item>
163+
<item name="chipStrokeWidth">0.1dp</item>
164+
</style>
165+
158166
</resources>

0 commit comments

Comments
 (0)