Commit 796efd37 authored by Shakti Sahu's avatar Shakti Sahu Committed by Commit Bot

Video Tutorials : Using RadioButtonWithDescription

This CL changes the radio button in language picker from using a linear
layout to use RadioButtonWithDescription. Also disable the watch button
initially when no radio button is checked.

Bug: 1117182
Change-Id: I836947d6484c57760c6e6fd9b0d2450d8ce8d6eb
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2492906Reviewed-by: default avatarXing Liu <xingliu@chromium.org>
Commit-Queue: Shakti Sahu <shaktisahu@chromium.org>
Cr-Commit-Position: refs/heads/master@{#820062}
parent 8b1af9e8
...@@ -113,9 +113,6 @@ if (is_android) { ...@@ -113,9 +113,6 @@ if (is_android) {
create_srcjar = false create_srcjar = false
sources = [ sources = [
"android/java/res/drawable/circular_media_button_background.xml", "android/java/res/drawable/circular_media_button_background.xml",
"android/java/res/drawable/radio_button.xml",
"android/java/res/drawable/radio_button_default.xml",
"android/java/res/drawable/radio_button_selected.xml",
"android/java/res/layout/language_card.xml", "android/java/res/layout/language_card.xml",
"android/java/res/layout/language_picker.xml", "android/java/res/layout/language_picker.xml",
"android/java/res/layout/video_player_controls.xml", "android/java/res/layout/video_player_controls.xml",
......
<?xml version="1.0" encoding="utf-8"?>
<!-- Copyright 2018 The Chromium Authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file. -->
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- TODO(crbug.com/1132112): Fix these states. -->
<item
android:drawable="@drawable/radio_button_selected"
android:state_pressed="true" />
<item
android:drawable="@drawable/radio_button_selected"
android:state_selected="true" />
<item
android:drawable="@drawable/radio_button_default" />
</selector>
<?xml version="1.0" encoding="utf-8"?>
<!-- Copyright 2020 The Chromium Authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file. -->
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:innerRadiusRatio="2.5"
android:shape="ring"
android:thickness="2dp"
android:useLevel="false">
<solid android:color="@color/modern_grey_700"/>
</shape>
<?xml version="1.0" encoding="utf-8"?>
<!-- Copyright 2020 The Chromium Authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file. -->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Larger blue circle in background. -->
<item>
<shape android:shape="oval">
<solid android:color="@color/modern_blue_800"/>
<size
android:width="15dp"
android:height="15dp"/>
</shape>
</item>
<!-- Smaller white ring in front. -->
<item>
<shape
android:shape="ring"
android:thickness="1dp"
android:useLevel="false">
<size
android:width="5dp"
android:height="5dp"/>
<solid android:color="@color/modern_white"/>
</shape>
</item>
</layer-list>
...@@ -8,35 +8,12 @@ ...@@ -8,35 +8,12 @@
android:layout_width="match_parent" android:layout_width="match_parent"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:orientation="horizontal" android:orientation="horizontal"
android:paddingTop="@dimen/promo_compact_padding"
android:paddingStart="@dimen/promo_compact_padding" android:paddingStart="@dimen/promo_compact_padding"
android:paddingEnd="@dimen/promo_compact_padding" android:paddingEnd="@dimen/promo_compact_padding" >
android:paddingBottom="@dimen/promo_compact_padding">
<ImageView <org.chromium.components.browser_ui.widget.RadioButtonWithDescription
android:id="@+id/check" android:id="@+id/language_radio_button"
android:layout_width="16dp"
android:layout_height="16dp"
android:layout_gravity="center_vertical"
android:importantForAccessibility="no"
android:src="@drawable/radio_button" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginStart="16dp" >
<TextView
android:id="@+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="@style/TextAppearance.TextMedium.Blue" />
<TextView
android:id="@+id/description"
android:layout_width="match_parent" android:layout_width="match_parent"
android:layout_height="wrap_content" android:layout_height="wrap_content" />
android:textAppearance="@style/TextAppearance.TextSmall.Disabled" />
</LinearLayout>
</LinearLayout> </LinearLayout>
\ No newline at end of file
...@@ -7,10 +7,9 @@ package org.chromium.chrome.browser.video_tutorials.languages; ...@@ -7,10 +7,9 @@ package org.chromium.chrome.browser.video_tutorials.languages;
import android.view.LayoutInflater; import android.view.LayoutInflater;
import android.view.View; import android.view.View;
import android.view.ViewGroup; import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;
import org.chromium.chrome.browser.video_tutorials.R; import org.chromium.chrome.browser.video_tutorials.R;
import org.chromium.components.browser_ui.widget.RadioButtonWithDescription;
import org.chromium.ui.modelutil.PropertyKey; import org.chromium.ui.modelutil.PropertyKey;
import org.chromium.ui.modelutil.PropertyModel; import org.chromium.ui.modelutil.PropertyModel;
...@@ -26,17 +25,17 @@ class LanguageItemViewHolder { ...@@ -26,17 +25,17 @@ class LanguageItemViewHolder {
/** Binder method to bind the list view with the model properties. */ /** Binder method to bind the list view with the model properties. */
public static void bindView(PropertyModel model, View view, PropertyKey propertyKey) { public static void bindView(PropertyModel model, View view, PropertyKey propertyKey) {
final RadioButtonWithDescription radioButton =
view.findViewById(R.id.language_radio_button);
if (propertyKey == LanguageItemProperties.NAME) { if (propertyKey == LanguageItemProperties.NAME) {
TextView title = view.findViewById(R.id.title); radioButton.setPrimaryText(model.get(LanguageItemProperties.NAME));
title.setText(model.get(LanguageItemProperties.NAME));
} else if (propertyKey == LanguageItemProperties.NATIVE_NAME) { } else if (propertyKey == LanguageItemProperties.NATIVE_NAME) {
TextView description = view.findViewById(R.id.description); radioButton.setDescriptionText(model.get(LanguageItemProperties.NATIVE_NAME));
description.setText(model.get(LanguageItemProperties.NATIVE_NAME));
} else if (propertyKey == LanguageItemProperties.IS_SELECTED) { } else if (propertyKey == LanguageItemProperties.IS_SELECTED) {
ImageView imageView = view.findViewById(R.id.check); radioButton.setChecked(model.get(LanguageItemProperties.IS_SELECTED));
imageView.setSelected(model.get(LanguageItemProperties.IS_SELECTED));
} else if (propertyKey == LanguageItemProperties.SELECTION_CALLBACK) { } else if (propertyKey == LanguageItemProperties.SELECTION_CALLBACK) {
view.setOnClickListener(v -> { radioButton.setOnCheckedChangeListener(checkedRadioButton -> {
if (!radioButton.isChecked()) return;
model.get(LanguageItemProperties.SELECTION_CALLBACK) model.get(LanguageItemProperties.SELECTION_CALLBACK)
.onResult(model.get(LanguageItemProperties.LOCALE)); .onResult(model.get(LanguageItemProperties.LOCALE));
}); });
......
...@@ -56,6 +56,7 @@ public class LanguagePickerMediator { ...@@ -56,6 +56,7 @@ public class LanguagePickerMediator {
private void populateList(List<String> supportedLanguages) { private void populateList(List<String> supportedLanguages) {
List<ListItem> listItems = new ArrayList<>(); List<ListItem> listItems = new ArrayList<>();
boolean hasPreferredLanguage = false;
for (String locale : supportedLanguages) { for (String locale : supportedLanguages) {
Language language = mLanguageInfoProvider.getLanguageInfo(locale); Language language = mLanguageInfoProvider.getLanguageInfo(locale);
if (language == null) continue; if (language == null) continue;
...@@ -63,8 +64,10 @@ public class LanguagePickerMediator { ...@@ -63,8 +64,10 @@ public class LanguagePickerMediator {
ListItem listItem = new ListItem( ListItem listItem = new ListItem(
LanguageItemProperties.ITEM_VIEW_TYPE, buildListItemModelFromLocale(language)); LanguageItemProperties.ITEM_VIEW_TYPE, buildListItemModelFromLocale(language));
listItems.add(listItem); listItems.add(listItem);
hasPreferredLanguage |= listItem.model.get(LanguageItemProperties.IS_SELECTED);
} }
mListModel.set(listItems); mListModel.set(listItems);
mModel.set(LanguagePickerProperties.IS_ENABLED_WATCH_BUTTON, hasPreferredLanguage);
} }
private PropertyModel buildListItemModelFromLocale(Language language) { private PropertyModel buildListItemModelFromLocale(Language language) {
......
...@@ -5,6 +5,7 @@ ...@@ -5,6 +5,7 @@
package org.chromium.chrome.browser.video_tutorials.languages; package org.chromium.chrome.browser.video_tutorials.languages;
import org.chromium.ui.modelutil.PropertyKey; import org.chromium.ui.modelutil.PropertyKey;
import org.chromium.ui.modelutil.PropertyModel.WritableBooleanPropertyKey;
import org.chromium.ui.modelutil.PropertyModel.WritableObjectPropertyKey; import org.chromium.ui.modelutil.PropertyModel.WritableObjectPropertyKey;
/** /**
...@@ -17,5 +18,9 @@ interface LanguagePickerProperties { ...@@ -17,5 +18,9 @@ interface LanguagePickerProperties {
/** The callback to run when the watch button is clicked on the UI. */ /** The callback to run when the watch button is clicked on the UI. */
WritableObjectPropertyKey<Runnable> WATCH_CALLBACK = new WritableObjectPropertyKey<>(); WritableObjectPropertyKey<Runnable> WATCH_CALLBACK = new WritableObjectPropertyKey<>();
PropertyKey[] ALL_KEYS = new PropertyKey[] {CLOSE_CALLBACK, WATCH_CALLBACK}; /** Whether or not the watch button should be shown as enabled. */
WritableBooleanPropertyKey IS_ENABLED_WATCH_BUTTON = new WritableBooleanPropertyKey();
PropertyKey[] ALL_KEYS =
new PropertyKey[] {CLOSE_CALLBACK, WATCH_CALLBACK, IS_ENABLED_WATCH_BUTTON};
} }
...@@ -68,6 +68,9 @@ class LanguagePickerView { ...@@ -68,6 +68,9 @@ class LanguagePickerView {
View closeButton = view.findViewById(R.id.close_button); View closeButton = view.findViewById(R.id.close_button);
closeButton.setOnClickListener( closeButton.setOnClickListener(
v -> { model.get(LanguagePickerProperties.CLOSE_CALLBACK).run(); }); v -> { model.get(LanguagePickerProperties.CLOSE_CALLBACK).run(); });
} else if (propertyKey == LanguagePickerProperties.IS_ENABLED_WATCH_BUTTON) {
View watchButton = view.findViewById(R.id.watch);
watchButton.setEnabled(model.get(LanguagePickerProperties.IS_ENABLED_WATCH_BUTTON));
} }
} }
} }
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment