Skip to content

Posts tagged ‘xml’

Making Prettier Buttons in android; XML (rollover,selection & focus effects), 9patch images and transparency

Aug 23 10
by mat

Alot of the soundboards out there on the market look a little bit ugly by using the default android buttons in conjunction with a background (no offense to developers of these, perhaps they can learn from this); this mini-tutorial explains how to use xml to create a customised nice looking button thing.

Ugly Buttons:
Below is show the example I will use to demonstrate the default buttons in use with a background image (It’s a picture of me hugging the android statue!)

"Ugly" default buttons in android

Button States

There are four images you will need to create (you can use less if you want); one for each of the following states:

state_focused state_pressed What this means
true false Button highlighted (selected with trackpad)
true true Button foussed and pressed
false true Button pressed
false false Normal state of button

I recommend creating a nine-patch png for the button image, this way your image can be stretched to fit the button size as needed. Also soundboards look rather snazzy if you include a background image, and then you can use transparency in your png so that your buttons don’t obscure it.

draw9patch tool button android

Using draw9patch tool to make a 9patch png for use as a strechable button

XML Code

button.xml

<?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/button_selected" />
    <item android:state_focused="true"
    	  android:state_pressed="true"
    	  android:drawable="@drawable/button_focus" />
    <item android:state_focused="false"
    	  android:state_pressed="true"
	  android:drawable="@drawable/button_pressed" />
    <item android:drawable="@drawable/button_normal" />
</selector>

main.xml
An example usage of how to use this newly created xml button in your layout file.

<Button
android:id="@+id/mysexynewbutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="30sp"
android:textStyle="bold"
android:text="Stealthcopter FTW"
android:background="@drawable/button" />

Results
Now you should have some nice sexy customised buttons that change depending on thier state. Which makes our example now look like this (I increased the padding and margins of the buttons slightly):

Pretty Buttons with transparency using 9patch png and xml

Pretty Buttons with transparency using 9patch png and xml

Below are a few examples of my work with some nice transparent buttons:

Example 9 patch image

button.9.png

button.9.png

11 Comments

Saving settings in python with YAML (an XML alternative)

Feb 25 10
by mat

When transferring information or settings between computers and programs is is useful to use something simple and program independent. For a recent project I need to send a settings file between a PHP script and a python program, I needed something that would support trees so an INI file was out of the question, and I naturally thought of using XML, however when looking for more information I stumbled upon YAML (seemingly forgotten alternative to XML).

YAML is a recursive acronym that stands for YAML Ain’t Markup Language and below is a simplified example taken from the YAML site. The layout is similar to python with indents representing the nested layers. Semicolons are used to seperate variable names and value pairs.

name   : Joe Bloggs
product:
    - sku         : BL394D
      quantity    : 4
      description : Basketball
      price       : 450.00
    - sku         : BL4438H
      quantity    : 1
      description : Super Hoop
      price       : 2392.00
tax  : 251.42
total: 4443.5

To use YAML in python you will need the PyYAML library avaliable here or in via your package manager in linux. (I.E. “sudo apt-get install http://pyyaml.org/wiki/PyYAML” in ubuntu/debian).

The code for then using YAML is very simple, first we import the yaml library, then we open our settings file we have created and then use yaml’s load feature to load our settings into a python dictionary, and then finally printing it out so we can see what it contains

import yaml
f=open('settings.cfg')
settings=yaml.load(f)
print settings

Using the example YAML file above saved to settings.cfg this python script will output the following when run:

{'product': [{'sku': 'BL394D', 'price': 450.0, 'description':
'Basketball', 'quantity': 4}, {'sku': 'BL4438H', 'price': 2392.0,
'description': 'Super Hoop', 'quantity': 1}], 'total': 4443.5, 'tax':
251.41999999999999, 'name': 'Joe Bloggs'}

We can now access all the information in the file very easily (I.E. settings['name'] will give us the name Joe Bloggs).

YAML supports much much more than what is discussed here and further information can be found on the YAML website.

3 Comments