I am new to android. Now I generated two ImageView in my Android XML file. I want to use canvas to draw two circles in each view. But the problem is, how can I deal with the coordinates? How can I know the coordinates? And how can I center them? Thanks!
ImageViews are for displaying image files, normally. If you want to draw your view yourself, you create your own View and override the onDraw method. Here is a class that draws a big red circle inside itself:
public class CircleView extends View {
public CircleView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
public CircleView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public CircleView(Context context) {
super(context);
}
#Override
protected void onDraw(Canvas canvas) {
Paint red = new Paint();
red.setColor(0xffff0000);
int height = getHeight();
int width = getWidth();
int radius = width < height ? width/2 : height/2;
canvas.drawCircle(width/2, height/2, radius, red);
}
}
You cannnot draw cirlces in an ImageView. You can only draw a circle in a bitmap and apply that bitmap to an ImageView.
Or you can create custom views and draw directly on their canvas.
In both cases you need to find the size of these views after they are created. Then you will know the coordinates as the 0,0 starts in the top left corner.
Related
Can you help me design Android layout as the mockup:
Description:
Orange layout with rounded radius.
Green layout is cut off at bottom and overflow at top
Yellow layout in front of Green and cut off at rounded corner of Orange.
Please help me, I was crazy with this problem.
Thank you so much!
My Code here:
Clipped view
public class ClippedView extends FrameLayout {
public ClippedView(Context context) {
super(context);
}
public ClippedView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public ClippedView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
#Override
protected void onDraw(Canvas canvas) {
Path clipPath = new Path();
clipPath.addRoundRect(new RectF(canvas.getClipBounds()), 120, 120, Path.Direction.CW);
canvas.clipPath(clipPath);
super.onDraw(canvas);
}
}
It's cut OK but Orange layout cut all side. I want cut children only at bottom
Just a newbie here.
Is it possible to draw a line over a layout?
I have an XML file(activity_main) and it contains a layout which is ImageLayout that I took from github. The layout contains an image and several buttons.
What I want to do is to draw a line between two points on the layout. In order to draw a line, people usually create a Draw class and extends View. On the MainActivity, they would setContent the Draw class. I have already setContent my XML file. How would I draw a line from this point?
EDIT:
I heard about the class Path, I think it is better than using onDraw because I would be connecting(drawing lines between) several points in my layout.
Enlighten me about it if you could
Subclass the container ViewGroup and override its dispatchDraw() method. I am providing example of subclassed LinearLayout, however, this would work with any other ViewGroup.
public class MyLinearLayout extends LinearLayout {
private Paint paint;
public MyLinearLayout(Context context) {
super(context);
initPaint();
}
public MyLinearLayout(Context context, AttributeSet attrs) {
super(context, attrs);
initPaint();
}
public MyLinearLayout(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
initPaint();
}
private void initPaint() {
paint = new Paint();
paint.setColor(Color.RED);
paint.setStrokeWidth(10);
}
#Override
protected void dispatchDraw(Canvas canvas) {
super.dispatchDraw(canvas);
canvas.drawLine(0, 0, canvas.getWidth(), canvas.getHeight(), paint);
}
}
Use this in your layout to do an horizontal line:
android:layout_width="fill_parent"
android:layout_height="2dp"
android:background="#c0c0c0"/>
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'.
I have an ImageView in my android layout. And I would like to add a 'decorator' image at the lower right corner of my image view.
Can you tell me how can I do it?
I am thinking of doing with a FramLayout with 2 image views as its child, but how can i make one image the lower right corner of another?
<FrameLayout>
<ImageView .../>
<ImageView .../>
</FrameLayout>
You probably want to be using a RelativeLayout (Documentation) instead - it supports stacking views, and all you'd have to do is align the bottom and left of the overlay ImageView with the bottom and left.
You could create your own class that extends ImageView. It will always draw decorator over the ImageView content.
public class MyImage extends ImageView {
static Bitmap decorator;
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if(decorator==null)
decorator = BitmapFactory.decodeResource(getResources(), R.drawable.decorator);
canvas.drawBitmap(decorator, 0, 0, null);
}
public MyImage(Context context) {
super(context);
}
public MyImage(Context context, AttributeSet attrs) {
super(context, attrs, 0);
}
public MyImage(Context context, AttributeSet attrs, int params) {
super(context, attrs, params);
}
}