Permalink
Browse files

Animated DN password visibility toggle.

1 parent 98d4c4b commit 68cc1feac7073ef8e38d1fd809bc22001bd53158 @nickbutcher committed Aug 18, 2016
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+ Copyright 2016 Google Inc.
+
+ 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.
+ -->
+
+<animated-selector xmlns:android="http://schemas.android.com/apk/res/android">
+
+ <item
+ android:id="@+id/visible"
+ android:state_checked="true"
+ android:drawable="@drawable/ic_password_visible" />
+
+ <item
+ android:id="@+id/masked"
+ android:drawable="@drawable/ic_password_masked" />
+
+ <transition
+ android:fromId="@id/masked"
+ android:toId="@id/visible"
+ android:drawable="@drawable/avd_show_password" />
+
+ <transition
+ android:fromId="@id/visible"
+ android:toId="@id/masked"
+ android:drawable="@drawable/avd_hide_password" />
+
+</animated-selector>
@@ -0,0 +1,86 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+ Copyright 2015 Google Inc.
+
+ 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.
+ -->
+
+<animated-vector
+ xmlns:android="http://schemas.android.com/apk/res/android"
+ xmlns:aapt="http://schemas.android.com/aapt">
+
+ <aapt:attr name="android:drawable">
+
+ <vector
+ android:width="24dp"
+ android:height="24dp"
+ android:viewportWidth="24"
+ android:viewportHeight="24">
+
+ <path
+ android:name="strike_through"
+ android:pathData="@string/path_password_strike_through"
+ android:strokeColor="@android:color/white"
+ android:strokeWidth="1.8"
+ android:strokeLineCap="square"
+ android:trimPathEnd="0" />
+
+ <group>
+
+ <clip-path
+ android:name="eye_mask"
+ android:pathData="@string/path_password_eye_mask_visible" />
+
+ <path
+ android:name="eye"
+ android:fillColor="@android:color/white"
+ android:pathData="@string/path_password_eye" />
+
+ </group>
+
+ </vector>
+
+ </aapt:attr>
+
+ <target android:name="eye_mask">
+
+ <aapt:attr name="android:animation">
+
+ <objectAnimator
+ android:propertyName="pathData"
+ android:valueFrom="@string/path_password_eye_mask_visible"
+ android:valueTo="@string/path_password_eye_mask_strike_through"
+ android:duration="@integer/password_strike"
+ android:interpolator="@android:interpolator/fast_out_slow_in"
+ android:valueType="pathType" />
+
+ </aapt:attr>
+
+ </target>
+
+ <target android:name="strike_through">
+
+ <aapt:attr name="android:animation">
+
+ <objectAnimator
+ android:propertyName="trimPathEnd"
+ android:valueFrom="0"
+ android:valueTo="1"
+ android:duration="@integer/password_strike"
+ android:interpolator="@android:interpolator/fast_out_slow_in" />
+
+ </aapt:attr>
+
+ </target>
+
+</animated-vector>
@@ -0,0 +1,85 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+ Copyright 2015 Google Inc.
+
+ 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.
+ -->
+
+<animated-vector
+ xmlns:android="http://schemas.android.com/apk/res/android"
+ xmlns:aapt="http://schemas.android.com/aapt">
+
+ <aapt:attr name="android:drawable">
+
+ <vector
+ android:width="24dp"
+ android:height="24dp"
+ android:viewportWidth="24"
+ android:viewportHeight="24">
+
+ <path
+ android:name="strike_through"
+ android:pathData="@string/path_password_strike_through"
+ android:strokeColor="@android:color/white"
+ android:strokeWidth="1.8"
+ android:strokeLineCap="square" />
+
+ <group>
+
+ <clip-path
+ android:name="eye_mask"
+ android:pathData="@string/path_password_eye_mask_strike_through" />
+
+ <path
+ android:name="eye"
+ android:fillColor="@android:color/white"
+ android:pathData="@string/path_password_eye" />
+
+ </group>
+
+ </vector>
+
+ </aapt:attr>
+
+ <target android:name="eye_mask">
+
+ <aapt:attr name="android:animation">
+
+ <objectAnimator
+ android:propertyName="pathData"
+ android:valueFrom="@string/path_password_eye_mask_strike_through"
+ android:valueTo="@string/path_password_eye_mask_visible"
+ android:duration="@integer/password_strike"
+ android:interpolator="@android:interpolator/fast_out_slow_in"
+ android:valueType="pathType" />
+
+ </aapt:attr>
+
+ </target>
+
+ <target android:name="strike_through">
+
+ <aapt:attr name="android:animation">
+
+ <objectAnimator
+ android:propertyName="trimPathEnd"
+ android:valueFrom="1"
+ android:valueTo="0"
+ android:duration="@integer/password_strike"
+ android:interpolator="@android:interpolator/fast_out_slow_in" />
+
+ </aapt:attr>
+
+ </target>
+
+</animated-vector>
@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+ Copyright 2016 Google Inc.
+
+ 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.
+ -->
+
+<vector
+ xmlns:android="http://schemas.android.com/apk/res/android"
+ android:width="24dp"
+ android:height="24dp"
+ android:viewportWidth="24"
+ android:viewportHeight="24">
+
+ <path
+ android:pathData="M12,7c2.76,0 5,2.24 5,5 0,0.65 -0.13,1.26 -0.36,1.83l2.92,2.92c1.51,-1.26 2.7,-2.89 3.43,-4.75 -1.73,-4.39 -6,-7.5 -11,-7.5 -1.4,0 -2.74,0.25 -3.98,0.7l2.16,2.16C10.74,7.13 11.35,7 12,7zM2,4.27l2.28,2.28 0.46,0.46C3.08,8.3 1.78,10.02 1,12c1.73,4.39 6,7.5 11,7.5 1.55,0 3.03,-0.3 4.38,-0.84l0.42,0.42L19.73,22 21,20.73 3.27,3 2,4.27zM7.53,9.8l1.55,1.55c-0.05,0.21 -0.08,0.43 -0.08,0.65 0,1.66 1.34,3 3,3 0.22,0 0.44,-0.03 0.65,-0.08l1.55,1.55c-0.67,0.33 -1.41,0.53 -2.2,0.53 -2.76,0 -5,-2.24 -5,-5 0,-0.79 0.2,-1.53 0.53,-2.2zM11.84,9.02l3.15,3.15 0.02,-0.16c0,-1.66 -1.34,-3 -3,-3l-0.17,0.01z"
+ android:fillColor="@android:color/white" />
+
+</vector>
@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+ Copyright 2016 Google Inc.
+
+ 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.
+ -->
+
+<vector
+ xmlns:android="http://schemas.android.com/apk/res/android"
+ android:width="24dp"
+ android:height="24dp"
+ android:viewportWidth="24"
+ android:viewportHeight="24">
+
+ <path
+ android:pathData="@string/path_password_eye"
+ android:fillColor="@android:color/white" />
+
+</vector>
@@ -81,7 +81,9 @@
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="@dimen/spacing_micro"
- app:hintTextAppearance="@style/TextAppearance.FloatLabelHint">
+ app:hintTextAppearance="@style/TextAppearance.FloatLabelHint"
+ app:passwordToggleDrawable="@drawable/asl_password_visibility"
+ app:passwordToggleTint="?colorControlNormal">
<android.support.design.widget.TextInputEditText
android:id="@+id/password"
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+ Copyright 2016 Google Inc.
+
+ 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.
+ -->
+
+<resources>
+
+ <!-- resources used in the password visibility anim, see @drawable/asl_password_visibility -->
+ <string name="path_password_eye_mask_visible">M2,4.27 L2,4.27 L4.54,1.73 L4.54,1.73 L4.54,1 L23,1 L23,23 L1,23 L1,4.27 Z</string>
+ <string name="path_password_eye_mask_strike_through">M2,4.27 L19.73,22 L22.27,19.46 L4.54,1.73 L4.54,1 L23,1 L23,23 L1,23 L1,4.27 Z</string>
+ <string name="path_password_eye">M12,4.5C7,4.5 2.73,7.61 1,12c1.73,4.39 6,7.5 11,7.5s9.27,-3.11 11,-7.5c-1.73,-4.39 -6,-7.5 -11,-7.5zM12,17c-2.76,0 -5,-2.24 -5,-5s2.24,-5 5,-5 5,2.24 5,5 -2.24,5 -5,5zM12,9c-1.66,0 -3,1.34 -3,3s1.34,3 3,3 3,-1.34 3,-3 -1.34,-3 -3,-3z</string>
+ <string name="path_password_strike_through">M3.27,4.27 L19.74,20.74</string>
+ <integer name="password_strike">320</integer>
+
+</resources>

1 comment on commit 68cc1fe

@powder366

What about API 18?

Please sign in to comment.