[TinyTut]Custom Button backgrounds/Better ImageButton

MrSnowflake · by **MrSnowflake** » Thu Jan 08, 2009 10:23 am

Hi guys,

Darolla asked for some more info about the <selector> xml drawable in the tutorial request thread. So as I like the functionality of the selector, I made a little tutorial about this. As there is no documentation about this xml tag, I hope you get rolling using this tutorial.

First of all, we need to have (at least) one button in the content view of our activity. What is going to be special about this button is, that we are going to define a background drawable. As result this is the main.xml:

Syntax: [ Download ] [ Hide ]

Using xml Syntax Highlighting

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
<Button
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:text="@string/hello"
    android:background="@drawable/my_button"
    />
</LinearLayout>
Parsed in 0.002 seconds,  using GeSHi 1.0.8.4

As you can see, I only added 1 line to the minimal Button declaration. Now we need to define my_button.

The Selector xml tag we were talking about is a drawable xml resource. This means we need to make an xml file in the drawable folder with the name we want. For this tutorial we named it 'my_button.xml'. In my_button we define 4 states (as a button has 4 states: not pressed and not focused, pressed and focused, pressed and not focused, not pressed and focused) with each of those states having their own drawable.

Syntax: [ Download ] [ Hide ]

Using xml Syntax Highlighting

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_focused="true" android:state_pressed="false" android:drawable="@drawable/focused" />
    <item android:state_focused="true" android:state_pressed="true" android:drawable="@drawable/focusedpressed" />
    <item android:state_focused="false" android:state_pressed="true" android:drawable="@drawable/pressed" />
    <item android:drawable="@drawable/defaultbutton" />
</selector>
Parsed in 0.002 seconds,  using GeSHi 1.0.8.4

These png drawables will be in the attachment. So what did we just do? For each one of the 4 states defined earlier, we define a drawable. For the first <item> tag this means the button will use the focused drawable (called focused.png) when the button is focused, but _not_ pressed. This you can see in the attributes: state_focused and state_pressed. The second <item> defines that the button will use the focusedpressed drawable when the Button is focused and pressed. The third <item> defines that the button will use the pressed drawable when ... (this one is as an exercise for you

). And the last <item> defines the default drawable.

Now, start running this example and you will have your own custom button.

linkmaster_6 · by **linkmaster_6** » Fri Jan 09, 2009 8:34 pm

thank you for the tourital. how would i go about doing this in code? are there some methods i can override to put do he same thing?

darolla · by **darolla** » Sat Jan 10, 2009 2:57 pm

My dear MrSnowflake,

thanks a lot for this !!!

In return I am posting right now my first own tutorial (Tutorial: Modal Dialogs).

Lots of greetings,
DaRolla

MrSnowflake · by **MrSnowflake** » Sat Jan 10, 2009 5:25 pm

linkmaster_6 wrote:thank you for the tourital. how would i go about doing this in code? are there some methods i can override to put do he same thing?

I have absolutely no idea

. I don't think this can be done in code easily, for this to be done in code, you'd probably have to extend Button.

darolla wrote:My dear MrSnowflake,

thanks a lot for this !!!

In return I am posting right now my first own tutorial (Tutorial: Modal Dialogs).

Lots of greetings,
DaRolla

I hope you and a lot of others find this tut usefull, I'll go take a look to at your tutorial now.

mortefer · by **mortefer** » Sat Jan 10, 2009 11:38 pm

MrSnowFlake, does this solution fits to "skin" any View element??? i mean of course properties can change but, can i skin in such a vay textinput, checkbox, radio button??

Tnx

mortefer · by **mortefer** » Sat Jan 10, 2009 11:39 pm

Thanx for the tutorial BTW, 5 stars form me )

MrSnowflake · by **MrSnowflake** » Sun Jan 11, 2009 11:58 am

mortefer wrote:MrSnowFlake, does this solution fits to "skin" any View element??? i mean of course properties can change but, can i skin in such a vay textinput, checkbox, radio button??

Tnx

I don't know anything about skinning, so I really can't help you... Sorry.

mortefer wrote:Thanx for the tutorial BTW, 5 stars form me )

Thanks.

pskink · by **pskink** » Sun Jan 11, 2009 12:21 pm

mortefer wrote:MrSnowFlake, does this solution fits to "skin" any View element??? i mean of course properties can change but, can i skin in such a vay textinput, checkbox, radio button??

Tnx

see my post making_own_theme-t4052.html

hth

linkmaster_6 · by **linkmaster_6** » Sun Jan 11, 2009 3:21 pm

MrSnowflake wrote:
linkmaster_6 wrote:thank you for the tourital. how would i go about doing this in code? are there some methods i can override to put do he same thing?
I have absolutely no idea . I don't think this can be done in code easily, for this to be done in code, you'd probably have to extend Button.

I was thinking the same thing but it doesn't look like their are any methods to overide any of the states that you declared in xml. I didn't know if you knew something I didn't

. Thanks though for trying

darolla · by **darolla** » Sun Jan 11, 2009 7:29 pm

do u know how to change the checkboxes?

greetings,
darolla

ps: this tutorial uses lots of selector stuff: viewtopic.php?p=16253#16253

ps: I packed all original checkboxes for u...

lostInTransit · by **lostInTransit** » Thu Mar 05, 2009 6:40 am

linkmaster_6 wrote:
MrSnowflake wrote:
linkmaster_6 wrote:thank you for the tourital. how would i go about doing this in code? are there some methods i can override to put do he same thing?
I have absolutely no idea . I don't think this can be done in code easily, for this to be done in code, you'd probably have to extend Button.

I was thinking the same thing but it doesn't look like their are any methods to overide any of the states that you declared in xml. I didn't know if you knew something I didn't . Thanks though for trying

Hi

I tried using this to have a rollover effect on my button i.e. change the button image on rollover. But my button does not change whether I press it, or it has focus or none. I get the same image for each state. Any ideas?

Here's the selector

Syntax: [ Download ] [ Hide ]

Using xml Syntax Highlighting

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item 
        android:state_focused="true"
        android:state_pressed="true"
        android:drawable="@drawable/installbtn_over"/>
    <item 
        android:state_focused="true"
        android:state_pressed="false"
        android:drawable="@drawable/installbtn"/>
    <item 
        android:state_focused="false"
        android:state_pressed="false"
        android:drawable="@drawable/installbtn"/>
    <item android:drawable="@drawable/installbtn"/>
</selector>
 
Parsed in 0.002 seconds,  using GeSHi 1.0.8.4

And this is where I am using it

Syntax: [ Download ] [ Hide ]

Using xml Syntax Highlighting

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@drawable/bkg"
    >
    <TextView  
    android:layout_width="fill_parent" 
    android:layout_height="300px" >
    </TextView>
    <LinearLayout
    android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:layout_height="55px"
    android:gravity="center">
    <Button
    android:id="@+id/installRing"
    android:layout_width="wrap_content"
    android:layout_height="52px"
    android:background="@drawable/installbtnsel">
    </Button>
    </LinearLayout>
    
</LinearLayout>
 
Parsed in 0.004 seconds,  using GeSHi 1.0.8.4

Thanks

kroupa · by **kroupa** » Tue Apr 21, 2009 7:17 pm

Hi,

your tutorial worked great for me. However I've noticed that on device only the clickable region in the button I've created is limited only to the *text* in the button. The button selector points to drawable xml shapes that have rectangles filled with gradients. These buttons are in a relative layout overlapping a gridview. Most of the time the press action falls through to the grid item underneath.

Any thoughts on whether this a bug (works on emulator) or if there is some way to specify the hit region of a button.

Thanks a lot for your help!
Brady

xgamesx · by **xgamesx** » Tue Mar 16, 2010 3:04 am

Thanks a lot for your help!

[TinyTut]Custom Button backgrounds/Better ImageButton

[TinyTut]Custom Button backgrounds/Better ImageButton

Re: [TinyTut]Custom Button backgrounds/Better ImageButton

Who is online