Simple Example : Click on button

Explain: The application places a button to occupy the screen. When clicked the button’s text shows current time.

Create new Android Project And use this parameters :

  1. Project name : MyFirstUIAndroid
  2. SDK: Android 2.3 (because it is the most used until today), Note: you can use emulator for Android 4.0.3 to test your application if you need that.
  3. Package Name: tn.insat.houcine
  4. Create Aclivity: ButtonActivity
  5. Minimum SDK: 10

Now edit the XML File named main.xml (location : under res/layout in your project) to add a button into your layout :

 <?xml version=”1.0″ encoding=”utf-8″?>
<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android&#8221;
    android:layout_width=”match_parent”
android:layout_height=”fill_parent”
android:orientation=”vertical” android:gravity=”center”><Button
android:id=”@+id/button1″
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:text=”MyFirstButton” />
</LinearLayout>
Because we want to reference this button from our Java code, we need to give it an identifier via the android:id attribute.

  • android:text indicates the initial text to be displayed on the button face (in this case,an empty string).
  • android:layout_width and android:layout_height tell Android to have the button’s width and height fill the “parent“ container, in this case the entire screen or wrap the content that the button need.
Best Practices:
you can change the button name with a link to an attribute into an xml file (located under res/values) that contains only a Strings,Colors, Lists,… because it will centralize the changes of text, title or color into a single place and facilitates the internationalization of your application later.
Now, change the java Class (Named: ButtonActivity) to load the button and add a Click Event to allow the user to chow The date and time after clicking the button.
package tn.insat.houcine;

import java.util.Date;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;public class ButtonActivity extends Activity {
Button btn;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
btn = (Button) findViewById(R.id.button1);
btn.setOnClickListener(new OnClickListener() {
public void onClick(View v) {
updateTime();
}
});
}
private void updateTime() {
btn.setText(new Date().toString());
}}
Now to test this application right click on the project and select Run As then select Android Application.

User Interfaces Using XML Layouts

The View class represents the basic building block for user interface components.
View is the base class for widgets, which are used to create interactive UI components (buttons, text fields, etc.).
All of the views in a window are arranged in a single tree.
To arrange the views in one window we use different types of Layouts like :

  1. Linear Layout: A LinearLayout is a GroupView that will lay child View elements vertically or horizontally.
  2. Relative Layout: A RelativeLayout is a ViewGroup that allows you to layout child elements in positions relative to the parent or siblings elements.
  3. Table Layout: A TableLayout is a ViewGroup that will lay child View elements into rows and columns.

A brief sample of UI components:

Time / Date picker: 

A DatePicker is a widget that allows the user to select a month, day and year. And a TimePicker is a widget that allows the user to select an hour, minute and second.

Form Controls:
Includes a variety of typical form widgets, like: image buttons, text fields, checkboxes and radio buttons.
you can use other views
like: GalleryView, TabWidget, Spinner, AutoCompleteTextView, ListView, WebView, MapView …
To see all UI components see the palette of the Graphical Layout in the XML Layout located under res/layout (i will say more about the xml layout after that) like that:
What is an XML Layout?
An XML-based layout is a specification of the various UIcomponents (widgets) and the relationships to each other – and to
their containers – all written in XML format.

Android considers XML-based layouts to be resources, and as such layout files are stored in the res/layout directory inside your Android project.
The attributes of the XML elements are properties, describing how a widget should look or how a container should behave.
Example:
If a Button element has an attribute value of
          android:textStyle = “bold”
that means that the text appearing on the face of the button should be rendered in a boldface font style.

Installation and Hello World Android:

To develop in Android you have to Download tow thinks:

  1. Eclipse: to code in java and use the intellisense (Crtl +  space ) to facilitate your work.
  2. Android’s SDK that add  to your environment the emulator in witch you execute the application as if you have a mobile with Android as OS.

First, you have to download eclipse from the official web site, from here. And you have to chose witch version of eclipse for your needs.
For me i have chosen Eclipse IDE for Java EE Dévelopers For Linux. You can chose other version for an other OS.

Second, you have to download the SDK of Android from here.

Now, you have to open unzip the ziped file of eclipse and run the executable into folder named eclipse. And do not forget to unzip the Android SDK if you have download it as a zip or a tgz file.
After choosing your workspace you have to install the plugin of Android into eclipse:

  1. go to help -> install new Software
  2. press Add And enter as a Name ” Android ” and as Location                                                                    ” https://dl-ssl.google.com/android/eclipse/
  3. After same minutes, check all choices And press Next, And accept the licence.
  4. And finally, Click finish to let Eclipse download and install the plugin, After that, eclipse will ask you to restart it so accept that to restart eclipse.

Note: you can use MotoDev (As plugin Eclipse or an application installed like .exe in Windows ) to develop android easier. to know more about MotoDev and download it see here.
Now you are able to see this icons into your eclipse like that:

Now Create new Android project : press File -> New -> Android Project
After that  use this parameters :

  1. Project name : HelloWorldAndroid
  2. SDK: Android 2.3 (because it is the most used until today), Note: you can use emulator for Android 4.0.3 to test your application if you need that.
  3. Package Name: tn.insat.houcine
  4. Create Aclivity: HelloWordActivity
  5. Minimum SDK: 10

Result:

And Android Project consists of:

  1. src : contains all java classes And Activities.
  2. gen : automatically generate
  3. res : contains all resources like layouts, values, images, …

That’s all for this tutorial you will see in other how to use layouts to create window in Android.