BulletSpan and DrawableMarginSpan example in Sketchware

BulletSpan example

A BulletSpan styles paragraphs as bullet points.

BulletSpans are attached from the first character to the last character of a single paragraph.

BulletSpans allow configuring the following elements:

• gap width - the distance, in pixels, between the bullet point and the paragraph. Default value is 2px.
• color - the bullet point color. By default, the bullet point color is 0 - no color, so it uses the TextView's text color.
• bullet radius - the radius, in pixels, of the bullet point. Default value is 4px.

Constructor:
BulletSpan(int gapWidth, int color, int bulletRadius)
Creates a BulletSpan based on a gap width and a color integer.

This example shows how to add Bullets to paragraphs in a TextView using BulletSpan in Sketchware.

1. In main.xml add a TextView textview1.

2. In MainActivity.java, create a new String mystring.

3. In onCreate of MainActivity.java:
a. Set the text of mystring to your text.
So let's set String mystring to:
BulletSpans allow configuring the following elements:
gap width - the distance, in pixels, between the bullet point and the paragraph. Default value is 2px.
color - the bullet point color. By default, the bullet point color is 0 - no color, so it uses the TextView's text color.
bullet radius - the radius, in pixels, of the bullet point. Default value is 4px.

b. Use an add source directly block and put following codes:
// Convert this String to a Spannable String ss.
SpannableString ss = new SpannableString(mystring);

// Add three BulletSpans: to paragraphs from index of 'gap width' to 'color', index of 'color' to 'bullet radius' and index of 'bullet radius' to length of mystring.
ss.setSpan(new android.text.style.BulletSpan(30, Color.GREEN, 10), mystring.indexOf("gap width"), mystring.indexOf("color"), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);

ss.setSpan(new android.text.style.BulletSpan(30, Color.GREEN, 10), mystring.indexOf("color"), mystring.indexOf("bullet radius"), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);

ss.setSpan(new android.text.style.BulletSpan(30, Color.GREEN, 10), mystring.indexOf("bullet radius"), mystring.length(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);

// Display the Spannable String in TextView.
textview1.setText(ss);

4. Save and run the project. The app will show bullets as shown in image below:

Watch video below:

DrawableMarginSpan example

It is a span which adds a drawable and a padding to the paragraph it's attached to.

If the height of the drawable is bigger than the height of the line it's attached to then the line height is increased to fit the drawable.

DrawableMarginSpan allows setting a padding between the drawable and the text. The default value is 0.

The span must be set from the beginning of the text, otherwise either the span won't be rendered or it will be rendered incorrectly.

Constructors:

• DrawableMarginSpan(Drawable drawable) 

Creates a DrawableMarginSpan from a Drawable.

• DrawableMarginSpan(Drawable drawable, int pad)

Creates a DrawableMarginSpan from a Drawable and a padding, in pixels.

This example shows how to add an image at the beginning of the text in a TextView using DrawableMarginSpan in Sketchware.

1. In main.xml add a TextView textview1.

2. Using image manager add an icon ic_launcher.

3. In MainActivity.java, create a new String mystring.

4. In onCreate of MainActivity.java:
a. Set the text of mystring to your text.
So let's set String mystring to:
This is a DrawableMarginSpan example.

b. Use an add source directly block and put following codes:
// Convert this String to a Spannable String ss.
SpannableString ss = new SpannableString(mystring);

// Add drawable ic_launcher to the text.
ss.setSpan(new android.text.style.DrawableMarginSpan(getResources().getDrawable(R.drawable.ic_launcher)), 0, ss.length(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);

// Display Spannable String in TextView.
textview1.setText(ss);

5. Save and run the project. The app will show DrawableMarginSpan as shown in image below: