Android UI for beginners

      No Comments on Android UI for beginners

This article covers the basic Android UI which every android developer should know. Here we will discuss what are the basic android UI building blocks and how they can be used. With a little attention you can master the basics of android UI design. I have created a demo application to help learn the basics. You can look at the code on github.

home_screen

Android UI has two main classes View and ViewGroup.

View

This is the base class for all the android UI components. It has its own appearance. Examples of View are TextView, EditTextView etc.

ViewGroup

It is a special type of View which can hold multiple Views. The ViewGroup class also implements LayoutParams which are used to configure the viewgroup. Few examples of ViewGroups are LinearLayout, RelativeLayout etc. Following are the mostly used ViewGroups.

  1. LinearLayout
  2. RelativeLayout
  3. AbsoluteLayout (Deprecated use RelativeLayout instead)
  4. TableLayout
  5. ScrollView
  6. FrameLayout

LinearLayout

A layout that arranges its children in a single row or column. It can be used when you want to arrange yours views in vertical or horizontal manner.

Attributes of LinearLayout

android:orientation –     This attribute can have 2 values horizontal or vertical. Configure the value according to your design needs.
android:layout_width –  This attribute is mandatory for all the ViewGroups. This tells how much width can be occupied by the Views inside this ViewGroup.
android:layout_height – This attribute is also mandatory for all the ViewGroups. This tells how much height can be covered by the Views inside this ViewGroup.

Example

                                       linear_layout_horizontal

RelativeLayout

In This ViewGroup you can arrange the Views in relative fashion. Lets say you have a TextView and an EditTextView you want to keep TextView in left of EditTextView. You can just say that EditTextView will be on the right of TextView using one of the RelativeLayout attributes.

Attributes of RelativeLayout

android:layout_alignParentTop – use this attribute to fix the View at the top of the RelativeLayout
android:layout_alignParentLeft – use this attribute to align View on the left
android:layout_alignParentRight – use this attribute to align View on the right
android:layout_alignTop – use this attribute to align View on the top of some other view
android:layout_alignBottom – use this attribute to align View on the bottom of some other view
android:layout_alignStart – use this attribute to align View on the start of some other view
android:layout_alignEnd – use this attribute to align View on the start of some other view

Example

                                     relative_layout

AbsoluteLayout

This Layout is deprecated. It is used to fix Views position on the screen. Now you can do that using RelativeLayout as shown above.

TableLayout

This Layout is used to arrange the Views in tabular fashion. It extends the LinearLayout. Table has as many columns as the row with maximum Views. You can use this layout to design forms etc.

  • Table can leave cells empty
  • width of the column is defined by the row with the widest cell
  • can not change the width as its always match_parent for the TableLayout
    public LayoutParams(int w, int h) { super(MATCH_PARENT, h); }
  • TableRow also extends LinearLayout

Example

                                    table_layout

ScrollView

By default you can not scroll the android screen. If you want to make the screen scrollable, you have to encapsulate your ViewGroup in ScrollView. ScrollView can have only one direct child. Lets say you want to have multiple LinearLayout within ScrollView, that is not possible. Android will through an exception saying

So, always keep only one Direct child under the ScrollView. Also do not use ListView inside the ScrollView, because ScrollView provides infinite scrolling so if you want to render ListView inside ScrollView, it will render the whole list first and then the other elements which defeats the purpose of android ListView which is optimised to load the content on scroll. If you want to keep ListView, put it outside of ScrollView.

Example

                                           scroll_view

FrameLayout

This is a special layout which is mostly used to render one View. The View which you add to the FrameLayout will be added to the top left corner. If you try rendering multiple views, they will be stacked on each other. And still if you want to add multiple views you have to manually control their position by specifying their gravity.

Example

frame_layout

I hope this Android UI for beginners  article was helpful. I will write more about android UI tips and tricks in the upcoming articles. Please comment for any feedback, concern or suggestion, Thanks.

Leave a Reply

Your email address will not be published. Required fields are marked *