Once we have learned what layouts are, its time to work with the widgets that are going to be inside this layouts. If you have worked with HTML this will be easy, if not...It will be easy anyway. We call widget to every single element in the UI, as Buttons, Texts, Images, EditText.
We are going to work in XML, but we have to take account that all we are going to do now, can be done using Java classes. Lets start.
There are lots of widgets to use in our applications, now we are going to have a look to the most significant (in my point of view).
Button
This element is a …. button. The most simple Button has the following structure:
<Button
android:id="@+id/button01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button">
</Button>
Where android:id is the unique identifier of the element, and android:layout_width/layout_height are, as we could see in the last article http://www.brighthub.com/mobile/google-android/articles/22948.aspx is the size of the element. In the android:text attribute we set the text that its inside the Button.
We can have more attributes to configure our Button.
- android:clickable → we set if the button reacts to click events
- android:soundEffectsEnabled → We can set if this button have sounds effects when its clicked or touched
This are examples of attributes for Button widget. We can get more in this page
http://code.google.com/intl/es-ES/android/reference/android/widget/Button.html
Most of the widget's attributes are shared because they have inherited them from more complex elements (Views).
TextViews
This are simple labels that holds a text inside. I have created a more complex TextView element to see more than the basic attributes of it.
<TextView
android:id="@+id/TextView01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/black"
android:text="Here you can put whatever you want"
android:textSize="12sp"
android:typeface="sans"
android:textStyle="italic"
android:textAlign="center"
>
</TextView>
As we can see, we can configure the TextView to fit to our needs. We can change text size with android:textSize (hint! Its important to add the units to the values of the attributes, if we are specifying a element size, we have to put “px” (pixels) or whatever unit we are using). In other hand if we want to change the face of the fonts inside the text, we can use android:typeface to change to “bold”, “italic” or both. We can align the text with textAlign or we can change the background of the widget and put an image (drawable) or a color with android:background.
EditText
This is just the same as TextView, but with the difference that a the text that its inside the widget can be edited by the application user.
ImageView
With this widget we can add images to our applications
<ImageView
android:id="@+id/widget31"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
</ImageView>
The structure is, as you can see, the same as the others widgets. The image must be a drawable (image in the drawable folder).
You can visit the google widgets page to know more about this. In next articles we will see how to use an external Application to create our User Interfaces.