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" />

Answer 3

Your implementation could inherit from Drawable and implement getTransparentRegion() Next, use this drawable as background on a view that is drawn on top of your TextView (probably by having both as childs inside a FrameView)

Answer 4

i have some link for crate triangle background as below

link1

link2

link3

i hope it helpful for you

Answer 5

Before you do any drawing, you must initialize and load the shapes you plan to draw. Unless the structure (the original coordinates) of the shapes you use in your program change during the course of execution, you should initialize them in the onSurfaceCreated() method of your renderer for memory and processing efficiency.

public void onSurfaceCreated(GL10 unused, EGLConfig config) {
    ...

    // initialize a triangle
    mTriangle = new Triangle();
    // initialize a square
    mSquare = new Square();
}

Example

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Paint.Style;
import android.graphics.Path;
import android.graphics.Point;
import android.util.AttributeSet;
import android.util.Log;
import android.widget.LinearLayout;

public class Slice extends LinearLayout {

    final static String TAG = "Slice";
    Paint mPaint;
    Path mPath;

    public enum Direction {
        NORTH, SOUTH, EAST, WEST;
    }

    public Slice(Context context) {
        super(context);
        Create(context);
    }

    public Slice(Context context, AttributeSet attrs) {
        super(context, attrs);
        Create(context);
    }

    private void Create(Context context) {
        Log.i(TAG, "Creating ...");

        mPaint = new Paint();
        mPaint.setStyle(Style.FILL);
        mPaint.setColor(Color.RED);

        Point point = new Point();
        point.x = 80;
        point.y = 80;

        mPath = Calculate(point, 70, Direction.SOUTH);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        Log.i(TAG, "Drawing ...");

        canvas.drawPath(mPath, mPaint);
    }

    private Path Calculate(Point p1, int width, Direction direction) {
        Log.i(TAG, "Calculating ...");

        Point p2 = null, p3 = null;

        if (direction == Direction.NORTH) {
            p2 = new Point(p1.x + width, p1.y);
            p3 = new Point(p1.x + (width / 2), p1.y - width);
        } else if (direction == Direction.SOUTH) {
            p2 = new Point(p1.x + width, p1.y);
            p3 = new Point(p1.x + (width / 2), p1.y + width);
        } else if (direction == Direction.EAST) {
            p2 = new Point(p1.x, p1.y + width);
            p3 = new Point(p1.x - width, p1.y + (width / 2));
        } else if (direction == Direction.WEST) {
            p2 = new Point(p1.x, p1.y + width);
            p3 = new Point(p1.x + width, p1.y + (width / 2));
        }

        Path path = new Path();
        path.moveTo(p1.x, p1.y);
        path.lineTo(p2.x, p2.y);
        path.lineTo(p3.x, p3.y);

        return path;
    }
}