Skip to content

Commit

Permalink
Fix part oppia#44: Full UI profile pin/password screen. (oppia#597)
Browse files Browse the repository at this point in the history 
* done ui corrections

* fixed issues.

* Update pin_password_activity.xml

* updated color

* updated icon

* updated pinview shadow

* updated icon color

* changed shadow

* updated mock color

* fix

* Update pin_password_activity.xml

* updated nit change.

* Update pin_password_activity.xml

* removed fixed width

* fixed dimen file changes

* Update dimens.xml
  • Loading branch information
@veena14cs @PrarabdhGarg
veena14cs authored and PrarabdhGarg committed Feb 12, 2020
1 parent 9bbd10b commit efd93c9
Show file tree
Hide file tree
Showing 8 changed files with 171 additions and 61 deletions.
20 changes: 14 additions & 6 deletions app/src/main/res/drawable/ic_hide_eye_icon.xml
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,15 @@
<vector android:height="50dp" android:viewportHeight="24"
android:viewportWidth="24" android:width="50dp" xmlns:android="http://schemas.android.com/apk/res/android">
<path android:fillColor="#008577" android:pathData="M12,6.5c3.8,0 7.2,2.1 8.8,5.5c-1.6,3.4 -5,5.5 -8.8,5.5S4.8,15.4 3.2,12C4.8,8.6 8.2,6.5 12,6.5M12,4.5C7,4.5 2.7,7.6 1,12c1.7,4.4 6,7.5 11,7.5s9.3,-3.1 11,-7.5C21.3,7.6 17,4.5 12,4.5zM12,7.5c-2.5,0 -4.5,2 -4.5,4.5s2,4.5 4.5,4.5s4.5,-2 4.5,-4.5S14.5,7.5 12,7.5z"/>
<path android:fillColor="#00000000"
android:pathData="M4,3.9L20,20.1" android:strokeColor="#008577"
android:strokeLineCap="round" android:strokeWidth="2"/>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24"
android:viewportHeight="24">
<path
android:fillColor="#00645C"
android:pathData="M12,6.5c3.8,0 7.2,2.1 8.8,5.5c-1.6,3.4 -5,5.5 -8.8,5.5S4.8,15.4 3.2,12C4.8,8.6 8.2,6.5 12,6.5M12,4.5C7,4.5 2.7,7.6 1,12c1.7,4.4 6,7.5 11,7.5s9.3,-3.1 11,-7.5C21.3,7.6 17,4.5 12,4.5zM12,7.5c-2.5,0 -4.5,2 -4.5,4.5s2,4.5 4.5,4.5s4.5,-2 4.5,-4.5S14.5,7.5 12,7.5z"/>
<path
android:pathData="M4,3.9L20,20.1"
android:strokeWidth="2"
android:fillColor="#00000000"
android:strokeColor="#00645C"
android:strokeLineCap="round"/>
</vector>
11 changes: 8 additions & 3 deletions app/src/main/res/drawable/ic_show_eye_icon.xml
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,9 @@
<vector android:height="50dp" android:viewportHeight="24"
android:viewportWidth="24" android:width="50dp" xmlns:android="http://schemas.android.com/apk/res/android">
<path android:fillColor="#008577" android:pathData="M12,6.5c3.8,0 7.2,2.1 8.8,5.5c-1.6,3.4 -5,5.5 -8.8,5.5S4.8,15.4 3.2,12C4.8,8.6 8.2,6.5 12,6.5M12,4.5C7,4.5 2.7,7.6 1,12c1.7,4.4 6,7.5 11,7.5s9.3,-3.1 11,-7.5C21.3,7.6 17,4.5 12,4.5zM12,7.5c-2.5,0 -4.5,2 -4.5,4.5s2,4.5 4.5,4.5s4.5,-2 4.5,-4.5S14.5,7.5 12,7.5z"/>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24"
android:viewportHeight="24">
<path
android:fillColor="#00645C"
android:pathData="M12,6.5c3.8,0 7.2,2.1 8.8,5.5c-1.6,3.4 -5,5.5 -8.8,5.5S4.8,15.4 3.2,12C4.8,8.6 8.2,6.5 12,6.5M12,4.5C7,4.5 2.7,7.6 1,12c1.7,4.4 6,7.5 11,7.5s9.3,-3.1 11,-7.5C21.3,7.6 17,4.5 12,4.5zM12,7.5c-2.5,0 -4.5,2 -4.5,4.5s2,4.5 4.5,4.5s4.5,-2 4.5,-4.5S14.5,7.5 12,7.5z"/>
</vector>
63 changes: 63 additions & 0 deletions app/src/main/res/drawable/pin_view_background_shadow.xml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<corners android:radius="6dp" />
<solid android:color="@color/mid_grey_03" />
<padding
android:bottom="1dp"
android:left="1dp"
android:right="1dp"
android:top="1dp" />
</shape>
</item>
<item>
<shape>
<corners android:radius="4dp" />
<solid android:color="@color/mid_grey_03" />
<padding
android:bottom="1dp"
android:left="1dp"
android:right="1dp"
android:top="1dp" />
</shape>
</item>
<item>
<shape>
<corners android:radius="4dp" />
<solid android:color="@color/mid_grey_03" />
<padding
android:bottom="1dp"
android:left="1dp"
android:right="1dp"
android:top="1dp" />
</shape>
</item> <item>
<shape>
<corners android:radius="4dp" />
<solid android:color="@color/mid_grey_05" />
<padding
android:bottom="1dp"
android:left="1dp"
android:right="1dp"
android:top="1dp" />
</shape>
</item>
<item>
<shape>
<corners android:radius="4dp" />
<solid android:color="@color/mid_grey_05" />
<padding
android:bottom="1dp"
android:left="1dp"
android:right="1dp"
android:top="1dp" />
</shape>
</item>
<item>
<shape>
<corners android:radius="2dp" />
<solid android:color="@color/white" />
</shape>
</item>
</layer-list>
120 changes: 71 additions & 49 deletions app/src/main/res/layout/pin_password_activity.xml
View file
Original file line number Diff line number Diff line change
@@ -1,113 +1,135 @@
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">

<data>
<import type="android.text.InputType"/>

<import type="android.text.InputType" />

<variable
name="viewModel"
type="org.oppia.app.profile.PinPasswordViewModel" />
</data>

<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/pinPasswordBackground">
android:background="@color/oppiaLightGreen">

<TextView
android:id="@+id/hello_text"
android:id="@+id/hello_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:lines="1"
android:layout_marginStart="28dp"
android:layout_marginTop="96dp"
android:layout_marginEnd="28dp"
android:fontFamily="sans-serif"
android:gravity="center_horizontal"
android:lines="1"
android:text="@{String.format(@string/pin_password_hello, viewModel.profile.name)}"
android:textColor="@color/black"
android:textSize="28sp"
android:layout_marginTop="40dp"
app:layout_constraintTop_toTopOf="parent"
android:textColor="@color/oppiaPrimaryText"
android:textSize="24sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
app:layout_constraintTop_toTopOf="parent" />

<TextView
android:id="@+id/enter_text"
android:id="@+id/enter_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingStart="@dimen/enter_text_view_padding_start"
android:layout_marginTop="8dp"
android:paddingEnd="@dimen/enter_text_view_padding_end"
android:fontFamily="sans-serif"
android:gravity="center_horizontal"
android:text="@{viewModel.profile.isAdmin ? @string/pin_password_admin_enter : @string/pin_password_user_enter}"
android:textColor="@color/black"
android:textSize="24sp"
android:layout_marginTop="12dp"
android:paddingBottom="12dp"
app:layout_constraintTop_toBottomOf="@+id/hello_text"
android:textColor="@color/oppiaPrimaryText"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
app:layout_constraintTop_toBottomOf="@+id/hello_text_view" />

<TextView
android:id="@+id/error_text"
android:id="@+id/pin_password_error_text_view"
android:layout_width="wrap_content"
android:layout_height="24dp"
android:layout_height="wrap_content"
android:text="@{viewModel.showError ? @string/pin_password_incorrect_pin : null}"
android:textColor="@color/red"
android:textSize="20sp"
app:layout_constraintTop_toBottomOf="@+id/enter_text"
android:textColor="@color/oppiaBrown"
android:textSize="16sp"
android:layout_marginTop="24dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
app:layout_constraintTop_toBottomOf="@+id/enter_text_view" />

<com.chaos.view.PinView
android:id="@+id/input_pin"
style="@style/PinWidget.PinView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:cursorVisible="true"
android:inputType="@{viewModel.showPassword ? InputType.TYPE_CLASS_NUMBER : (InputType.TYPE_CLASS_NUMBER | InputType.TYPE_NUMBER_VARIATION_PASSWORD)}"
android:padding="10dp"
android:itemBackground="@color/white"
android:textColor="@color/black"
android:textSize="22sp"
android:textStyle="bold"
android:layout_marginTop="10dp"
app:cursorColor="@color/black"
android:textColor="@color/oppiaPrimaryText"
android:textSize="20sp"
android:fontFamily="sans-serif"
android:layout_marginTop="8dp"
app:cursorColor="@color/oppiaPrimaryText"
app:cursorWidth="2dp"
app:hideLineWhenFilled="false"
app:itemCount="@{viewModel.profile.pin.length()}"
app:itemHeight="48dp"
app:itemRadius="4dp"
app:itemRadius="2dp"
app:itemSpacing="8dp"
app:itemWidth="28dp"
app:lineColor="@color/grey"
app:lineColor="@color/avatarBorder"
app:lineWidth="1dp"
app:viewType="rectangle"
app:layout_constraintTop_toBottomOf="@+id/error_text"
app:layout_constraintTop_toBottomOf="@+id/pin_password_error_text_view"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>

<TextView
android:id="@+id/forgot_pin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:minHeight="48dp"
android:paddingTop="12dp"
android:fontFamily="sans-serif"
android:text="@string/pin_password_forgot_pin"
android:textAllCaps="true"
android:textColor="@color/colorPrimary"
android:textSize="16sp"
app:layout_constraintTop_toBottomOf="@+id/input_pin"
android:textSize="14sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
app:layout_constraintTop_toBottomOf="@+id/input_pin" />

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginStart="10dp"
android:gravity="center"
android:id="@+id/show_pin"
app:layout_constraintTop_toTopOf="@+id/input_pin"
android:layout_width="48dp"
android:layout_height="48dp"
android:orientation="vertical"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
app:layout_constraintBottom_toBottomOf="@+id/input_pin"
app:layout_constraintStart_toEndOf="@+id/input_pin">
app:layout_constraintStart_toEndOf="@+id/input_pin"
app:layout_constraintTop_toTopOf="@+id/input_pin">

<ImageView
android:layout_width="36dp"
android:layout_height="36dp"
android:src="@{viewModel.showPassword ? @drawable/ic_hide_eye_icon : @drawable/ic_show_eye_icon}"/>
android:layout_width="32dp"
android:layout_height="32dp"
android:layout_gravity="center_horizontal"
android:src="@{viewModel.showPassword ? @drawable/ic_hide_eye_icon : @drawable/ic_show_eye_icon}"
android:contentDescription="@string/show_hide_password_icon" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="-2dp"
android:layout_height="match_parent"
android:fontFamily="sans-serif"
android:text="@{viewModel.showPassword ? @string/pin_password_hide : @string/pin_password_show}"
android:textAllCaps="true"
android:textSize="12sp"
android:textColor="@color/colorPrimary"/>
android:layout_gravity="center_horizontal"
android:textColor="@color/colorPrimary"
android:textSize="12sp" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</layout>
5 changes: 5 additions & 0 deletions app/src/main/res/values-xhdpi/dimens.xml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
<?xml version="1.0" encoding="utf-8"?>
<resources>
<dimen name="enter_text_view_padding_start">120dp</dimen>
<dimen name="enter_text_view_padding_end">120dp</dimen>
</resources>
4 changes: 4 additions & 0 deletions app/src/main/res/values/colors.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,9 @@
<color name="editTextError">#AB0517</color>
<color name="editTextHint">#80333333</color>
<color name="mid_grey">#ff333333</color>
<color name="mid_grey_05">#0D000000</color>
<color name="mid_grey_03">#03000000</color>
<color name="mid_grey_30">#0D000000</color>
<color name="blue_shade">#395FD0</color>
<color name="blue_shade_80">#80395FD0</color>
<color name="blue_shade_60">#60395FD0</color>
Expand All @@ -65,6 +68,7 @@
<color name="grey_shade_20">#D6D6D6</color>
<color name="grey_shade_30">#5CBABABA</color>
<color name="grey_shade_40">#0000003D</color>
<color name="grey_shade_29">#4A000000</color>
<color name="blue_shade_100">#0F0086FB</color>
<color name="blue_shade_200">#6B0086FB</color>
<color name="chapterCardShadow">#AAFFFFFF</color>
Expand Down
2 changes: 2 additions & 0 deletions app/src/main/res/values/dimens.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,4 +22,6 @@
<dimen name="padding_20">20dp</dimen>
<dimen name="margin_32">32dp</dimen>
<dimen name="margin_8">8dp</dimen>
<dimen name="enter_text_view_padding_start">60dp</dimen>
<dimen name="enter_text_view_padding_end">60dp</dimen>
</resources>
7 changes: 4 additions & 3 deletions app/src/main/res/values/strings.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -147,9 +147,9 @@
<string name="add_profile_error_pin_confirm_wrong">Please make sure that both PINs match.</string>
<!-- PinPasswordActivity -->
<string name="pin_password_hello">Hi, %s!</string>
<string name="pin_password_admin_enter">Please enter your \nAdministrator PIN</string>
<string name="pin_password_user_enter">Please enter your PIN</string>
<string name="pin_password_forgot_pin">I forgot my pin</string>
<string name="pin_password_admin_enter">Please enter your Administrator PIN.</string>
<string name="pin_password_user_enter">Please enter your PIN.</string>
<string name="pin_password_forgot_pin">I forgot my pin.</string>
<string name="pin_password_incorrect_pin">Incorrect PIN.</string>
<string name="pin_password_show">show</string>
<string name="pin_password_hide">hide</string>
Expand All @@ -158,6 +158,7 @@
<string name="pin_password_forgot_title">Forgot PIN?</string>
<string name="pin_password_forgot_message">To reset your PIN, please uninstall Oppia and then reinstall it.\n\nKeep in mind that if the device has not been online, you may lose user progress on multiple accounts. </string>
<string name="pin_password_play_store">Go to the play store</string>
<string name="show_hide_password_icon">Show/Hide password icon</string>
<!-- AdminSettingsDialogFragment -->
<string name="admin_settings_label">Administrator\'s PIN</string>
<string name="admin_settings_heading">Access to Administrator Settings</string>
Expand Down

0 comments on commit efd93c9

Please sign in to comment.