how set margin between spannable textview?

Question

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

Answer 1

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