Android TextView with parallelogram background

Question

I want to achieve the following effect. i.e. a TextView with a parallelogram background.

I cannot use a 9-patch as the color of the background is to be dynamic.

The ideal scenario would be to have a custom TextView with the background already set.

Is there anyway of achieving this?

Answer 1

I ended up having to create a custom view which drew a triangle for both the left side and the right side using draw path.

Then I had to create another custom view which extended linear layout (or relative layout) and included the left triangle view, a text view, and the right triangle view. The triangles size adjusted with the height of the view. And the fill colour of triangles matched the background colour of the textview.

It all seems to work well, as I have not had any issues with it on many devices. It's also part of the list item in a list view and the performance seems fine.

for the triangle:

public class LabelTriangleView extends View {

private boolean mRightSided = false;
private Paint mMainTrianglePaint;
private int mMainTriangleColor;

public LabelTriangleView(Context context) {
    super(context);
    intialise();
}

public LabelTriangleView(Context context, AttributeSet attrs) {
    super(context, attrs);
    intialise();
}

public void setMainColor(int newColor) {
    mMainTriangleColor = newColor;
    invalidate();
    requestLayout();
}

public void setRightSided() {
    mRightSided = true;
    invalidate();
    requestLayout();
}

@Override
protected void onDraw(Canvas canvas) {

    mMainTrianglePaint.setColor(mMainTriangleColor);

    if (mRightSided) {
        canvas.drawPath(getRightSidedPath(), mMainTrianglePaint);
    } else {
        canvas.drawPath(getLeftSidedPath(), mMainTrianglePaint);
    }
}

private void intialise() {
    mMainTrianglePaint = new Paint();
    mMainTrianglePaint.setStyle(Style.FILL);
    mMainTrianglePaint.setAntiAlias(true);
}

private Path getLeftSidedPath() {
    Path path = new Path();
    path.moveTo(this.getMeasuredWidth(), 0);
    path.lineTo(this.getMeasuredWidth(), this.getMeasuredHeight());
    path.lineTo(0, this.getMeasuredHeight());
    path.close();

    return path;
}

private Path getRightSidedPath() {
    Path path = new Path();
    path.moveTo(0, 0);
    path.lineTo(this.getMeasuredWidth(), 0);
    path.lineTo(0, this.getMeasuredHeight());
    path.close();

    return path;
}

}

The triangle should be enough to get anyone started. I can't post the rest of the code here because it's too complex to strip out stuff.

But essentially, this is what I did:

1. Created a custom view which extended a RelativeLayout which I called LabelView.
2. On initialisation of the LabelView, I added a TextView.
3. Created two of my new custom LabelTriangleView. one for the left, and one for the right (with setRightSided called).
4. I set the height of both LabelTriangleView's to the same height of the TextView.
5. I set the width of both LabelTriangleView's to half the height of the TextView.
6. I then added the Left LabelTriangleView aligned to the left of the TextView.
7. I added the right LabelTriangleView aligned to the right of the TextView.
8. I set the colour of both LabelTriangleView's using setMainColor(). And use the same colour for the bg of the TextView

That's basically it!