locked
Text With Image RRS feed

  • Question

  • User3559 posted

    Hi All,

    I am new to creating Android apps. And thought I would come here to learn to create some basic stuff. As you r the experts, I woondered if you could spare a few mins. I want to create an app that will allow me to enter multiline text plus images within a text field, is this possible? if so what is the best control to use?

    Regards,

    Ben

    Monday, February 25, 2013 4:27 PM

Answers

  • User209 posted

    I thought I could use a few minutes for this problem, but it turned into two hours of messing around with code. However now I have tried this stuff and it is actually quite simple!

    Android has a concept called Spannables which allows for formatting text with images, urls, text formatting such as bold, italic and strikethrough text. They can be used in TextViews and EditTexts, which is pretty neat, because this will help you add images to your text!

    I've cooked up some sample code here: https://gist.github.com/Cheesebaron/5034440

    But let me try to briefly explain how it works.

    In the Activity1.cs file I have the following code which adds an image to a TextView.

    var imageSpan = new ImageSpan(this, Resource.Drawable.Icon); //Find your drawable.
    var spannableString = new SpannableString(textView.Text); //Set text of SpannableString from TextView
    spannableString.SetSpan(imageSpan, textView.Text.Length - 1, textView.Text.Length, 0); //Add image at end of string
    

    ImageSpan is the awesome class to use here, it loads up an image which you can use in Spannables and as seen in the sample above, I take the text from the TextView, create a SpannableString and add the ImageSpan at the end of the SpannableString. Easy as that I have added an image to my TextView.

    Now to the more fun part, which I used a lot more time to find out how works. The sample I cooked up was a very simple one where I want to replace :) and :-) with images. For this I need to listen for changes in the text in my EditText. There is a nice way to do this with an ITextWatcher, which has a couple of methods that can be implemented. I choose to listen for AfterTextChanged and replace the string with an image there. The same concept of using ImageSpan is reused in this sample, however I cooked up a helper class to do the heavy lifting, which also allows for adding more patterns and different images. The method AddSmiles just takes each of the "patterns" from the keys in the Dictionary, sees if there are any occurrences in the text. If so it adds removes them at first, because we can't have two ImageSpans at the same position. Then it re-adds all the ImageSpans to the Spannable at the correct indices replacing the smiley text. This method is simply called every time a change to the text in the EditText has been made.

    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Tuesday, February 26, 2013 12:06 AM

All replies

  • User209 posted

    I thought I could use a few minutes for this problem, but it turned into two hours of messing around with code. However now I have tried this stuff and it is actually quite simple!

    Android has a concept called Spannables which allows for formatting text with images, urls, text formatting such as bold, italic and strikethrough text. They can be used in TextViews and EditTexts, which is pretty neat, because this will help you add images to your text!

    I've cooked up some sample code here: https://gist.github.com/Cheesebaron/5034440

    But let me try to briefly explain how it works.

    In the Activity1.cs file I have the following code which adds an image to a TextView.

    var imageSpan = new ImageSpan(this, Resource.Drawable.Icon); //Find your drawable.
    var spannableString = new SpannableString(textView.Text); //Set text of SpannableString from TextView
    spannableString.SetSpan(imageSpan, textView.Text.Length - 1, textView.Text.Length, 0); //Add image at end of string
    

    ImageSpan is the awesome class to use here, it loads up an image which you can use in Spannables and as seen in the sample above, I take the text from the TextView, create a SpannableString and add the ImageSpan at the end of the SpannableString. Easy as that I have added an image to my TextView.

    Now to the more fun part, which I used a lot more time to find out how works. The sample I cooked up was a very simple one where I want to replace :) and :-) with images. For this I need to listen for changes in the text in my EditText. There is a nice way to do this with an ITextWatcher, which has a couple of methods that can be implemented. I choose to listen for AfterTextChanged and replace the string with an image there. The same concept of using ImageSpan is reused in this sample, however I cooked up a helper class to do the heavy lifting, which also allows for adding more patterns and different images. The method AddSmiles just takes each of the "patterns" from the keys in the Dictionary, sees if there are any occurrences in the text. If so it adds removes them at first, because we can't have two ImageSpans at the same position. Then it re-adds all the ImageSpans to the Spannable at the correct indices replacing the smiley text. This method is simply called every time a change to the text in the EditText has been made.

    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Tuesday, February 26, 2013 12:06 AM
  • User835 posted

    One important thing (In case you did everything right and you still dont see the emoticons in text)... The Icons should be already loaded into memory ( = was already displayed anywhere)

    Story: I made everything as said and the emoticons wasnt displayed. Then after i created view where you pick emoticon to edittext - the images suddenly appeared. So i created the view with visibility set as gone and the images wasnt in the views until i push the button to show view with smileys to choose.

    Saturday, July 18, 2015 1:36 PM
  • User366895 posted

    Hello guys, If we use an xml image then the xml have the paarents layout amximum height and width.

    i have tried to make it smaller with this code with no luck:

    ``` var textView = layout.FindViewById(Resource.Id.FeaturesContentTextView); var imageSpan = new ImageSpan(Activity, Resource.Drawable.ic_info); //Find your drawable. imageSpan.Drawable.SetBounds(0, 0, 20, 20);

            var spannableString = new SpannableString(textView.Text); //Set text of SpannableString from TextView
    

    ```

    Sunday, August 30, 2020 12:12 PM
  • User366895 posted

    Also this is not working:

    ``` var icon = AppCompatResources.GetDrawable(Activity, Resource.Drawable.ic_info); icon.SetBounds(0, 0, 20, 20); DrawableCompat.SetTint(icon, Color.White); var textView = layout.FindViewById(Resource.Id.FeaturesContentTextView); var imageSpan = new ImageSpan(icon, SpanAlign.Baseline); //Find your drawable.

            var spannableString = new SpannableString(textView.Text); //Set text of SpannableString from TextView
            spannableString.SetSpan(imageSpan, textView.Text.Length - 1, textView.Text.Length, SpanTypes.InclusiveInclusive); 
            textView.TextFormatted = spannableString;
    

    ```

    Sunday, August 30, 2020 12:59 PM