Android having paragraph and numbering/bullets on textview

Question

I am creating an app, which have some description that have steps. For example:

How to transfer:

• -Do you have credit card

• -If you dont make a fake one

• -Then insert it to ATM

• -And watch it explode

How to catch a fish:

• Open console
• use cheat
• you got one

and getting longer...

these description(steps) will be displayed in a scrollview, right now i make it using java, setText use "\n" and " " extra empty space to trick the diplay. However this wont work for different resolutions. How to make textview display something like this?

based on the answer,I tried this: .xml on layout

 <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginBottom="16dp"
        android:layout_marginTop="16dp" >
            <TextView
                android:id="@+id/tvCBAjud"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"          
                android:text="@string/transfer"
                android:textSize="16sp"
                />
    </ScrollView>

and define the string:

 <string name="transfer">how to transfer \n
        <ul>
        <li>-Do you have credit card</li> 
        <li>-If you dont make a fake one</li>
         <li>-Then insert it to ATM</li> 
         <li>-And watch it explode</li>
         </ul></string>

but the output become:

How to transfer -Do you have credit card -If you dont make a fake one -Then insert it to ATM -And watch it explode

Answer 1

You can customize BulletSpan in your own way like this:

    public class CustomBulletSpan implements LeadingMarginSpan, ParcelableSpan {
    private final int mGapWidth;
    private final boolean mWantColor;
    private final int mColor;

    private static final int BULLET_RADIUS = 3;
    private static Path sBulletPath = null;
    public static final int STANDARD_GAP_WIDTH = 2;

    public CustomBulletSpan(int gapWidth) {
        mGapWidth = gapWidth;
        mWantColor = false;
        mColor = 0;
    }

    public int describeContents() {
        return 0;
    }

    public void writeToParcel(Parcel dest, int flags) {
        dest.writeInt(mGapWidth);
        dest.writeInt(mWantColor ? 1 : 0);
        dest.writeInt(mColor);
    }

    public int getLeadingMargin(boolean first) {
        return 2 * BULLET_RADIUS + mGapWidth;
    }

    public void drawLeadingMargin(Canvas c, Paint p, int x, int dir, int top, int baseline, int bottom,
            CharSequence text, int start, int end, boolean first, Layout l) {
        // Here I shifted the bullets to right by the given half bullet
        x += mGapWidth / 2;
        if (((Spanned) text).getSpanStart(this) == start) {
            Paint.Style style = p.getStyle();
            int oldcolor = 0;

            if (mWantColor) {
                oldcolor = p.getColor();
                p.setColor(mColor);
            }

            p.setStyle(Paint.Style.FILL);

            if (c.isHardwareAccelerated()) {
                if (sBulletPath == null) {
                    sBulletPath = new Path();
                    // Bullet is slightly better to avoid aliasing artifacts on
                    // mdpi devices.
                    sBulletPath.addCircle(0.0f, 0.0f, 1.2f * BULLET_RADIUS, Direction.CW);
                }

                c.save();
                c.translate(x + dir * BULLET_RADIUS, (top + bottom) / 2.0f);
                c.drawPath(sBulletPath, p);
                c.restore();
            } else {
                c.drawCircle(x + dir * BULLET_RADIUS, (top + bottom) / 2.0f, BULLET_RADIUS, p);
            }

            if (mWantColor) {
                p.setColor(oldcolor);
            }

            p.setStyle(style);
        }
    }

    @Override
    public int getSpanTypeId() {
        return 0;
    }

}

Answer 2

If your text is static then you can extend TextView to automatically prepend a BulletSpan before your android:text:

layout.xml

<BulletTextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Orange" />
<BulletTextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Banana" />

BulletTextView.java

/**
 * {@link TextView} that automatically adds bullet point to text if set in layout
 */
public class BulletTextView extends TextView {
    public BulletTextView(Context context) {
        super(context);
        addBullet();
    }

    public BulletTextView(Context context, AttributeSet attrs) {
        super(context, attrs);
        addBullet();
    }

    public BulletTextView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        addBullet();
    }

    public BulletTextView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        addBullet();
    }

    private void addBullet() {
        CharSequence text = getText();
        if (TextUtils.isEmpty(text)) {
            return;
        }
        SpannableString spannable = new SpannableString(text);
        spannable.setSpan(new BulletSpan(16), 0, text.length(), 0);
        setText(spannable);
    }
}

You can further customize this by adding custom attribute for indentation.

Answer 3

You can use Unicode as bullets

    TextView tv = (TextView) findViewById(R.id.textView1);
    String circle = "\u25CF";
    String sentence = circle + "  " + "Hello its me"+ "\n";
    tv.setText(sentence);

Use any symbols, bullets etc by changing Unicode and Unicode Table is here.
http://unicode-table.com/en/#box-drawing

Answer 4

You can use <br> instead of \n and call HTML.fromHtml to convert it to HTML.

Like this:

String sHTML = " <string name=\"transfer\">how to transfer<br>" +
    "<br>" +
    "&#8226; Do you have credit card<br>" +
    "&#8226; If you dont make a fake one<br>" +
    "&#8226; Then insert it to ATM<br>" +
    "&#8226; And watch it explode<br>" +
    "</string>";

TextView textView1 = (TextView)findViewById(R.id.tvCBAjud);
textView1.setText(Html.fromHtml(sHTML, null, null));

Answer 5

In the string.xml write the following code:

<string name="transfer">how to transfer \n<ul><li>-Do you have credit card</li>
<li>-If you dont make a fake one</li>
<li>-Then insert it to ATM</li>
<li>-And watch it explode</li>
</ul></string>

 <string name="catch"><ul><li>Open console</li>
<li>use cheat</li>
<li>you got one</li>
</ul></string>

And in your activity.xml

   <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/transfer"       
        android:textSize="@dimen/textsize_16sp" />

 <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/catch"       
        android:textSize="@dimen/textsize_16sp" />