title: How to make space between spannable string in Android?
body: <h1>Code:</h1>
  <pre><code>private void setSpans(Editable s, @ColorInt int backgroundColor) {
  
      BackgroundColorSpan[] spans = s.getSpans(0, s.length(), BackgroundColorSpan.class);
      String[] words;
      if (s.toString().endsWith(&quot; &quot;)) {
          words = (s.toString() + &quot;X&quot;).split(&quot;\\s&quot;);
      } else {
          words = s.toString().split(&quot;\\s&quot;);
      }
      int completedWordsCount = words.length - 1;
      if (spans.length != completedWordsCount) {
          for (BackgroundColorSpan span : spans) {
              s.removeSpan(span);
          }
  
          int currentIndex = 0;
          for (int i = 0; i &lt; words.length-1; i++) {
              s.setSpan(new CustomDrawble(Color.GRAY, Color.WHITE), currentIndex, currentIndex + words[i].length(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
              currentIndex += words[i].length() + 1;
          }
      }
  </code></pre>
  <p>Above function is useful for creating <code>spannable String</code> and to add <code>Border</code> to it. I am calling following class:</p>
  <pre><code>public class CustomDrawble extends ReplacementSpan {
  
  private int mBackgroundColor;
  private int mForegroundColor;
  
  public CustomDrawble(int backgroundColor, int foregroundColor) {
      this.mBackgroundColor = backgroundColor;
      this.mForegroundColor = foregroundColor;
  }
  
  @Override
  public int getSize(Paint paint, CharSequence text, int start, int end, Paint.FontMetricsInt fm) {
      return Math.round(measureText(paint, text, start, end));
  
  }
  
  @Override
  public void draw(Canvas canvas, CharSequence text, int start, int end, float x, int top, int y, int bottom, Paint paint) {
      float padding = 4f;
  
      RectF rect = new RectF(x, top + 3, x + measureText(paint, text, start, end) + 10, bottom + 10);
      paint.setColor(mBackgroundColor);
      canvas.drawRoundRect(rect, 10,10,paint);
      paint.setColor(mForegroundColor);
      canvas.drawText(text, start, end, x, y, paint);
  
  }
  
  private float measureText(Paint paint, CharSequence text, int start, int end) {
      return paint.measureText(text, start, end);
  }
  }
  </code></pre>
  <p>The result I am getting from above is:</p>
  <p><a href="https://i.stack.imgur.com/zM8RB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zM8RB.png" alt="enter image description here" /></a></p>
  <p>The problem with the above code is:</p>
  <ul>
  <li><p>How to add space between two <code>spannable</code> strings?</p>
  </li>
  <li><p>How can I add space at the starting of rectangle and first character of a string similar to end of rectangle. I tried to add the space by this code :</p>
  <pre><code> RectF rect = new RectF(x+10, top + 3, x + measureText(paint, text, start, end) + 10, bottom + 10);
  </code></pre>
  </li>
  </ul>
  <p>but it gave me this distorted result:</p>
  <p><a href="https://i.stack.imgur.com/1iAay.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1iAay.png" alt="enter image description here" /></a></p>
  <p>If I am not wrong then the problem with the above code is there are not enough spaces between two <code>spannable</code> strings.</p>
  <p>How can I make it correct?</p>
  <h1>Edit-1</h1>
  <p>Used this <code> RectF rect = new RectF(x - 5, top + 3, x + measureText(paint, text, start, end)+5, bottom + 10);</code></p>
  <p><a href="https://i.stack.imgur.com/1WbGB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1WbGB.png" alt="enter image description here" /></a></p>
  <p>Look at the first one it's slightly cutting from starting point. But If I used the above configuration I don't have enough space in two strings. This is the main Issue.</p>