Android Development Tutorial: Using Widgets in UI Creation

Page content

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.


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).


This element is a …. button. The most simple Button has the following structure:






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 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:

Most of the widget’s attributes are shared because they have inherited them from more complex elements (Views).


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.






android:text=“Here you can put whatever you want”






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.


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.


With this widget we can add images to our applications






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.

  1. Setting the Environment: Using Eclipse and Netbeans for Developing Google Android Apps
  2. How to Create an Android Application: Structure I
  3. How Do I Develop an Android Application? Structure II
  4. How to Create User Interfaces (UI) Using XML : Layouts
  5. How to Create a User Interface (UI) Using XML : Widgets