I am trying to create a custom drag shadow with text inside a small colored rectangle. Any help will be highly appreciated. Tried this in 2 ways:
a. Created a custom layout with a TextView and inflated it like this:
public void onItemLongClick(View view, int position) {
LayoutInflater inflater = (LayoutInflater) getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View view1 = inflater.inflate(R.layout.drag_shadow, null);
TextView textCount = (TextView) view1.findViewById(R.id.textCount);
textCount .setText("" + count);
View.DragShadowBuilder shadowBuilder = new MyDragShadowBuilder(view1); // Tried with both view1 and textCount
view.startDrag(data, shadowBuilder, view1, 0);
}
Problem with this approach is since view1 is not added to view hierarchy, inside MyDragShadowBuilder, getView().getWidth() returns 0 and hence, nothing is drawn
b. Tried creating a custom TextDrawable class which extends Drawable. This showed the text but its very small though the font size i gave is 20sp.
TextDrawable class:
public class TextDrawable extends Drawable {
private final String text;
private final Paint paint;
public TextDrawable(Context context,String text) {
this.text = text;
int size = context.getResources().getDimensionPixelSize(R.dimen.drag_shadow_font); //20sp
Logger.log("TAG","Size="+size); //60
this.paint = new Paint();
paint.setColor(Color.BLUE);
paint.setTextSize(size);
paint.setAntiAlias(true);
// paint.setFakeBoldText(true);
// paint.setShadowLayer(6f, 0, 0, Color.BLACK);
// paint.setStyle(Paint.Style.FILL);
// paint.setTextAlign(Paint.Align.LEFT);
}
#Override
public void draw(Canvas canvas) {
canvas.drawText(text, 0, 0, paint);
}
#Override
public void setAlpha(int alpha) {
paint.setAlpha(alpha);
}
#Override
public void setColorFilter(ColorFilter cf) {
paint.setColorFilter(cf);
}
#Override
public int getOpacity() {
return PixelFormat.TRANSLUCENT;
}
}
MyDragShadowBuilder:
private class MyDragShadowBuilder extends View.DragShadowBuilder {
// The drag shadow image, defined as a drawable thing
private Drawable shadow;
private Point mScaleFactor;
// Defines the constructor for myDragShadowBuilder
public MyDragShadowBuilder(View v, int count) {
// Stores the View parameter passed to myDragShadowBuilder.
super(v);
// Creates a draggable image that will fill the Canvas provided by the system.
// shadow = v
shadow = new TextDrawable(getActivity(),"5000");
// shadow = new ColorDrawable(Color.LTGRAY);
//ColorDrawable(Color.RED);
}
// Defines a callback that sends the drag shadow dimensions and touch point back to the
// system.
#Override
public void onProvideShadowMetrics(Point size, Point touch) {
// Defines local variables
int width, height;
// Sets the width of the shadow to half the width of the original View
width = getView().getWidth() / 2;
Log.d("TAG", "width=" + width);
// Sets the height of the shadow to half the height of the original View
height = getView().getHeight() / 2;
Log.d("TAG", "height=" + height);
// The drag shadow is a ColorDrawable. This sets its dimensions to be the same as the
// Canvas that the system will provide. As a result, the drag shadow will fill the
// Canvas.
shadow.setBounds(0, 0, width, height);
// Sets the size parameter's width and height values. These get back to the system
// through the size parameter.
size.set(width, height);
// Sets size parameter to member that will be used for scaling shadow image.
mScaleFactor = size;
// Sets the touch point's position to be in the middle of the drag shadow
touch.set(width / 2, height / 2);
}
// Defines a callback that draws the drag shadow in a Canvas that the system constructs
// from the dimensions passed in onProvideShadowMetrics().
#Override
public void onDrawShadow(Canvas canvas) {
// Draws the ColorDrawable in the Canvas passed in from the system.
shadow.draw(canvas);
// canvas.scale(mScaleFactor.x/(float)getView().getWidth(), mScaleFactor.y/(float)getView().getHeight());
// getView().draw(canvas);
}
}
Though I am little late but it might be helpful for others, your 1st approach is correct but before new MyDragShadowBuilder(view1) you need to call -
view1.measure(MeasureSpec.makeMeasureSpec(width, MeasureSpec.EXACTLY),MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY));
view1.layout(0, 0,view1.getMeasuredWidth(),view1.getMeasuredHeight())
This will give a proper dimension to your custom view
Related
I have to make a gradient color effect in the view that generated dynamically according to the scenario and also the view would be of any shape (diagonal or square)
As shown in image, gradient effect could be in any shape.
Also, if I create custom view for every possible case and play with Visibility, then how I will manage these views to fit perfectly on every device screen size?
Just need a small help to start.
Thanks in advance.
I have solved the issue using this approach.
public class MainActivity extends AppCompatActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(new CustomView(this));
}
}
and now create a CustomView class
public class CustomView extends View {
Rect rect;
private Rect rectangle;
private Paint paint;
public CustomView(Context context) {
super(context);
int x = 50;
int y = 50;
int sideLength = 200;
int sideLength1 = 100;
rectangle = new Rect(x, y, sideLength, sideLength1);
paint = new Paint();
paint.setColor(Color.GRAY);
}
#Override
protected void onDraw(Canvas canvas) {
int width = this.getMeasuredWidth();
int height = this.getMeasuredHeight();
BitmapShader shader;
//shader = new BitmapShader(header, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
//paint.setShader(shader);
Path path = new Path();
path.moveTo(40,40);
path.lineTo(5,height/2);
path.lineTo(width/2,height/4);
path.lineTo(width/2,0);
canvas.drawPath(path,paint);
}
I have a view and I want to draw a shape on it (circle for example) after click.
I've tried to do this but there are two problems -
onDraw is never called.
Not sure the setLayoutParams(v.getLayoutParams) will give me the result I want.
#Override
public void onClick(View v) {
CircleView circle = new CircleView(GameXoActivity.this, v.getWidth(), v.getHeight());
circle.setLayoutParams(v.getLayoutParams());
circle.startDrawing();
}
CircleView:
public CircleView(Context context, int width, int height) {
super(context);
this.width = width;
this.height = height;
}
protected void startDrawing() {
this.postInvalidate();
}
#Override
protected void onDraw(Canvas canvas) {
Log.d("TAG", "onDraw");
// draw circle
}
}
}
UPDATE:
The shape is not an image and I want to draw it with animation (I didn't write the entire code).
Also, the shape is not always a circle, so using a drawable-state is not an option.
Because there is not just one view, but 9, I don't think the making 9 more on top of them would be right.
As I'm sure you'll need to customize this quite a bit, I've left things rather generic. The following example will animate a blue circle being drawn clockwise, starting from the east (0 degrees), on top of the View's content when the View is clicked.
public class CircleView extends View
{
private static final int MARGIN = 50;
Handler handler = new Handler();
Paint paint = new Paint();
RectF rect = new RectF();
boolean drawing = false;
float sweep = 0;
public CircleView(Context context)
{
this(context, null);
}
public CircleView(Context context, AttributeSet attrs)
{
super(context, attrs);
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeWidth(15);
paint.setColor(Color.BLUE);
}
#Override
protected void onDraw(Canvas canvas)
{
super.onDraw(canvas);
canvas.drawArc(rect, 0, sweep, false, paint);
}
#Override
protected void onSizeChanged(int w, int h, int oldw, int oldh)
{
super.onSizeChanged(w, h, oldw, oldh);
rect.set(MARGIN, MARGIN, w - MARGIN, h - MARGIN);
}
public void startAnimation()
{
drawing = true;
handler.post(runnable);
}
Runnable runnable = new Runnable()
{
#Override
public void run()
{
sweep += 10;
if (!(sweep > 360))
{
invalidate();
handler.postDelayed(this, 20);
}
else
{
drawing = false;
sweep = 0;
}
}
};
}
In this Activity example, I used an image that most developers would already have in their project, but it can obviously be changed to your custom image. Also, for the sake of simplicity and brevity, the CircleView is set as the entire content of the Activity, but it can easily be listed in an xml layout, as well.
public class MainActivity extends Activity
{
CircleView circle;
#Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
circle = new CircleView(this);
circle.setBackgroundResource(R.drawable.ic_launcher);
circle.setOnClickListener(new OnClickListener()
{
#Override
public void onClick(View v)
{
circle.startAnimation();
}
}
);
setContentView(circle);
}
}
I suggest, create two imageView with same dimensions, set the image you want to display on image view and then make the second image invisible .
For example :
circleimage.setVisibility(View.INVISIBLE);//now its hidden(do it OnCreate)
and then show 2ndimage when 1stimage is clicked(do it in onclick of 1st image)
circleimage.setVisibility(View.VISIBLE);
If you want to mess with drawing of the object you should overridepublic void draw(Canvas canvas) and not protected void onDraw(Canvas canvas)
EDIT:Please read comments, this first statement of my answer is probably wrong
but I would use a FrameLayout or a RelativeLayout and put the images one on top of another.
Then you can play with the visibility of the overlaying image in order to hide/show it.
EDIT:
In case your circle is not an image and needs to be drawn, make your own circle class extending View and use it as a component in the FrameLayout or RelativeLayout as you would do if it were an image
Edit: This problem was down to me passing the wrong view to the Touch Delegate...problem is resolved now....
My RelativeLayout extension enlarges the clickable area of an ImageView. The RelativeLayout is the root View of the ListView row. The problem is when tapping areas that should be delegated to the ImageView, the ListView's onItemClicked is triggered.
My code is at the end and below is an image of what the extended bounds of the ImageView should be. If I tap on blue areas that are not the image, the click is received by the ListView.
public class DelegatingRelativeLayout extends RelativeLayout {
//relevant code moved to top
#Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
super.onLayout(changed, l, t, r, b);
final float density = getContext().getResources().getDisplayMetrics().density;
int extra = (int) (density * 4 + 0.5f);
Rect rect = new Rect(0, 0, mEnlargedView.getWidth(), getHeight());
rect.right += extra; //extend bounds by 4 pixels
setTouchDelegate(new TouchDelegate(rect, mEnlargedView));
mExtendedBounds = rect;
}
public void setEnlargedView(View v) {
mEnlargedView = v;
}
private static final boolean DEBUG_DRAW = true;
private View mEnlargedView;
private Rect mExtendedBounds;
//constructors removed
#Override
protected void dispatchDraw(Canvas canvas) {
if (DEBUG_DRAW) {
Paint p = new Paint();
p.setColor(Color.BLUE);
canvas.drawRect(mExtendedBounds, p);
}
super.dispatchDraw(canvas);
}
}
Ugh, I've just realized I've been passing the wrong view to the touch delegate >.< It's been working fine now.... >.<
In one of my app, I need to read text from database and show it to user. I thought of using Coverflow for this purpose. So can anyone here please let me know, is it possible to display text using CoverFlow instead of images? I am trying to produce the output which is something similar to this. As suggested, I convert the text into bitmap images and trying to display it. But I am getting the blank screen. Please see my code below
public class CoverFlowDemoActivity extends Activity {
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
CoverFlow coverFlow;
coverFlow = new CoverFlow(this);
coverFlow.setAdapter(new ImageAdapter(this));
ImageAdapter coverImageAdapter = new ImageAdapter(this);
coverFlow.setAdapter(coverImageAdapter);
coverImageAdapter.populateBitmapArray();
coverFlow.setSpacing(-25);
coverFlow.setSelection(4, true);
coverFlow.setAnimationDuration(1000);
setContentView(coverFlow);
}
public class ImageAdapter extends BaseAdapter {
int mGalleryItemBackground;
private Context mContext;
private Bitmap[] bitmapImages;
public ImageAdapter(Context c) {
mContext = c;
bitmapImages = new Bitmap[9];
}
public void populateBitmapArray() {
for (int i = 0; i < 9; i++) {
Bitmap originalImage = textAsBitmap("Example Test", 50f,
R.color.red);
bitmapImages[i] = originalImage;
}
}
public int getCount() {
return 9;
}
public Object getItem(int position) {
return position;
}
public long getItemId(int position) {
return position;
}
public View getView(int position, View convertView, ViewGroup parent) {
// Use this code if you want to load from resources
ImageView i = new ImageView(mContext);
i.setImageBitmap(bitmapImages[position]);
i.setLayoutParams(new CoverFlow.LayoutParams(130, 130));
i.setScaleType(ImageView.ScaleType.CENTER_INSIDE);
// Make sure we set anti-aliasing otherwise we get jaggies
BitmapDrawable drawable = (BitmapDrawable) i.getDrawable();
drawable.setAntiAlias(true);
return i;
// return mImages[position];
}
/**
* Returns the size (0.0f to 1.0f) of the views depending on the
* 'offset' to the center.
*/
public float getScale(boolean focused, int offset) {
/* Formula: 1 / (2 ^ offset) */
return Math.max(0, 1.0f / (float) Math.pow(2, Math.abs(offset)));
}
public Bitmap textAsBitmap(String text, float largest, int textColor) {
Paint paint = new Paint();
paint.setTextSize(largest);
paint.setColor(textColor);
// int width = (int) (paint.measureText(text) + 0.5f); // round
int width = 500;
float baseline = (int) (paint.ascent() + 0.5f) + 3f;
// int height = (int) ((baseline + paint.descent() + 0.5f) + 3);
int height = 500;
Bitmap image = Bitmap.createBitmap(width, height,
Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(image);
canvas.drawText(text, 0, baseline, paint);
return image;
}
}
}
I had been doing something similar to yours. And I realise that you are drawing outside of your image.
To solve the problem, just change "baseline" to "250" and you will see your text as image.
e.g.:
CHANGE
canvas.drawText(text, 0, baseline, paint);
TO
canvas.drawText(text, 0, 250, paint);
Hope that this will be helpful to you
I was trying to get hold of 2D graphics in Android.
As a example i want to implement a custom drawable and show it in my Activity
I have defined a customized drawable by extending from Android drawable as mentioned below
class myDrawable extends Drawable {
private static final String TAG = myDrawable.class.getSimpleName();
private ColorFilter cf;
#Override
public void draw(Canvas canvas) {
//First you define a colour for the outline of your rectangle
Paint rectanglePaint = new Paint();
rectanglePaint.setARGB(255, 255, 0, 0);
rectanglePaint.setStrokeWidth(2);
rectanglePaint.setStyle(Style.FILL);
//Then create yourself a Rectangle
RectF rectangle = new RectF(15.0f, 50.0f, 55.0f, 75.0f); //in pixels
Log.d(TAG,"On Draw method");
// TODO Auto-generated method stub
Paint paintHandl = new Paint();
// paintHandl.setColor(0xaabbcc);
paintHandl.setARGB(125, 234, 213, 34 );
RectF rectObj = new RectF(5,5,25,25);
canvas.drawRoundRect(rectangle, 0.5f, 0.5f, rectanglePaint);
}
#Override
public int getOpacity() {
// TODO Auto-generated method stub
return 100;
}
#Override
public void setAlpha(int alpha) {
// TODO Auto-generated method stub
}
#Override
public void setColorFilter(ColorFilter cf) {
// TODO Auto-generated method stub
this.cf = cf;
}
}
I am trying to get this displayed in my activity, as shown below
public class custDrawable extends Activity {
/** Called when the activity is first created. */
LinearLayout layObj = null;
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
layObj = (LinearLayout) findViewById(R.id.parentLay);
ImageView imageView = (ImageView) findViewById(R.id.icon2);
myDrawable myDrawObj = new myDrawable();
imageView.setImageDrawable(myDrawObj);
imageView.invalidate();
// layObj.addView(myDrawObj, params);
}
}
But when i run the app i see no rectangle on the activity, can anyone help me out?
Where am i going wrong?
Your problem is in the getOpacity() method. 100 is not a valid value. You should use a PixelFormat value. Also, you should create your RectF and Paint in the constructor and then just adjust the values in draw() so you don't create so many objects that need garbage collected. Like this:
public class Square extends Drawable
{
private final Paint mPaint;
private final RectF mRect;
public Square()
{
mPaint = new Paint();
mRect = new RectF();
}
#Override
public void draw(Canvas canvas)
{
// Set the correct values in the Paint
mPaint.setARGB(255, 255, 0, 0);
mPaint.setStrokeWidth(2);
mPaint.setStyle(Style.FILL);
// Adjust the rect
mRect.left = 15.0f;
mRect.top = 50.0f;
mRect.right = 55.0f;
mRect.bottom = 75.0f;
// Draw it
canvas.drawRoundRect(mRect, 0.5f, 0.5f, mPaint);
}
#Override
public int getOpacity()
{
return PixelFormat.OPAQUE;
}
#Override
public void setAlpha(int arg0)
{
}
#Override
public void setColorFilter(ColorFilter arg0)
{
}
}
You may have to implement other overrides like getIntrinsicWidth and getIntrinsicHeight. One way to tell is that you set your layout_width and layout_height to some constant (layout_width="42dip" layout_height="42dip" in XML or setting your layoutParams to some value if you are using Java layouts). Some View types handle not having getIntrinsic* implemented than others, so try them! This includes a straight View.
You can try returning -1 if there's no specific width or height.
Hard to tell if the issue ever got resolved, but I got here via Google trying to help myself remember the details of making a custom Drawable, plus I want to help people avoid this: http://xkcd.com/979/