When teaching Android, I find students confused by the many "size" or dimensional properties on Android TextView and various descendent widgets like Button, CheckBox, EditText, etc. Often, the size of any widget can be dictated by its layout, content or other aspect. But you can directly set the size by property. Unfortunately, there a number of properties that determine the size of these widgets.
Units of Measure
What might add to the confusion is that the dimensions (height and width for example) can be specified in one of many different units of measure in the layout resource file. Specifically, the height and width can be specified in pixels, density-independent pixels, scaled-independent pixels, inches, millimeters or em. Inches and millimeters are probably straight forward enough. However, the fact that there are three types of pixel definitions leads to questions about the differences among the other options.
Density-independent pixel
The pixel unit of measure refers to the actual number pixels on the screen. Because the size and number of pixels can vary greatly across devices, widget height and width can vary when using pixels to determine the widget size. A density-independent pixel is an abstract unit of measure. It is based on a screen with a density of 160 pixels (or dots) per inch (dpi). The formula is physical pixel = density-independent pixel * (160/ system dpi). So, if you had a device with 320 pixels (dots) per inch, 1 density-independent pixel would equal 2 physical pixels.
Scaled-independent pixel
Scaled-independent pixel is like the density-independent pixel unit of measure. However, scaled-independent pixels are also scaled by the user's font size preference. When using a widget (like EditText or TextView) that displays text, an adjustment may be made for the text as part of the widget display. At the default font size settings, 1 scaled-independent pixel = 1 density-independent pixel. However, this can change if the user sets the font size to be larger or smaller.
Developers are actually encourage to use the density-independent (or scaled-independent) unit of measure when defining widgets because it allows the widgets in an applications to preserve the appearance of physical size across many different sized devices. In other words, your widgets are automatically scaled on screens with different densities so that the look/feel of the user interface is preserved.
For more information regarding the various pixel units of measure, see here.
EM
An em is a unit of measure derived in the field of typography (the art and technique of arranging type). Originally, the unit was derived from the width of the capital letter 'M' (thus the name - and the way you pronounce this unit of measure). What an em defines is the proportion of a given letter's width and height with respect to the point size. The em should be the same for all fonts at a specified point size - providing a font/typeface independent unit of measure. For example, in a 16 point typeface, 1 em = 16 points. See here for more information on the em unit of measure.
Unit of Measure Abbreviations
When specifying a size in inches, millimeters, pixels, density-independent pixels, or scaled-independent pixels (all but EM), abbreviations are used. The table below provides the abbreviation and an example dimension setting.
| Unit of Measure |
Abbreviation |
Example |
| inches |
in |
"0.5in" |
| millimeters |
mm |
"20mm" |
| pixels |
px |
"100px" |
| density-independent pixels |
dp or dip |
"100dp" or "100dip" |
| scaled-independent pixels |
sp |
"100sp" |
Physical Height/Width Properties
With an understanding of the units of measure, a better look at the widget size can be accomplished. There are indeed several properties which control the physical dimensions of TextView (and all subclass) widgets. These include the following properties:
- height/width
- maxHeight/minHeight
- maxWidth/minWidth
- ems
- minEms/maxEms
- textSize
Height/Width
The first two properties, height and width, set the specific height and width of the associated view. In the example below, both the height and width are set to 100 pixels. [Note: programmatically, setHeight(int) and setWidth(int) sets these widget properties. However, these methods only work in the pixel unit of measure.]
1: <Button android:text="Push me now" android:id="@+id/button1"
2: android:layout_width="wrap_content" android:layout_height="wrap_content" android:height="100px" android:width="100px"></Button>

Layout Affect
Remember, when using layout ViewGroup (like LinearLayout), the layout often dictates the height and/or width of a widget. In the example below, the height and width are set to 100 pixels, but the layout_width and layout_height are set to fill_parent. This has an overriding effect and causes the button to be displayed with nothing close to the 100x100 pixel sizes.
1: <Button android:text="Push me now" android:id="@+id/button1"
2: android:layout_width="fill_parent" android:layout_height="fill_parent"
3: android:height="100px" android:width="100px"></Button>

Max and Mins
The height and width properties call for the widget to be a specific size (when not affected by layout management). The maxHeight/MinHeight and maxWidth/MinWidth can be used instead of the height/width properties. Min and max properties inform Android what the maximum (at most) and minimum (at least) sizes can be for a widget. Some layouts and the presence/non-presence of contained text can impact the dimensions of a widget. These properties help to ensure the minimum and maximum width/height.
Unless the height and/or width are set between their respective min/max values, you don't want to use the height or width property with min/max properties. In fact, you will find that the min/max properties override the height/width properties. In the example below, note the minHeight/maxHeight properties are set to 100 and 200 pixels respectively. When the height is set to 10px, it has no effect.
1: <Button android:text="Push me now" android:id="@+id/button1"
2: android:layout_width="wrap_content" android:layout_height="wrap_content"
3: android:minHeight="100px" android:maxHeight="200px" android:height="10px"></Button>

If the height property is set to a value between min/max, then it dictates the size of the widget. Here, the height is set to 150, between the min and max values of 100 and 200 pixels.
1: <Button android:text="Push me now" android:id="@+id/button1"
2: android:layout_width="wrap_content" android:layout_height="wrap_content"
3: android:minHeight="100px" android:maxHeight="200px" android:height="150px"></Button>

TextSize
Widgets, like the push button, often have associated text. The textSize property can and often does affect the size of not only the text displayed but also the associated widget. Notice what happens to the button when the size of text is set to 100 pixels. The corresponding button grows to meet the text demands.
1: <Button android:text="Push me now" android:id="@+id/button1"
2: android:layout_width="wrap_content" android:layout_height="wrap_content"
3: android:textSize="100px"></Button>

However, when the height and width are set (either directly or with min/max properties), the textSize setting is overridden. In the example below, the textSize is still set to 100 pixels, but the height is set to 10 pixels. You can't even read the text anymore because the height of the resulting button is too small to display it.
1: <Button android:text="Push me now" android:id="@+id/button1"
2: android:layout_width="wrap_content" android:layout_height="wrap_content"
3: android:textSize="100px" android:height="10px"></Button>

Using EMS
Special properties (and setters/getters from a programmatic perspective) are used to provide an EM dimension. Below are two images, one with the ems value set to 10 and the other set to 20.
1: <Button android:text="Push me now" android:id="@+id/button1"
2: android:layout_width="wrap_content" android:layout_height="wrap_content"
3: android:ems="20"></Button>


Don't use the height/width with ems values. The height/width will override the ems values.
1: <Button android:text="Push me now" android:id="@+id/button1"
2: android:layout_width="wrap_content" android:layout_height="wrap_content"
3: android:ems="20" android:height="100px" android:width="100px"></Button>

Wrap up
With all these "dimensional" properties and the ways they can be impacted by the layout, content, unit of measure, etc. its no wonder people can be a little confused on how to set the dimensions of an Android TextView (or descendent) widget. Hopefully this post can help you figure out what works best for your mobile application need. If you are looking for more help on developing Android applications, consider taking Intertech's Complete Android training (see here for more details and contact Dan McCabe at dmccabe@intertech.com to reserve a seat).
4985a006-3fd6-4195-886f-5ebbb931ff6e|2|4.5