Develop Reference

Android imageView with checkeredBackground and different size images ontop

Background
I have an ImageView which is used to display previews of a file.
I would like to have the ImageView with a checkerboard background, so that when a file with transparency is rendered on top (such as PNG and SVG files) the checkerboard shows through on the transparent parts.
I have found lots of questions on StackOverflow on how to create the checkered background and this question is not entirely specific to that.
I am currently doing it in code. I create a 2 by 2 bitmap (top left/bottom right are one colour, top right, bottom left are the other colour) where the size of each box is specified. Then i create the main bitmap by drawing this small bitmap repeatedly.
int checkeredBackgroundSquareSize= 16;
private static Bitmap getCheckeredBitmap(int size) {
size = (size > 0) ? size : DEFAULT_SQUARE_SIZE;
int colorOne = ContentApplication.appCtx().getColor(R.color.checkerboard_background_color_one);
int colorTwo = ContentApplication.appCtx().getColor(R.color.checkerboard_background_color_two);
// width/height is twice the size of the individual squares
Bitmap squareBitmap = Bitmap.createBitmap(size*2, size*2, Bitmap.Config.ARGB_8888);
Paint bitmapPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
bitmapPaint.setStyle(Paint.Style.FILL);
Canvas canvas = new Canvas(squareBitmap);
// draw 2 rectangles on 2 rows
// top left and bottom right are the first colour
// top right and bottom left are the second colour
// set colour for top left/bottom right squares
bitmapPaint.setColor(colorOne);
// Square 1 : top left
Rect rect = new Rect(0, 0, size, size);
canvas.drawRect(rect, bitmapPaint);
// Square 2 : bottom right
rect.offset(size, size);
canvas.drawRect(rect, bitmapPaint);
// change colour for top right/bottom left squares
bitmapPaint.setColor(colorTwo);
// Square 3 : top right
rect.offset(-size, 0);
canvas.drawRect(rect, bitmapPaint);
// Square 4: bottom left
rect.offset(size, -size);
canvas.drawRect(rect, bitmapPaint);
return squareBitmap;
}
I then create a Bitmap the size of my preview image, and use the checkered background bitmap to repeatedly draw on the canvas before the preview image is added on top.
// Create a Bitmap to render our SVG to
Bitmap bitmap = Bitmap.createBitmap(bitmapWidth, bitmapHeight, Bitmap.Config.ARGB_8888);
// Create a Canvas to use for rendering
Canvas canvas = new Canvas(bitmap);
// If we don't specify a viewport box, then AndroidSVG will use the bounds of the Canvas
// as the viewport. So a scale of 1.0 corresponds to that size
canvas.scale(scaling,scaling );
// create the checkered background, indicating transparency
Bitmap square = getCheckeredBitmap(checkeredBackgroundSquareSize);
BitmapShader shader = new BitmapShader(square, Shader.TileMode.REPEAT, Shader.TileMode.REPEAT);
Paint paint = new Paint();
paint.setShader(shader);
// in your draw method
canvas.drawRect(0, 0, bitmapWidth, bitmapHeight, paint);
The issue
My previews can be different sizes, for example 100x100, 6000x2000 etc As i am creating the initial bitmap on these sizes, the final image for the files all render looking like the squares on the checkered background are different sizes.
I need to have the checkerboard look exactly the same regardless of the overlaid image's size.
Is there a way to set a background image for an ImageView to be an image. I can only see how to set it to a drawable and I can not see how to define a checkboard as an xml drawable.

Mike M gave the answer that solved my issue. See Mike's comments to the first post
Create your own Drawable that renders the checkerboard
public class CheckerboardDrawable extends Drawable {
// I inadvertently ran the example image with Paint.ANTI_ALIAS_FLAG, but
// we actually don't want that 'cause we're looking for crisp, clean lines.
private final Paint paint = new Paint();
private int checkeredBackgroundSquareSize = 16;
private int colorOne = Color.LTGRAY;
private int colorTwo = Color.WHITE;
#Override
public void draw(#NonNull Canvas canvas) {
final Rect bounds = getBounds();
final int squareSize = checkeredBackgroundSquareSize;
final int columns = bounds.width() / squareSize + 1;
final int rows = bounds.height() / squareSize + 1;
canvas.translate(bounds.left, bounds.top);
for (int c = 0; c < columns; c++) {
for (int r = 0; r < rows; r++) {
paint.setColor((c + r) % 2 == 0 ? colorOne : colorTwo);
final int x = c * squareSize;
final int y = r * squareSize;
canvas.drawRect(x, y, x + squareSize, y + squareSize, paint);
}
}
canvas.translate(-bounds.left, -bounds.top);
}
#Override
public int getOpacity() {
return PixelFormat.TRANSLUCENT;
}
#Override
public void setAlpha(int alpha) {}
#Override
public void setColorFilter(#Nullable ColorFilter colorFilter) {}
}
Then add the drawable to the ImageView
final ImageView imageView = findViewById(R.id.image);
imageView.setBackground(new CheckerboardDrawable());

Google Map Marker with custom background and text

I'm trying to customize an map marker so that it can be displayed with 3 main features:
9patch drawable as background
Custom text
Optional drawable to the left of the text (some markers have it, some don't)
I have used IconGenerator from android google map utils library, but somehow the entire clickable area of the marker is affected. An very big area around the marker is clickable and activates the marker. It also has issues with the content padding and gravity attributes.
I have added the custom hack on the map in order to bring to front the markers without opening the info window (I've setup an info window with no content to display and I've called showInfoWindow in Marker click event listener).
How can I manually created the icon for the marker and avoid the issue with the big clickable area around it?
I have also tried the implementation described here, basically the drawTextToBitmap() method:
private Bitmap drawTextToBitmap(#DrawableRes int backgroundRes, String text) {
Resources resources = getResources();
float scale = resources.getDisplayMetrics().density;
Bitmap bitmap = BitmapFactory.decodeResource(resources, backgroundRes);
android.graphics.Bitmap.Config bitmapConfig = bitmap.getConfig();
if (bitmapConfig == null) {
bitmapConfig = android.graphics.Bitmap.Config.ARGB_8888;
}
bitmap = bitmap.copy(bitmapConfig, true);
Canvas canvas = new Canvas(bitmap);
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
// SET FONT COLOR (e.g. WHITE -> rgb(255,255,255))
paint.setColor(Color.rgb(255, 255, 255));
// SET FONT SIZE (e.g. 15)
paint.setTextSize((int) (15 * scale));
// SET SHADOW WIDTH, POSITION AND COLOR (e.g. BLACK)
paint.setShadowLayer(1f, 0f, 1f, Color.BLACK);
Rect bounds = new Rect();
paint.getTextBounds(text, 0, text.length(), bounds);
int x = (bitmap.getWidth() - bounds.width()) / 2;
int y = (bitmap.getHeight() + bounds.height()) / 2;
canvas.drawText(text, x, y, paint);
return bitmap;
}
But it doesn't work as expected, because my text is bigger than the background, and I also don't know how to add an resource to the left of the text.
This is the implementation for IconGenerator I'm using:
private BitmapDescriptor getBitmapDescriptorForProduct(#NonNull final MyCustomObject product, boolean isActive) {
if (product.shouldDisplayWithLabel) {
// We use an custom layout for displaying markers on the map
#SuppressLint("InflateParams") View view =
LayoutInflater.from(getActivity()).inflate(R.layout.my_custom_label, null);
// Get the text view which will display the text
TextView label = (TextView) view.findViewById(R.id.text);
// Set the left drawable if needed
label.setCompoundDrawablesWithIntrinsicBounds(product.shouldDisplayWithDrawable ? R.drawable.my_custom_drawable : 0, 0,
0, 0);
// Set the text for the label
label.setText(product.label);
label.setBackgroundResource(R.drawable.my_custom_background);
// Set the layout for the icon
mIconGenerator.setContentView(view); // set the custom layout
// We don't want the default background
mIconGenerator.setBackground(null);
// Disable the content padding as we handle it in the view and in the 9patch resources
mIconGenerator.setContentPadding(0, 0, 0, 0);
// Make the icon and create the BitmapDescriptor necessary for the marker creation
Bitmap icon = mIconGenerator.makeIcon();
return BitmapDescriptorFactory.fromBitmap(icon);
} else {
// Lazy initialization for the normal markers
if (null == simpleMarkerIcon) {
simpleMarkerIcon = BitmapDescriptorFactory.fromResource(R.drawable.my_simple_marker);
}
// Reuse the bitmap for the simple markers that will be displayed on the map.
return simpleMarkerIcon;
}
}
LE:
#Harpreet, this how the marker icon will look like using your solution:
As you can see, the properties of the view are not displayed correctly in the bitmap.

public static Bitmap createDrawableFromView(Context context, View view) {
DisplayMetrics displayMetrics = new DisplayMetrics();
((Activity) context).getWindowManager().getDefaultDisplay()
.getMetrics(displayMetrics);
view.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT,
LayoutParams.WRAP_CONTENT));
view.measure(displayMetrics.widthPixels, displayMetrics.heightPixels);
view.layout(0, 0, displayMetrics.widthPixels,
displayMetrics.heightPixels);
view.buildDrawingCache();
Bitmap bitmap = Bitmap.createBitmap(view.getMeasuredWidth(),
view.getMeasuredHeight(), Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bitmap);
view.draw(canvas);
return bitmap;
}
Note:- Just fill Context and add your complete custom created view/layout as an object of View
It'll help you.

Change Position of textOn and textOff in Android Swtich

I have implemented the Switch Widget this way:
<android.support.v7.widget.SwitchCompat xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textOff="#string/switch_on"
android:textOn="#string/switch_on"
app:showText="true"
android:gravity="right"
android:thumb="#drawable/slider_thumb"
app:switchMinWidth="200dp"
app:track="#drawable/slider_tracker">
Everything works fine, except that the text is written on top on the thumb. What i want t achieve is having the text displayed on the track. So, assuming the switch is checked, the text would be displayed on the left and when not checked, the textOff would be displayed on the right.
.
How can i achieve this. Thanks

I figured out i can achieve this by drawing a text on a bitmap, generate a bitmap drawable from that and change the track drawable of the switch to the bitmapdrawable.
Basically, i achieve this with the snippet below.
BitmapDrawable bitmapDrawable = new BitmapDrawable(drawTextToBitmap(this, R.drawable.test_, "Slide to Sign In"));
switchCompat.setTrackDrawable(bitmapDrawable);
public Bitmap drawTextToBitmap(Context gContext,
int gResId,
String gText) {
Resources resources = gContext.getResources();
float scale = resources.getDisplayMetrics().density;
Bitmap bitmap =
BitmapFactory.decodeResource(resources, gResId);
android.graphics.Bitmap.Config bitmapConfig =
bitmap.getConfig();
// set default bitmap config if none
if (bitmapConfig == null) {
bitmapConfig = android.graphics.Bitmap.Config.ARGB_8888;
}
// resource bitmaps are imutable,
// so we need to convert it to mutable one
bitmap = bitmap.copy(bitmapConfig, true);
Canvas canvas = new Canvas(bitmap);
// new antialised Paint
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
// text color - #3D3D3D
paint.setColor(Color.rgb(61, 61, 61));
// text size in pixels
paint.setTextSize((int) (10 * scale));
// text shadow
paint.setShadowLayer(1f, 0f, 1f, Color.WHITE);
// draw text to the Canvas center
Rect bounds = new Rect();
paint.getTextBounds(gText, 0, gText.length(), bounds);
int x = (bitmap.getWidth() - (170));
int y = (bitmap.getHeight() + bounds.height()) / 2;
canvas.drawText(gText, x, y, paint);
return bitmap;
}
As for changing the drawable when the the switch is on and off,you can play with that using
switchCompat.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
#Override
public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
}
});

create a image with color in android

Setting background doesn't seem to give any hint on size for android.
Hence I'm looking for a way to create an image with a specific color.
(would be better if could be done in xml)
in iOS this could be achieved by
+ (UIImage*)placeHolderImage
{
static UIImage* image = nil;
if(image != nil)
return image;
CGRect rect = CGRectMake(0.0f, 0.0f, 1.0f, 1.0f);
UIGraphicsBeginImageContext(rect.size);
CGContextRef context = UIGraphicsGetCurrentContext();
// Seashell color
UIColor* color = [UIColor colorWithRed:255/255.0 green:245/255.0 blue:238/255.0 alpha:1.0];
CGContextSetFillColorWithColor(context, [color CGColor]);
CGContextFillRect(context, rect);
image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return image;
}

Here is the equivalent Android code:
// CGRect rect = CGRectMake(0.0f, 0.0f, 1.0f, 1.0f);
Rect rect = new Rect(0, 0, 1, 1);
//UIGraphicsBeginImageContext(rect.size);
//CGContextRef context = UIGraphicsGetCurrentContext();
Bitmap image = Bitmap.createBitmap(rect.width(), rect.height(), Config.ARGB_8888);
Canvas canvas = new Canvas(image);
//UIColor* color = [UIColor colorWithRed:255/255.0 green:245/255.0 blue:238/255.0 alpha:1.0];
int color = Color.argb(255, 255, 245, 238);
//CGContextSetFillColorWithColor(context, [color CGColor]);
Paint paint = new Paint();
paint.setColor(color);
//CGContextFillRect(context, rect);
canvas.drawRect(rect, paint);
//image = UIGraphicsGetImageFromCurrentImageContext();
//UIGraphicsEndImageContext();
/** nothing to do here, we already have our image **/
/** and the canvas will be released by the GC **/
Now, if you want to do this in XML its much easier:
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<size android:width="1px" android:height="1dp"/>
<solid android:color="#FFFFF5EE/>
</shape>
Although that won't give you a Bitmap, but a Drawable. It's just fine if you intend to just draw it somewhere. If you actually need a Bitmap, then you will have to use the above code to create a Canvas from a Bitmap and draw your Drawable into it.

This helps you in creating a bitmap image with a specific color.
firstly create a bitmap with name sampleBitmap like below
Bitmap.Config conf = Bitmap.Config.ARGB_8888; // see other conf types
Bitmap sampleBitmap = Bitmap.createBitmap(300, 300, conf); // this creates a MUTABLE bitmap
next use the following code to get each pixel of the created bitmap
// int[] pixels = new int[sampleBitmap.getHeight()*sampleBitmap.getWidth()];
for (int i=0; i < sampleBitmap.getWidth(); i++)
{
for (int j=0; j < sampleBitmap.getHeight(); i++)
{
sampleBitmap.setPixel(i, j, Color.rgb(someColor1, someColor2, someColor3));
}
}
using this you can set the bitmap to the listview item so that the listitem doesnt collapse

how to make outer glow effect around a bitmap?

I created glow effect for my bitmap imageview. Its working but I have porblem with my outer glow color.
This is my expected design outer glow color:
http://www.flashcomponents.net/component/professional-3d-carousel-as2-and-as3.html please see the link
but my glow effect not looking good please help me how make expected glow effect?
This is my code:
public class MainActivity extends Activity {
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
int margin = 24;
int halfMargin = margin / 2;
// the glow radius
int glowRadius = 16;
// the glow color
int glowColor = Color.rgb(0, 192, 255);
// The original image to use
Bitmap src = BitmapFactory.decodeResource(getResources(),
R.drawable.ic_launcher);
// extract the alpha from the source image
Bitmap alpha = src.extractAlpha();
// The output bitmap (with the icon + glow)
Bitmap bmp = Bitmap.createBitmap(src.getWidth() + margin,
src.getHeight() + margin, Bitmap.Config.ARGB_8888);
// The canvas to paint on the image
Canvas canvas = new Canvas(bmp);
Paint paint = new Paint();
paint.setColor(glowColor);
// outer glow
paint.setMaskFilter(new BlurMaskFilter(glowRadius, Blur.OUTER));
canvas.drawBitmap(alpha, halfMargin, halfMargin, paint);
// original icon
canvas.drawBitmap(src, halfMargin, halfMargin, null);
((ImageView) findViewById(R.id.bmpImg)).setImageBitmap(bmp);
}
}
I am new for android i need programmatically only.....
expected glow in my backside of the imageview please see my expected screen shot: