CODEWITHSUNDEEP
javaandroidandroid-layout
Krrish
Krrish

Reputation: 281

How to make android edittext style with corner radius and a start color for it?

How to do this in android ? Is it possible using some selector designs? I have one option that I can use a icon for this and set it as drawableLeft but without using the icon how can I achieve this please guide me in good direction

How to do this in android ? Is it possible using some selector designs? I have one option that I can use a icon for this and set it as drawableLeft but without using the icon how can I achieve this please guide me in good direction

Upvotes: 0

Views: 89

Answers (2)

Jahnold
Jahnold

Reputation: 7683

You could achieve this with a custom Drawable. Something like:

public class BackgroundColorDrawable extends Drawable {

    private Paint paint;
    private RectF rectF;
    private float cornerRadius = 20f;
    private float borderThickness = 3.5f;
    private int insetColour = Color.GREEN;

    public BackgroundColorDrawable() {

        paint = new Paint();
        paint.setAntiAlias(true);
        rectF = new RectF();
    }

    public void setInsetColour(int insetColour) {
        this.insetColour = insetColour;
        invalidateSelf();
    }

    public void setBorderThickness(float borderThickness) {
        this.borderThickness = borderThickness;
        invalidateSelf();
    }

    public void setCornerRadius(float cornerRadius) {
        this.cornerRadius = cornerRadius;
        invalidateSelf();
    }

    @Override
    public void draw(Canvas canvas) {

        paint.setColor(Color.GRAY);
        rectF.set(0f, 0f, canvas.getWidth(), canvas.getHeight());
        canvas.drawRoundRect(rectF, cornerRadius, cornerRadius, paint);

        paint.setColor(Color.WHITE);
        rectF.set(borderThickness, borderThickness, canvas.getWidth() - borderThickness, canvas.getHeight() - borderThickness);
        canvas.drawRoundRect(rectF, cornerRadius, cornerRadius, paint);

        paint.setColor(insetColour);
        rectF.set(borderThickness, borderThickness, 60f, canvas.getHeight() - borderThickness);
        canvas.drawRoundRect(rectF, cornerRadius, cornerRadius, paint);

        paint.setColor(Color.WHITE);
        rectF.set(30f, borderThickness, 60f, canvas.getHeight() - borderThickness);
        canvas.drawRect(rectF, paint);
    }

    @Override
    public void setAlpha(int alpha) { /* to implement */ }

    @Override
    public void setColorFilter(ColorFilter colorFilter) { /* to implement */}

    @Override
    public int getOpacity() {
        return PixelFormat.TRANSLUCENT;
    }
}

Then wherever you are using your EditText you just have to set the background drawable in code:

BackgroundColorDrawable drawable = new BackgroundColorDrawable();
editText.setBackground(drawable);

Note there's quite a bit of overdraw in this example (the same pixel gets drawn several times) which you could optimise for.

You'll also have to set some left padding on your EditText for the cursor to line up properly.

Upvotes: 1

CodeWalker
CodeWalker

Reputation: 2388

You can use a background-image on the EditText
editText.setCompoundDrawablesWithIntrinsicBounds(0, 0, R.drawable.pic_name, 0);

Upvotes: 0

Related Questions