hi in my project i've coverflow widget. i'm using code for that coverflow widget is in this link
this is the link i'm using
i want to implement reflection for that whole widget
thanks in advance
hi i'm using this method but not getting reflection,is any thing wrong in this? for coverflow widget
public boolean createReflectedImages() {
// The gap we want between the reflection and the original image
System.out.println(" i'm from createReflected image()");
final int reflectionGap = 4;//4
int index = 0;
for (int imageId : mImageIds)
{
Bitmap originalImage = BitmapFactory.decodeResource(
getResources(), imageId);
int width = originalImage.getWidth();
int height = originalImage.getHeight();
//int width=100;
//int height=100;
// This will not scale but will flip on the Y axis
Matrix matrix = new Matrix();
//matrix.preScale(-1.0f, 1.0f);
//Bitmap mirroredBitmap = Bitmap.createBitmap(originalImage, 0, 0, originalImage.getWidth(), originalImage.getHeight(), matrix, false);
matrix.preScale(1, -1);
// Create a Bitmap with the flip matrix applied to it.
// We only want the bottom half of the image
Bitmap reflectionImage = Bitmap.createBitmap(originalImage, 0,
height / 2, width, height / 2, matrix, false);
// Create a new bitmap with same width but taller to fit
// reflection
Bitmap bitmapWithReflection = Bitmap.createBitmap(width,
(height + height / 2), Config.ARGB_8888);
// Create a new Canvas with the bitmap that's big enough for
// the image plus gap plus reflection
Canvas canvas = new Canvas(bitmapWithReflection);
// Draw in the original image
canvas.drawBitmap(originalImage, 0, 0, null);
// Draw in the gap
Paint deafaultPaint = new Paint();
canvas.drawRect(0, height, width, height + reflectionGap,
deafaultPaint);
// Draw in the reflection
canvas.drawBitmap(reflectionImage, 0, height + reflectionGap,
null);
// Create a shader that is a linear gradient that covers the
// reflection
Paint paint = new Paint();
LinearGradient shader = new LinearGradient(0,originalImage.getHeight(), 0,bitmapWithReflection.getHeight() + reflectionGap,
0x70ffffff, 0x00ffffff, TileMode.CLAMP);
// Set the paint to use this shader (linear gradient)
paint.setShader(shader);
// Set the Transfer mode to be porter duff and destination in
paint.setXfermode(new PorterDuffXfermode(Mode.DST_IN));
// Draw a rectangle using the paint with our linear gradient
canvas.drawRect(0, height, width,
bitmapWithReflection.getHeight() + reflectionGap, paint);
ImageView imageView = new ImageView(mContext);
imageView.setImageBitmap(bitmapWithReflection);
android.widget.Gallery.LayoutParams imgLayout = new CoverFlow.LayoutParams( 200, 200);
imageView.setLayoutParams(imgLayout);
imageView.setPadding(50, 100, 50, 20);
imageView.setScaleType(ScaleType.MATRIX);
mImages[index++] = imageView;
}
return true;
You can use This Coverflow in your project. It gives you option to add reflection in coverflow. I have used this in one of my previous apps
Edited -
Blog you have mentioned is using adapter which is extending BaseAdapter and is using createReflectedImages() method only
If you look into source code of link I have provided, there is CoverFlowTestingActivity is there which is using following code to setup coverflow
private void setupCoverFlow(final CoverFlow mCoverFlow, final boolean reflect) {
BaseAdapter coverImageAdapter;
if (reflect) {
coverImageAdapter = new ReflectingImageAdapter(new ResourceImageAdapter(this));
} else {
coverImageAdapter = new ResourceImageAdapter(this);
}
mCoverFlow.setAdapter(coverImageAdapter);
mCoverFlow.setSelection(2, true);
setupListeners(mCoverFlow);
}
Here you can see that if we want to reflection of images ReflectingImageAdapter in conjuction with ResourceImageAdapter which is extending AbstractCoverFlowImageAdapter.
I think this is the game changer for you
Related
I want to implement cover flow as below
I have tried Carousel, but its not the same thing. Did some google search was not able to find something even near to the cover flow implemented in given example.
Definitely have a look at this, FancyCoverFlow.
There is a demo app for it in the Play store as well that shows the reflection requirement you'd like.
have you tried this:
blog post
public Bitmap getRefelection(Bitmap image) {
// The gap we want between the reflection and the original image
final int reflectionGap = 0;
// Get you bit map from drawable folder
Bitmap originalImage = image;
int width = originalImage.getWidth();
int height = originalImage.getHeight();
// This will not scale but will flip on the Y axis
Matrix matrix = new Matrix();
matrix.preScale(1, -1);
// Create a Bitmap with the flip matix applied to it.
// We only want the bottom half of the image
/*if(bitmapWithReflection!=null && !bitmapWithReflection.isRecycled()){
bitmapWithReflection.recycle();
bitmapWithReflection=null;
}*/
Bitmap reflectionImage = Bitmap.createBitmap(originalImage, 0,
height / 2, width, height / 2, matrix, false);
// Create a new bitmap with same width but taller to fit reflection
Bitmap bitmapWithReflection = Bitmap.createBitmap(width,(height + height / 2), Config.ARGB_8888);
// Create a new Canvas with the bitmap that's big enough for
// the image plus gap plus reflection
Canvas canvas = new Canvas(bitmapWithReflection);
// Draw in the original image
canvas.drawBitmap(originalImage, 0, 0, null);
//Draw the reflection Image
canvas.drawBitmap(reflectionImage, 0, height + reflectionGap, null);
// Create a shader that is a linear gradient that covers the reflection
Paint paint = new Paint();
LinearGradient shader = new LinearGradient(0,
originalImage.getHeight(), 0, bitmapWithReflection.getHeight()
+ reflectionGap, 0x40ffffff, 0x00ffffff, TileMode.CLAMP);
// Set the paint to use this shader (linear gradient)
paint.setShader(shader);
// Set the Transfer mode to be porter duff and destination in
paint.setXfermode(new PorterDuffXfermode(Mode.DST_IN));
// Draw a rectangle using the paint with our linear gradient
canvas.drawRect(0, height, width, bitmapWithReflection.getHeight()
+ reflectionGap, paint);
if(originalImage!=null && originalImage.isRecycled()){
originalImage.recycle();
originalImage=null;
}
if(reflectionImage!=null && reflectionImage.isRecycled()){
reflectionImage.recycle();
reflectionImage=null;
}
return bitmapWithReflection;
}
Have you gone through the Android Coverflow which is bit different form the Carousel which you want.
I made cover flow widget which is not dependent on gallery.
You can find it here. I will add some samples later.
http://applm.github.io/ma-components/
How can i add water waves in bitmap image?
i have found water ripple effect on touch event here: https://github.com/esteewhy/whater but can not implement on my single bitmap.
can anyone help in making water wave effect on my bitmap?
or should i go for image processing?
Thank you in advance.
Here is my sample code in which i have to make water reflection effect:
public static Bitmap reflection(Bitmap mainImage) {
int width = mainImage.getWidth();
int height = mainImage.getHeight();
Matrix matrix = new Matrix();
matrix.preScale(1, -1);
reflectionImage = Bitmap.createBitmap(mainImage, 0,
0, width, height , matrix, false);
reflectedBitmap = Bitmap.createBitmap(width,
(height + height), Config.ARGB_8888);
Canvas canvas = new Canvas(reflectedBitmap);
canvas.drawBitmap(mainImage, 0, 0, null);
Paint defaultPaint = new Paint();
canvas.drawRect(0, height, width, height, defaultPaint);
canvas.drawBitmap(reflectionImage, 0, height-6 , null);
Paint paint = new Paint();
LinearGradient shader = new LinearGradient(0,
mainImage.getHeight(), 0, reflectedBitmap.getHeight()
, 0x70ffffff, 0x00ffffff, TileMode.CLAMP);
paint.setShader(shader);
paint.setXfermode(new PorterDuffXfermode(Mode.DST_IN));
canvas.drawRect(0, height, width, reflectedBitmap.getHeight()
, paint);
return reflectedBitmap;
}
I need to create a completely round image in Android. I've got the following code which works in newer version of Android, but in older versions (2.3), it is just a black circle:
Bitmap avatar = null;
if (avatarUrl == null || avatarUrl.equals("")) {
avatar = BitmapFactory.decodeResource(context.getResources(), R.drawable.icon_no_avatar);
} else {
avatar = HttpClientHelper.downloadImage(avatarUrl);
}
if (avatar == null) {
// No avatar? Load the default one and use it instead
avatar = BitmapFactory.decodeResource(context.getResources(), R.drawable.icon_no_avatar);
}
float width = 50; // avatar.getWidth();
float height = 50; // avatar.getHeight();
float ratio = (float)avatar.getWidth() / (float)avatar.getHeight();
// Scale the avatar to the area that it needs to fit into
avatar = Bitmap.createScaledBitmap(avatar, (int)(width * ratio), (int)height, true);
// Turn the avatar into a round image
Bitmap circleBitmap = Bitmap.createBitmap((int)width, (int)height, Bitmap.Config.ARGB_8888);
BitmapShader shader = new BitmapShader(avatar, TileMode.CLAMP, TileMode.CLAMP);
Paint paint = new Paint();
paint.setShader(shader);
RectF rect = new RectF(0.0f, 0.0f, width, height);
Canvas c = new Canvas(circleBitmap);
c.drawCircle(width / 2, height / 2, (width / 2) - 1, paint);
Is there something different I should do with 2.3 to make this work?
Use this
float width = 50; // avatar.getWidth();
float height = 50; // avatar.getHeight();
float radius = 45;
Bitmap bmpBG = Bitmap.createBitmap(width, height,
Bitmap.Config.ARGB_8888);
Canvas c = new Canvas(bmpBG);
//YOU CAN ADD SHADER FOR EFFECTS
Paint p = new Paint();
p.setAntiAlias(true);
p.setDither(true);
p.setColor(Color.RED);//SET YOUR COLOR HERE
c.drawCircle(width/ 2, height/ 2,
radius , p);
//NOW USE bmpBG
This must be a bug in 2.3. I was previously setting the round bitmap as the ImageView background which caused the black circle. When I set it as the foreground, the problem went away.
Again, this only happens with 2.3. After 3.0 this problem no longer exists.
I have an image with frames and I need to add a watermark effect. How might I do this?
I found great tutorial on Android Image Processing here.
public static Bitmap mark(Bitmap src, String watermark, Point location, Color color, int alpha, int size, boolean underline) {
int w = src.getWidth();
int h = src.getHeight();
Bitmap result = Bitmap.createBitmap(w, h, src.getConfig());
Canvas canvas = new Canvas(result);
canvas.drawBitmap(src, 0, 0, null);
Paint paint = new Paint();
paint.setColor(color);
paint.setAlpha(alpha);
paint.setTextSize(size);
paint.setAntiAlias(true);
paint.setUnderlineText(underline);
canvas.drawText(watermark, location.x, location.y, paint);
return result;
}
Thanks to Pete Houston who shares such useful tutorial on basic image processing.
For others reference, if you want to add the logo of your application (which is in your drawable folder(s)) on top of image use following method:
private Bitmap addWaterMark(Bitmap src) {
int w = src.getWidth();
int h = src.getHeight();
Bitmap result = Bitmap.createBitmap(w, h, src.getConfig());
Canvas canvas = new Canvas(result);
canvas.drawBitmap(src, 0, 0, null);
Bitmap waterMark = BitmapFactory.decodeResource(mContext.getResources(), R.drawable.logo);
canvas.drawBitmap(waterMark, 0, 0, null);
return result;
}
If someone is still searching for this, I found a good solution here
It adds a watermark to the bottom right portion and scales it according to the source image which was exactly what I was looking for.
/**
* Embeds an image watermark over a source image to produce
* a watermarked one.
* #param source The source image where watermark should be placed
* #param watermark Watermark image to place
* #param ratio A float value < 1 to give the ratio of watermark's height to image's height,
* try changing this from 0.20 to 0.60 to obtain right results
*/
public static Bitmap addWatermark(Bitmap source, Bitmap watermark, float ratio) {
Canvas canvas;
Paint paint;
Bitmap bmp;
Matrix matrix;
RectF r;
int width, height;
float scale;
width = source.getWidth();
height = source.getHeight();
// Create the new bitmap
bmp = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
paint = new Paint(Paint.ANTI_ALIAS_FLAG | Paint.DITHER_FLAG | Paint.FILTER_BITMAP_FLAG);
// Copy the original bitmap into the new one
canvas = new Canvas(bmp);
canvas.drawBitmap(source, 0, 0, paint);
// Scale the watermark to be approximately to the ratio given of the source image height
scale = (float) (((float) height * ratio) / (float) watermark.getHeight());
// Create the matrix
matrix = new Matrix();
matrix.postScale(scale, scale);
// Determine the post-scaled size of the watermark
r = new RectF(0, 0, watermark.getWidth(), watermark.getHeight());
matrix.mapRect(r);
// Move the watermark to the bottom right corner
matrix.postTranslate(width - r.width(), height - r.height());
// Draw the watermark
canvas.drawBitmap(watermark, matrix, paint);
return bmp;
}
And it is well commented which is what is a huge plus!
It seems you are looking for a waterrippleeffect as this one. Checkout the complete source code. Also check the screenshot how does the effect look like.
In Kotlin:
Note: Its just modified code of above answers
private fun mark(src: Bitmap, watermark: String): Bitmap {
val w = src.width
val h = src.height
val result = Bitmap.createBitmap(w, h, src.config)
val canvas = Canvas(result)
canvas.drawBitmap(src, 0f, 0f, null)
val paint = Paint()
paint.color = Color.RED
paint.textSize = 10f
paint.isAntiAlias = true
paint.isUnderlineText = true
canvas.drawText(watermark, 20f, 25f, paint)
return result
}
val imageBitmap = mark(yourBitmap, "Your Text")
binding.meetProofImageView.setImageBitmap(imageBitmap)
You can use androidWM to add a watermark into your image, even with invisible watermarks:
add dependence:
dependencies {
...
implementation 'com.huangyz0918:androidwm:0.2.3'
...
}
and java code:
WatermarkText watermarkText = new WatermarkText(“Hello World”)
.setPositionX(0.5)
.setPositionY(0.5)
.setTextAlpha(100)
.setTextColor(Color.WHITE)
.setTextFont(R.font.champagne)
.setTextShadow(0.1f, 5, 5, Color.BLUE);
WatermarkBuilder.create(this, backgroundBitmap)
.loadWatermarkText(watermarkText)
.getWatermark()
.setToImageView(backgroundView);
You can easily add an image type watermark or a text watermark like this, and the library size is smaller than 30Kb.
I tried a few libraries mentioned in other posts, like this, but unfortunately it is missing, and not downloadable now. So I followed AndroidLearner 's answer above, but after tweaking the code a little bit, for those of you who are having trouble rotating the watermark, and what values are valid for the various methods of Paint class, so that the text shows rotated at an angle(like most of the company watermarks do), you can use the below code.
Note that, w and h are the screen width and height respectively, which you can calculate easily, there are tons of ways you can find on stackoverflow only.
public static Bitmap waterMarkBitmap(Bitmap src, String watermark) {
int w = src.getWidth();
int h = src.getHeight();
Bitmap mutableBitmap = Utils.getMutableBitmap(src);
Bitmap result = Bitmap.createBitmap(w, h, mutableBitmap.getConfig());
Canvas canvas = new Canvas(result);
canvas.drawBitmap(src, 0f, 0f, null);
Paint paint = new Paint();
paint.setColor(Color.RED);
paint.setTextSize(92f);
paint.setAntiAlias(true);
paint.setAlpha(70); // accepts value between 0 to 255, 0 means 100% transparent, 255 means 100% opaque.
paint.setUnderlineText(false);
canvas.rotate(45, w / 10f, h / 4f);
canvas.drawText(watermark, w / 10f, h / 4f, paint);
canvas.rotate(-45, w / 10f, h / 4f);
return result;
}
It rotates the text watermark by 45 degrees, and places it at the centre of the bitmap.
Also note that, in case you are not able to get watermark, it might be the case that the bitmap you are using as source is immutable. For this worst case scenario, you can use below method to create a mutable bitmap from an immutable one.
public static Bitmap getMutableBitmap(Bitmap immutableBitmap) {
if (immutableBitmap.isMutable()) {
return immutableBitmap;
}
Bitmap workingBitmap = Bitmap.createBitmap(immutableBitmap);
return workingBitmap.copy(Bitmap.Config.ARGB_8888, true);
}
I found above method inside here. I have tested using both the methods in my application, and it works perfectly after I added above tweaks. Try it and let me know if it works or not.
use framelayout. put two imageviews inside the framelayout and specify the position of the watermark imageview.
I have an image and I want to give reflection to that image in Android application, below is the source code. I've found an example code
ImageView imageView = (ImageView) findViewById(R.id.image1);
imageView.setImageResource(imageIDs[position]);
//The gap we want between the reflection and the original image
final int reflectionGap = 4;
//Get you bit map from drawable folder
Bitmap originalImage = BitmapFactory.decodeResource(getResources(),
imageIDs[position]);
int width = originalImage.getWidth();
int height = originalImage.getHeight();
//This will not scale but will flip on the Y axis
Matrix matrix = new Matrix();
matrix.preScale(1, -1);
//Create a Bitmap with the flip matix applied to it.
//We only want the bottom half of the image
Bitmap reflectionImage ;
if(isVertical)
reflectionImage= Bitmap.createBitmap(originalImage, 0, height/2, width, height/2, matrix, false);
else
reflectionImage= Bitmap.createBitmap(originalImage, width/2, 0, width/2, height, matrix, false);
//Create a new bitmap with same width but taller to fit reflection
Bitmap bitmapWithReflection;
if(isVertical)
bitmapWithReflection = Bitmap.createBitmap(width
, (height + height/2), Config.ARGB_8888);
else
bitmapWithReflection = Bitmap.createBitmap(width +width/2
, height, Config.ARGB_8888);
//Create a new Canvas with the bitmap that's big enough for
//the image plus gap plus reflection
Canvas canvas = new Canvas(bitmapWithReflection);
//Draw in the original image
canvas.drawBitmap(originalImage, 0, 0, null);
//Draw in the gap
Paint deafaultPaint = new Paint();
if(isVertical)
canvas.drawRect(0, height, width, height + reflectionGap, deafaultPaint);
else
canvas.drawRect(width, 0, width+reflectionGap, height, deafaultPaint);
//Draw in the reflection
if(isVertical)
canvas.drawBitmap(reflectionImage,0, height + reflectionGap, null);
else
canvas.drawBitmap(reflectionImage,width + reflectionGap,0 , null);
//Create a shader that is a linear gradient that covers the reflection
Paint paint = new Paint();
LinearGradient shader;
if(isVertical)
shader = new LinearGradient(0, originalImage.getHeight(), 0,
bitmapWithReflection.getHeight() + reflectionGap, 0x70ffffff, 0x00ffffff,
TileMode.CLAMP);
else
shader = new LinearGradient(originalImage.getWidth(),0,
bitmapWithReflection.getWidth() + reflectionGap,0, 0x70ffffff, 0x00ffffff,
TileMode.CLAMP);
//Set the paint to use this shader (linear gradient)
paint.setShader(shader);
//Set the Transfer mode to be porter duff and destination in
paint.setXfermode(new PorterDuffXfermode(Mode.DST_IN));
//Draw a rectangle using the paint with our linear gradient
if(isVertical)
canvas.drawRect(0, height, width,
bitmapWithReflection.getHeight() + reflectionGap, paint);
else
canvas.drawRect(width, 0, bitmapWithReflection.getWidth() + reflectionGap,
height, paint);
//Create an Image view and add our bitmap with reflection to it
//ImageView imageView = new ImageView(this);
imageView.setImageBitmap(bitmapWithReflection);`
This example works gracefullt when I give isVertical value=true, ath the bottom of the image, but I want to use reflection effect at the right side of the image also because I think it will be better in landscape mode. But it does not work as I want. It shows reflection side top-bottom reversed. What is my mistake? Thanks.
Your matrix has to change:
if (isVertical) {
matrix.preScale(1, -1);
reflectionImage= Bitmap.createBitmap(originalImage, 0, height/2, width, height/2, matrix, false);
}
else {
matrix.preScale(-1, 1);
reflectionImage= Bitmap.createBitmap(originalImage, width/2, 0, width/2, height, matrix, false);
}