Henry
Henry

Reputation: 1042

Android draw circle and wrap around text on Textview

I have a textview containing numbers 1,2,3.... I want to have a circle around the numbers, something along the lines of;

enter image description here The code for my textview is;

 <TextView
        android:id="@+id/position"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:layout_weight="0.20"
        android:textStyle="bold"
        android:layout_gravity="center"
        android:layout_margin="5dp"
        android:background="@drawable/circlebg"
        android:textSize="20dp"/>

and I have a xml background file, which contains;

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <corners android:radius="10dip"/>
    <stroke android:color="#ff0000" android:width="2dip"/>
    <solid android:color="@android:color/transparent"/>
</shape>

the outcome of this is;

enter image description here

What I want to know is how can I get the result of this to be like shown in the first screenshot. Any help is welcomed.

Upvotes: 2

Views: 2459

Answers (3)

David Eti
David Eti

Reputation: 31

You are on the right track, all you have to do is make the textview's layout_height and layout_width a fixed value e.g 50dp, instead of using "wrap_content". When the textView's layout_height and layout_width are equal, you get a circle.

Upvotes: 0

Lalit Jadav
Lalit Jadav

Reputation: 1427

Have you tried ViewBadger or BadgeView? These may help you. You can later make changes on that.

Upvotes: 1

Ahsan Kamal
Ahsan Kamal

Reputation: 1105

activity.xml

<Button
            android:id="@+id/fragment_pos_inventory_Add"
            android:layout_width="25dp"
            android:layout_height="25dp"
            android:background="@drawable/layer_list" />

layer_list.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
   <item android:state_pressed="false">
        <shape android:shape="oval">
            <solid android:color="#fa09ad" />
        </shape>
    </item>
    <item android:state_pressed="true">
        <shape android:shape="oval">
            <solid android:color="#ffffff"/>
            <padding android:left="2dp"
                android:right="2dp"
                android:top="2dp"
                android:bottom="2dp"/>
        </shape>
    </item>

</layer-list>

Upvotes: 2

Related Questions