How to draw a custom background

Question

I have to design a triangle and display some text inside it with an angle of 45, below that I have to put a text view outside the boundaries of the triangle to display some other text. It is like a banner. However when I use a relative layout and put a triangular background, it still acts as a rectangle, obscuring my Text view. Below is the code I use:

<RelativeLayout
        android:id="@+id/relative"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:background="@drawable/image_sticker" >

        <com.example.AngledTextView
            android:id="@+id/textViewx"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            android:rotation="52"
            android:textColor="#FFFFFF" />
    </RelativeLayout>

My AngledTextView Class:

public class AngledTextView extends TextView  {  

    private int mWidth;
    private int mHeight;


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

    }  



    @Override  
    protected void onDraw(Canvas canvas) {  
        canvas.save();  
        /*Paint textPaint = new Paint(); 
        int xPos = (canvas.getWidth() / 2);
        int yPos = (int) ((canvas.getHeight() / 2) - ((textPaint.descent() + textPaint.ascent()) / 2)) ; 

            canvas.rotate(45, xPos,yPos);   */

        super.onDraw(canvas);  
        canvas.restore();  
    }  
}  

Problem:

Any hints or links to suggested tutorials will be highly appreciated :)

Answer 1

i've done similar stuff recently. Here are some tips i've used:

• Create customView class.
• Init at least one Paint (semitransparent, fill) and one Path on your init method. It should be called from constructors.

• On your onDraw method customize path. For example:

  mPath = new Path();
  mPath.moveTo(.0f, this.getHeight());
  mPath.lineTo(this.getWidth(), this.getHeight());
  mPath.lineTo(this.getWidth(),0.25f*this.getHeight());
  mPath.lineTo(.0f, .0f);
  mPath.lineTo(.0f, this.getHeight());
  

• This will make a Path similar to a trapezoid. Just customize your points to make a triangle. Then call

  canvas.clipPath(mPath);
  canvas.drawPath(mPath,mPaint);
  

• With these points, you will draw your triangle. You could pass a String to your init method and call drawText before drawing the path:

  canvas.drawText(str, xTit, yTit, mPaintTit);
  

I hope this will help =)

Answer 2

In your regular textview use rotate animation like.

 <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:rotation="45"
    android:text="@string/hello_world" />