Develop Reference

How do I include an image in a CDATA string which represents HTML?

My Android App has a few screens where the user can tap a button, and help text pops up in a DialogFragment. Currently the text for these DFs is stored in strings.xml, like this:
<string name="help_content">
<![CDATA[<h1>Welcome</h1>
<p>Here is some helpful information</p>]]></string>
Obviously, this lets me add styles to the text to make it look better.
In a couple of places, I'd like to explain what some icons do, and I want to include images of the icons, so I'd like to do something like this:
<string name="help_content">
<![CDATA[<h1>Welcome</h1>
<p><img src="path/to/icon1"> This is what Icon 1 does</p>
<p><img src="path/to/icon2"> This is what Icon 2 does</p>]]></string>
Is there a way to include the images so that they use the actual ones from the app? ie something along the lines of getResources().getDrawable(R.drawable.icon_1) or #drawable/icon_1 or something, which can be referenced from the CDATA. I've tried both of those, but got the red error line.

Thanks to the links above, I figured this out. I have my icons saved as drawables, and did the following:
In the help_content string, I put img tags with the name of the required drawable saved as src:
<string name="help_content">
<![CDATA[<h1>Welcome</h1>
<p><img src="icon1"> This is what Icon 1 does</p>
<p><img src="icon2"> This is what Icon 2 does</p>]]></string>
Then at the point where I add this string to the TextView, I previously had:
mHelpContent.setText(Html.fromHtml(mText));
and have replaced it with:
mHelpContent.setText(Html.fromHtml(mText, new ImageGetter(), null));
I then define the ImageGetter class as follows:
private class ImageGetter implements Html.ImageGetter {
public Drawable getDrawable(String source) {
int id;
if((source == null) || (source.equals(""))) {
return null;
}else {
id = mContext.getResources().getIdentifier(
source,
"drawable",
mContext.getPackageName()
);
if(id != 0) {
Drawable d = getResources().getDrawable(id);
d.setBounds(0, 0,
d.getIntrinsicWidth(),
d.getIntrinsicHeight());
return d;
}else return null;
}
}
}
This shows the icon as required.

Error Text popup under EditText

I tried a lot and did R&D, but couldn't manage to show own custom error drawable under EditText.
Here is my code:
String str = "Please enter a valid email address”;
// This line is used to give color to error text.
ForegroundColorSpan colorSpan = new ForegroundColorSpan(Color.YELLOW);
// This line is used to give background color to error text.
BackgroundColorSpan backColorSpan = new BackgroundColorSpan(Color.BLUE);
// This s basically a StringBuilder that implements CharSequence interface.
SpannableStringBuilder strBuilder = new SpannableStringBuilder(str);
strBuilder.setSpan(colorSpan, 0, str.length(), 0);
EditText et = (EditText)findViewById(R.id.et);
Drawable drawable = getResources().getDrawable(R.drawable.btn);
// This line shows our own icon in place of default icon.
setError(CharSequence, Drawable);
So, strBuilder in next line is an implementation of CharSequence.
et.setError(strBuilder, drawable);
Any Solution?

I found the solution.
You need to call setBound() method on drawable object.
You need to put this line:
drawable.setBounds(0,0,drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight());

You can use a TextInputLayout, it has this feature inbuilt.
Check this link out, it has exactly what you need:
http://code.tutsplus.com/tutorials/creating-a-login-screen-using-textinputlayout--cms-24168
For details check google devs
https://developer.android.com/reference/android/support/design/widget/TextInputLayout.html

Parsing ImageGetter image as text

Using ImageGetter and HTML, I have some emoticons in an edittext (code below), however I want to be able to recognize these images later in the edittext so it can be stored as a string. Does anyone know how to retrieve this, or should I keep a string updated with string value instead.
Thanks
ImageGetter imggtr = new ImageGetter()
{
public Drawable getDrawable(String source)
{
Drawable d = getActivity().getResources().getDrawable(getEmoticonDrawable(position));
d.setBounds(0, 0, d.getIntrinsicWidth(), d.getIntrinsicHeight());
return d;
}
};
Spanned cs = Html.fromHtml("<img src='" + getActivity().getResources().getDrawable(getEmoticonDrawable(position))
+ "'/>", imggtr, null);
mEditor.append(cs);

As you mentioned, you should keep a separate string in memory. If you try to parse the html back to a string, it's going to be complicated and not very flexible.

Android TextView with image at right

I need to make text view with image at right. I need make text wrap around the image at left.
Text may be different length. Image place at top-right always.
Image example:
Х - measns image place.

The basic and simple way to achieve this...!
final String testContent = "<html><body><img src=\"ic_launcher.png\" style=\"float:right;\"/>This is like testing if this thing works ghdjdhfjkhgdjkhgkfdjgkljdfkljgklfdjkgljkfd kljlk lj kld jgkljdklgjfdkljgkfldjg kljfdkl dklfgjklfdj gklfdjklg This is like testing if this thing works ghdjdhfjkhgdjkhgkfdjgkljdfkljgklfdjkgljkfd kljlk lj kld jgkljdklgjfdkljgkfldjg kljfdkl dklfgjklfdj gklfdjklg jdfklgjkdfljg kldfjgkljdfklgjdklf. It XXX"
+ " in a more elaborate This is like testing if this thing works ghdjdhfjkhgdjkhgkfdjgkljdfkljgklfdjkgljkfd kljlk lj kld jgkljdklgjfdkljgkfldjg kljfdkl dklfgjklfdj gklfdjklg jdfklgjkdfljg kldfjgkljdfklgjdklf. It XXX"
+ " in a more elaborate This is like testing if this thing works ghdjdhfjkhgdjkhgkfdjgkljdfkljgklfdjkgljkfd kljlk lj kld jgkljdklgjfdkljgkfldjg kljfdkl dklfgjklfdj gklfdjklg jdfklgjkdfljg kldfjgkljdfklgjdklf. It XXX"
+ " in a more elaborate jdfklgjkdfljg kldfjgkljdfklgjdklf. It XXX";
textView.setText(Html.fromHtml(testContent, imgGetter, null));
}
private ImageGetter imgGetter = new ImageGetter() {
public Drawable getDrawable(String source) {
Drawable drawable = null;
if (imageNumber == 1) {
drawable = getResources().getDrawable(R.drawable.ic_launcher);
++imageNumber;
} else
drawable = getResources().getDrawable(R.drawable.ic_launcher);
drawable.setBounds(0, 0, drawable.getIntrinsicWidth(),
drawable.getIntrinsicHeight());
return drawable;
}
};

Inline images with Text in android

I'm attempting to download webpages for a user to view later. So far, I've downloaded the html, and the images. I can get the HTML to show up nicely formatted, but I cannot get the images to inline.
The code I'm using so far:
This is my method to get the article.
MyImageGetter mig = new MyImageGetter(this, urlId);
Spanned span = Html.fromHtml(contents[1], mig, null);
contents[1] = span.toString();
titleView.setText(contents[0]);
content.setText(contents[1]);
contents[] is an array that contains two strings. contents[0] is a simple string, contents[1] is a string with HTML markup.
MyImageGetter:
public class MyImageGetter implements Html.ImageGetter{
String urlId = null;
Context c = null;
public MyImageGetter(ArticleViewer articleViewer, String urlId2) {
c = articleViewer;
urlId = urlId2;
}
public Drawable getDrawable(String source) {
String[] brokenUrl = source.split("/");
String imgName = brokenUrl[brokenUrl.length-1];
File image = new File("/data/data/com.theHoloDev.Reader/Offline/" + urlId + "/" + imgName);
Log.w("MyApp", image.getAbsolutePath());
Bitmap bm = BitmapFactory.decodeFile(image.getAbsolutePath());
Drawable d = new BitmapDrawable(c.getResources(), bm);
return d;
}
}
When I have it log image.getAbsolutePath() it comes up with a file that exists in ddms. The Text content is there perfectly, but there are still little black boxes that say obj in each image. I had thought a textview would still be able to display images in that fashion, but either I'm doing something wrong, or there is another way to do this.

What is your desired end result? It is confusing to see that you are displaying html but you want the user to see the page... without html or did you do that for debugging? I assume the users will not see the html but rather the the page itself. In this case, I would go for a webview.
http://developer.android.com/reference/android/webkit/WebView.html
I don't think the text view is meant to be used like you are using it.
Good luck.

I figured it out. Instead of:
Spanned span = Html.fromHtml(contents[1], mig, null);
contents[1] = span.toString();
content.setText(contents[1]);
I need:
Spanned span = Html.fromHtml(contents[1], mig, null);
content.setText(span);
I was running into problems setting span to string.