Develop Reference

Drawing line programmatically on a Layout

The red Margin represents an AbsoluteLayout, I have and arbitrary number of 'Board' objects placed on the screen. All I want is to draw a line on the screen using the coordinates of the Board object and the center of the screen. Each board object is responsible to draw this line.
Also I want the line to be behind the Board objects I'm guessing I have to change the z-index, or maybe draw the line on the AbsoluteLayout?
I have something like this:
public class Board {
ImageView line; //Imageview to draw line on
Point displayCenter; //Coordinates to the center of the screen
int x;
int y;
Activity activity;
Board(Point p, Point c, Activity activity) // Point c is the coordinates of the Board object
{
x = c.x
y = c.y
displayCenter.x = p.x;
displayCenter.y = p.y;
this.activity = activity;
updateLine();
}
public void updateLine(){
int w=activity.getWindowManager().getDefaultDisplay().getWidth();
int h=activity.getWindowManager().getDefaultDisplay().getHeight();
Bitmap bitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bitmap);
line.setImageBitmap(bitmap);
Paint paint = new Paint();
paint.setColor(0xFF979797);
paint.setStrokeWidth(10);
int startx = this.x;
int starty = this.y;
int endx = displayCenter.x;
int endy = displayCenter.y;
canvas.drawLine(startx, starty, endx, endy, paint);
}
}

first af all,
you should never ever use the absolute layout, it is deprecated for a good reason.
With that said you have two options. For both options you need to implement your own Layout.
For option no. 1 you can override the dispatchDraw(final Canvas canvas) see below.
public class CustomLayout extends AbsoluteLayout {
...
#Override
protected void dispatchDraw(final Canvas canvas) {
// put your code to draw behind children here.
super.dispatchDraw(canvas);
// put your code to draw on top of children here.
}
...
}
Option no. 2 If you like the drawing to occur in the onDraw me you need to set setWillNotDraw(false); since by default the onDraw method on ViewGroups won't be called.
public class CustomLayout extends AbsoluteLayout {
public CustomLayout(final Context context) {
super(context);
setWillNotDraw(false);
}
...
#Override
protected void onDraw(final Canvas canvas) {
super.onDraw(canvas);
// put your code to draw behind children here.
}
}

Create Vector Drawable with Drop Shadow to Overlay an Image

I would like to achieve a layout that looks like the "desired" image as part of the initial app state that informs the user of some basic actions. Right now I'm getting the "actual" image.
I need to have a background image of any drawable/image that has an overlay that is slanted from lower-left to upper-right and of any color. This also has to be scalable in terms of the same shape over any number of devices, phones or tablets and support back to SDK 16.
So far I've been going off the idea of using a vector image to create the slant drawable and then overlay that on top of the background image using a FrameLayout for the layering effect. I'm not sure if this is the best way to accomplish this but I'd like the overlay drawable to be a vector drawable or a nine-patch so it doesn't pixelate on wider layouts.
layout/view_layout.xml
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/background_image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/bg_image"/>
<View
android:layout_width="match_parent"
android:layout_height="52dp"
android:layout_gravity="bottom"
android:background="#drawable/overlay"/>
</FrameLayout>
drawable/overlay.xml
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="48dp" android:height="36dp"
android:viewportWidth="48" android:viewportHeight="36">
<path
android:fillColor="#fff"
android:pathData="M48,0 L48,36 L0,36 L0,32 Z"/>
</vector>
If anyone knows how to add a drop shadow to a vector drawable (I haven't been able to find a way) or if there is a better approach to this, any help or suggestion would be much appreciated. Thanks!

What I ended up doing to solve this was extending the ImageView class and adding custom draw logic to overlay the Image. It's not using a Vector Drawable like I had hoped but it does present the exact effect that I was hoping for. Here's a basic outline of my class:
public class CoveredImageView extends ImageView {
static float DENSITY = 1f;
static final float SHADOW_DISTANCE = 10f;
static final int SHADOW_COLOR = 0xAA000000;
Path path;
Paint paint;
Point p1, p2, p3;
public CoveredImageView(Context context) {
this(context, null);
}
public CoveredImageView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public CoveredImageView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init(context);
}
void init(#NonNull Context context) {
DENSITY = context.getResources().getDisplayMetrics().density;
path = new Path();
paint = new Paint();
p1 = new Point();
p2 = new Point();
p3 = new Point();
// Required to make the ShadowLayer work properly
setLayerType(LAYER_TYPE_SOFTWARE, null);
}
void updateDrawVariables() {
int shadowSize = (int)(SHADOW_DISTANCE * DENSITY);
paint.setColor(Color.WHITE);
paint.setStyle(Paint.Style.FILL);
paint.setAntiAlias(true);
paint.setShadowLayer(shadowSize, 0, -1, SHADOW_COLOR);
// Offset the actual position by the shadow size so
int left = 0 - shadowSize;
int right = getMeasuredWidth() + shadowSize;
int bottom = getMeasuredHeight();
p1.set(left, bottom);
p2.set(right, bottom - (int)(52 * DENSITY));
p3.set(right, bottom);
path.setFillType(Path.FillType.EVEN_ODD);
path.moveTo(p1.x, p1.y);
path.lineTo(p2.x, p2.y);
path.lineTo(p3.x, p3.y);
// Move the path shape down so that the shadow doesn't "fade" at the left and right edges
path.lineTo(p3.x, p3.y + shadowSize);
path.lineTo(p1.x, p1.y + shadowSize);
path.close();
}
#Override
public void onLayout(boolean changed, int l, int t, int r, int b) {
super.onLayout(changed, l, t, r, b);
// Update all the drawing variables if the layout values have changed
if(changed) {
updateDrawVariables();
}
}
#Override
public void onDraw(Canvas canvas) {
super.onDraw(canvas);
// Paint the current path values that were set after onLayout()
canvas.drawPath(path, paint);
}
}

Canvas is not Showing Image/Drawable

I am doing a work on SVG Paths and Image. I have loaded SVG file and get an image and try to set thi image on canvas . But canvas is not showing image. I check the height and width and null check of this image/picture and it is not null so i am unable to understand that why canvas is not showing image. any help
My code:
public class MainActivity extends Activity{
Context c;
#Override
public void onCreate(Bundle savedInstanceState){
super.onCreate(savedInstanceState);
c=getApplicationContext();
setContentView(new GameView(this));
}
public class GameView extends View{
private int width, height;
private long svgId;
Picture picture;
long startTime;
float scaleFactor;
public GameView(Context context) {
super(context);
SVG svg = SVGParser.getSVGFromResource(getResources(),R.raw.android);
picture = svg.getPicture();
}
#Override
protected void onLayout (boolean changed, int left, int top, int right, int bottom) {
// get visible area
width = right - left;
height = bottom - top;
}
#Override
public void onDraw(Canvas canvas) {
// paint a white background...
canvas.drawColor(Color.BLACK);
if (canvas!=null)
{
Toast.makeText(c, "yahooooooooooooooooo"+picture.getHeight(), Toast.LENGTH_LONG).show();
scaleFactor=Math.min((float)getHeight()/picture.getHeight(),(float)getWidth()/picture.getWidth());
canvas.scale((float)scaleFactor,(float)scaleFactor);
canvas.drawPicture(picture);
}
}
}
}

There is a known issue with svg-android that with certain images, the hardware acceleration can actually cause the image to not show up. I'm not sure of the exact circumstances of what causes this, but I do know it happened to me, as I documented in this question. The key is to disable hardware acceleration for the view. Depending on what your target it, you might not need to do something quite as fancy as I did (Android 3.0+ doesn't need to check the build version), but here's the key part. Add the code I included in the constructor to your constructor, then add the disableHardwareAcceleration bit
public GameView(Context context,AttributeSet attrs) {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB)
{
disableHardwareAcceleration();
}
}
#TargetApi(Build.VERSION_CODES.HONEYCOMB)
private void disableHardwareAcceleration()
{
setLayerType(View.LAYER_TYPE_SOFTWARE, null);
}

This is what I use to return a drawable object that I will use through all my app
It works quite well.
final BitmapDrawable getSVG_Drawable
(int svgResourceID, int width, int height)
{
// Get a Picture from the SVG in res/raw.
final SVG vector =
SVGParser.getSVGFromResource(getResources(), svgResourceID);
final DisplayMetrics metrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(metrics);
// Redraw the picture to a new size.
final Bitmap bmp =
Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
final Canvas cnv = new Canvas(bmp);
cnv.setDensity((int) (metrics.xdpi));
cnv.drawPicture(vector.getPicture(), new Rect(0, 0, width, height));
final BitmapDrawable drw = new BitmapDrawable(getResources(), bmp);
// Return the drawable.
return drw;
}

Programmatically creating icon to use as ItemizedOverlay drawable - Android

I am trying to programmatically draw a parking icon to place as the drawable for an itemized overlay on a map.
The icon consists of a blue square with a white 'P' in its centre of which I would like to programmatically change the colour of the square to denote different parking types.
I've tried creating it via the canvas using drawRect & drawText but I cannot find a simple way of centering the text in the square and I cannot find a way to center the canvas on the coordinates - it keeps wanting to anchor from the top left hand corner.
I've alternatively tried creating an XML layout to convert to a drawable but cannot achieve this either.
Is there an elegant solution for what I am trying to achieve?

public class TextDrawable extends Drawable {
private final static int TEXT_PADDING = 3;
private final static int ROUNDED_RECT_RADIUS = 5;
private final String text;
private final Paint textPaint;
private final Rect textBounds;
private final Paint bgPaint;
private final RectF bgBounds;
public TextDrawable(String text, String backgroundColor, int textHeight) {
this.text = text;
// Text
this.textPaint = new Paint();
this.textBounds = new Rect();
textPaint.setColor(Color.WHITE);
textPaint.setARGB(255, 255, 255, 255);
textPaint.setAntiAlias(true);
textPaint.setSubpixelText(true);
textPaint.setTextAlign(Paint.Align.CENTER); // Important to centre horizontally in the background RectF
textPaint.setTextSize(textHeight);
textPaint.setTypeface(Typeface.DEFAULT_BOLD);
// Map textPaint to a Rect in order to get its true height
// ... a bit long-winded I know but unfortunately getTextSize does not seem to give a true height!
textPaint.getTextBounds(text, 0, text.length(), textBounds);
// Background
this.bgPaint = new Paint();
bgPaint.setAntiAlias(true);
bgPaint.setColor(Color.parseColor(backgroundColor));
float rectHeight = TEXT_PADDING * 2 + textHeight;
float rectWidth = TEXT_PADDING * 2 + textPaint.measureText(text);
//float rectWidth = TEXT_PADDING * 2 + textHeight; // Square (alternative)
// Create the background - use negative start x/y coordinates to centre align the icon
this.bgBounds = new RectF(rectWidth / -2, rectHeight / -2, rectWidth / 2, rectHeight / 2);
}
#Override
public void draw(Canvas canvas) {
canvas.drawRoundRect(bgBounds, ROUNDED_RECT_RADIUS, ROUNDED_RECT_RADIUS, bgPaint);
// Position the text in the horizontal/vertical centre of the background RectF
canvas.drawText(text, 0, (textBounds.bottom - textBounds.top)/2, textPaint);
}
#Override
public void setAlpha(int alpha) {
bgPaint.setAlpha(alpha);
textPaint.setAlpha(alpha);
}
#Override
public void setColorFilter(ColorFilter cf) {
bgPaint.setColorFilter(cf);
textPaint.setColorFilter(cf);
}
#Override
public int getOpacity() {
return PixelFormat.TRANSLUCENT;
}
}

Make several png images & put them in res\drawable, if you have more than like 5 colors then think about using less. It's confusing for the user.

How to use custom views, e.g. setting drawable

I think I'm a bit confused about how to use custom views. I'm following along with slides from a talk given by Eric Burke from Square (from this year's anddevcon, slides here: http://www.andevcon.com/AndevCon_II/downloadpresentation.aspx?aid=Taming_Android__User_Experience_Lessons_from_Square_pdf.zip&sid=2).
His code, or at least the part he showed in the slides, went something like this:
public class EditablePhoto extends View {
private Bitmap framedPhoto;
private Bitmap image;
private Drawable placeholder;
public EditablePhoto(Context context) {
super(context);
}
#Override protected void onMeasure(int widthMeasureSpec,
int heightMeasureSpec) {
int measuredWidth = getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec);
int measuredHeight = getDefaultSize(getSuggestedMinimumHeight(), heightMeasureSpec);
//ensure view always square
int min = Math.min(measuredHeight, measuredWidth);
setMeasuredDimension(min, min);
}
#Override
protected void onDraw(Canvas canvas) {
if(placeholder == null && image==null) return;
if(framedPhoto == null) {
createFramedPhoto(Math.min(getWidth(), getHeight()));
}
canvas.drawBitmap(framedPhoto, 0, 0, null);
}
private void createFramedPhoto(int size) {
Drawable imageDrawable = (image!=null)
? new BitmapDrawable(image) : placeholder;
Bitmap output = Bitmap.createBitmap(size, size,
Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(output);
RectF outerRect = new RectF(0, 0, size, size);
float outerRadius = size / 18f;
//Red rectangle
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setColor(Color.RED);
canvas.drawRoundRect(outerRect, outerRadius, outerRadius, paint);
paint.setXfermode(new PorterDuffXfermode(
PorterDuff.Mode.SRC_IN));
imageDrawable.setBounds(0, 0, size, size);
canvas.saveLayer(outerRect, paint, Canvas.ALL_SAVE_FLAG);
imageDrawable.draw(canvas);
canvas.restore();
}
}
What I don't get is how to actually use this View now.... Where and when do you set the bitmaps, which are private fields in this class...?
Generally confused and would love some enlightenment.

More than one year passed, but I hope this will help anyone who looking for the right answer. In my case, I putted this line of code
framedPhoto = output;
as the last one in createFramedPhoto() method. It works.
In the example, the author created a rounded rectangle as background then he draw the bitmap on it with XOR mode, so all pixel outside the rounded rectangle will be trim off.

OnDraw() is the method where you will Draw your view on canvas. here too you can analyze onDraw() will fisrt call CreateFramePhoto then draw this Bitmap on canvas .
You can add this customView in layout Either from xml or in Java Class
1) Through Xml :
<EditablePhoto android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
..........................
/>
dont forgate to add constructor EditablePhoto(Context context, AttributeSet attributeSet) for this case
2) through Java class :
EditablePhoto editablePhoto = new EditablePhoto(this);
addView(editablePhoto) // or do anthing you want with this