Pin Me

How to Create a User Interface (UI) Using XML : Widgets

written by: Jbeerdev•edited by: Simon Hill•updated: 7/5/2011

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.

  • slide 1 of 3

    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.

  • slide 2 of 3

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

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

    These are examples of attributes for Button widget. We can get more from 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

    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"

    >

    </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 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"

    >

    </ImageView>

    The structure is, as you can see, the same as the other widgets. The image must be a drawable (image in the drawable folder).

  • slide 3 of 3

    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.