Android Add image to text (in text View)? - android

first post here=)
I've been looking for this answer and haven't been able to find it.
What I want to do is have some text, then add a image, then rest of text. For example:
____
| |
Hi there, this is the photo |___|, hope you like it..
I've been looking but all I can find is add text to image or add image to image View, and I don't think that's what I want because the app is mainly text but with images on it.
So my question is: How do I add an Image to text?
thanks
UPDATE:
I used the advice R.daneel.olivaw gave me and it worked nice=)
But I have a problem. lets say i have: "a b c" where I set the position of b as spanable. But if I try to delete the text and I delete b, the next time I write something it will become the image I used in spanable. How do I correct this? Any1one got any advice?
thanks=)

I think you are looking for the Spannable interface, By using this you can add images to a text view.
This link might help.

your best option is to create your own view, and to override the onDraw() method using canvas.drawText() for text, and canvas.drawBitmap() for images.
See the Canvas doc : http://developer.android.com/reference/android/graphics/Canvas.html
Here is an example which draw some text at the center of the screen :
public class OverlayView extends View {
public OverlayView(final Context context) {
super(context);
}
/**
* Draw camera target.
*/
#Override
protected void onDraw(final Canvas canvas) {
// view size
int width = getWidth();
int height = getHeight();
float square_side = height - width * 0.8f; // size of the target square
Paint paint = new Paint();
paint.setAntiAlias(true);
paint.setStyle(Paint.Style.FILL);
// text size is 5% of the screen height
paint.setTextSize(height * 0.05f);
// draw message depending of its width
String message = getResources().getString(R.string.photo_target_text);
float message_width = paint.measureText(message);
paint.setColor(getResources().getColor(R.color.color_foreground));
canvas.drawText(message, (width - message_width) / 2,
(height - square_side) / 4, paint);
super.onDraw(canvas);
}
}

as I know, there's no way to do it.
but when you use webview and generated html you can do simillar one.
generate html from your contents, and load it to webview, set webview settings to no zoom control.

This can be done with image getter: Html.ImageGetter
You will have to use HTML tags for each image.

< string name="text" > "Hi there, this is the photo [img src=img.jpge/] , hope you like it. < / string>
Add this in to your String and it will work

Related

How to put an image over another image when a particular event happens

I'm trying to learn more and trying to create a basic number generator where on a click of a button a number is generated between 1 and 90 and that number is then crossed out on an image of a board which has numbers from 1 to 90 with an image of x.
I have thought of creating 90 image views with the x image and giving them tags and making them appear when the number has been generated but this method is redundant and not efficient. I'm unable to think of new methods to solve this.
Instead of generating 90 images. You can place a view of X over it and when the desired number is generated makes the X visible for that image.
The code for generating X is.
public class DrawX extends View {
#Override
public void onDraw(Canvas canvas) {
float width = getMeasuredWidth();
float height = getMeasuredHeight();
Paint paint = new Paint();
paint.setColor(Color.RED);
canvas.drawLine(0,0,width,height,paint);
canvas.drawLine(width,0,0,height,paint);
}
}
You can adjust height weight according to your need.

Add animation to drawLine and drawBitmap

I have a custom view that extends relative layout. In the dispatchDraw method I draw lines and images inside a for loop because i have different start and end points for multiple lines.
I would like to know the easiest way to draw lines with animations from point a to point b in a slow way for example, this animation must be set only for a line that I decide and not for all the others.
I would also like to draw images with animations, I don't want to move the image but I would like to draw the image a little bigger first and then reduce it to the right size, or draw the image from top to bottom. Again this animation must be set only for a image that I decide and not for all the others.
#Override
protected void dispatchDraw(Canvas canvas) {
int width = getWidth();
int height = getHeight();
super.dispatchDraw(canvas);
size = width / (lines);
insideMargin = size / margin;
vMargin = (height - lines * size) / 2f;
canvas.translate(0,vMargin);
for(int x=0; x<lines;x++){
for(int y=0;y<lines;y++){
if(/*a condintion is true*/) {
//draw line with animation, how to do it?
}else{
canvas.drawLine(x * size,
y * size,
(x + 1) * size,
y* size,
paint
);
}
if(/*a condition is true*/) {
//draw bitmap with animation, how to do it?
}else
canvas.drawBitmap(image, src, dest, null);
}
}
}
//i have on touch event that will call invalidate
I think you should use ValueAnimator for your purpose. As I understood, you want to animate values once a touch event occurs. The value returned by the animator must be used for all objects so the animated value should be general as possible. I recommend to use 0 to 1 as float value. You can use this value for the animation. For the bitmap animation, you can define target rectangle start and end size then you can find appropriate size by facilitating the animated fraction value. For the line case, you can use the slope for the animation. I think you already have the line's start and end point so you can use slope and fraction to calculate animated end point.

What do I do about drawText() and drawRect() drawing in two different locations when given the same coordinates?

I'm trying to draw a text to the screen and then have a rectangle in the same spot to account for knowing when the user clicks within it (and clicks the text). Problem is when I put the text in one spot on the screen and the rectangle in the same spot, it apparently isn't in the same spot. Is there some setting I need to set somewhere?
private final String[] options = {"Start", "High Scores", "Help", "Quit"};
public void draw(final Canvas g)
{
for (int i = 0; i < options.length; i++)
{
width = HORIZONTALOFFSET * 3 + spaceInvadersTitle.getWidth();
height = GamePanel.getScreenHeight() / 4 - (75 * 2 + TEXT_SIZE) / 2 + i * 75;
rect[i] = new Rect(width, height, width + 325, height + TEXT_SIZE);
g.drawRect(rect[i], paint);
g.drawText(options[i], width, height, paint);
}
}
FYI "width" and "height" are more like x- and y-coords. The horizontal alignment is not the problem - just the vertical. If you'll notice from the code, I'm setting the starting x- and y-coordinates for the drawText and drawRect the same exact position, but that's not how they're showing on the screen. Instead it seems the drawText is using that position as a lowerleft anchorpoint or something like that. Is that how it works? If so, how do I change that?
Also, if you have any suggestions on how to approach listening for when the user clicks on a drawn text, I'm all ears. This is the easiest way I could think of, and how I do it in regular desktop Java.

insert text to imageview (and generate new image file) by drag-drop gesture

Note : To avoid miss-communication, i need to generate a new image file with the drag-dropped text so its not just a simple text on the ImageView.
My goal is to let my user insert a text by drag and drop it to the ImageView and generate the new image file (PNG) so user will have a new image file with a text on it.
I have managed to insert the text and generate the new image file, but the problem is the text is currently hard-coded and not drag-drop.
This is my simplified code on my custom ImageView:
protected void onDraw(Canvas canvas) {
// TODO Auto-generated method stub
super.onDraw(canvas);
Paint text = new Paint();
text.setColor(Color.RED);
text.setTextSize(32);
float x = imgWidth / 2 - txtWidth / 2;
float y = imgHeight / 2 - 16;
// canvas.drawPaint(text);
canvas.drawText("TESTTTTTTTT", x, y, text);
}
The code above is working because i just manually insert the text in the center just after the ImageView is created.
Now, my problem is i have no idea how to get the same result, but this time i want the user to drag-drop the text and place it anywhere on the ImageView (and finally generate a new image file) instead of hard-coded the text in the center of the ImageView like i did.
Thanks for your help, please ask me if you have some questions.

How to handle difference screen sizes so that a textview scales

I have to distribute text over a view uniformly. Have been unable to figure out a way that satisfies all screen sizes or even the common screen sizes. The layout I want to achieve is shown below.
The red box tells the textview I am trying to work on.
I have tried following approaches:
1) Try to use a image, with and without nine patch and it does not scale correctly.
2) try to use different size buckets like sw320 sw480 sw600 and sw720. And while it does fix this for devices I am able to test on, it is not dependable. I am putting different text sizes in these buckets.
I hate to use 24 texviews with table, grid or linear layout.
What other options do I have? The solution 2 was very frustrating to work with, navigating from dimens to layout and back again like about 20 times . There should be an easier way to do this, and if there isnt please tell me so.
Use a custom View and override onDraw to draw the numbers. The layout containing the View can specify its size using dimensions (from res/values/), and the View will automatically work out what font size and spacing between the numbers based on those dimensions.
E.g.
Custom View:
public class ColumnNumbersView extends View
{
private final static int NUMBER_OF_COLUMNS = 25;
private float textSize;
private final Paint textPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
...
Getting the size:
#Override
protected void onLayout(...
{
super.onLayout(...
// work out our text size from getHeight()
textSize = getHeight()/2; // or something like that
// work out the spacing between the numbers along the x axis
textPosXInc = (getWidth() / NUMBER_OF_COLUMNS) / 2; // or something like that
}
Doing the drawing:
#Override
protected void onDraw(final Canvas canvas)
{
super.onDraw(canvas);
int x = 0;
for(int i=0; i < NUMBER_OF_COLUMNS; i++)
{
final String number = String.valueOf(i);
final int halfWidth = textPaint.measureText(number) / 2;
canvas.drawText(number, x - halfWidth, 0, textPaint);
x += textPosXInc;
}
}
That should draw something close, the first and last numbers won't draw correctly though, I'll leave that for you to fix.
EDIT
Keep in mind that you can't use wrap_content for this View's dimensions, because it doesn't specify a size to wrap by overriding onMeasure(). So it'll require specific sizes set, or match_parent.

Categories

Resources