I am creating an app that pulls images from urls and puts them into a recyclerview. The user can then access those images and view it fullscreen. This is achieved with Picasso. I would now like the ability to fingerpaint over the image loaded with Picasso with an onTouchEvent or something but not sure how to do it.
This class sets the image to a map_edit_gallery.xml loaded with Picasso:
public class EditMapImage extends AppCompatActivity {
#Override
public void onCreate(#Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.map_edit_gallery);
checkIntent();
//Find savebutton
ImageButton saveMapButton = findViewById(R.id.saveEditImagebutton);
saveMapButton.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
Toast.makeText(getApplicationContext(),"Saved",Toast.LENGTH_SHORT).show();
}
});
}
//This will check to see if the intent extras exist and if they do get the extra
private void checkIntent(){
if(getIntent().hasExtra("image_url") && getIntent().hasExtra("name_url")){
String imageUrl = getIntent().getStringExtra("image_url");
String nameUrl = getIntent().getStringExtra("name_url");
setMapImage(imageUrl, nameUrl);
}
}
private void setMapImage(String imageUrl, String nameUrl){
//Set the Text view
TextView name = findViewById(R.id.mapNameEditor);
name.setText(nameUrl);
//Set the Image
ImageView imageView = findViewById(R.id.mapEditScreen);
Picasso.get().load(imageUrl).into(imageView);
Picasso picasso = Picasso.get();
DrawToImage myTransformation = new DrawToImage();
picasso.load(imageUrl).transform(myTransformation).into(imageView);
}
}
EDIT:
This class has allowed me to draw over the loaded image using canvas but cannot figure out how to use touch to draw:
public class DrawToImage implements Transformation {
#Override
public String key() {
// TODO Auto-generated method stub
return "drawline";
}
public Bitmap transform(Bitmap bitmap) {
// TODO Auto-generated method stub
synchronized (DrawToImage.class) {
if(bitmap == null) {
return null;
}
Bitmap resultBitmap = bitmap.copy(bitmap.getConfig(), true);
Canvas canvas = new Canvas(resultBitmap);
Paint paint = new Paint();
paint.setColor(Color.BLUE);
paint.setStrokeWidth(10);
canvas.drawLine(0, resultBitmap.getHeight()/2, resultBitmap.getWidth(), resultBitmap.getHeight()/2, paint);
bitmap.recycle();
return resultBitmap;
}
}
}
Try using the image selected by the user to set it in a canvas object and draw on the canvas object itself, as opposed to the image. There are plenty of tutorials out there to help you with how to draw on a canvas.
This process isn't connected with the Picasso Image Library in any way so I would recommend first getting the image through Picasso, then sending the image into your custom canvas implementation, then returning a bitmap/drawable which you could set into Picasso after editing.
There's also plenty of tutorials on how to export an image from the canvas to get your edited image when you need it.
I hope this helped, Panos.
Related
I am trying to check whether an ImageView was loaded with an image, and that the URL actually had an image resource.
ImageView dynamicImageView = new ImageView(context)
Picasso.get()
.load(myURL)
.resize(myWidth, myWidth)
.centerCrop()
.into(dynamicImageView, new Callback() {
#Override
public void onSuccess() {
Drawable drawable = dynamicImageView.getDrawable();
boolean hasImage = (drawable != null);
if (hasImage && (drawable instanceof BitmapDrawable)) {
hasImage = ((BitmapDrawable)drawable).getBitmap() != null;
}
}
#Override
public void onError(Exception e) {
}
});
This always returns true since Picasso automatically fills the default drawable placeholder into the dynamicImageView.
How should I go about it so that I always get a "truthful" result where the URL had no image resource?
Thank you all in advance.
You can go with Target callback:
private Target target = new Target() {
#Override
public void onBitmapLoaded(Bitmap bitmap, Picasso.LoadedFrom from) {
}
#Override
public void onBitmapFailed() {
}
}
And while loading image, you need to write:
Picasso.with(this).load(myURL).into(target);
Just for the information:
onBitmapLoaded() mostly used to perform image operations before we load into the view actually.
Picasso.LoadedFrom describes where the image was loaded from, whether it's MEMORY, DISK or NETWORK.
I have a NetworkImageView which loads its content from a URL, but in a specific case I also want to be able to load an image from the user's Gallery (or even capture one with the camera).
I'm using Image Chooser Library to load the image from the gallery, and after choosing, it allows me to get the file path of the image. This path is something like /mnt/sdcard/bimagechooser/IMG_20140811_155007906.jpg
If I try to load the image directly from this path, Volley will raise an exception stating:
NetworkDispatcher.run: Unhandled exception java.lang.RuntimeException: Bad URL /mnt/sdcard/bimagechooser/IMG_20140811_155007906.jpg
I also tried setting the drawable:
Drawable newImage = Drawable.createFromPath(imagePath);
mNetworkImageView.setImageDrawable(newImage);
Nothing happens when these lines run, the view remains empty/unchanged.
What is the correct way to set the NetworkImageView content without a URL?
The reason that setImageDrawable does not work is because in onLayout and setImageUrl call the private method loadImageIfNecessary, which will call another private method setDefaultImageOrNull if there was no image url provided. This wipes out whatever you set via setImageDrawable.
Volley's NetworkImageView code...
#Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
super.onLayout(changed, left, top, right, bottom);
loadImageIfNecessary(true);
}
void loadImageIfNecessary(final boolean isInLayoutPass) {
...
// if the URL to be loaded in this view is empty, cancel any old requests and clear the
// currently loaded image.
if (TextUtils.isEmpty(mUrl)) {
if (mImageContainer != null) {
mImageContainer.cancelRequest();
mImageContainer = null;
}
setDefaultImageOrNull();
return;
}
...
}
private void setDefaultImageOrNull() {
if(mDefaultImageId != 0) {
setImageResource(mDefaultImageId);
}
else {
setImageBitmap(null);
}
}
You can do as #mmlooloo suggests and manually add your image to the image cache OR you create your own "NetworkImageView" based off of Volley's and have onLayout NOT call loadImageIfNecessary when no url is provided. You can then override the ImageView setters setImageDrawable and setImageURI to set the url to null. You can then use setImageDrawable and setImageURI as you normally would with ImageView.
NOTE: You may run into issues if you override setImageBitmap or setImageResource methods as these are called within loadImageIfNecessary. I have not run into issues yet, however I have not done much testing.
Your class...
public class MyNetworkImageView extends ImageView {
//Copy the code from Volley's NetworkImageView and change onLayout as below.
#Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
super.onLayout(changed, left, top, right, bottom);
if (!TextUtils.isEmpty(mUrl)) {
loadImageIfNecessary(true);
}else{
if (mImageContainer != null) {
mImageContainer.cancelRequest();
mImageContainer = null;
}
}
}
//Change the other ImageView image setters, for example...
#Override
public void setImageDrawable(Drawable drawable) {
mUrl = null;
super.setImageDrawable(drawable);
}
#Override
public void setImageURI(Uri uri) {
mUrl = null;
super.setImageURI(uri);
}
}
I am not sure but it worth trying:
when you create memory cache for your mImageLoader keep it somewhere, now create cache key for your
image by this code:
private static String getCacheKey(String url, int maxWidth, int maxHeight) {
return new StringBuilder(url.length() + 12).append("#W").append(maxWidth)
.append("#H").append(maxHeight).append(url).toString();
}
after that put your image into the cache by calling :
mCache.putBitmap(cacheKey, response);
then again send your url to NetworkImageView, Volley will find your url in his cache and return it to you.
I hope it helps!!
This is an Android app to convert an RGB image to grayscale and display it on a screen. According to logcat, I am getting an unsatisfiedLinkError from
Mat ImageMat = new Mat (image.getHeight(), image.getWidth(), CvType.CV_8U, new Scalar(4));
What is wrong?
public class ImwriteActivity extends Activity /*implements OnClickListener*/{
#Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_imwrite);
ImageView img = (ImageView) findViewById(R.id.imageView1);
//get image from sdcard
File f = new File(Environment.getExternalStorageDirectory().getPath()+"/Test.jpg");
Bitmap image = BitmapFactory.decodeFile(f.getAbsolutePath());
//convert Bitmap to Mat
Mat ImageMat = new Mat (image.getHeight(), image.getWidth(), CvType.CV_8U, new Scalar(4));
Bitmap myBitmap32 = image.copy(Bitmap.Config.ARGB_8888, true);
Utils.bitmapToMat(myBitmap32, ImageMat);
//change the color
Imgproc.cvtColor(ImageMat, ImageMat, Imgproc.COLOR_RGB2GRAY,4);
//convert the processed Mat to Bitmap
Bitmap resultBitmap = Bitmap.createBitmap(ImageMat.cols(), ImageMat.rows(),Bitmap.Config.ARGB_8888);;
Utils.matToBitmap(ImageMat, resultBitmap);
//Set member to the Result Bitmap. This member is displayed in an ImageView
img.setImageBitmap(resultBitmap);
}
}
onCreate is the wrong place to put your opencv code, since it depends on native, c++ code.
first you need to load the opencv so's:
private BaseLoaderCallback mLoaderCallback = new BaseLoaderCallback(this) {
#Override
public void onManagerConnected(int status) {
if (status == LoaderCallbackInterface.SUCCESS ) {
// now we can call opencv code !
} else {
super.onManagerConnected(status);
}
}
};
#Override
public void onResume() {;
super.onResume();
OpenCVLoader.initAsync(OpenCVLoader.OPENCV_VERSION_2_4_5,this, mLoaderCallback);
// you may be tempted, to do something here, but it's *async*, and may take some time,
// so any opencv call here will lead to unresolved native errors.
}
#Override
public void onCameraViewStarted(int width, int height) {
// probably the best place for your opencv code
}
I want to display ImageViews in GridView using animation. I can display them and apply animation correctly.
But issue is that, if I apply animation on ImageView1 and then to ImageView2 (before animation on ImageView1 is ended) then animation on ImageView1 gets interrupted and ImageView1 is directly set to final state.
Note that I download image using ThreadPoolExecutor with 2 threads. Whenever an image is done downloading, I call addImage(image) method of below ImageAdapter which in turn adds image in GridView and GridView is refreshed to display latest set of images. And Here, while rendering, new image is displayed with animation and this animation(I guess) interrupts animation of currently animating images.
ImageAdapter :
public class ImageAdapter extends BaseAdapter {
private Context mContext;
private List<Bitmap> images;
private ArrayList<Integer> colors;
private boolean[] alreadyLoadedIndexes;
Animation animation;
AnimatorSet animator;
public void addImage(Bitmap img) {
images.add(img);
notifyDataSetChanged();
}
public void setAnimation(Animation animation) {
this.animator = null;
this.animation = animation;
}
public void setAnimator(AnimatorSet animation) {
this.animation = null;
this.animator = animation;
}
public void resetImages() {
images.clear();
notifyDataSetChanged();
alreadyLoadedIndexes = null;
alreadyLoadedIndexes = new boolean[20];
}
// Constructor
public ImageAdapter(Context c) {
mContext = c;
images = new ArrayList<Bitmap>();
colors = new ArrayList<Integer>();
colors.add(Color.CYAN);
colors.add(Color.BLUE);
colors.add(Color.GRAY);
colors.add(Color.YELLOW);
colors.add(Color.MAGENTA);
alreadyLoadedIndexes = new boolean[20];
}
#Override
public int getCount() {
return 20;
}
#Override
public Object getItem(int position) {
return 20;
}
#Override
public long getItemId(int position) {
return 0;
}
#Override
public View getView(int position, View convertView, ViewGroup parent) {
ImageView imageView = new ImageView(mContext);
imageView
.setBackgroundColor(colors.get((int) ((Math.sqrt(position) + 2 * position) % 5)));
// If image at index 'position' is available
if (images.size() > position) {
// If loading this image first time then only apply animation
if (!alreadyLoadedIndexes[position]) {
// If animation is specified
if (this.animation != null) {
imageView.setImageBitmap(images.get(position));
imageView.startAnimation(animation);
}
// If animator set is specified
else if (this.animator != null) {
imageView.setImageBitmap(null);
imageView.setBackgroundColor(colors.get((int) ((Math
.sqrt(position) + 2 * position) % 5)));
animator.setTarget(imageView);
animator.start();
Log.e("", "setting image after " + animator.getDuration()
/ 2);
new Handler().postDelayed(
new runnable(imageView, images.get(position)), 500);
} else {
// Use default animation if nothing is specified.
imageView.setImageBitmap(images.get(position));
animation = AnimationUtils.loadAnimation(mContext,
R.anim.fade_in);
imageView.startAnimation(animation);
}
} else {
imageView.setImageBitmap(images.get(position));
}
alreadyLoadedIndexes[position] = true;
}
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
imageView.setLayoutParams(new GridView.LayoutParams(150, 150));
return imageView;
}
class runnable implements Runnable {
ImageView image;
Bitmap bitmap;
public runnable(ImageView img, Bitmap bitmap) {
this.image = img;
this.bitmap = bitmap;
}
#Override
public void run() {
Log.e("", "setting image.");
image.setImageBitmap(bitmap);
}
}
}
try layout animation controlor for GridView, it will animate the views item by item with respect to time duration. check this link ,
Have you tried to apply the animation outside adapter getView method like:
mGridView.getChildAt(childIndexNeededToAnimate).startAnimation(animation);
These child views are independent and not being recycled anymore since they are already drawn.
You have some alternative.
First you can use Animation in your adapter class if you don't want to change your code.
For that check this.
In your adapter class inside the getView you have to call animation like this ,
Animation animation = null;
animation = AnimationUtils.loadAnimation(context, R.anim.push_left_in);
animation.setDuration(500);
convertView.startAnimation(animation);
return convertView;
Second you should use GridLayoutAnimationController in which A layout animation controller is used to animated a grid layout's children.
Sample 1
Sample 2
Just a guess. I'm neither sure if it will help nor if I read your code right. I suppose the problem is harder than I guess.
However, you are using the same animation object for every item. Maybe you should create a new animation for each item. This could be the reason why your animation stops when you launch a new one because the new call just reuse and restarts it.
Good luck.
You problem is notifyDataSetChanged(); it interrupt the animation. Try calling it when the animation is finished.
I use the following code to initialize my bitmap variable:
Bitmap bitmap = ((BitmapDrawable)this.model.gameView.context.getResources().getDrawable(R.drawable.pic1)).getBitmap();
When I try to log the width of that bitmap, the log does not even output anything for that call.
I know it's making it to that line, because I traced the code.
Also, when I try to do canvas.draw for the bitmap, nothing is drawn on the screen.
Everything I draw with rectangles works fine.
My picture resource is a PNG.
Any help is appreciated!
Try something like this for your bitmap class.
public class DrawBitmap extends View
{
Bitmap bitmap;
public DrawBitmap(Context content)
{
super(content);
bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.pic1);
}
#Override
protected void onDraw(Canvas canvas)
{
super.onDraw(canvas);
canvas.drawColor(Color.BLACK);//whatever color you want, make sure it's not the same as your image
canvas.drawBitmap(bitmap, (canvas.getWidth()), 0, null);
}
}
Main Class
public class Main extends Activity
{
DrawBitmap myView;
#Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
myView = new DrawBitmap(this);
setContentView(myView);
}
}
Try using BitmapFactory.decodeResource
Have a look at the answer in this topic:
How to convert a Drawable to a Bitmap?
Just figured it out. It had nothing to do with the method of bitmap loading I used.
It was a logical error on my part. My code accidentally reached a case where my bitmap became null, and it tried to draw the null resource on the canvas.