I'm trying to create an Android app that adds a random quote to images.
The general process is this:
Start from a custom given image that shows when starting the app.
From this image all the user can do is tap on it and generate a new random "quote" that get overlaid on the image.
The user can save the newly created image with the quote he chose and set it as wallpaper.
I have got to the point where I can display the image in an ImageView.
My list of quotes is stored in my strings.xml file.
I do something like this in an app. Use Canvas.
I edited down a piece of my code, which actually adds a couple of other images on the background and stuff too.
Meat of code:
private static Bitmap getPoster(...) {
Bitmap background = BitmapFactory.decodeResource(res, background_id)
.copy(Bitmap.Config.ARGB_8888, true);
Canvas canvas = new Canvas(background);
Typeface font = Typeface.createFromAsset(res.getAssets(), FONT_PATH);
font = Typeface.create(font, Typeface.BOLD);
Paint paint = new Paint();
paint.setTypeface(font);
paint.setAntiAlias(true);
paint.setColor(Color.WHITE);
paint.setStyle(Style.FILL);
paint.setShadowLayer(2.0f, 1.0f, 1.0f, Color.BLACK);
float fontSize = getFontSize(background.getWidth(), THE_QUOTE, paint); //You'll have to define a way to find a size that fits, or just use a constant size.
paint.setTextSize(fontSize);
canvas.drawText(THE_QUOTE, (background.getWidth() - paint.measureText(THE_QUOTE)) / 2,
background.getHeight() - FILLER_HEIGHT, paint); //You might want to do something different. In my case every image has a filler in the bottom which is 50px.
return background;
}
Put your own version of that in a class and feed it the image id and anything else. It returns a bitmap for you to do whatever you want with (display it in an imageview, let the user save it and set as wallpape).
I know i did this for the PC with imagemagick a few years ago(save image with text on)
Seems like imagemagick have been ported to android, so I would start digging into thier documentation.
https://github.com/lilac/Android-ImageMagick
Ok! Francesco my friend, I've an idea although not a working code ('cuz I'm not really good at it). So, here it is:
Implement an onClickListener() on your ImageView like below:
ImageView iv = (ImageView)findViewById(R.id.imageview1);
iv.setOnClickListener(new View.OnClickListener()
{
public void onClick(View v)
{
/** When I say do your stuff here, I mean read the user input and set your wallpaper here. I'm sorry that I don't really know how to save/set the wallpaper */
}
});
When it comes to reading user input/generating random quotes, you can do this:
You said you already have the quotes saved in the strings.xml file. Using the ids of those strings, I think you can implement a switch case scenario where it uses java imports - java.util.Scanner and java.util.Random. Ultimately, using these in your ImageView onClickListener could/should result in the desired output.
I know my answer is too vague, but I've a faint hope that it has given you a minute lead as to what you can implement. I seriously hope there are better answers than this. If not, then I hope this helps you some, and I also hope that I'm not leading you in the wrong direction since this is just a mere speculation. Sorry, but this is all I've got.
Related
Suppose I'm uploading two or more than two pics in some Framelayout. Hereby I'm uploading three pics with a same person in three different position in all those three pictures. Then what image processing libraries in Android or java or Native's are available to do something as shown in the pic.
I would like to impose multiple pictures on each other.
Something like these:-
One idea is to :
Do some layering in all those pictures and find mismatching areas in the pics and merge them.
How one can merge multiple picture with other? By checking the di-similarity and merge with each other?
Are there any Third party Api's or some Photoshop service which can help me in doing these kinda image processing?
In this case you are not just trying to combine the images. You really want to combine a scene containing the same object in different positions.
Therefore, it is not just a simple combination or an alpha compositve where the color of a given pixel in the output image is the sum of the value of this pixel in each image, divided by the number of images.
In this case, you might do:
Determine the scene background analysing the pixels that do not change considering multiple images.
Begin with the output image being just the background.
For each image, remove the background to get the desired object and combine it with the output image.
There is a Marvin plug-in to perform this task, called MergePhoto. The program below use that plug-in to combine a set of parkour photos.
import marvin.image.MarvinImage;
import marvin.io.MarvinImageIO;
import marvin.plugin.MarvinImagePlugin;
import marvin.util.MarvinPluginLoader;
public class MergePhotosApp {
public MergePhotosApp(){
// 1. load images 01.jpg, 02.jpg, ..., 05.jpg into a List
List<MarvinImage> images = new ArrayList<MarvinImage>();
for(int i=1; i<=5; i++){
images.add(MarvinImageIO.loadImage("./res/0"+i+".jpg"));
}
// 2. Load plug-in and process the image
MarvinImagePlugin merge = MarvinPluginLoader.loadImagePlugin("org.marvinproject.image.combine.mergePhotos");
merge.setAttribute("threshold", 38);
// 3. Process the image list and save the output
MarvinImage output = images.get(0).clone();
merge.process(images, output);
MarvinImageIO.saveImage(output, "./res/merge_output.jpg");
}
public static void main(String[] args) {
new MergePhotosApp();
}
}
The input images and the output image are shown below.
I don't know if this will qualify to be in your definition of "natives", but there is the following .NET library that could help: http://dynamicimage.apphb.com/
If the library itself can give you want you want, then depending on your architecture you could set up a small ASP.NET site to do the image manipulation on the server.
Check the accepted answer here.
In above link there is merging of two images which is done by openCV sdk.
If you dont want to use openCV and just want to try with your self then you will have to play little with framlayout and with three imageview. Give options to user to select specific part of the image to show for all three images. So the selected part will be shown of the selected image. on this way you will get the result like above what you have said.
Hope you got my point. If not then let me know.
Enjoy coding... :)
You can overlay the images using openCV you can check at OpenCV and here or here
// Read the main background image
cv::Mat image= cv::imread("Background.png");
// Read the mans character image to be placed
cv::Mat character= cv::imread("character.png");
// define where you want to place the image
cv::Mat newImage;
//The 10,10 are the initial coordinates in pixels
newImage= image(cv::Rect(10,10,character.cols,character.rows));
// add it to the background, The 1 is the aplha values
cv::addWeighted(newImage,1,character,1,0,newImage);
// show result
cv::namedWindow("with character");
cv::imshow("with character",image);
//Write Image
cv::imwrite("output.png", newImage);
or you can create it as a watermark effect
Or you can try it in java like merging two images
try using this class
public class MergeImages {
public static void main(String[] args) {
File inner = new File("Inner.png");
File outter = new File("Outter.png");
try {
BufferedImage biInner = ImageIO.read(inner);
BufferedImage biOutter = ImageIO.read(outter);
System.out.println(biInner);
System.out.println(biOutter);
Graphics2D g = biOutter.createGraphics();
g.setComposite(AlphaComposite.getInstance(AlphaComposite.SRC_OVER, 0.8f));
int x = (biOutter.getWidth() - biInner.getWidth()) / 2;
int y = (biOutter.getHeight() - biInner.getHeight()) / 2;
System.out.println(x + "x" + y);
g.drawImage(biInner, x, y, null);
g.dispose();
ImageIO.write(biOutter, "PNG", new File("Outter.png"));
} catch (Exception e) {
e.printStackTrace();
}
}
}
OK people, I'm going seriously nuts here. That late night stuff when you've tried everything...
I've got a compound TextView with an image on the left. The image (a little pic that just says "loading") is set with:
Drawable img = getBaseContext().getResources().getDrawable( R.drawable.loading );
img.setBounds( 0, 0, 120, 120 );
tv.setCompoundDrawables( img, null, null, null );
tv is the TextView variable. That works fine. However, later I want to replace the image with a new drawable, I've tried to call setCompoundDrawables again:
tv.setCompoundDrawables( new_img, null, null, null );
I've also tried getting the array of drawables for the TextView and replacing the left one, as shown here:
Drawable[] drw = tv.getCompoundDrawables();
drw[0] = new_img;
The code runs ok in debug mode. No exceptions occur. All UI handling performed within the UI thread. Images seem to be ok, etc, but the display does not change. Do I have to refresh the display in some way?
By the way, the TextViews are added within a vertical LinearLayout if that matters. I'm pretty sure I'm missing something obvious here but I can't see it. Many thanks in advance.
(Yes, I know I could replace my design with an ImageView and a vanilla TextView, however for performance reasons I'd prefer to stick with a Compound TextView if possible)
setCompoundDrawables() is unable to decode the bounding box for drawables. Instead, use TextView::setCompoundDrawablesWithIntrinsicBounds() for using the implicit bounds for the drawable. This will ensure better handling across different screen densities.
OK. I got this to work, but Android seemed to be very picky about how it will work. I'm posting the answer in case it helps other people.
Here's the code that worked. Nothing special, until you read the comments below showing what other methods didn't work.
// resize the images. these methods seem to be very particular about how the bounds are set
img.setBounds(new Rect(0, 0, 120, 120)); // it likes this
tvp.setCompoundDrawables( img, null, null, null ); // this works for sure when combined with setBounds(Rect)
// what didn't work... (would have to more experimenting with what works and what doesn't)
//img.setBounds( 0, 0, 240, 240 ); // it didn't like this!
//Drawable[] drw = tvp.getCompoundDrawables();
//drw[0] = img; // it didn't like this technique of assigning a new image
//tvp.setCompoundDrawablesRelativeWithIntrinsicBounds(img, null, null, null); // no good, as it uses original (intrinsic) size of the image
//tvp.setCompoundDrawablesRelative(img, null, null, null); // doesn't like this - nothing bad happens; it just doesn't change the image
Hope this helps someone. Cheers, Tom
I'm trying to use AndroidPlot to draw a chart in a homescreen widget.
I know that in a normal app, it uses a custom view and from what I've seen (Android: AppWidget with custom view not working), the workaround is to render this as a bitmap in an imageView.
Now I've taken the quickstart code for AndroidPlot and put it into the provider class but it doesn't seem to render anything when I drop it on the homescreen.
The difference between this code and the original quickstart code is that in the quickstart, it leverages the Activity.findViewById but obviously it can't be used here.
Can anyone see something here that I'm doing wrong that may be causing the empty rendering?
Appreciate any help you could provide!
private Bitmap getChartImage(Context context)
{
// initialize our XYPlot reference:
mySimpleXYPlot = new XYPlot(context, "My Simple XYPlot");
mySimpleXYPlot.setDrawingCacheEnabled(true);
// add a new series
mySimpleXYPlot.addSeries(new SimpleXYSeries(), LineAndPointRenderer.class, new LineAndPointFormatter(Color.rgb(0, 200, 0), Color.rgb(200, 0, 0)));
// reduce the number of range labels
mySimpleXYPlot.getGraphWidget().setRangeTicksPerLabel(4);
// reposition the domain label to look a little cleaner:
Widget domainLabelWidget = mySimpleXYPlot.getDomainLabelWidget();
mySimpleXYPlot.position(domainLabelWidget, // the widget to position
45, // x position value, in this case 45 pixels
XLayoutStyle.ABSOLUTE_FROM_LEFT, // how the x position value is applied, in this case from the left
0, // y position value
YLayoutStyle.ABSOLUTE_FROM_BOTTOM, // how the y position is applied, in this case from the bottom
AnchorPosition.LEFT_BOTTOM); // point to use as the origin of the widget being positioned
// get rid of the visual aids for positioning:
mySimpleXYPlot.disableAllMarkup();
//mySimpleXYPlot.measure(150, 150);
//mySimpleXYPlot.layout(0, 0, 150, 150);
Bitmap bmp = mySimpleXYPlot.getDrawingCache();
return bmp;
}
Have you stepped through to see if the bitmap is actually empty? My guess is that the Bitmap is fine and the problem exists outside of this chunk of code. Take a look at this example usage of a widget with AndroidPlot - it's super minimal and it definitely works. Hopefully there's a solution in there for you :)
Nick
Need a little help here : I'm out of ideas now...
Here's what I need to do :
Render "base" image [ it is created from an ARGB.8888 byte array ]
user clicks 2 points on the screen; I need to perform the the pixel manipulation on a region of pixels around the path taken from one point to another... [ I need to calculate a squre block of pixel for each pixel on the whole path ].
display the modification of the image as the code progresses in animation form.
I am able to display the whole path; I am able to calculate & manipulate the pixels properly .. But what I am unable to do is show the animation as my code is progressing on the path... with the current implementation I am able to display the whole calculated path at the end ...
public void onDraw(Canvas canvas){
canvas.drawColor(Color.WHITE);
Paint p = new Paint();
canvas.drawBitmap(base,0,0,p);
traverse clickEvent1.x -> clickEvent2.x
traverse for clickEvent1.Y -> clickEvent2.Y
{
newBitMap = calculateNewBitMap(base)
// I nee to redraw Canvas with (newBitMap)
// canvas.drawBitMap(newBitMap);
//Doesn't work
//postInvalidate();
//invalidate()
//AnimationDrawable.addFrame(newBitMap)
// I am not calling start here
//but just wanted to let you know that I do call animation start to display the frames stored in it
// animation.start();
}
// obviously wouldn't work here As it is already out of the loop
//invalidate();
}
Please NOTE :
The newBitMap image is generated at runtime, it would not be available to me beforehand...
I tried invalidate() in the loop as well ; but it would only draw the cumulative result after the whole loop has traversed and not the intermediate states of the newBitMaps.
Performance is of critical importance + I am dealing with HUGE image sizes .. so please keep that in mind as well ... if I create multiple bitmaps for temporary storing the JVM crashes due to "OutofMemory" ..
I tried storing the new Images in "AnimationDrawable" form as well; but tht's not solving the problem as well....
AnimationDrawable animDrawable = new AnimationDrawable();
Drawable frame1 = new BitmapDrawable(newCaclBitMap);
animDrawable.addFrame(frame1, 250);
Thanks for any pointers / suggestions ..
It seems like what you are doing is running all of your drawing logic in a single call to onDraw() when I think what you want is to have onDraw() called once for each frame of your animation.
So, instead of something like this in your trace:
onDraw()
drawFrame()
drawFrame()
drawFrame()
...
You would have this:
onDraw()
drawFrame()
onDraw()
drawFrame()
onDraw()
drawFrame()
...
The CubeLiveWallpaper example has an example of this type of thing.
Animation objects are used to animate View objects. What you want to do is animate a canvas. This is more complicated but potentially more powerful. Essentially you need to derive an equation that will govern the movement of you drawing as a function of time. When the animation starts you get the current time stamp and then in you onDraw method you draw what the canvas should look like at that point in time. Basically you have to draw every step.
Right my title isn't the best in the world. I've got a big code that's supposed to make on big bitmap out of multiple bitmaps. I've isolated the problem to this part of the code
bity = Bitmap.createBitmap(specialWidth,specialHeight,Bitmap.Config.ALPHA_8);
Canvas canvas = new Canvas(bity);
float left=0.0f;
for (int i = 0; i < imagesArrayz.length; i++){
float top=0.0f;
canvas.drawBitmap(imagesArrayz[i], left, top, null);
left+=imagesArrayz[i].getWidth();
}
To explain: "bity" is a globally defined Bitmap object and it's unassigned untill this point; imagesArrayz is an array of 5 Bitmaps that has already ben assigned and has ben assigned correctly (i tested it to see if each image is in the array)
After this i just have a function that saves the global variable bity to a file. THE PROBLEM is that instaid of saving my nicely drawn canvas it saves an empty jpg file of 0kb. Please help!
I answered my own question... Replace ALPHA_8 with ARGB_8888 and it all magically works.
Someone shoot me please...