Now it’s time to see the widgets we have available in the Android platform. In the last part of this series of articles, we saw the “layouts”, containers for these widgets.
Once we have learned what layouts are, it’s time to work with the widgets that are going to be inside the layouts. If you have worked with HTML this will be easy, if not…It will be easy anyway. We call a 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 into account that all we are going to do now, can be done using Java classes. Let’s start.
Widgets
There are lots of widgets to use in our applications, now we are going to have a look to the most significant (in my opinion).
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”>
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 https://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
These are examples of attributes for Button widget. We can get more from this page:
https://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
These are simple labels that hold 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”
>
As we can see, we can configure the TextView to fit to our needs. We can change text size with _android:textSiz_e (hint! Its important to add the units to the values of the attributes, if we are specifying an element size, we have to put “px” (pixels) or whatever unit we are using). On the 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 the text that is 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”
>
The structure is, as you can see, the same as the other widgets. The image must be a drawable (image in the drawable folder).
Want to know more?
You can visit the Google widgets page to learn more about this. In the next articles we will see how to use an external application to create our user interface.
This post is part of the series: How to- Develop Applications on Android
In this series of articles, I will explain how to develop your own application for Android, from the beginning.
- Setting the Environment: Using Eclipse and Netbeans for Developing Google Android Apps
- How to Create an Android Application: Structure I
- How Do I Develop an Android Application? Structure II
- How to Create User Interfaces (UI) Using XML : Layouts
- How to Create a User Interface (UI) Using XML : Widgets
