I use this to have stike through a textView
textView.setPaintFlags(textView.getPaintFlags() | Paint.STRIKE_THRU_TEXT_FLAG);
but now I wanna personalize the color and rotate it 45° to fit the diagonal of the content.
What I tied:
I though about extending the textview widget and override onDraw method .. but I'm very beginner at designing ...
so any help how to draw the red(color) rotated line on the textView ?
adding to Mayani's response
#Override
protected void onDraw(Canvas canvas) {
Paint paint = new Paint();
paint.setColor(strikeThroughColor);
paint.setStyle(Paint.Style.FILL);
paint.setFakeBoldText(true);
paint.setStrikeThruText(true);
paint.setStrokeWidth(strikeThroughWidth);
paint.setFlags(Paint.ANTI_ALIAS_FLAG);
super.onDraw(canvas);
float width = getWidth();
float height = getHeight();
canvas.drawLine(width / 10, height / 10, (width - width / 10), (height - height / 10), paint);
}
For that, follow the below steps:
Create a custom TextView by extending View class
Declare this custom textview inside XML layout same like we do for TextView, Button widgets.
For example:
class CustomTextView extends View {
private int mColor;
private int mRotationAngle, mRotationW, mRotationH;
private String mText;
public CustomTextView(Context context) {
super(context);
// set default parameters
mColor = Color.WHITE;
mRotationAngle = 0;
}
public void SetColor(int newcolor) {
mColor = newcolor;
this.invalidate();
}
public void SetRotation(int newangle, int neww, int newh) {
mRotationAngle = newangle;
mRotationW = neww;
mRotationH = newh;
this.invalidate();
}
public void SetText(String newtext) {
mText = newtext;
this.invalidate();
}
#Override
protected void onDraw(Canvas canvas) {
Paint paint = new Paint();
paint.setStyle(Paint.Style.FILL);
canvas.rotate(mRotationAngle,mRotationW,mRotationH);
canvas.drawText(mText, 0, 0, paint);
super.onDraw(canvas);
}
}
Update:
Check for Specifying “strikethrough” on a section of TextView text
Using below approach you can achieve this functionality without messing with the UI in your java code:
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_centerVertical="true">
<TextView
android:id="#+id/textview1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:text="$99"
android:textSize="12sp" />
<View
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_centerVertical="true"
android:layout_alignLeft="#+id/textview1"
android:layout_alignRight="#+id/textview1"
android:background="#color/fav_dark_red_color" />
</RelativeLayout>
Related
I have a custom view that is a circle. Here is the code for my CircleView:
public class CircleView extends View {
private static final int START_ANGLE_POINT = 90;
private final Paint paint;
private final RectF rect;
private float angle;
public CircleView(Context context, AttributeSet attrs) {
super(context, attrs);
final int strokeWidth = 40;
paint = new Paint();
paint.setAntiAlias(true);
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeWidth(strokeWidth);
//Circle color
paint.setColor(Color.RED);
rect = new RectF(strokeWidth, strokeWidth, 1000 + strokeWidth, 1000 + strokeWidth);
//Initial angle is zero
angle = 0;
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawArc(rect, START_ANGLE_POINT, angle, false, paint);
}
public float getAngle() {
return angle;
}
public void setAngle(float angle) {
this.angle = angle;
} }
and here is how I declare it in the xml layout of an activity:
<com.my_package.ui.recording.CircleView
android:id="#+id/circleView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
All standard stuff. This is how my custom image looks like
Now, I want to place an imageView in the centre on the circleView? Does any one know how can I achieve that?
This is ideally what I would like to end up with:
Thank you in advance.
If you aren't set on using an ImageView and really just want to draw the bitmap in the center then have a look at canvas' drawBitmap method. This will allow you to draw it however/wherever you want.
it tried and use CustomTextView but all text show in single line. i want to show text in multi lines.
here my code
<com.textdesign.views.CustomTextView
android:id="#+id/customTextview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:singleLine="false"
android:inputType="textMultiLine"
android:maxLines="40"
android:lines="20"
android:minLines="5"
android:text="this is sample text for multi-lines\nthis is sample text for multi-lines\nthis is sample text for multi-lines\nthis is sample text for multi-lines"
android:textStyle="bold" />
I used minLines, maxLines, singleLine="false", inputType="textMultiLine" but still show like this:
here my CustomTextView class i have hide some of my code this code also show text in single line.
public class CustomTextView extends AppCompatTextView {
//Shadow Variable
public static int shadow_length = 30;
public int x_direction = 1;
public int y_direction = 1;
boolean shadow_Enable = false;
int color = Color.BLACK;
float[] hsv = new float[]{0, 0, 0};
int getcol;
Paint paint;
Paint paint1;
Paint paint2;
public CustomTextView(Context context, AttributeSet attributeSet) {
super(context, attributeSet,android.R.attr.textViewStyle);
paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint1 = new Paint(Paint.ANTI_ALIAS_FLAG);
paint2 = new Paint(Paint.ANTI_ALIAS_FLAG);
textPaint = new TextPaint(Paint.ANTI_ALIAS_FLAG);
textPaint.setTextSize(getTextSize());
}
#Override
protected void onDraw(Canvas canvas) {
getPaint().setMaskFilter(null);
TextPaint textPaint = getPaint();
float x_position = (getWidth() - getPaint().measureText(getText().toString())) / 2f;
float y_position = (int) ((getHeight() / 2) - ((textPaint.descent() + textPaint.ascent()) / 2));
getPaint().setColor(shadowColor);
//Center point for transformation
PointF center_Point = new PointF(getWidth() / 2f, getHeight() / 2f);
Camera camera = new Camera();
canvas.drawText(getText().toString(), x_position, y_position, getPaint());
}
}
Use
android:maxLength="10"
As per the length requirement
along with max lines
i just remove x_position and y_position,
#Override
protected void onDraw(Canvas canvas) {
//.........
StaticLayout mTextLayout = new StaticLayout(getText().toString(), getPaint(), canvas.getWidth(), Layout.Alignment.ALIGN_NORMAL, 1.0f, 0.0f, true);
canvas.save();
float textHeight = getTextHeight(getText().toString(), textPaint);
int numberOfTextLines = mTextLayout.getLineCount();
float textYCoordinate = mTextBounds.exactCenterY() - ((numberOfTextLines * textHeight) / 2);
// text will be drawn from left
float textXCoordinate = mTextBounds.left;
canvas.translate(0, 0);
// draws static layout on canvas
mTextLayout.draw(canvas);
canvas.restore();
//.....
}
I have a Custom View that extends RelativeLayout with overridden onDraw() method so that it looks like a message bubble. This View is in the LinearLayout. When I try to fill this custom View with content, part of its shape is pushed out of the LinearLayout. How to prevent this behaviour?How to prevent this behaviour?
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<View
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="1" />
<TextView
android:id="#+id/chat_message_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_gravity="center_vertical"
android:padding="10dp"
android:text="2:46pm"
android:textSize="#dimen/splash_4_user_name_text_size" />
<com.mypackage.RightBasedMessage
android:id="#+id/chat_message_field"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingBottom="#dimen/splash_3_comment_padding"
android:paddingLeft="#dimen/splash_3_comment_end_padding"
android:paddingRight="#dimen/chat_message_field_beginning_padding"
android:paddingTop="#dimen/splash_3_comment_padding">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hi :)"
android:textColor="#color/white_text_color" />
</com.mypackage.RightBasedMessage>
</LinearLayout>
Here is my Custom View:
public class RightBasedMessage extends RelativeLayout {
private Paint paint;
private Path path;
private Point pointleftTop;
private Point pointRightTop;
private Point pointRightBottom;
private Point pointLeftBottom;
private float corner;
private Context context;
private int color = R.color.chat_my_message_field_color;
public RightBasedMessage(Context context, AttributeSet attrs) {
super(context, attrs);
this.context = context;
corner = getResources().getDimension(R.dimen.message_container_corner);
paint = new Paint();
path = new Path();
paint.setStrokeWidth(5);
paint.setStyle(Paint.Style.FILL);
this.setWillNotDraw(false);
}
public void setMessageBackground(int color){
this.color = color;
invalidate();
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
int width = getWidth();
int height = getHeight();
pointRightTop = new Point(width-(int)corner, (int)corner/2);
pointRightBottom = new Point(width-(int)corner, height);
pointLeftBottom = new Point(0, height);
pointleftTop = new Point(0, 0);
path.reset();
path.moveTo(corner, 0);
path.lineTo(width, 0);
path.quadTo(pointRightTop.x, pointRightTop.y, width-corner, corner+corner/2);
path.lineTo(width-corner, height-corner);
path.quadTo(pointRightBottom.x, pointRightBottom.y, width - corner*2, height);
path.lineTo(corner, height);
path.quadTo(pointLeftBottom.x, pointLeftBottom.y, 0, height-corner);
path.lineTo(0, corner);
path.quadTo(pointleftTop.x, pointleftTop.y, corner, 0);
paint.setColor(ContextCompat.getColor(context, color));
canvas.drawPath(path, paint);
path.close();
}
}
have you tried this?
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="4dp"
android:layout_marginRight="4dp"
>
How can i make a layout look like following snap in the case i don't want to use background image.
Create a nine patch image of a single image. Following link is helpful to you for generate nine patch image.
https://romannurik.github.io/AndroidAssetStudio/nine-patches.html
You can create an ImageView like that triangle and put it in the place you need.
Have a look how you can create triangle using xml: Android triangle (arrow) defined as an XML shape
Or even you can create a TextView:
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="▼"/>
and put it in the place.
Unicode for the triangle: link
Use below code in Relative Layout. Hope it helps you.
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableRight="#drawable/triangleImage"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"/>
You can also draw custom view:
public class MyBackground extends View{
private Path path = new Path();
private Paint paint = new Paint();
public MyBackground(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public MyBackground(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
paint.setColor(Color.WHITE);
paint.setStyle(Paint.Style.FILL);
paint.setAntiAlias(true);
}
public MyBackground(Context context) {
this(context, null);
}
#Override
protected void onDraw(Canvas canvas) {
canvas.drawColor(Color.GRAY);
int triangleSide = getWidth() / 10; // triangle is 1/10-th of side
int offsetFromRightSide = triangleSide;
int startX = getWidth() - triangleSide - offsetFromRightSide;
path.reset();
path.moveTo(startX, 0);
path.lineTo(startX + triangleSide/2, triangleSide/2);
path.lineTo(startX + triangleSide, 0);
canvas.drawPath(path, paint);
}
}
and use it like this
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/background"
tools:context=".MainActivity">
<your.package.name.MyBackground
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
Or there is one more "code way". Create custom background Drawable
public class Background extends Drawable {
private Path path = new Path();
private Paint paint = new Paint();
public Background(){
paint.setColor(Color.WHITE);
paint.setStyle(Paint.Style.FILL);
paint.setAntiAlias(true);
}
#Override
public void draw(Canvas canvas) {
int triangleSide = getBounds().width() / 10; // triangle is 1/10-th of side
int offsetFromRightSide = triangleSide;
int startX = getBounds().width() - triangleSide - offsetFromRightSide;
path.reset();
path.moveTo(startX, 0);
path.lineTo(startX + triangleSide/2, triangleSide/2);
path.lineTo(startX + triangleSide, 0);
canvas.drawColor(Color.GRAY);
canvas.drawPath(path, paint);
}
#Override public void setAlpha(int alpha) {}
#Override public void setColorFilter(ColorFilter cf) {}
#Override public int getOpacity() {return 0;}
}
And use it like this:
RelativeLayout layout = (RelativeLayout) findViewById(R.id.root);
layout.setBackgroundDrawable(new Background());
I need to have dotted lines in my editext field. Here is what i have tried so far. But didn't reach my goal. It displays nothing. Why dotted lines are missing? Where i'am going wrong?
EditText filed in main.xml
<view
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/editText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
class="com.xxx.yyy.MainActivity$LinedEditText"
android:background="#android:color/transparent"
android:inputType="textEmailAddress"
android:maxHeight="30dp"
android:singleLine="true"
android:minHeight="30dp"
android:textSize="13dp" />
Inside MainActivity..
public static class LinedEditText extends EditText {
private Rect mRect;
private Paint mPaint;
// we need this constructor for LayoutInflater
public LinedEditText(Context context, AttributeSet attrs) {
super(context, attrs);
mRect = new Rect();
mPaint = new Paint();
mPaint.setARGB(255, 0, 0,0);
mPaint.setStyle(Style.STROKE);
mPaint.setPathEffect(new DashPathEffect(new float[] {1,2}, 0));
mPaint.setColor(Color.RED);
}
#Override
protected void onDraw(Canvas canvas) {
int count = getLineCount();
for (int i = 0; i < count; i++) {
int baseline = getLineBounds(i, mRect);
canvas.drawLine(mRect.left, baseline + 1, mRect.right, baseline + 1, mPaint);
}
super.onDraw(canvas);
}
}
Add this to your view xml
android:ellipsize="end";
Hope it helps...