diff options
author | Agatha Man <agathaman@google.com> | 2020-05-13 23:24:27 -0700 |
---|---|---|
committer | Agatha Man <agathaman@google.com> | 2020-05-15 13:21:39 -0700 |
commit | 86baafe436b3816593ec37572d510502bed28841 (patch) | |
tree | a4bc533208fb75c1bba69ac97de3857db43b8ef6 /RotaryPlayground | |
parent | b5b8a5d6a783e12ca0ee06e7770b94dae44a1d9a (diff) | |
download | tests-86baafe436b3816593ec37572d510502bed28841.tar.gz |
Make rotary cards scroll horizontally
- Added new card with buttons in a circle for wraparound demo
- Made cards wider to take up more space
- Add text descriptions on each card
Bug: 154971276
Test: manual, make RotaryPlayground and install
Change-Id: I1b3f97d28d784655159a0329790ce5e525f68151
Diffstat (limited to 'RotaryPlayground')
-rw-r--r-- | RotaryPlayground/Android.bp | 1 | ||||
-rw-r--r-- | RotaryPlayground/res/layout/rotary_cards.xml | 174 | ||||
-rw-r--r-- | RotaryPlayground/res/values/dimens.xml | 4 | ||||
-rw-r--r-- | RotaryPlayground/res/values/strings.xml | 14 |
4 files changed, 155 insertions, 38 deletions
diff --git a/RotaryPlayground/Android.bp b/RotaryPlayground/Android.bp index 2371831..b8304ad 100644 --- a/RotaryPlayground/Android.bp +++ b/RotaryPlayground/Android.bp @@ -23,6 +23,7 @@ android_app { sdk_version: "system_current", static_libs: [ + "androidx-constraintlayout_constraintlayout", "car-apps-common", "car-ui-lib", ], diff --git a/RotaryPlayground/res/layout/rotary_cards.xml b/RotaryPlayground/res/layout/rotary_cards.xml index 7774918..7fc8297 100644 --- a/RotaryPlayground/res/layout/rotary_cards.xml +++ b/RotaryPlayground/res/layout/rotary_cards.xml @@ -16,6 +16,7 @@ --> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" + xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> @@ -48,9 +49,14 @@ android:id="@+id/card_normal" android:background="@color/card_background_color" android:layout_margin="16dp" - android:layout_width="300dp" + android:layout_width="@dimen/card_width" android:layout_height="match_parent" + android:padding="@dimen/card_padding" android:orientation="vertical"> + <TextView + android:layout_height="@dimen/description_height" + android:layout_width="match_parent" + android:text="@string/card_normal_text" /> <Button android:layout_width="match_parent" android:layout_height="50dp" @@ -90,12 +96,17 @@ When no elements is focusable, nudging left and right from the adjacent cards will cause focus to appear to skip this card --> <com.android.car.ui.FocusArea - android:id="@+id/card_normal" + android:id="@+id/card_disabled" android:background="@color/card_disabled_background_color" android:layout_margin="16dp" - android:layout_width="300dp" + android:layout_width="@dimen/card_width" android:layout_height="match_parent" + android:padding="@dimen/card_padding" android:orientation="vertical"> + <TextView + android:layout_height="@dimen/description_height" + android:layout_width="match_parent" + android:text="@string/card_disabled_text" /> <Button android:layout_width="match_parent" android:layout_height="50dp" @@ -135,9 +146,14 @@ android:id="@+id/card_with_default_focus" android:background="@color/card_background_color" android:layout_margin="16dp" - android:layout_width="300dp" + android:layout_width="@dimen/card_width" android:layout_height="match_parent" + android:padding="@dimen/card_padding" android:orientation="vertical"> + <TextView + android:layout_height="@dimen/description_height" + android:layout_width="match_parent" + android:text="@string/card_with_default_focus_text" /> <Button android:layout_width="match_parent" android:layout_height="50dp" @@ -165,47 +181,129 @@ android:text="Button" /> </com.android.car.ui.FocusArea> - <!-- A FocusArea that contains buttons with explicit ordering. Upon nudging into - this area, button_one will be focused. Rotating the rotary controller - clockwise will move the focus to button_two -> button_three -> button_four. - Counterclockwise will move the focus in the opposite order. - Nudge any direction to leave this focus area. --> - <!-- TODO(b/154180719): Add explicit ordering to the buttons --> + <!-- A FocusArea with buttons in a circle. The default focus should land on A. + Rotating clockwise moves the focus from A -> B -> C -> D -> E -> F -> G -> H, + and reverse counterclockwise. + Adding app:defaultFocus to A to make it the default focus on this card + Adding android:nextFocusForward is necessary to ensure the expected focus + order, without it, the focus will move from + G -> H -> F -> A -> E -> B -> D -> C. + Lastly, android:nextFocusForward is not added to H -> A, to avoid linking + the nodes in a circle. app:wrapAround="true" should be used instead. + --> + <!-- TODO(agathaman): add app:wrapAround to this card when b/155698037 is fixed --> + <!-- TODO(agathaman): add app:defaultFocus to this card when b/155698037 is fixed --> <com.android.car.ui.FocusArea - android:id="@+id/card_with_explicit_order" + android:id="@+id/card_that_wraps_around" android:background="@color/card_background_color" android:layout_margin="16dp" - android:layout_width="300dp" + android:layout_width="@dimen/card_width" android:layout_height="match_parent" + android:padding="@dimen/card_padding" android:orientation="vertical"> - <Button - android:id="@+id/button_one" + <TextView + android:layout_height="@dimen/description_height" android:layout_width="match_parent" - android:layout_height="50dp" - android:onClick="onRotaryCardsButtonClick" - android:tag="test_button" - android:text="Button 1" /> - <Button - android:id="@+id/button_three" + android:text="@string/card_that_wraps_around_text" /> + <androidx.constraintlayout.widget.ConstraintLayout android:layout_width="match_parent" - android:layout_height="50dp" - android:onClick="onRotaryCardsButtonClick" - android:tag="test_button" - android:text="Button 3" /> - <Button - android:id="@+id/button_two" - android:layout_width="match_parent" - android:layout_height="50dp" - android:onClick="onRotaryCardsButtonClick" - android:tag="test_button" - android:text="Button 2" /> - <Button - android:id="@+id/button_four" - android:layout_width="match_parent" - android:layout_height="50dp" - android:onClick="onRotaryCardsButtonClick" - android:tag="test_button" - android:text="Button 4" /> + android:layout_height="match_parent"> + <View + android:id="@+id/circle_center" + android:layout_width="wrap_content" + android:layout_height="wrap_content" + app:layout_constraintBottom_toBottomOf="parent" + app:layout_constraintLeft_toLeftOf="parent" + app:layout_constraintRight_toRightOf="parent" + app:layout_constraintTop_toTopOf="parent" /> + <Button + android:id="@+id/button_a" + android:layout_width="wrap_content" + android:layout_height="wrap_content" + android:nextFocusForward="@+id/button_b" + android:padding="20dp" + android:text="A" + app:layout_constraintCircle="@id/circle_center" + app:layout_constraintCircleAngle="0" + app:layout_constraintCircleRadius="90dp" + /> + <Button + android:id="@+id/button_b" + android:layout_width="wrap_content" + android:layout_height="wrap_content" + android:nextFocusForward="@+id/button_c" + android:padding="20dp" + android:text="B" + app:layout_constraintCircle="@id/circle_center" + app:layout_constraintCircleAngle="45" + app:layout_constraintCircleRadius="90dp" + /> + <Button + android:id="@+id/button_c" + android:layout_width="wrap_content" + android:layout_height="wrap_content" + android:nextFocusForward="@+id/button_d" + android:padding="20dp" + android:text="C" + app:layout_constraintCircle="@id/circle_center" + app:layout_constraintCircleAngle="90" + app:layout_constraintCircleRadius="90dp" + /> + <Button + android:id="@+id/button_d" + android:layout_width="wrap_content" + android:layout_height="wrap_content" + android:nextFocusForward="@+id/button_e" + android:padding="20dp" + android:text="D" + app:layout_constraintCircle="@id/circle_center" + app:layout_constraintCircleAngle="135" + app:layout_constraintCircleRadius="90dp" + /> + <Button + android:id="@+id/button_e" + android:layout_width="wrap_content" + android:layout_height="wrap_content" + android:nextFocusForward="@+id/button_f" + android:padding="20dp" + android:text="E" + app:layout_constraintCircle="@id/circle_center" + app:layout_constraintCircleAngle="180" + app:layout_constraintCircleRadius="90dp" + /> + <Button + android:id="@+id/button_f" + android:layout_width="wrap_content" + android:layout_height="wrap_content" + android:nextFocusForward="@+id/button_g" + android:padding="20dp" + android:text="F" + app:layout_constraintCircle="@id/circle_center" + app:layout_constraintCircleAngle="225" + app:layout_constraintCircleRadius="90dp" + /> + <Button + android:id="@+id/button_g" + android:layout_width="wrap_content" + android:layout_height="wrap_content" + android:nextFocusForward="@+id/button_h" + android:padding="20dp" + android:text="G" + app:layout_constraintCircle="@id/circle_center" + app:layout_constraintCircleAngle="270" + app:layout_constraintCircleRadius="90dp" + /> + <Button + android:id="@+id/button_h" + android:layout_width="wrap_content" + android:layout_height="wrap_content" + android:padding="20dp" + android:text="H" + app:layout_constraintCircle="@id/circle_center" + app:layout_constraintCircleAngle="315" + app:layout_constraintCircleRadius="90dp" + /> + </androidx.constraintlayout.widget.ConstraintLayout> </com.android.car.ui.FocusArea> </LinearLayout> </HorizontalScrollView> diff --git a/RotaryPlayground/res/values/dimens.xml b/RotaryPlayground/res/values/dimens.xml index dece8ec..b919705 100644 --- a/RotaryPlayground/res/values/dimens.xml +++ b/RotaryPlayground/res/values/dimens.xml @@ -17,4 +17,8 @@ <resources> <!-- Rotary Menu values --> <dimen name="menu_width">200dp</dimen> + <!-- Card example values --> + <dimen name="card_width">400dp</dimen> + <dimen name="card_padding">20dp</dimen> + <dimen name="description_height">200dp</dimen> </resources>
\ No newline at end of file diff --git a/RotaryPlayground/res/values/strings.xml b/RotaryPlayground/res/values/strings.xml index 8fabdf9..fd38e6b 100644 --- a/RotaryPlayground/res/values/strings.xml +++ b/RotaryPlayground/res/values/strings.xml @@ -16,4 +16,18 @@ --> <resources> <string name="app_name" translatable="false">Rotary Playground</string> + + <!-- Texts for card examples --> + <string name="card_normal_text" translatable="false"> + The focus should land on the first button upon entering this card. Rotating the rotary controller will move the focus up and down. The disabled button should not be focusable. + </string> + <string name="card_disabled_text" translatable="false"> + Nothing in this card should be focusable because all the buttons are disabled. + </string> + <string name="card_with_default_focus_text" translatable="false"> + The focus should land on the second button upon entering this card. + </string> + <string name="card_that_wraps_around_text" translatable="false"> + The focus should move clockwise when rotating clockwise and similarly for counterclockwise. Focus also wraps around the elements (H -> A clockwise and A -> H counterclockwise). + </string> </resources> |