Skip to content

Commit

Permalink
Add custom styles for focused components
Browse files Browse the repository at this point in the history
  • Loading branch information
lbalmaceda committed Oct 6, 2017
1 parent f6e34d9 commit f5745d7
Show file tree
Hide file tree
Showing 13 changed files with 187 additions and 89 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -228,6 +228,7 @@ private void showPasswordlessLock() {
private Auth0 getAccount() {
Auth0 account = new Auth0(getString(R.string.com_auth0_client_id), getString(R.string.com_auth0_domain));
account.setOIDCConformant(true);
account.setLoggingEnabled(true);
return account;
}

Expand Down
114 changes: 114 additions & 0 deletions lib/src/main/java/com/auth0/android/lock/views/ImageCheckbox.java
Original file line number Diff line number Diff line change
@@ -0,0 +1,114 @@
package com.auth0.android.lock.views;

import android.content.Context;
import android.graphics.Rect;
import android.graphics.drawable.Drawable;
import android.support.annotation.Nullable;
import android.support.v4.content.ContextCompat;
import android.support.v4.view.AccessibilityDelegateCompat;
import android.support.v4.view.ViewCompat;
import android.support.v4.view.accessibility.AccessibilityEventCompat;
import android.support.v4.view.accessibility.AccessibilityNodeInfoCompat;
import android.support.v7.widget.AppCompatImageButton;
import android.util.AttributeSet;
import android.view.View;
import android.view.accessibility.AccessibilityEvent;
import android.widget.Checkable;
import android.widget.ImageButton;

import com.auth0.android.lock.R;

/**
* A custom CheckBox implementation that doesn't have a TextView next to the ImageView, and changes the background drawable when focused.
*/
public class ImageCheckbox extends AppCompatImageButton implements Checkable {

private static final int[] DRAWABLE_STATE_CHECKED = new int[]{android.R.attr.state_checked};
private final Drawable focusedBackground;

private boolean mChecked;
private OnCheckedChangeListener checkedChangedListener;

public ImageCheckbox(Context context) {
this(context, null);
}

public ImageCheckbox(Context context, AttributeSet attrs) {
this(context, attrs, android.support.v7.appcompat.R.attr.imageButtonStyle);
}

public ImageCheckbox(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);

ViewCompat.setAccessibilityDelegate(this, new AccessibilityDelegateCompat() {
@Override
public void onInitializeAccessibilityEvent(View host, AccessibilityEvent event) {
super.onInitializeAccessibilityEvent(host, event);
event.setChecked(isChecked());
}

@Override
public void onInitializeAccessibilityNodeInfo(View host, AccessibilityNodeInfoCompat info) {
super.onInitializeAccessibilityNodeInfo(host, info);
info.setCheckable(true);
info.setChecked(isChecked());
}
});
setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
toggle();
}
});
ViewUtils.setBackground(this, null);
focusedBackground = ContextCompat.getDrawable(getContext(), R.drawable.com_auth0_lock_link_background);
}


@Override
public void setChecked(boolean checked) {
if (mChecked != checked) {
mChecked = checked;
refreshDrawableState();
sendAccessibilityEvent(AccessibilityEventCompat.TYPE_WINDOW_CONTENT_CHANGED);
if (checkedChangedListener != null) {
checkedChangedListener.onCheckedChanged(this, checked);
}
}
}

@Override
public boolean isChecked() {
return mChecked;
}

@Override
public void toggle() {
setChecked(!mChecked);
}

@Override
public int[] onCreateDrawableState(int extraSpace) {
if (mChecked) {
return mergeDrawableStates(super.onCreateDrawableState(extraSpace + DRAWABLE_STATE_CHECKED.length), DRAWABLE_STATE_CHECKED);
} else {
return super.onCreateDrawableState(extraSpace);
}
}

@Override
protected void onFocusChanged(boolean gainFocus, int direction, @Nullable Rect previouslyFocusedRect) {
super.onFocusChanged(gainFocus, direction, previouslyFocusedRect);
ViewUtils.setBackground(this, gainFocus ? focusedBackground : null);
}

void setOnCheckedChangeListener(OnCheckedChangeListener listener) {
checkedChangedListener = listener;
}

interface OnCheckedChangeListener {
void onCheckedChanged(ImageButton view, boolean isChecked);
}

}

42 changes: 42 additions & 0 deletions lib/src/main/java/com/auth0/android/lock/views/LinkTextView.java
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
package com.auth0.android.lock.views;

import android.content.Context;
import android.graphics.Rect;
import android.graphics.drawable.Drawable;
import android.support.annotation.Nullable;
import android.support.v4.content.ContextCompat;
import android.util.AttributeSet;

import com.auth0.android.lock.R;

/**
* A custom AppCompatTextView implementation that changes the background drawable when focused.
*/
public class LinkTextView extends android.support.v7.widget.AppCompatTextView {
private Drawable focusedBackground;

public LinkTextView(Context context) {
super(context);
init();
}

public LinkTextView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}

public LinkTextView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}

private void init() {
focusedBackground = ContextCompat.getDrawable(getContext(), R.drawable.com_auth0_lock_link_background);
}

@Override
protected void onFocusChanged(boolean gainFocus, int direction, @Nullable Rect previouslyFocusedRect) {
super.onFocusChanged(gainFocus, direction, previouslyFocusedRect);
ViewUtils.setBackground(this, gainFocus ? focusedBackground : null);
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,6 @@
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Typeface;
import android.graphics.drawable.ColorDrawable;
import android.graphics.drawable.Drawable;
import android.graphics.drawable.GradientDrawable;
import android.os.Handler;
Expand All @@ -36,7 +35,6 @@
import android.support.annotation.IntDef;
import android.support.annotation.StringRes;
import android.support.v4.content.ContextCompat;
import android.support.v7.widget.AppCompatCheckBox;
import android.text.Editable;
import android.text.InputType;
import android.text.TextWatcher;
Expand All @@ -46,8 +44,8 @@
import android.util.Patterns;
import android.view.View;
import android.view.ViewGroup;
import android.widget.CompoundButton;
import android.widget.EditText;
import android.widget.ImageButton;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
Expand Down Expand Up @@ -84,7 +82,7 @@ public class ValidatedInputView extends LinearLayout {
private TextView errorDescription;
private EditText input;
private ImageView icon;
private AppCompatCheckBox showPasswordToggle;
private ImageCheckbox showPasswordToggle;
private IdentityListener identityListener;
private int inputIcon;
private boolean hasValidInput;
Expand Down Expand Up @@ -129,7 +127,7 @@ private void init(AttributeSet attrs) {
errorDescription = (TextView) findViewById(R.id.errorDescription);
icon = (ImageView) findViewById(R.id.com_auth0_lock_icon);
input = (EditText) findViewById(R.id.com_auth0_lock_input);
showPasswordToggle = (AppCompatCheckBox) findViewById(R.id.com_auth0_lock_show_password_toggle);
showPasswordToggle = (ImageCheckbox) findViewById(R.id.com_auth0_lock_show_password_toggle);

if (attrs == null || isInEditMode()) {
return;
Expand All @@ -145,20 +143,20 @@ private void init(AttributeSet attrs) {
updateBorder(true);

setNextFocusRightId(R.id.com_auth0_lock_show_password_toggle);
showPasswordToggle.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
showPasswordToggle.setOnCheckedChangeListener(new ImageCheckbox.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
public void onCheckedChanged(ImageButton view, boolean isChecked) {
if (dataType != PASSWORD) {
return;
}
String passwordValue = input.getText().toString();
if (isChecked) {
input.setInputType(InputType.TYPE_CLASS_TEXT | InputType.TYPE_TEXT_VARIATION_VISIBLE_PASSWORD);
buttonView.setButtonDrawable(R.drawable.com_auth0_lock_ic_password_visible);
view.setImageResource(R.drawable.com_auth0_lock_ic_password_visible);
} else {
input.setInputType(InputType.TYPE_CLASS_TEXT | InputType.TYPE_TEXT_VARIATION_PASSWORD);
input.setTransformationMethod(PasswordTransformationMethod.getInstance());
buttonView.setButtonDrawable(R.drawable.com_auth0_lock_ic_password_hidden);
view.setImageResource(R.drawable.com_auth0_lock_ic_password_hidden);
}
setText(passwordValue);
input.setTypeface(Typeface.DEFAULT);
Expand Down Expand Up @@ -331,9 +329,7 @@ private void createBackground() {
Drawable leftBackground = ViewUtils.getRoundedBackground(getResources(), ContextCompat.getColor(getContext(), R.color.com_auth0_lock_input_field_border_normal), ViewUtils.Corners.ONLY_LEFT);
Drawable rightBackground = ViewUtils.getRoundedBackground(getResources(), inputBackgroundColor, ViewUtils.Corners.ONLY_RIGHT);
ViewUtils.setBackground(icon, leftBackground);
ViewUtils.setBackground(input, dataType == PASSWORD ? new ColorDrawable(inputBackgroundColor) : rightBackground);
ViewUtils.setBackground(showPasswordToggle, rightBackground);

ViewUtils.setBackground((ViewGroup) input.getParent(), rightBackground);
}

@Override
Expand Down
28 changes: 0 additions & 28 deletions lib/src/main/res/color/com_auth0_lock_checkbox.xml

This file was deleted.

29 changes: 0 additions & 29 deletions lib/src/main/res/color/com_auth0_lock_text_link.xml

This file was deleted.

5 changes: 5 additions & 0 deletions lib/src/main/res/drawable/com_auth0_lock_link_background.xml
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="@color/com_auth0_lock_link_focused" />
<corners android:radius="@dimen/com_auth0_lock_widget_corner_radius" />
</shape>
Original file line number Diff line number Diff line change
Expand Up @@ -68,13 +68,13 @@
style="@style/Lock.Theme.Text.LinkSent"
android:text="@string/com_auth0_lock_title_passwordless_link_sent" />

<TextView
<com.auth0.android.lock.views.LinkTextView
android:id="@+id/com_auth0_lock_got_code"
style="@style/Lock.Theme.Text.Link"
android:nextFocusDown="@+id/com_auth0_lock_resend"
android:text="@string/com_auth0_lock_title_passwordless_got_code" />

<TextView
<com.auth0.android.lock.views.LinkTextView
android:id="@+id/com_auth0_lock_resend"
style="@style/Lock.Theme.Text.Link"
android:nextFocusUp="@+id/com_auth0_lock_got_code"
Expand Down
2 changes: 1 addition & 1 deletion lib/src/main/res/layout/com_auth0_lock_error_layout.xml
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
android:layout_marginTop="@dimen/com_auth0_lock_widget_vertical_margin_password_strength"
tools:text="@string/com_auth0_lock_unrecoverable_error_subtitle_without_action" />

<TextView
<com.auth0.android.lock.views.LinkTextView
android:id="@+id/com_auth0_lock_error_action"
style="@style/Lock.Theme.Text.ErrorLink"
android:layout_below="@+id/com_auth0_lock_error_subtitle"
Expand Down
4 changes: 1 addition & 3 deletions lib/src/main/res/layout/com_auth0_lock_login_form_view.xml
Original file line number Diff line number Diff line change
Expand Up @@ -66,12 +66,10 @@
android:layout_marginTop="@dimen/com_auth0_lock_widget_vertical_margin_field"
android:visibility="gone" />

<TextView
<com.auth0.android.lock.views.LinkTextView
android:id="@+id/com_auth0_lock_change_password_btn"
style="@style/Lock.Theme.Text.Link"
android:layout_below="@id/com_auth0_lock_input_password"
android:focusable="true"
android:focusableInTouchMode="false"
android:text="@string/com_auth0_lock_action_forgot_password" />

</RelativeLayout>
11 changes: 5 additions & 6 deletions lib/src/main/res/layout/com_auth0_lock_validated_input_view.xml
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@
-->

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/com_auth0_lock_container"
android:layout_width="match_parent"
Expand Down Expand Up @@ -56,15 +55,15 @@
android:layout_marginRight="@dimen/com_auth0_lock_input_field_stroke_width"
android:layout_marginTop="@dimen/com_auth0_lock_input_field_stroke_width">

<android.support.v7.widget.AppCompatCheckBox
<com.auth0.android.lock.views.ImageCheckbox
android:id="@+id/com_auth0_lock_show_password_toggle"
style="@style/Lock.Theme.Widget.Icon.PasswordVisibilityToggle"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:button="@drawable/com_auth0_lock_ic_password_hidden"
android:checked="true"
app:buttonTint="@color/com_auth0_lock_checkbox"
tools:ignore="MissingPrefix,RtlHardcoded" />
android:layout_marginEnd="9dp"
android:layout_marginRight="9dp"
android:checked="true" />

<EditText
android:id="@+id/com_auth0_lock_input"
Expand Down
3 changes: 1 addition & 2 deletions lib/src/main/res/values/colors.xml
Original file line number Diff line number Diff line change
Expand Up @@ -96,8 +96,7 @@

<!-- Focus State Colors -->
<color name="com_auth0_lock_input_field_border_focused">#a4000000</color>
<color name="com_auth0_lock_clickable_view_focused">#D8D8D8</color>
<color name="com_auth0_lock_link_focused">#D8D8D8</color>
<color name="com_auth0_lock_tab_focused">#F9F9F9</color>
<color name="com_auth0_lock_submit_focused">#a4ec5210</color>

</resources>
Loading

0 comments on commit f5745d7

Please sign in to comment.