An attempt to pen my thoughts to keyboards

When creating the user interface in Android, you can choose to use the interface builder that is provided (for Eclipse) or you can edit the XML files. I usually prefer editing the XML files because dragging around the different elements on the canvas and scrolling through the properties of each object gets tedious. If you edit the XML file you can also pretty much copy paste in elements of code that are repeated from screen to screen.

In the beginning, I often made a mistake regarding two major topics: content fill, and alignment. For content fill there are two important properties you need to know: wrap_content and fill_parent. For alignment you need to know the difference between the layout_gravity and gravity attributes.

layout_gravity vs. gravity

layout_gravity sets the gravity (alignment) of the View or Layout inside its parent. If you have a text view inside a linear layout, then setting the layout_gravity of the text view will alter its alignment in the layout. gravity sets the alignment of the content of the view or layout it is applied on. If you want your text (in the text view) to be left aligned, center, or right aligned, then modify the gravity attribute of the text view.

layout_gravity and gravity have the following options:

• for gravity and layout_gravity : here 

Here’s an example of what I’m saying:

<!-- Modifying <span class="hiddenGrammarError" pre="Modifying ">the gravity of</span> text to be center aligned, and for the text view to be center aligned (both horizontally and vertically) in the layout -->
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:background="@drawable/background"
    android:layout_width="fill_parent"
    android:orientation="vertical"
    android:layout_height="fill_parent"
    android:id="@+id/linearLayout">
    <TextView
        android:text="Current Location"
        android:layout_gravity="center_vertical|center_horizontal"
        android:id="@+id/textView"
        android:layout_width="wrap_content"><!--<span class="hiddenSpellError" pre=""-->TextView>
<!--<span class="hiddenSpellError" pre=""-->LinearLayout>

Note how for layout_gravity you can set for it to be aligned both horizontally and vertically by OR’ing the bits together. You could also replace “center_vertical|center_horizontal” with “center” and it would work as well. Important to note that it doesn’t work if you do “center_vertical | center_horizontal”, so spaces do matter.

Pictures will be added soon to give a visual explanation of what I’m saying.

wrap_content vs. fill_parent

The difference between wrap_content and fill_parent are both attributes which can modify the width and height of a view or layout. The fill_parent attribute sets the view/layout to take expand (either in width or height, depending on which it has been applied to) to take up all the space in the parent layout in which it is placed. If you set the width or height of a view/layout to wrap_content, it will only expand as much as its children.

If you have a text view inside a linear layout with the text attribute “Hello World”, if the width of the text view was set to fill_parent, it would expand to take up all the space (width wise) in the linear layout. If the width was set to wrap_content however, the width of the text view would only be the width required for the text “Hello World”.

<!-- Setting width and height to "fill_parent" of layout and "wrap_content" for child -->
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:background="@drawable/background"
    android:layout_width="fill_parent"
    android:orientation="vertical"
    android:layout_height="fill_parent"
    android:id="@+id/linearLayout">
       <TextView
            android:id="@+id/textView"
            android:text="Hello World"
            android:layout_width="wrap_content"></TextView>
</LinearLayout>

<!-- This will basically cause the root layout (linear layout) to take up <span class="hiddenSuggestion" pre="up ">the whole</span> screen, and the text view to expand only to the width of the text "Hello World" -->

Pictures will be added soon to give a visual example of what I’m saying.

I hope that was helpful, and clear enough to understand.