Develop Reference

how set margin between spannable textview?

I am trying to create spannable textview and showing it in EditText. So user can type something in EditText and if user pressed enter button of keyboard then i am converting this text in to spannable textview after this user can start typing again and press enter button of keyboard then again second spannable textview will create ans will show it in edittext but.
Where i stuck?
when i create two spannable textview then this two textview slightly overlapping on each other. And i want to set margin between this two textview.
I also tried to set margin between textview using LayoutParam but not success.
Here is image which showing textview overlapping on each other in EditText.
y of spicy is hidden below tasty
Here is my code.
txtDishTags.setOnEditorActionListener(new OnEditorActionListener() {
#Override
public boolean onEditorAction(TextView v, int actionId,
KeyEvent event) {
if (actionId == EditorInfo.IME_ACTION_SEARCH
|| actionId == EditorInfo.IME_ACTION_NEXT
|| actionId == EditorInfo.IME_ACTION_DONE
|| actionId == EditorInfo.IME_ACTION_GO) {
txtDishTags.dismissDropDown();
if(txtDishTags.getText().toString().trim().length()>=1){
isEntered = true;
String[] separated = tags.split(",");
tags = separated[separated.length-1];
if(tags.trim().length()>=1){
TextView tv = createContactTextView(tags);
BitmapDrawable bd = (BitmapDrawable) convertViewToDrawable(tv);
bd.setBounds(-20, 0, bd.getIntrinsicWidth(),
bd.getIntrinsicHeight());
sb.append(tags + ",");
sb1 = new SpannableStringBuilder();
sb1.append(tags + ",");
sb.setSpan(new ImageSpan(bd),
sb.length() - tags.length(), sb.length(),
Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
sb.setSpan(clickSpan, sb.length() - tags.length(),
sb.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
txtDishTags.setText("");
txtDishTags.setText(sb);
int length = sb.length();
txtDishTags.setSelection(length, length);
}
}
}
return false;
}
});
public TextView createContactTextView(String text) {
//llp = new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT, 44);
//llp.setMargins(5, 0, 20, 0);
TextView tv = new TextView(this);
tv.setText(text);
tv.setTextSize(30);
Typeface faceBook = Typeface.createFromAsset(getAssets(),
"fonts/eau_sans_book.otf");
tv.setTypeface(faceBook);
tv.setTextColor(getResources().getColor(R.color.backgroundcolor));
tv.setBackgroundResource(R.color.textviewbubble);
//tv.setLayoutParams(llp);
Resources r = getResources();
int px = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
44, r.getDisplayMetrics());
tv.setHeight(px);
return tv;
}
public static Object convertViewToDrawable(View view) {
int spec = MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED);
view.measure(spec, spec);
view.layout(0, 0, view.getMeasuredWidth(), view.getMeasuredHeight());
Bitmap b = Bitmap.createBitmap(view.getMeasuredWidth(),
view.getMeasuredHeight(), Bitmap.Config.ARGB_8888);
Canvas c = new Canvas(b);
c.translate(-view.getScrollX(), -view.getScrollY());
view.draw(c);
view.setDrawingCacheEnabled(true);
Bitmap cacheBmp = view.getDrawingCache();
Bitmap viewBmp = cacheBmp.copy(Bitmap.Config.ARGB_8888, true);
view.destroyDrawingCache();
return new BitmapDrawable(viewBmp);
}
I tried to set margin between textview using following code
llp = new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT, 44);
llp.setMargins(5, 0, 20, 0);
tv.setLayoutParams(llp);
I also set LeftPadding for Textview but seems first textview not getting it.Even i set height to textview but seems textview not getting layout parameter at all. Like
int px = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
44, r.getDisplayMetrics());
tv.setHeight(px);
Please give reference or hint.
Thanks in advance

There are a few problems that I have identified. You need to make the specified changes and everything should work.
Step 1) Update setBounds parameters
In the following line, update the setBounds parameters from -20 to 0 as follows:
BitmapDrawable bd = (BitmapDrawable) convertViewToDrawable(tv);
bd.setBounds(0, 0, bd.getIntrinsicWidth(), bd.getIntrinsicHeight());
This is important because you are setting the wrong bounds, which causes tags to overlap.
Step 2) Fix bug in sb.setSpan
If you followed step 1, and you run the code, you will realize that when you attempt to replace text with ImageSpan, you are passing the wrong values (you are not taking into account the ","(comma) character in the end). Update the following line to include -1:
sb.setSpan(new ImageSpan(bd), sb.length() - tags.length() - 1, sb.length() - 1,
Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
Now you output will appear correct and with comma in the middle.
Step 3) Add spacing between Tags
To answer your original question, how to add spacing, I would recommend that you modify your code to include ", " between different spans. You can also modify it to use just " " space. Define a contentBetweenTags variable and set it to your desired value. Here is how you can do that:
String contentBetweenTags = ", ";
sb.append(tags + contentBetweenTags);
sb1 = new SpannableStringBuilder();
sb1.append(tags + contentBetweenTags);
sb.setSpan(new ImageSpan(bd),
sb.length() - tags.length() - contentBetweenTags.length(),
sb.length() - contentBetweenTags.length(),
Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
Step 4) Picking the right "space" character
Just in case you are not happy with the "margin/spacing" between two tags, you could use one of the many unicode space characters available. They have different widths and you could use any one of them based on your desire / liking.
Here is the final code and sample screenshot using unicode \u2002:
BitmapDrawable bd = (BitmapDrawable) convertViewToDrawable(tv);
bd.setBounds(0, 0, bd.getIntrinsicWidth(), bd.getIntrinsicHeight());
String contentBetweenTags = ",\u2002";
sb.append(tags + contentBetweenTags);
sb1 = new SpannableStringBuilder();
sb1.append(tags + contentBetweenTags);
sb.setSpan(new ImageSpan(bd),
sb.length() - tags.length() - contentBetweenTags.length(),
sb.length() - contentBetweenTags.length(),
Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);

Aligning ImageSpan to the top of the TextView

Currently, I wish to add an image in between texts and align it to the top of the TextView.
Something like this:
The only vertical alignments I can find are baseline (which seems to put it right down the center of the text) and align bottom.
What happens if I use ALIGN_BASELINE is:
Is there a way to align it to the top instead?
My current code:
txtView.setText(this.addImageAsterisk(
"The string to have asterisk at the end*"), BufferType.SPANNABLE);
then
private CharSequence addImageAsterisk(String string) {
Drawable d = context.getResources().getDrawable(R.drawable.img_asterisk);
ImageSpan imageSpan = new ImageSpan(d, ImageSpan.ALIGN_BASELINE);
final SpannableString spannableString = new SpannableString(string);
spannableString.setSpan(imageSpan, string.length()-1, string.length(), 0);
return spannableString;
}
removing ImageSpan.ALIGN_BASELINE sets it to align to the bottom which is also not my expected result.
--- Thank you user Lalit Poptani, I tried applying your answer----
after applying this, what happens is that the whole textview seems to have extra margin top.
before applying span:
This is the text*
after applying the SuperscriptSpanAdjuster
(some extra space)
This is the text*
My code:
String string = "This is the text*";
Drawable d = this.context.getResources().getDrawable(R.drawable.img_asterisk);
d.setBounds(0, 0, d.getIntrinsicWidth(), d.getIntrinsicHeight());
ImageSpan imageSpan = new ImageSpan(d, ImageSpan.ALIGN_BASELINE);
SuperscriptSpanAdjuster s = new SuperscriptSpanAdjuster(1.5);
final SpannableString spannableString = new SpannableString(string);
spannableString.setSpan(s, string.length() - 1, string.length(), 0);
spannableString.setSpan(imageSpan, string.length(), string.length() + 1, 0);
textView.setText(spannableString);

What you can do is use a custom MetricAffectingSpan for maintaining its ratio like,
public class SuperscriptSpanAdjuster extends MetricAffectingSpan {
double ratio = 0.5;
public SuperscriptSpanAdjuster(double ratio) {
this.ratio = ratio;
}
#Override
public void updateDrawState(TextPaint paint) {
paint.baselineShift += (int) (paint.ascent() * ratio);
}
#Override
public void updateMeasureState(TextPaint paint) {
paint.baselineShift += (int) (paint.ascent() * ratio);
}
}
And the you can use SpannableString to apply asterisk to your String like,
SpannableString mString = new SpannableString("This is what I wanted*");
mString.setSpan(new SuperscriptSpanAdjuster(0.5), mString.length() - 1,
mString.length(), SpannableString.SPAN_EXCLUSIVE_EXCLUSIVE);
mTextView.append("\n");
mTextView.append(mString);
This is append asterisk to your text as you required. And your output will be as,

Just wrap your drawable in inset drawable and set inset bottom to some value like 8dp. Not the best solution, but will work.
Modify your drawable/img_asterisk.xml --
<inset
xmlns:android="http://schemas.android.com/apk/res/android"
android:insetBottom="8dp">
<!-- Your previous asterisk drawable, probably a 'shape' -->
</inset>

Drawable in string resource

I want to show AlertDialog that shows its message with string and icons together.
Is it possible to insert icons/images/drawables in string resource? Is there any way to show drawables with the string in the AlertDialog.
EDIT
If its was not clear, the drawables need to be inside the string. like "click the icon [icon-image] and then click on..."

SpannableString spannableString = new SpannableString("#");
Drawable d = getResources().getDrawable(R.drawable.your_drawable);
d.setBounds(0, 0, d.getIntrinsicWidth(), d.getIntrinsicHeight());
ImageSpan span = new ImageSpan(d, ImageSpan.ALIGN_BOTTOM);
spannableString.setSpan(span, spannableString.toString().indexOf("#"), spannableString.toString().indexOf("#")+1, Spannable.SPAN_INCLUSIVE_EXCLUSIVE);
yourTextView.setText(spannableString);

The AlertDialog.Builder class has a method setIcon(int iconRes) or setIcon(Drawable icon) that you can use for this.
EDIT:
If you need it in the middle of the string, you could use an ImageSpan:
String src = "Here's an icon: # isn't it nice?";
SpannableString str = new SpannableString(src);
int index = str.indexOf("#");
str.setSpan(new ImageSpan(getResources().getDrawable(R.drawable.my_icon), index, index + 1, ImageSpan.ALIGN_BASELINE));
AlertDialog.Builder x = new AlertDialog.Builder(myContext);
x.setMessage(str);

You can use custom view or custom title with ImageView or TextView containing compound drawables.

display smiley in textview and edittext in android

hello i am developing chat application in which i want to insert smiley
i have not much idea about it how to integrate and display in it
can u give me suggestion for doing the same ?
ImageGetter imageGetter = new ImageGetter() {
public Drawable getDrawable(String source) {
Drawable d = getResources().getDrawable(
R.drawable.happy);
d.setBounds(0, 0, d.getIntrinsicWidth(), d.getIntrinsicHeight());
return d;
}
};
cs = Html.fromHtml(
"<img src='"
+ getResources()
.getDrawable(R.drawable.happy)
+ "'/>", imageGetter, null);
System.out.println("cs is:- " + cs);
edttxtemoji.setText(cs);
i found this code, in this it uses images, is this feasible ?
or there is another solutions ?
please give me better solution for this thanx in advance

Yes there is another way for showing smiley within the TextView or EditText. Build a Spannable text using ImageSpanand then setText the Spannable to TextView or EditText. Here is an post for the same.

To set Smiley in edittext
int value=R.id.ic_launcher;
Drawable Smiley = getResources().getDrawable(value);
Smiley.setBounds(0, 0, 15, 15);
SpannableStringBuilder builder = new SpannableStringBuilder();
String imgValue = "["+value+"]";
builder.append(imgValue);
builder.setSpan(new ImageSpan(Smiley), builder.length()-imgValue.length(), builder.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
edit_text.getText().insert(txt.getSelectionStart(), builder);
now to fetch smiley in listview or textview
textview.setText(addSmileySpans(context,edit_text.getText()));
public CharSequence addSmileySpans(Context context, CharSequence msg) {
SpannableStringBuilder builder = new SpannableStringBuilder(your_recieved_message);
Pattern pattern = Pattern.compile("\\[([^\\[\\]]+)\\]");
if( pattern != null )
{
Matcher matcher = pattern.matcher( your_recieved_message );
int matchesSoFar = 0;
while( matcher.find() )
{
CharSequence cs =matcher.group().subSequence(1, matcher.group().length()-1);
int value = Integer.parseInt(cs.toString());
System.out.println("pattern is::"+matcher.group().subSequence(1, matcher.group().length()-1));
int start = matcher.start() - (matchesSoFar * 2);
int end = matcher.end() - (matchesSoFar * 2);
Drawable Smiley = context.getResources().getDrawable(value);
Smiley.setBounds(0, 0,15,15);
builder.setSpan(new ImageSpan(Smiley), start + 1, end - 1, 0 );
builder.delete(start, start + 1);
builder.delete(end - 2, end -1);
matchesSoFar++;
}
}
return builder;
}

I think it is little bit late.
public void addSmily() {
CharSequence text = myEditText.getText();
int resource = R.drawable.ic_menu_emoticons ;
myEditText.setText(getSpannableText(text,resource));
}
private Spannable getSpannableText(CharSequence text, int smilyToAppend) {
Spannable spannable = Factory.getInstance().newSpannable(text+" ");
ImageSpan smilySpan = new ImageSpan(getApplicationContext(),smilyToAppend);
spannable.setSpan(smilySpan, spannable.length()-1, spannable.length(), 0);
return spannable;
}

SpannableString with Image example

I am looking for an example of how to build and display Android SpannableString with ImageSpan. Something like inline display of smileys.
Thanks a lot.

Found the following and it seems to do the job:
public class TestActivity extends Activity {
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
TextView textView = (TextView) findViewById(R.id.textview);
SpannableString ss = new SpannableString("abc");
Drawable d = ContextCompat.getDrawable(this, R.drawable.icon32);
d.setBounds(0, 0, d.getIntrinsicWidth(), d.getIntrinsicHeight());
ImageSpan span = new ImageSpan(d, ImageSpan.ALIGN_BASELINE);
ss.setSpan(span, 0, 3, Spannable.SPAN_INCLUSIVE_EXCLUSIVE);
textView.setText(ss);
}

SpannableString + ImageSpan don't work in Android API 21 & 22 (I tested in Android Studio 1.2.1.1 in emulator), but if you do this:
TextView textView = (TextView) findViewById(R.id.textview);
textView.setTransformationMethod(null);
...
textView.setText(ss);
SpannableString + ImageSpan will work.
I was inspired by this post: https://stackoverflow.com/a/26959656/3706042

If anyone is still interested, I've created the a Java method to allow adding recursively a listed drawables to a text (set at the end to a textView) based on a "string to replace".
public void appendImages(#NonNull TextView textView,
#NonNull String text,
#NonNull String toReplace,
Drawable... drawables){
if(drawables != null && drawables.length > 0){
//list of matching positions, if any
List<Integer> positions = new ArrayList<>();
int index = text.indexOf(toReplace);
while (index >= 0) {
//add position
positions.add(index);
index = text.indexOf(toReplace, index + toReplace.length());
}
if(positions.size() > 0 && drawables.length >= positions.size()){
textView.setTransformationMethod(null);
SpannableString ss = new SpannableString(text);
int drawablesIndex = 0;
for(int position : positions){
Drawable drawable = drawables[drawablesIndex++];
//mandatory for Drawables
drawable.setBounds(0, 0, drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight());
ss.setSpan(new ImageSpan(drawable, ImageSpan.ALIGN_BASELINE), position, position+toReplace.length(), Spanned.SPAN_INCLUSIVE_EXCLUSIVE);
}
textView.setText(ss);
}
else Timber.w("The amount of matches to replace is %s and the number of drawables to apply is %s", positions.size(), drawables.length);
}
else Timber.w("The drawables array is null or empty.");
}
Usage:
appendImages(myTextView, "This is a ^ simple ^ test", "^", drawable1, drawable2);