How to use the Image(Stored Image of device) with Text on TextView Android?

Question

I am creating the chat app , in which i am getting the EMOJI from the server (IMAGE URLS).

I am using this images(Emoji url) with text in my TextView by below lines of the code.

String stringWithHtml = "Sample string with an <img src=\"http://MY_SERVER.emoji.s3.amazonaws.com/cf68/5794d5f7895fa10a8f8e1350/imgList/5794d5f7895fa10a8f8e136a.png\"></img>" +
                        "<img src=\"http://MY_SERVER.emoji.s3.amazonaws.com/cf68/5794d5f7895fa10a8f8e1350/imgList/5794d5f7895fa10a8f8e135a.png\"></img>"+
                        "<img src=\"http://MY_SERVER.emoji.s3.amazonaws.com/cf68/5794d5f7895fa10a8f8e1350/imgList/5794d5f7895fa10a8f8e135b.png\"></img>"; 


Drawable drawable = Drawable.createFromStream(new URL(source).openStream(), "src name");
                    drawable.setBounds(0, 0, drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight());

Spanned spannedValue = Html.fromHtml(stringWithHtml, drawable, null); 
MY_TEXTVIEW.setText(spannedValue);

This all stuff , i am using in the AsynTask and getting the expected result like below:-

Now i am storing all the emojis(Images) on my device and want to use it with text in my TextView.

My question is that How can we use the device(Stored images) with text on my TextView ?

I have searched about it on SO but did not get the expected result.Please check below link which i have visited.

1. First Link
2. Second Link
3. Third Link
4. Forth Link

I have used the ImageSpanfor it but the other problem arises , which i have posted the question on SO Click here

Please help me to short out from this problem.Thanks

Answer 1

OK. You even no need Uri. try this:

String path = Environment.getExternalStoragePublicDirectory(Environment.DIRECTORY_DOWNLOADS) + "/car_icon.png";

                String stringWithHtml = "Sample string with an <img src=" + path + "></img>"
                +" <img src=" + path + "></img>"
                +" <img src=" + path + "></img>";

                Html.ImageGetter getter = new Html.ImageGetter() {
                    @Override
                    public Drawable getDrawable(String s) {
                        return BitmapDrawable.createFromPath(s);
                    }
                };               

                Spanned spannedValue = Html.fromHtml(stringWithHtml, getter, null);
                text.setText(spannedValue);'

Answer 2

You can implement a java program to get the count of the emoji's you receive.

And Dynamically create ImageView component in the UIView using the below program. Please use looping structures to repeat as much as you need.

ImageView iv = new ImageView();
RelativeLayout parentView = findViewById("R.id.parentViewId");
parentView.addView(iv, 0, new ViewGroup.LayoutParams(ViewGroup.LayoutParams.FILL_PARENT, ViewGroup.LayoutParams.FILL_PARENT));

Answer 3

Here is the code for loading images in textview from servers as well as from sdcard.. you can use sdcard related code :)

Spanned spanned = null;
String messageCustomized = "<img src ='"+ imageFileName +"'/>";
Spanned span = Html.fromHtml(messageCustomized, new 
URLImageParser(sentMessagesViewHolder.tvMessage, context), null);
if (spanned!=null) {
      spanned = (Spanned) TextUtils.concat(spanned, span);
}else spanned= span;

if (spanned!=null) {
   txtView.setText(spanned);
 }

ImageGetter

public class URLImageParser implements ImageGetter {
Context context;
View container;
private int imageSize = 20;
private int imageSizeDisplaySize = 20;
URLDrawable urlDrawable = null;

public URLImageParser(View container, Context context) {
    this.context = context;
    this.container = container;
    imageSize = Utility.convertDpTopPixels(context, 20);
    imageSizeDisplaySize = Utility.convertDpTopPixels(context, 35);

}

@Override
public Drawable getDrawable(final String fileName) {


    urlDrawable = new URLDrawable();
    Drawable drawable = null;
    if (Build.VERSION.SDK_INT >= 21)
        drawable = context.getDrawable(R.drawable.profile_main_placeholder);
    else
        drawable = context.getResources().getDrawable(R.drawable.profile_main_placeholder);

    drawable.setBounds(0, 0, 0 + imageSize, 0 + imageSize);
    urlDrawable.drawable = drawable;

    Bitmap bitmap = null;
    bitmap = ImageUtility.getImageFromSDCard(fileName);
    if (bitmap != null) {   // the bitmap is available

        bitmap = RoundedImageView.getCroppedBitmap(bitmap, imageSize, imageSize, imageSize);
        drawable = new BitmapDrawable(context.getResources(), bitmap);//ImageUtility.bitmapToDrawable(context,resource);
        drawable.setBounds(0, 0, 0 + imageSize, 0 + imageSize); //set the correct bound according to the result from HTTP call
        URLImageParser.this.urlDrawable.drawable = drawable;

    }
    return urlDrawable.drawable; 

}
}

URLDrawable

public class URLDrawable extends BitmapDrawable {
   protected Drawable drawable;

   @Override
   public void draw(Canvas canvas) {
    // override the draw to facilitate refresh function later
       if(drawable != null) {
           drawable.draw(canvas);
       }
   }
}

Answer 4

You can use emojicon library , also refer here , sample source code included.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              xmlns:emojicon="http://schemas.android.com/apk/res-auto"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="vertical">

    <io.github.rockerhieu.emojicon.EmojiconTextView
            android:id="@+id/txtEmojicon"
            android:text="I \ue32d emojicon"
            emojicon:emojiconAlignment="baseline"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

    <io.github.rockerhieu.emojicon.EmojiconEditText
            android:id="@+id/editEmojicon"
            android:text="I \ue32d emojicon"
            emojicon:emojiconSize="28sp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>
    <fragment
            android:id="@+id/emojicons"
            android:layout_width="match_parent"
            android:layout_height="220dp"
            class="io.github.rockerhieu.emojicon.EmojiconsFragment"/>
</LinearLayout>

you can add custom emojis like below

 EmojiconsView emojiconsView = (EmojiconsView) findViewById(R.id.emojicons_view);
        emojiconsView.setPages(Arrays.asList(
                new EmojiconPage(Emojicon.TYPE_PEOPLE, null, false, R.drawable.ic_emoji_people_light),
                new EmojiconPage(Emojicon.TYPE_NATURE, null, false, R.drawable.ic_emoji_nature_light),
                new EmojiconPage(Emojicon.TYPE_OBJECTS, null, false, R.drawable.ic_emoji_objects_light),
                new EmojiconPage(Emojicon.TYPE_PLACES, null, false, R.drawable.ic_emoji_places_light),
                new EmojiconPage(Emojicon.TYPE_SYMBOLS, null, false, R.drawable.ic_emoji_symbols_light)
        ));
}