It is long back since I did the last post. Let’s start the actual thing now.
With all your development environment setup, it is time for some real android
programming. User Interface (UI) is one of the most important aspects of the Android
programming. It can give you’re the important edge that will attract users to
your app and is taken to be seriously off. One of the reasons for popularity of
Android platform is its simple-to-understand and highly interactive UI.
So
how do you make UIs in Android?
This is such a huge topic that it will be taken in various
parts.
The
View and ViewGroup class
View and
ViewGroup Class are the basic building blocks of Android UI elements. ViewGroup
Class takes care of grouping of various elements known as (YES!!! you guessed
it) Views. Views are also known as widgets e.g. TextView, Button ListView etc. Each
of the widget is a class in itself and has a set of properties and values that
can be manipulated for defining its behaviour. ViewGroup also known as layouts
contain these widgets within them and decide the positioning of these widgets
within them and provide the final look and feel of the application.
That is about some basic
background. Now let’s get down to some business. In Android programming, UI can
be made using both Java i.e. programmatically and statically using XML (Extended
Markup Language). The XML approach provides for clear separation of UI code so
that Java can be used for the core code of your application.
A Basic
XML Layout
We will edit the main.xml in our Hello World Application.
All the layouts are placed in the res/layout/ folder in your project.(The code is in red color)
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="#FFAA00"
>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text= "How's The View"
android:textSize="40dp"
android:textColor="#0088FF"
android:gravity="center_horizontal"
android:layout_marginTop="40dp"
android:id="@+id/textview"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20dp"
android:id="@+id/button1"
android:text="Press Me"
android:layout_gravity="center_horizontal"
android:layout_marginTop="40dp"
/>"
</LinearLayout>
You can view the code on github as well.
The XML code consists of tags (here LinearLayout , TextView, Button)
and attributes( layout_width, layout_height,textSize etc.android is a namespace).
Most of the attributes are self-explanatory.The output of the above code is :
The most important and highly used attributes are layout_width and layout_height which take values wrap_content and fill_parent .As the name suggests they make the size of the widgets wrap their content or fill their parent(i.e. their container) completely.Here LinearLayout is a ViewGroup which places the contents in a linear fashion.Here the orientation is vertical therefore the TextView and the Button are placed in the order they appear in the xml file in one below the other.
To set the layout to an Activity following function is used
setContentView(R.layout.main);
Next Part will talk about different layouts and referencing widgets in Java code.Till then
Happy Droiding :-)
