CODEWITHSUNDEEP
androidtextviewgeometry
user3293494
user3293494

Reputation: 609

Circular TextView with boundary

In my android app I am having a textview with circular background like this.

enter image description here

Following code is being used.

<TextView 
android:id="@+id/tv4"
android:layout_width="5dp"
android:layout_height="5dp"
android:background="@drawable/circle"
android:layout_alignParentRight="true"
android:layout_marginRight="50dp"
android:layout_centerVertical="true"

/>

circle.xml

<?xml version="1.0" encoding="utf-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android"> 
<solid android:color="#ff0000" /> 
<corners android:topLeftRadius="60dp" android:topRightRadius="60dp"    android:bottomLeftRadius="60dp" android:bottomRightRadius="60dp" /> 
</shape>

When the circle is touched I want it to have a circular boundary like this image. It should remain this way even when mouse moves away. How can this be done ?

enter image description here

Upvotes: 0

Views: 4274

Answers (2)

myanimal
myanimal

Reputation: 3620

Change circle.xml to be a selector that shows one drawable when the state is pressed, and another for the default state (not pressed):

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:drawable="@drawable/circle_pressed" />
    <item>
        <shape android:shape="oval">
            <solid android:color="#762C54" />
        </shape>
    </item>
</selector>

Then create a drawable resource circle_pressed.xml:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item >
        <shape>
            <solid android:color="#ff762c54" />
            <padding android:bottom="15dp"
                android:top="15dp"
                android:left="15dp"
                android:right="15dp"
                />
        </shape>
    </item>
    <item>
        <shape android:shape="oval">
            <stroke android:width="2dp" android:color="#ffffff"/>
            <size android:height="105dp" android:width="105dp"/>
        </shape>
    </item>
</layer-list>

This drawable is a layer-list that puts a white ring over a purple circle.

And your TextView must be clickable:

<TextView 
    android:id="@+id/tv4"
    android:clickable="true"
    android:layout_width="120dp"
    android:layout_height="120dp"
    android:background="@drawable/circle"
    android:layout_alignParentRight="true"
    android:layout_marginRight="50dp"
    android:layout_centerVertical="true" />

Upvotes: 1

Pieces
Pieces

Reputation: 2295

Create an xml drawable with the drawables you want for the different states. https://developer.android.com/guide/topics/resources/drawable-resource.html#StateList Then set that drawable as your background.

Upvotes: 2

Related Questions