rapid3642 rapid3642 - 2 months ago 49
Android Question

Android change color of error validation text field

If you take a look at the picture you can see the error text AND the text field go purple when I use setError() on the text field. I would like to make this RED like its supposed to be, does anyone know how to change this?

Purple text field

RegisterActivity

public class RegisterActivity extends AppCompatActivity {
private static final String TAG = "RegisterActivity";

@InjectView(R.id.nameWrapper) TextInputLayout _nameWrapper;
@InjectView(R.id.input_name) EditText _nameText;
@InjectView(R.id.input_email) EditText _emailText;
@InjectView(R.id.input_password) EditText _passwordText;
@InjectView(R.id.fragment_login_password_visibility) ImageView _passwordToggle;
@InjectView(R.id.fragment_login_confirm_password_visibility) ImageView _confirmPasswordToggle;
@InjectView(R.id.input_confirmPassword) EditText _confirmPasswordText;
@InjectView(R.id.btn_signup) Button _signupButton;
@InjectView(R.id.link_login) TextView _loginLink;


@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_register);
ButterKnife.inject(this);
//_passwordToggle.setVisibility(View.GONE);
//_confirmPasswordToggle.setVisibility(View.GONE);

_signupButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
signup();
}
});

_loginLink.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// Finish the registration screen and return to the Login activity
finish();
}
});

_passwordText.addTextChangedListener(new TextWatcher() {
@Override
public void beforeTextChanged(CharSequence s, int start, int count, int after) {
//_passwordToggle.setVisibility(s.length() > 0 ? View.VISIBLE : View.GONE);
}

@Override
public void onTextChanged(CharSequence s, int start, int before, int count) {
}

@Override
public void afterTextChanged(Editable s) {
//_passwordToggle.setVisibility(s.length() > 0 ? View.VISIBLE : View.GONE);
}
});
_passwordToggle.setOnTouchListener(mPasswordVisibleTouchListener);

_confirmPasswordText.addTextChangedListener(new TextWatcher() {
@Override
public void beforeTextChanged(CharSequence s, int start, int count, int after) {
//_passwordToggle.setVisibility(s.length() > 0 ? View.VISIBLE : View.GONE);
}

@Override
public void onTextChanged(CharSequence s, int start, int before, int count) {
}

@Override
public void afterTextChanged(Editable s) {
//_confirmPasswordToggle.setVisibility(s.length() > 0 ? View.VISIBLE : View.GONE);
}
});
_confirmPasswordToggle.setOnTouchListener(mConfirmPasswordVisibleTouchListener);
}

private View.OnTouchListener mPasswordVisibleTouchListener = new View.OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
final boolean isOutsideView = event.getX() < 0 ||
event.getX() > v.getWidth() ||
event.getY() < 0 ||
event.getY() > v.getHeight();

// change input type will reset cursor position, so we want to save it
final int cursor = _passwordText.getSelectionStart();

if (isOutsideView || MotionEvent.ACTION_UP == event.getAction())
_passwordText.setInputType( InputType.TYPE_CLASS_TEXT |
InputType.TYPE_TEXT_VARIATION_PASSWORD);
else
_passwordText.setInputType( InputType.TYPE_CLASS_TEXT |
InputType.TYPE_TEXT_VARIATION_VISIBLE_PASSWORD);

_passwordText.setSelection(cursor);
return true;
}
};

private View.OnTouchListener mConfirmPasswordVisibleTouchListener = new View.OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
final boolean isOutsideView = event.getX() < 0 ||
event.getX() > v.getWidth() ||
event.getY() < 0 ||
event.getY() > v.getHeight();

// change input type will reset cursor position, so we want to save it
final int cursor = _confirmPasswordText.getSelectionStart();

if (isOutsideView || MotionEvent.ACTION_UP == event.getAction())
_confirmPasswordText.setInputType( InputType.TYPE_CLASS_TEXT |
InputType.TYPE_TEXT_VARIATION_PASSWORD);
else
_confirmPasswordText.setInputType( InputType.TYPE_CLASS_TEXT |
InputType.TYPE_TEXT_VARIATION_VISIBLE_PASSWORD);

_confirmPasswordText.setSelection(cursor);
return true;
}
};

public void signup() {
Log.d(TAG, "Begin Signup process...");

if (!validate()) {
onSignupFailed();
return;
}

_signupButton.setEnabled(false);

final ProgressDialog signupProgressDialog = new ProgressDialog(RegisterActivity.this,
R.style.Theme_IAPTheme);
signupProgressDialog.setIndeterminate(true);
signupProgressDialog.setMessage("Creating Account...");
signupProgressDialog.show();

String name = _nameText.getText().toString();
String email = _emailText.getText().toString();
String password = _passwordText.getText().toString();
String confirmPassword = _confirmPasswordText.getText().toString();

// TODO: Implement your own signup logic here.

Response.Listener<String> responseListener = new Response.Listener<String>() {
@Override
public void onResponse(String response) {
try {
Log.i("tagconvertstr", "["+response+"]");
JSONObject jsonResponse = new JSONObject(response);
boolean success = jsonResponse.getBoolean("success");
if (success) {
onSignupSuccess();
} else {
onSignupFailed();
}
} catch (JSONException e) {
e.printStackTrace();
}
}
};

RegisterRequest registerRequest = new RegisterRequest(name, email, password, responseListener);
RequestQueue queue = Volley.newRequestQueue(RegisterActivity.this);
queue.add(registerRequest);

/*new android.os.Handler().postDelayed(
new Runnable() {
public void run() {

// On complete call either onSignupSuccess or onSignupFailed
// depending on success
onSignupSuccess();
// onSignupFailed();
progressDialog.dismiss();
}
}, 3000);*/
}

public void onSignupSuccess() {
Toast.makeText(getBaseContext(), "Signup Successful", Toast.LENGTH_LONG).show();
_signupButton.setEnabled(true);
setResult(RESULT_OK, null);
finish();
}

public void onSignupFailed() {
Toast.makeText(getBaseContext(), "Signup Failed", Toast.LENGTH_LONG).show();
_signupButton.setEnabled(true);
}

public boolean validate() {
boolean valid = true;

Drawable errorIcon = getResources().getDrawable(R.drawable.eye);
errorIcon.setBounds(new Rect(0, 0, 100, 100));


String name = _nameText.getText().toString();
String email = _emailText.getText().toString();
String password = _passwordText.getText().toString();
String confirmPassword = _confirmPasswordText.getText().toString();

//Trainer Name validation
if (name.isEmpty() || name.length() < 3) {
_nameWrapper.setError("enter at least 3 characters");
_nameWrapper.setErrorEnabled(true);
valid = false;
} else {
_nameWrapper.setError(null);
}

//E-Mail validation
if (email.isEmpty() || !android.util.Patterns.EMAIL_ADDRESS.matcher(email).matches()) {
_emailText.setError("enter a valid email address");
valid = false;
} else {
_emailText.setError(null);
}

//Password validation
if (password.isEmpty() || password.length() < 4 || password.length() > 10) {
_passwordText.setError("between 4 and 20 alphanumeric characters");
valid = false;
}else {
_passwordText.setError(null);
}

//Confirm Password validation
if (password.equals(confirmPassword)){
_confirmPasswordText.setError(null);
}else {
_confirmPasswordText.setError("passwords do not match");
valid = false;
}

return valid;
}
}


activity_register.xml

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android.support.design="http://schemas.android.com/tools"
android:fitsSystemWindows="true"
android:background="@color/black">

<!-- Start of Grid Layout -->
<GridLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="56dp"
android:paddingLeft="24dp"
android:paddingRight="24dp"
android:orientation="vertical">

<!-- Logo Icon at the top of the app -->
<ImageView android:src="@drawable/logo"
android:layout_height="72dp"
android:layout_marginBottom="24dp"
android:layout_column="0"
android:layout_row="0"
android:layout_columnSpan="2" />

<!-- Name Text Field -->
<android.support.design.widget.TextInputLayout
android:id="@+id/nameWrapper"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:layout_column="0"
android:layout_row="1"
android:layout_gravity="fill_horizontal"
android:layout_columnSpan="2">
<android.support.design.widget.TextInputEditText
android:id="@+id/input_name"
android:theme="@style/MyEditTextTheme"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textCapWords"
android:hint="Trainer Name (Gamer Tag)" />
</android.support.design.widget.TextInputLayout>

<!-- Email Text Field -->
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:textColor="#ffffff"
android:textColorHint="#ffffff"
android:layout_column="0"
android:layout_row="3"
android:layout_gravity="fill_horizontal"
android:layout_columnSpan="2">
<EditText android:id="@+id/input_email"
android:theme="@style/MyEditTextTheme"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:maxLength="60"
android:inputType="textEmailAddress"
android:hint="E-Mail Address" />
</android.support.design.widget.TextInputLayout>

<!-- Password Text Field -->

<android.support.design.widget.TextInputLayout
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:textColor="#ffffff"
app:passwordToggleEnabled="false"
android:textColorHint="#ffffff"
android:layout_column="0"
android:layout_row="4"
android:layout_gravity="fill_horizontal">
<EditText android:id="@+id/input_password"
android:theme="@style/MyEditTextTheme"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:maxLength="20"
android:inputType="textPassword"
android:hint="Password" />
</android.support.design.widget.TextInputLayout>

<!-- Confirm Password Text Field -->
<android.support.design.widget.TextInputLayout
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:textColor="#ffffff"
app:passwordToggleEnabled="false"
android:textColorHint="#ffffff"
android:layout_column="0"
android:layout_row="5"
android:layout_gravity="fill_horizontal">
<EditText android:id="@+id/input_confirmPassword"
android:theme="@style/MyEditTextTheme"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:maxLength="20"
android:inputType="textPassword"
android:hint="Confirm Password"/>
</android.support.design.widget.TextInputLayout>

<!-- Signup Button -->
<android.support.v7.widget.AppCompatButton
android:id="@+id/btn_signup"
android:gravity="fill_horizontal"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
android:layout_marginBottom="24dp"
android:padding="12dp"
android:text="Create Account"
android:layout_column="0"
android:layout_row="6"
android:layout_columnSpan="2"
android:layout_gravity="fill_horizontal"
android:textAlignment="center" />

<!-- Link to Login Activity -->
<TextView android:id="@+id/link_login"
android:gravity="fill_horizontal"
android:layout_height="wrap_content"
android:layout_marginBottom="24dp"
android:text="Already a member? Login"
android:textColor="#ffffff"
android:textSize="16dip"
android:layout_column="0"
android:layout_row="7"
android:layout_columnSpan="2"
android:layout_gravity="fill_horizontal"
android:textAlignment="center" />

<!-- Password Toggle Icon for Password field -->
<ImageView
android:id="@+id/fragment_login_password_visibility"
android:layout_width="24dp"
android:layout_height="24dp"
android:clickable="true"
android:src="@drawable/eye"
android:layout_row="4"
android:layout_column="1"
android:foregroundGravity="center_vertical"
android:layout_gravity="center_vertical" />

<!-- Password Toggle Icon for Confirm Password field -->
<ImageView
android:id="@+id/fragment_login_confirm_password_visibility"
android:layout_width="24dp"
android:layout_height="24dp"
android:clickable="true"
android:src="@drawable/eye"
android:layout_row="5"
android:layout_column="1"
android:foregroundGravity="center_vertical"
android:layout_gravity="center_vertical" />

</GridLayout>
</ScrollView>


strings.xml

<resources xmlns:android="http://schemas.android.com/tools" xmlns:app="urn:oasis:names:tc:xliff:document:1.2">
<string name="title_activity_maps">Map</string>
<!--CODE FOR BUTTON OVERLAY-->
<string name="Popular"></string>
<string name="AZ"></string>
<string name="Category"></string>
<string name="NearBy"></string>
<color name="bg_color">#ffffff</color>
<color name="black">#222222</color>
<color name="white">#ffffff</color>
<style name="MyEditTextTheme">
<item name="colorControlNormal">#ffffff</item>
<item name="colorControlActivated">#ffffff</item>
<item name="colorControlHighlight">#ffffff</item>
<item name="colorAccent">@android:color/white</item>
<item name="android:textColor">#ffffff</item>
<item name="android:textColorHint">#ffffff</item>
</style>
</resources>

Answer

In your styles.xml file, you can create a custom style which uses @android:style/TextAppearance

<style name="error_appearance" parent="@android:style/TextAppearance">
    <item name="android:textColor">@color/red_500</item>
    <item name="android:textSize">12sp</item>
</style>

And use it in your TextInputLayout widget:

<android.support.design.widget.TextInputLayout
            android:id="@+id/emailInputLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:errorTextAppearance="@style/error_appearance">

Alternatively, you can modify your theme to change textColorError

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="colorControlNormal">@color/control_normal</item>
    <item name="colorControlActivated">@color/control_activated</item>
    <item name="textColorError">@color/error</item>
    <!-- other styles... -->
</style>

and use in your AndroidManifest.xml:

<application
    android:theme="@style/AppTheme"
    android:icon="@drawable/ic_launcher"
    android:label="@string/app_name">

    <!-- ... -->

</application>
Comments