What Are Widgets?
Wikipedia has a nice definition of a widget:
In computer programming, a widget (or control) is an element of a graphical user interface (GUI) that displays an information arrangement changeable by the user, such as a window or a text box.
The defining characteristic of a widget is to provide a single interaction point for the direct manipulation of a given kind of data. In other words, widgets are basic visual building blocks which, combined in an application, hold all the data processed by the application and the available interactions on this data.
Take, for example, this Android screen:
Here, we see:
- some text, like “Andruni.com … ” and “PHONE”.
- an icon of a contact.
- some data entry fields with hints like “Name” and “Company”.
- “spinner” drop-down lists.
- gray divider lines.
Everything listed above is a widget.
The user interface is made up of one or more widgets.
This does not mean that you cannot do your own drawing. In fact, all the existing widgets are implemented via low-level drawing routines, which you can use for everything from your own custom widgets to games.
For most non-game applications, your Android user interface will be made
up of several widgets.
Size, Margins, and Padding
Widgets have some sort of size.
Sometimes, that size will be dictated by what is inside the widget itself, such as a label (TextView) having a size dictated by the text in the label. or will be dictated by the size of whatever holds the widget (a “container”), where the widget wants to take up all remaining width and/or height. And Sometimes, that size will be a specific set of dimensions.
Widgets can have margins. As with CSS, margins provide separation between a widget and anything adjacent to it (e.g., other widgets, edges of the screen).
Margins are really designed to help prevent widgets from running right up next to each other, so they are visually distinct.
Also Widgets can have padding. As with CSS, padding provides separation between the contents of a widget and the widget’s edges.
This is mostly used with widgets that have some sort of background, like a button, so that the contents of the widget (e.g.,button caption) does not run right into the edges of the button, once again for visual distinction.
What Are Containers?
Containers are ways of organizing multiple widgets into some sort of structure.
Widgets do not naturally line themselves up in some specific pattern — we have to define that pattern ourselves.
In most GUI toolkits, a container is deemed to have a set of children. Those children are widgets, or sometimes other containers. Each container has its basic rule for how it lays out its children on the screen, possibly customized by requests from the children themselves.
Common container patterns include:
- put all children in a row, one after the next.
- put all children in a column, one below the next.
- arrange the children into a table or grid with some number of rows and columns.
- anchor the children to the sides of the container, according to requests made by those children anchor the children to other children in the container, according to requests made by those children.
- stack all children, one on top of the next.
- and so on.
In the sample activity above, the dominant pattern is a column, with things laid out from top to bottom. Some of those things are rows, with contents laid out left to right. However, as it turns out, the area with most of those widgets is scrollable.
Android supplies a handful of containers, designed to handle most common scenarios, including everything in the list above.
You are also welcome to create your own custom containers, to implement business rules that are not directly supported by the existing containers.
- Note that containers also have size, padding, and margins, just as widgets do.