[TinyTut]Custom Button backgrounds/Better ImageButton

Basic Tutorials concerning: GUI, Views, Activites, XML, Layouts, Intents, ...

[TinyTut]Custom Button backgrounds/Better ImageButton

Postby 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
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.    android:orientation="vertical"
  4.    android:layout_width="fill_parent"
  5.    android:layout_height="fill_parent"
  6.    >
  7. <Button
  8.    android:layout_width="fill_parent"
  9.    android:layout_height="wrap_content"
  10.    android:text="@string/hello"
  11.    android:background="@drawable/my_button"
  12.    />
  13. </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
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <selector xmlns:android="http://schemas.android.com/apk/res/android">
  3.     <item android:state_focused="true" android:state_pressed="false" android:drawable="@drawable/focused" />
  4.     <item android:state_focused="true" android:state_pressed="true" android:drawable="@drawable/focusedpressed" />
  5.     <item android:state_focused="false" android:state_pressed="true" android:drawable="@drawable/pressed" />
  6.     <item android:drawable="@drawable/defaultbutton" />
  7. </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.
Attachments
SelectorTest.zip
SelectorTest project. And apk is in the bin. This is public domain now.
(17.76 KiB) Downloaded 3596 times
User avatar
MrSnowflake
Moderator
Moderator
 
Posts: 1439
Joined: Sat Feb 16, 2008 3:11 pm
Location: Flanders, Belgium

Top

Postby 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?
linkmaster_6
Experienced Developer
Experienced Developer
 
Posts: 51
Joined: Thu Oct 16, 2008 8:52 pm

Postby 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
User avatar
darolla
Master Developer
Master Developer
 
Posts: 273
Joined: Thu Sep 25, 2008 5:16 pm
Location: Dortmund, Germany

Postby 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.
User avatar
MrSnowflake
Moderator
Moderator
 
Posts: 1439
Joined: Sat Feb 16, 2008 3:11 pm
Location: Flanders, Belgium

Postby 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
Experienced Developer
Experienced Developer
 
Posts: 54
Joined: Sat Dec 20, 2008 11:24 am

Postby mortefer » Sat Jan 10, 2009 11:39 pm

Thanx for the tutorial BTW, 5 stars form me )
mortefer
Experienced Developer
Experienced Developer
 
Posts: 54
Joined: Sat Dec 20, 2008 11:24 am

Top

Postby 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.
User avatar
MrSnowflake
Moderator
Moderator
 
Posts: 1439
Joined: Sat Feb 16, 2008 3:11 pm
Location: Flanders, Belgium

Postby 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
pskink
pskink
Master Developer
Master Developer
 
Posts: 719
Joined: Mon Nov 24, 2008 3:49 pm

Postby 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
linkmaster_6
Experienced Developer
Experienced Developer
 
Posts: 51
Joined: Thu Oct 16, 2008 8:52 pm

Postby 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...
Attachments
CheckBox.zip
(23.56 KiB) Downloaded 613 times
User avatar
darolla
Master Developer
Master Developer
 
Posts: 273
Joined: Thu Sep 25, 2008 5:16 pm
Location: Dortmund, Germany

Postby 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
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <selector xmlns:android="http://schemas.android.com/apk/res/android">
  3.     <item
  4.         android:state_focused="true"
  5.         android:state_pressed="true"
  6.         android:drawable="@drawable/installbtn_over"/>
  7.     <item
  8.         android:state_focused="true"
  9.         android:state_pressed="false"
  10.         android:drawable="@drawable/installbtn"/>
  11.     <item
  12.         android:state_focused="false"
  13.         android:state_pressed="false"
  14.         android:drawable="@drawable/installbtn"/>
  15.     <item android:drawable="@drawable/installbtn"/>
  16. </selector>
  17.  
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
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.    android:orientation="vertical"
  4.    android:layout_width="fill_parent"
  5.    android:layout_height="fill_parent"
  6.    android:background="@drawable/bkg"
  7.    >
  8.     <TextView  
  9.    android:layout_width="fill_parent"
  10.    android:layout_height="300px" >
  11.     </TextView>
  12.     <LinearLayout
  13.    android:orientation="horizontal"
  14.    android:layout_width="fill_parent"
  15.    android:layout_height="55px"
  16.    android:gravity="center">
  17.     <Button
  18.    android:id="@+id/installRing"
  19.    android:layout_width="wrap_content"
  20.    android:layout_height="52px"
  21.    android:background="@drawable/installbtnsel">
  22.     </Button>
  23.     </LinearLayout>
  24.    
  25. </LinearLayout>
  26.  
Parsed in 0.003 seconds, using GeSHi 1.0.8.4

Thanks
lostInTransit
Developer
Developer
 
Posts: 26
Joined: Thu Feb 12, 2009 10:37 am
Location: India

Re: [TinyTut]Custom Button backgrounds/Better ImageButton

Postby 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
kroupa
Once Poster
Once Poster
 
Posts: 1
Joined: Tue Apr 21, 2009 7:12 pm

Postby xgamesx » Tue Mar 16, 2010 3:04 am

Thanks a lot for your help!
xgamesx
Once Poster
Once Poster
 
Posts: 1
Joined: Tue Mar 16, 2010 3:01 am

Top

Return to Novice Tutorials

Who is online

Users browsing this forum: Exabot [Bot], Google [Bot] and 5 guests