I'm drawing a blank here!
I have a textview with a diamond shaped background. The text needs to be contained within the diamond.
Like this.
How do I do this? Is there a way to define the bounds of the text inside a textview?
Edit
Put the below code in a java class like DiamondTextView:
public class DiamondTextView extends TextView{
public DiamondTextView(Context ctx, AttributeSet attrs) {
super(ctx, attrs);
}
Paint mBorderPaint = new Paint();
#Override
protected void onDraw(Canvas canvas) {
mPath.moveTo(mWidth/2 , 0);
mPath.lineTo(mWidth , mHeight/2);
mPath.lineTo(mWidth /2 , mHeight);
mPath.lineTo(0 , mHeight/2);
mPath.lineTo( mWidth/2 ,0);
//setup the paint for fill
mBorderPaint.setAlpha(255);
mBorderPaint.setColor(mBorderColor);
mBorderPaint.setStyle(Paint.Style.FILL);
borderPaint.setStrokeWidth(mBorderWidth);
//draw it
canvas.drawPath(mPath ,mBorderPaint);
//setup the paint for stroke
mBorderPaint.setAlpha(51);
mBorderPaint.setStyle(Paint.Style.STROKE);
//draw it again
canvas.drawPath(mPath ,mBorderPaint);
super.onDraw(canvas);
}
}
and call it as where you want to use this textView :
<com.erginus.ABC.Commons.DiamondTextView...../>
For more infomation look here:http://developer.android.com/reference/android/graphics/drawable/shapes/PathShape.html
You can use the following library too: https://github.com/siyamed/android-shape-imageview
Related
I need to draw some text on canvas, this text may single line or multi lines. I found StaticLayout can fill this require. But When I create an StaticLayout and after I want to draw it, I call getHeight(), I found it always return the line count. Shouldn't this function return the number of pixels?
This is my code:
m_staticLayout = new StaticLayout(m_message, textPaint, m_messageWidth,
Layout.Alignment.ALIGN_NORMAL, 1.0f, 0f, false);
Any help will be appreciated.
Firstly, StaticLayout is deprecated.
The reason it probably doesn't return pixels is because we haven't drawn anything yet, we're just initializing the StaticLayout. Hence, it returns the line count which we could probably use in the future. If you are trying to draw some text on Canvas, I wouldn't recommend using StaticLayout.
Instead, use the Paint class, Canvas, and Bitmap. Think of paint as the ink of the Canvas(which hosts all the draw calls). Canvas will draw into your Bitmap.
We will have to create the Paint, set up it's attributes, and then host the draw call drawText to the canvas. The Canvas will then draw the text using the Paint we created.
All of this will be in an Activity which extends View, which we will then pass as the View in setContentView for our MainActivity
This is how we can implement this:
MainActivity.java:
public class MainActivity extends AppCompatActivity {
OtherActivity otherActivity;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
otherActivity = new OtherActivity(this);
otherActivity.setBackgroundColor(Color.GRAY);
setContentView(otherActivity);
}
}
OtherActivity.java:
public class OtherActivity extends View {
public OtherActivity(Context context) {
super(context);
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
Paint paint = new Paint();
paint.setColor(Color.BLACK);
paint.setTextSize(20);
canvas.drawText("Some Text", 10, 25, paint);
}
}
I have a scrollView in my Activity,the background of scrollView is of multiple colours.
<ScrollView ---------->
<RelativeLayout -------------/>
</ScrollView>
To my RelativeLayout I have added Views dynamically.
inflated xml:
<RelativeLayout --------------android:background="some transparent image">
<TextView --------- ---------/>
</RelativeLayout>
I want my Text coloured to be same as Background colour. I have tried for the solution in many ways but could not succeed.
In iOS for achieving this they have used RSMaskedLabel (third party class), but I didn’t find anything similar to this in Android.
Still I didnt find any solution,can anyone help me please. I tried by using Bitmaps and Canvas but didnt worked for me.
Some guidelines how to achieve this with custom TextView:
Extend TextView component
Create Bitmap and Canvas where you draw background and text
Draw wanted background color into allocated Canvas(e.g. Color.argb(80, 255, 255, 255))
Draw the text with Paint having mode PorterDuffXfermode(Mode.CLEAR) (Remember: Only allocate Bitmap and Canvas once) since you draw it into Bitmap
Draw the Bitmap into TextViews canvas
Here is some sample code to get started with:
public class TransparentTextView extends TextView {
private Paint mTextPaint;
private Bitmap mBitmapToDraw;
public TransparentTextView(Context context) {
super(context);
setup();
}
public TransparentTextView(Context context, AttributeSet attrs) {
super(context, attrs);
setup();
}
public TransparentTextView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
setup();
}
private void setup() {
mTextPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mTextPaint.setTextSize(getTextSize());
mTextPaint.setStyle(Paint.Style.FILL);
mTextPaint.setXfermode(new PorterDuffXfermode(Mode.CLEAR));
}
#Override
protected void onDraw(Canvas canvas) {
if (mBitmapToDraw == null) {
mBitmapToDraw = Bitmap.createBitmap(getWidth(), getHeight(),
Bitmap.Config.ARGB_8888);
if (mBitmapToDraw != null) {
Canvas c = new Canvas(mBitmapToDraw);
c.drawColor(Color.argb(80, 255, 255, 255));
c.drawText(getText().toString(), getPaddingLeft(),
getPaddingTop(), mTextPaint);
}
}
if (mBitmapToDraw != null) {
canvas.drawBitmap(mBitmapToDraw, 0, 0, null);
} else {
super.onDraw(canvas);
}
}
}
If you are setting text dynamically, you will need to reset mBitmapToDraw in order to get it refreshed.
I want to draw over the specific Line, Rectangle or Bitmap using Canvas. If i draw over the Bitmap, it will take the square shape empty background also.
So i want to draw over that particular Bitmap area only.
create a bitmap with "bmp1" name from your desire image
create a custom view
create a class and extend View like this
class MyCustomView extends View{
private Rect m_ImageRect;
private Rect m_TextRect ;
//you need these constructor
//you can init paint object or anything on them
public MyCustomView (Context context, AttributeSet attrs, int defStyle)
{
super(context, attrs, defStyle);
m_Context = context;
}
public MyCustomView (Context context, AttributeSet attrs)
{
super(context, attrs);
m_Context = context;
}
public MyCustomView (Context context)
{
super(context);
m_Context = context;
}
//then override on draw method
#Override
protected void onDraw(Canvas canvas)
{
super.onDraw(canvas);
//here frist create two rectangle
//one for your image and two for text you want draw on it
m_ImageRect = canvas.getClipBounds();
m_TextRect = canvas.getClipBounds();
//it gives you an area that can draw on it,
//the width and height of your rect depend on your screen size device
canvas.drawBitmap(your bitmap(bmp1), null, m_ImageRect , paint);
canvas.save();
canvas.clipRect(m_TextRect);
canvas.drawText("your text", the x position you want to start draw,
the y position you want to start draw, m_paintText);
canvas.restore();
}
}
at the end put the custom view on your layout,and set field on it to send value to view for draw every thing you want
i hope it's help you,if this is not what you want!
post your code so maybe i can help you more
Seems like you need clipping. See exampls: http://www.example8.com/category/view/id/15543 , Understanding Android Canvas Clipping , http://jtomlinson.blogspot.com/2008/10/clipping.html
With clipping you can specify, which regions should be 'editable'.
how to make a black line around the text for my textView? example on above image
Extend the TextView class. Then in the onDraw, draw the text first using black, then draw it again, slightly smaller and using white. For extra "correctness", add custom attributes to the XML to set the "line around" colour.
public class myTextView extends TextView{
public myTextView (Context context) {
this(context, null);
}
public myTextView (Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public myTextView (Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
// do extra initialisation and get attributes here
}
#Override
protected void onDraw(Canvas canvas) {
// draw first in black
Paint paint = new Paint();
paint.setColor(Color.BLACK);
paint.setTextSize(20); // text size
paint.setStyle(Paint.Style.STROKE);
paint.setTextAlign(Paint.Align.CENTER);
canvas.drawText("My text", 50, 50, paint);
// draw again in white, slightly smaller
paint.setColor(Color.WHITE);
paint.setTextSize(18); // text size
canvas.drawText("My text", 50, 50, paint);
}
}
The code is not complete as it hardcodes the colours, size and positions but I hope that it is enough for you to work with. You can get the text size and text colour from the XML via attrs in the constructor and add line colour and width as custom attributes (search here or Google).
I would use a font that already has an outline like http://www.dafont.com/steelfish.font
as described here Android - Using Custom Font
Add this to your xml file:
android:shadowColor="#000000"
android:shadowDx="1.5"
android:shadowDy="1.3"
android:shadowRadius="1.6"
android:text="YOUR TEXT"
android:textColor="#color/white"
I want to create an ImageView and then draw text on top of the ImageView. I also need to be able to modify the text periodically. Currently I've created a custom view that extends ImageView. Then I overwrite onDraw() and use it to draw the text. Only problem then is that when I use my custom ImageView it doesn't draw the image, just the text.
public class BoardView extends ImageView
{
public BoardView(Context context)
{
super(context);
}
protected void onDraw(Canvas canvas)
{
Paint paint = new Paint();
setImageResource(R.drawable.board);
paint.setColor(Color.BLUE);
canvas.drawText(x.getName(), x.getX(), x.getY(), paint);
}
}
You should call the super.onDraw in your onDraw method before your draw code.