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 😊

Isidoro

Hi Ravindra Kushwaha,you can check my answer. – Hawthorne

#26860300 – Bair

Have you tried this solution? Your previous post about ImageSpan is horribly formatted - it doesn't even express any use of ImageSpan, so it was probably ignored by many. – Hereinto

@VinceEmigh please check my link #45674910 – Isidoro

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);'

Atonement

Can u please add some more code on it..I did not get urs solution – Isidoro

I Edited my answer – Atonement

Ok i will let you know soon – Isidoro

I have tried urs solution and it did not work..Please check my code , which i have done according to u ibb.co/caDk75 – Isidoro

Try the solution from link I attached. The solution from link works 100 % – Atonement

In the link , they have not used the device image, please check it once.. – Isidoro

There is no other way – Atonement

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));

Calie

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);
       }
   }
}

Crake

i do not want to use the url like in your code WebConstant.IMAGE_BASE_URL ..I have stored image on my sd card. i need to use this images of sd card with my text..Please help me on it – Isidoro

kindly look at the code it checks if image is available in the sdcard then load from there.. – Crake

Have a look at URLImageParser – Crake

Bro please check this line ` drawable = context.getDrawable(R.drawable.profile_main_placeholder); ` , it is using the app images..I have image on my sd card which i want to use these with text..Please check ur code once..Thanks – Isidoro

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; – Crake

could u please add it on the your solution – Isidoro

Let us continue this discussion in chat. – Crake

did you get it? – Crake

for your effort +1 from my side...Plz give me time , i am on the others task..Will let u know tomorrow – Isidoro

Ok I have updated code.. now it will be easy for you – Crake

please help me..What is URLDrawable , as i copied urs code ..It is not recognizing the URLDrawable..PLease check the image ibb.co/jiM6u5 – Isidoro

Can u please help me on the URL images ? – Isidoro

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)
        ));
}

Dissuasion

I am not using any EMOJI..As i have mentioned in the question that i need IMAGE with TEXT on TEXTVIEW..IMAGES are saved on the my devices..I need to use the image with text – Isidoro

Link which u have shared is the Emoji with text .Not for text with image – Isidoro