CODEWITHSUNDEEP
androidxmlbutton
IntelliJ Amiya
IntelliJ Amiya

Reputation: 75788

How Do Create This Type Of Button In Android

How to create this type of button in android. I tried . May I know what is the correct way to achieve my objective?Maybe this question too basic, but i did't find any suitable solution.Please Help me out.

I want to create This enter image description here

               <Button
                android:id="@+id/Btn1"
                android:layout_width="20dp"
                android:layout_height="20dp"
                android:background="@drawable/green_circle"
                android:textSize="20sp"
                android:textColor="@android:color/white"
                android:clickable="true"
                />

Here is green_circle.xml :

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
     <stroke android:width="1sp" android:color="#54d66a" />
</shape>

When i use this ,Button looks enter image description here

How can i get my desire button. Any Help Appreciated

Upvotes: 2

Views: 292

Answers (5)

Mike M.
Mike M.

Reputation: 39191

One way to achieve your desired effect is using a Layer List Drawable. To get a Drawable similar to the image you've posted, try the following

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="oval">
            <stroke android:width="1sp" android:color="#54d66a" /> 
        </shape>
    </item>
    <item android:top="5dp" android:left="5dp" android:right="5dp" android:bottom="5dp">
        <shape android:shape="oval">
            <solid android:color="#54d66a" />
        </shape>
    </item>
</layer-list>

Upvotes: 1

user3202237
user3202237

Reputation: 37

1.use two different images of radio on and off actually what you want and make a xml in drawable :

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:state_checked="false" android:drawable="@drawable/check_off" />
     <item android:state_checked="true" android:drawable="@drawable/checkbox_on" />
     <item android:drawable="@drawable/checkbox_off" />
</selector>

2.and set this drawable as a background on your radio button.

Upvotes: 1

piotrpo
piotrpo

Reputation: 12636

You defined 1sp (you should use "dp" btw.) circle and you got it. I think that the easiest way to achieve what you want is using layer list xml element - just put your current drawing as the first layer and put second layer for the centered dot (just solid oval with some margins) Here you have documentation: http://developer.android.com/guide/topics/resources/drawable-resource.html#LayerList Simple usage (it's not your's case but I think that it show you what you should to do):

<layer-list >
    <item>
        <shape android:shape="rectangle">
            <corners android:radius="2dp"/>
            <solid android:color="@color/grey"/>
        </shape>
    </item>
    <item android:bottom="2dp">
        <shape android:shape="rectangle">
            <corners android:radius="2dp"/>
            <solid android:color="@color/green_light"/>
        </shape>
    </item>
</layer-list>

Key is android:bottom="2dp" that causes that the foreground layer is smaller than the background one.

Upvotes: 2

Bennett
Bennett

Reputation: 73

put an image of green circle in drawable folder. then in xml just set background image for your button

       <Button
            android:id="@+id/Btn1"
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:background="@drawable/yourimage"
            />

this will work :)

Upvotes: 0

akirk
akirk

Reputation: 6837

Use an ImageButton:

<ImageButton android:src="@drawable/green_circle" />

The documentation also states how you can have different images depending on the state of the button.

Upvotes: 0

Related Questions