I built a very simple custom view that only draw a line.
The view is working when I'm running the code but I see nothing on the preview window.
I find solutions, like use Relative layout / ViewGroup, etc. but I want to extend onlyView class (just because I want to know and learn how to do it right).
customView.java
public class customView extends View {
float lineWidth = 5;
Paint linePaint;
public void setLineWidth(float width) {
lineWidth = width;
}
public float getLineWidth() {
return lineWidth;
}
public customView(Context context, AttributeSet attrs) {
super(context, attrs);
initAttributes(context, attrs);
initPaints();
}
private void initAttributes(Context context, AttributeSet attrs) {
TypedArray typedArray = context.getTheme().obtainStyledAttributes(attrs, R.styleable.customView, 0, 0);
try {
setLineWidth(typedArray.getDimension(R.styleable.customView_cv_line_width, getLineWidth()));
}
finally {
typedArray.recycle();
}
}
private void initPaints() {
linePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
linePaint.setColor(Color.BLUE);
linePaint.setStrokeWidth(lineWidth);
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
float midHeight = canvas.getHeight() / 2;
canvas.drawLine(0, midHeight, canvas.getWidth(), midHeight, linePaint);
}
/*// try to operate onMeasure, not helps
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
setMeasuredDimension(200, 100);
}*/
}
attrs.xml
<resources>
<declare-styleable name="customView">
<attr name="cv_line_width" format="dimension" />
</declare-styleable>
</resources>
Why do I see an empty rectangle on the XML preview and how can I fix it?
Related
I am trying to clip paths in my imageview. But nothing is happening.
My ImageView
public static class CliptImageView extends ImageView {
Path path = new Path();
public CliptImageView(Context context) {
super(context);
}
public CliptImageView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public CliptImageView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
path.reset();
float y = getMeasuredHeight() / 2.0f;
float x = getMeasuredWidth() / 2.0f;
path.addCircle(x,y, 20,Path.Direction.CW);
}
#Override
protected void onDraw(Canvas canvas) {
canvas.save();
canvas.clipPath(path, Region.Op.DIFFERENCE);
super.onDraw(canvas);
canvas.restore();
}
}
I add the imageview programatically to a linearLayout like this
private View getMiddleArea() {
CliptImageView imageView = new CliptImageView(getContext());
LinearLayout.LayoutParams params =
new LinearLayout.LayoutParams(
0, ViewGroup.LayoutParams.MATCH_PARENT, 2);
imageView.setLayoutParams(params);
imageView.setBackgroundColor(ContextCompat.getColor(getContext(),R.color.white));
// imageView.setBackgroundResource(R.drawable.bottom_bar_semicircle);
// imageView.getBackground().setLevel(5000);
return imageView;
}
Nothing happens. The view is kept white. So i am obviously doing something wrong. But i have no idea what. I have had a lot of trial and error the latest 2 days. But nothing seems to work.
So any help that would get me in the right path is appreciated
Edit update
This is what i am trying to achieve. a transparent circle that clips the view and makes everything transparent
I am using a RoundedNetworkImageView.I want to add an border of 1 dp to it.If i create a separated drawable and put it as background to RoundedNetworkImageView then it replaces the roundedness of view.How can i update below code to add border to imageview?
Below is the code I am using-
public class RoundedNetworkImageView extends NetworkImageView {
public CWRoundedNetworkImageView(Context context) {
super(context);
}
public CWRoundedNetworkImageView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public CWRoundedNetworkImageView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, widthMeasureSpec);
}
#Override
public ScaleType getScaleType() {
return ScaleType.CENTER_CROP;
}
#Override
protected void onDraw(Canvas canvas) {
float radius = 12.0f;
Path clipPath = new Path();
RectF rect = new RectF(0, 0, this.getWidth(), this.getHeight());
clipPath.addRoundRect(rect, radius, radius, Path.Direction.CW);
canvas.clipPath(clipPath);
super.onDraw(canvas);
}
}
I want to increase height of my custom TextView so I can draw some lines below TextView. Can anyone help me how can I do that? Here is my custom textview.
CustomTextView
public class CustomTextView extends TextView{
public CustomTextView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);init();
}
public CustomTextView(Context context, AttributeSet attrs) {
super(context, attrs); init();
}
public CustomTextView(Context context) {
super(context);init();
}
private Paint mStrokeBrush;
private void init(){
mStrokeBrush= new Paint();
mStrokeBrush.setStrokeWidth(5f);
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.translate(0f, getHeight());
canvas.drawLine(0, 0, getWidth(), 0, mStrokeBrush);
}
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
}
Edit: I removed a bunch of code which wasn't relevant to your question. Sorry if it caused confusion.
This is a modification of my own code, which adds 20dp to the view's height.
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int viewWidth = MeasureSpec.getSize(widthMeasureSpec);
int viewHeight = MeasureSpec.getSize(heightMeasureSpec);
//
// Set view dimensions. Add 20dp.
//
int dp = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 20, getResources().getDisplayMetrics());
setMeasuredDimension(viewWidth, viewHeight + dp);
}
I am trying to make custom Views in android I mention all my arrtrs list in MainActivity and the XML file but I there is an error in main.xml:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:custom="http://schemas.android.com/apk/res/com.example.customviews.piechart"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<com.example.customviews.charting.piechart.MainActivity
android:layout_width="match_parent"
android:layout_height="?android:attr/listPreferredItemHeight"
custom:titleText="Background color"
custom:valueColor="#android:color/holo_green_light"
/>
</LinearLayout>
Do you have a constructor with no arguments?
You should add a constructor like:
public MainActivity(Context context, AttributeSet attrs) {
super(context, attrs);
}
or
public MainActivity(Context context) {
super(context);
}
You asked for a simple example of a custom view:
public class BirdView extends ImageView {
private float direction = 0;
Paint paint = new Paint();
public BirdView(Context context) {
super(context);
}
public BirdView(Context context, AttributeSet attrs) {
super(context, attrs);
paint.setColor(Color.WHITE);
paint.setStrokeWidth(6);
}
public BirdView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
setMeasuredDimension(MeasureSpec.getSize(widthMeasureSpec),
MeasureSpec.getSize(heightMeasureSpec));
}
#Override
public void draw(Canvas canvas) {
canvas.save();
int stratX = getWidth() / 2;
int startY = getHeight() / 2;
canvas.rotate(direction, stratX, startY);
super.draw(canvas);
canvas.restore();
canvas.drawLine(stratX, startY, stratX, startY + 80, paint);
}
public void update(float dir) {
direction = dir;
invalidate();
}
}
I have extended class from ImageView and want some text to be drawn on it. This doesn't work, do you know why? Thank you.
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
int imgWidth = getMeasuredWidth();
int imgHeight = getMeasuredHeight();
float txtWidth = mTextPaint.measureText("your text");
int x = Math.round(imgWidth/2 - txtWidth/2);
int y = imgHeight/2 - 6; // 6 is half of the text size
canvas.drawText("your text", x, y, mTextPaint);
}
private void init(Context context, AttributeSet attrs, int defStyle) {
mTextPaint = new Paint();
mTextPaint.setColor(android.R.color.black);
mTextPaint.setTextSize(12);
mTextPaint.setTextAlign(Paint.Align.LEFT);}
I ran your code, and immediately got a Lint error. In init() you are setting your mTextPaint to android.R.color.black. Because it's a static value, I could immediately see that the actual int value of that variable is 0x0106000c, which is almost completely transparent. You should use getResources().getColor(android.R.color.black) or plain ol' Color.BLACK.
Note that a textSize of 12 is very, very small. This code shows 12 (albeit very small).
public class MyImageView extends ImageView {
public MyImageView(Context context, AttributeSet attributeSet, int defStyle) {
super(context, attributeSet, defStyle);
init();
}
public MyImageView(Context context, AttributeSet attributeSet) {
super(context, attributeSet);
init();
}
public MyImageView(Context context) {
super(context);
init();
}
Paint mTextPaint;
private void init() {
mTextPaint = new Paint();
mTextPaint.setColor(Color.BLACK);
mTextPaint.setTextSize(12);
mTextPaint.setTextAlign(Paint.Align.LEFT);
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
int imgWidth = getMeasuredWidth();
int imgHeight = getMeasuredHeight();
float txtWidth = mTextPaint.measureText("your text");
int x = Math.round(imgWidth/2 - txtWidth/2);
int y = imgHeight/2 - 6;
canvas.drawText("12", x, y, mTextPaint);
}
}
xml:
<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">
<com.example.mytest.MyImageView
android:layout_width="100dp"
android:layout_height="100dp"/>
</RelativeLayout>
Copy/paste, if problem persist, start logging. Again, this code works, I see 12 on my screen.
You should be able to accomplish the desire effect without creating your own class. Just set the background of a TextView with an image drawable. See my example with a text in a speech bubble.
<TextView
android:id="#+id/textOverImage"
android:background="#drawable/speech_bubble"
android:text="#string/hello_world"
android:gravity="center"
android:layout_width="..."
android:layout_height="..."
/>