Polish UX of expandable switch

- Padding from the expandable arrow is now 4dp
- Arrow is pushed down 2.5dp (by modifying the drawable) to align
  with the text
- Switch and the switch divider is now fixed 36dp from top rather
  than vertically aligned

Bug: 37576453
Test: ./gradlew connectedAndroidTest test
Change-Id: Ibb3028d3bb17ca9d054911e4ff27098a200af0da
This commit is contained in:
Maurice Lam 2017-04-21 14:19:58 -07:00
parent 1a8259d4fb
commit 52b85e4fa2
5 changed files with 90 additions and 12 deletions

View file

@ -16,11 +16,13 @@
-->
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="18dp"
android:height="18dp"
android:viewportHeight="24.0"
android:viewportWidth="24.0">
android:width="20dp"
android:height="24dp"
android:viewportWidth="20.0"
android:viewportHeight="24.0">
<path
android:fillColor="#ff000000"
android:pathData="M12,8l-6,6 1.41,1.41L12,10.83l4.59,4.58L18,14z" />
android:pathData="M10,9.17l-5,5 1.18,1.18L10,11.53l3.83,3.82L15,14.17z" />
</vector>

View file

@ -16,11 +16,13 @@
-->
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="18dp"
android:height="18dp"
android:viewportWidth="24.0"
android:width="20dp"
android:height="24dp"
android:viewportWidth="20.0"
android:viewportHeight="24.0">
<path
android:fillColor="#ff000000"
android:pathData="M16.59,8.59L12,13.17 7.41,8.59 6,10l6,6 6,-6z"/>
android:pathData="M13.83,9.66L10,13.48 6.18,9.66 5,10.83l5,5 5,-5z"/>
</vector>

View file

@ -94,7 +94,8 @@
android:id="@+id/suw_items_switch_divider"
android:layout_width="1dp"
android:layout_height="@dimen/suw_switch_divider_height"
android:layout_gravity="center_vertical"
android:layout_gravity="top"
android:layout_marginTop="@dimen/suw_switch_divider_padding_top"
android:background="?android:attr/listDivider" />
<android.support.v7.widget.SwitchCompat
@ -102,6 +103,8 @@
style="@style/SuwSwitchStyle.Divided"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center_vertical" />
android:layout_gravity="top"
android:gravity="top"
android:paddingTop="@dimen/suw_switch_padding_top" />
</LinearLayout>

View file

@ -20,10 +20,12 @@
<!-- SwitchItem -->
<dimen name="suw_switch_padding_start">16dp</dimen>
<dimen name="suw_switch_padding_end">0dp</dimen>
<dimen name="suw_switch_padding_top">39dp</dimen>
<dimen name="suw_switch_divider_height">32dp</dimen>
<dimen name="suw_switch_divider_padding_top">36dp</dimen>
<dimen name="suw_switch_content_padding_end">16dp</dimen>
<!-- ExpandableSwithItem -->
<dimen name="suw_expand_arrow_drawable_padding">6dp</dimen>
<dimen name="suw_expand_arrow_drawable_padding">4dp</dimen>
</resources>

View file

@ -0,0 +1,69 @@
/*
* Copyright (C) 2017 The Android Open Source Project
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
package com.android.setupwizardlib.util;
import static org.junit.Assert.assertEquals;
import static org.robolectric.RuntimeEnvironment.application;
import android.content.Context;
import android.content.res.Resources;
import android.util.DisplayMetrics;
import android.util.TypedValue;
import android.view.ContextThemeWrapper;
import com.android.setupwizardlib.BuildConfig;
import com.android.setupwizardlib.R;
import com.android.setupwizardlib.robolectric.SuwLibRobolectricTestRunner;
import org.junit.Before;
import org.junit.Test;
import org.junit.runner.RunWith;
import org.robolectric.annotation.Config;
@RunWith(SuwLibRobolectricTestRunner.class)
@Config(constants = BuildConfig.class, sdk = Config.ALL_SDKS)
public class DimensionConsistencyTest {
// Visual height of the framework switch widget
private static final int SWTICH_HEIGHT_DP = 26;
private Context mContext;
@Before
public void setUp() {
mContext = new ContextThemeWrapper(application, R.style.SuwThemeGlif_Light);
}
@Test
public void testSwitchPaddingTop() {
final Resources res = mContext.getResources();
assertEquals(
"Switch and divider should be aligned at center vertically: "
+ "suw_switch_padding_top + SWITCH_HEIGHT / 2 = "
+ "suw_switch_divider_padding_top + suw_switch_divider_height / 2",
res.getDimensionPixelSize(R.dimen.suw_switch_divider_padding_top)
+ (res.getDimensionPixelSize(R.dimen.suw_switch_divider_height) / 2),
res.getDimensionPixelSize(R.dimen.suw_switch_padding_top)
+ (dp2Px(SWTICH_HEIGHT_DP) / 2));
}
private int dp2Px(float dp) {
DisplayMetrics displayMetrics = mContext.getResources().getDisplayMetrics();
return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp, displayMetrics);
}
}