7

is it possible to change the color of the underline from a EditText dynamically? Like the effect, when i focus it, then it turns into blue.

Hope you understand what i want to do.

R.Z
  • 97
  • 2
  • 6

3 Answers3

4

Create your own customized EditText control.

Here's an example that I made just for you:

When selected, you just have to change mPaint.setColor(Color.GREEN); to another color

public class CustomEditText extends EditText {
    private Rect mRect;
    private Paint mPaint;
    int widthMsSize;
    int heightMsSize;
    // we need this constructor for LayoutInflater
    public CustomEditText(Context context, AttributeSet attrs) {
        super(context, attrs);
        mPaint = new Paint();
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeWidth(5);
        mPaint.setColor(Color.GREEN);
        System.out.println("constructor");
    }
    protected void onMeasure(final int widthMeasureSpec,
        final int heightMeasureSpec) {
        // Extract the Ms (MesaureSpec) parameters
        widthMsSize = MeasureSpec.getSize(widthMeasureSpec);
        heightMsSize = MeasureSpec.getSize(heightMeasureSpec);
        System.out.println("on measure");
        // Satisfy contract by calling setMeasuredDimension
        setMeasuredDimension(widthMsSize,
            heightMsSize);
    }
    protected void onDraw(Canvas canvas) {
        canvas.drawLine(5, heightMsSize - 10, widthMsSize - 5, heightMsSize - 10, mPaint); //draw underline
        canvas.drawLine(8, heightMsSize - 10, 8, heightMsSize - 20, mPaint); //draw left corner
        canvas.drawLine(widthMsSize - 8, heightMsSize - 10, widthMsSize - 8, heightMsSize - 20, mPaint); //draw right corner
        super.onDraw(canvas);
    }
}

main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <com.example.testanimationfadeinfadeout.CustomEditText
        android:id="@+id/textedit"
        android:layout_width="228dp"
        android:layout_height="41dp"
        android:ems="10"
        android:hint="color is changed" />

</LinearLayout>
Milo
  • 3,365
  • 9
  • 30
  • 44
Frank
  • 790
  • 5
  • 10
  • Wow, Thanx for this fast and helpful post! Just one more (stupid) question. If i want to add a CustomEditText dynamically in my project, what should i put for the AttributeSet? Nice evening, thanx so much and sorry for the bad english ;) – R.Z Nov 05 '12 at 20:34
  • hi again! The AttributeSet is the properties you have declared inside your xml like android:hint , etc. If you don't need it, you have to use public CustomEditText (Context context) { super(context); ... } as your constructor ps: there is no stupid question on stackoverflow! :) – Frank Nov 05 '12 at 20:59
  • Hi for the third time! I've got a new problem now. I don't get any EditText on my Layout. Do i have to overwrite some function like getDraw or someting which uses the Layout? My Code:`layout = (LinearLayout)findViewById(R.id.main_layout); CustomEditText customET = new CustomEditText(this); //getApplicationContext(); doesnt work too. customET.setText(text); customET.setLayoutParams(new LayoutParams( LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT)); layout.addView(customET);` Have you got any idea what could be the problem? – R.Z Nov 05 '12 at 21:31
2
public static void setEditTextUnderlineColor(final EditText editText, final int focusedColor, final int unfocusedColor) {
    editText.setOnFocusChangeListener(new View.OnFocusChangeListener() {
        @Override
        public void onFocusChange(View v, boolean hasFocus) {
            if (hasFocus) {
                editText.getBackground().setColorFilter(focusedColor, PorterDuff.Mode.SRC_ATOP);
                return;
            }
            editText.getBackground().setColorFilter(unfocusedColor, PorterDuff.Mode.SRC_ATOP);
        }
    });

    editText.getBackground().setColorFilter(unfocusedColor, PorterDuff.Mode.SRC_ATOP);
SIr Codealot
  • 5,331
  • 9
  • 33
  • 45
0

To customize edit Text I did the following way. It worked for me pretty simple way.

public class CardNumberText extends EditText {

    boolean isFocus;
    Paint mPaint;
    Rect mRect;
    int widthSize, heightSize;

    public CardNumberText(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);

        initStyle();

    }

    private void initStyle() {
        mRect = new Rect();
        mPaint = new Paint();
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setColor(Color.parseColor("#B3B3B3"));
    }

    public CardNumberText(Context context, AttributeSet attrs) {
        super(context, attrs);

        initStyle();
    }

    public CardNumberText(Context context) {
        super(context);

        initStyle();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        Rect rect = mRect;
        Paint paint = mPaint;
        if (isFocus) {
            mPaint.setStrokeWidth(3.0f);
            mPaint.setColor(Color.parseColor("#80CBC4"));
        } else {
            mPaint.setStrokeWidth(1.5f);
            mPaint.setColor(Color.parseColor("#B3B3B3"));
        }
        for (int i = 0; i < getLineCount(); i++) {
            int baseline = getLineBounds(i, rect);
            canvas.drawLine(rect.left, baseline + 20, rect.right, baseline,
                    paint);
        }

    }

    @Override
    protected void onFocusChanged(boolean focused, int direction,
            Rect previouslyFocusedRect) {
        super.onFocusChanged(focused, direction, previouslyFocusedRect);
        if (focused) {
            isFocus = true;
        } else {
            isFocus = false;
        }
    }
}
Akshay Mukadam
  • 2,388
  • 1
  • 27
  • 40