CODEWITHSUNDEEP
androidtextview
kdas
kdas

Reputation: 620

How can I make a textview show like this. A big blue dot to the left of text

I am trying to add a bullet or a blue dot to the left of text. I tried textview.settext("\u2022 my text") but the bullet is black color and is small size compared to the other text's size. Is it possible to insert a character to the left of text and I can change color/size of that character? I can also create a custom drawable which is a "oval" shape of blue color but how can I insert that to the left of "my text" so that the effect is as below.

enter image description here

SpannableString doesn't work as expected. This is what I've done.

SpannableStringBuilder builder = new SpannableStringBuilder(" In the tumultuous business of cutting-in and attending.");
Drawable d = getResources().getDrawable(R.drawable.unread_dot_shape);
d.setBounds(0, 0, d.getIntrinsicWidth(), d.getIntrinsicHeight()); // <---- Very important otherwise your image won't appear
ImageSpan myImage = new ImageSpan(d);

builder.setSpan(myImage, 0, 1, Spannable.SPAN_INCLUSIVE_INCLUSIVE);
subjView.setText(builder, TextView.BufferType.SPANNABLE);

The unread_dot_shape.xml looks like this

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="@color/my_color_blue" />
    <corners
        android:radius="5dp" />
    <size
        android:width="5dp"
        android:height="5dp" />
</shape>

The result looks like this. enter image description here

I'd like the dot to be vertically aligned as per the original screenshot.

Upvotes: 1

Views: 2119

Answers (3)

vkislicins
vkislicins

Reputation: 3391

You could try using SpannableString

Something like this:

  SpannableString spannableString = new SpannableString("string");
  ImageSpan imageSpan = new ImageSpan(context, R.drawable.blue_dot);
  spannableString.setSpan(imageSpan, 0, 1, 0);
  textView.setText(spannableString);

Upvotes: 1

Alon Levanon
Alon Levanon

Reputation: 701

You can achieve this by using a Drawable inside your TextView.

Blue dot:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">

<solid android:color="@color/your_color" />
<size android:height="16dp" android:width="16dp"/> // Here you can set the size of the dot

And then, in your layout xml:

           <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:drawableLeft="@drawable/your_dot"
            android:text="Your Text"
            />

Upvotes: 1

CommonsWare
CommonsWare

Reputation: 1007444

Is it possible to insert a character to the left of text

You did so, in your code snippet in your question.

I can change color/size of that character?

You are welcome to wrap that character in ForegroundColorSpan, RelativeSizeSpan, etc., using a SpannableString instead of a regular string.

Or, use a BulletSpan and skip the character, though I don't think you can control the size of the bullet.

I can also create a custom drawable which is a "oval" shape of blue color but how can I insert that to the left of "my text" so that the effect is as below.

Either use an ImageSpan or find a library that allows you to wrap text around an image in a TextView (I'm pretty sure there is one, though I'm not coming up with it on a quick search).

Upvotes: 1

Related Questions