{"id":318,"date":"2010-10-20T19:13:00","date_gmt":"2010-10-20T19:13:00","guid":{"rendered":"http:\/\/www.javacodegeeks.com\/2012\/10\/android-full-app-part-1-main-activity-ui.html"},"modified":"2012-10-21T19:20:41","modified_gmt":"2012-10-21T19:20:41","slug":"android-full-app-part-1-main-activity","status":"publish","type":"post","link":"https:\/\/www.javacodegeeks.com\/2010\/10\/android-full-app-part-1-main-activity.html","title":{"rendered":"Android Full App, Part 1: Main Activity UI"},"content":{"rendered":"

This is the first part of the \u201cAndroid Full Application Tutorial\u201d series<\/a>. The complete application aims to provide an easy way of performing movies\/actors searching over the internet. In this part we are going to setup our Eclipse project, prepare the user interface for the main activity and finally test it on an appropriate emulated Android Device.<\/p>\n

Let’s start by creating a new Eclipse project (I suppose you already have the Android SDK and the Eclipse plugin installed). The project is named \u201cAndroidMovieSearchAppProject\u201d and the application is called \u201cMovieSearchApp\u201d (an extremely original name, I know). Note that Android 1.5 (API level 3) is used as the target platform, since none of the latest APIs will be used.<\/p>\n

<\/a><\/div>\n

Our user interface will be very simple. A textbox where the user will provide his search query, two radio-buttons indicating whether this is a movie or people search, a label to show the type of search and a button to actually perform the search. The search results will be presented in an other activity (this will be discussed in a later part of the series). <\/p>\n

As you probably know, the interface is created via an XML file in order to decouple the presentation view from the application logic. The corresponding file is named \u201cmain.xml\u201d and resides inside the \u201cres\/layout\u201d folder. Open it with the Eclipse editor and make sure it contains the following:<\/p>\n

<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n\r\n<LinearLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    android:orientation=\"vertical\"\r\n    android:layout_width=\"fill_parent\"\r\n    android:layout_height=\"fill_parent\"\r\n    >\r\n    \r\n    <EditText android:id=\"@+id\/search_edit_text\" \r\n        android:text=\"@string\/search\"\r\n        android:layout_width=\"fill_parent\" \r\n        android:layout_height=\"wrap_content\" \r\n    \/>\r\n    \r\n    <RadioGroup\r\n        android:id=\"@+id\/search_radio_group\"\r\n          android:layout_width=\"fill_parent\"\r\n          android:layout_height=\"wrap_content\"\r\n          android:orientation=\"vertical\">\r\n        <RadioButton \r\n            android:id=\"@+id\/movie_search_radio_button\"\r\n            android:checked=\"true\"\r\n            android:layout_width=\"wrap_content\" \r\n            android:layout_height=\"wrap_content\"\r\n            android:text=\"@string\/movies\" \/>\r\n        <RadioButton \r\n            android:id=\"@+id\/people_search_radio_button\"\r\n            android:checked=\"false\"\r\n            android:layout_width=\"wrap_content\" \r\n            android:layout_height=\"wrap_content\"\r\n            android:text=\"@string\/people\" \/>\r\n    <\/RadioGroup>\r\n    \r\n    <TextView \r\n        android:id=\"@+id\/search_type_text_view\"\r\n        android:layout_width=\"wrap_content\"\r\n        android:layout_height=\"wrap_content\"\r\n        android:textColor=\"#ffffff\" \r\n    \/>\r\n    \r\n    <Button \r\n        android:id=\"@+id\/search_button\" \r\n        android:text=\"@string\/search\"\r\n        android:layout_width=\"wrap_content\" \r\n        android:layout_height=\"wrap_content\" \r\n    \/>\r\n    \r\n<\/LinearLayout>\r\n<\/pre>\n
Note that the text elements are not hard-coded, but instead are taking their values from an external resource and more specifically from a file named \u201cstrings.xml\u201d which resides in the \u201cres\/values\u201d folder. This is a good practice for achieving internationalization for your application. The file is the following:<\/p>\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n\r\n<resources>\r\n\r\n    <string name=\"hello\">Hello World, MovieSearchAppActivity!<\/string>\r\n    <string name=\"app_name\">MovieSearchApp<\/string>\r\n    \r\n    <string name=\"search\">Search<\/string>\r\n    <string name=\"movies\">Movies<\/string>\r\n    <string name=\"people\">People<\/string>\r\n    \r\n<\/resources>\r\n\r\n<\/pre>\n
This is how the interface looks like in the Android emulator:<\/p>\n
\"\"<\/a><\/p>\n
The next step is to wire those UI elements in our code and manipulate them accordingly in order to achieve our search functionality. The wiring is possible via the findViewById<\/a> method, where the integer argument is the unique ID that the element was given in the XML declaration file.
 
<\/div> <\/div><\/p>\n
A very important aspect of the Android UI widgets is that they provide \u201chooks\u201d that allow the developer to get notified when the user performs an action, such as when he clicks a button or traverses along the widgets. For handling clicking events, we implement the OnClickListener<\/a> interface, which defines a callback to be invoked when a view is clicked. The interface contains only one method named onClick<\/a>, which gets called when the view has been clicked.<\/p>\n
Another useful interface is the OnFocusChangeListener<\/a>, which defines a callback to be invoked when the focus state of a view changed. Its only method is onFocusChange<\/a>, which is called when the focus state of a view has changed.<\/p>\n
Let’s see how all these can be applied in order to create our main Activity<\/a>. The code for our main class is the following:<\/p>\n
package com.javacodegeeks.android.apps.moviesearchapp;\r\n\r\nimport android.app.Activity;\r\nimport android.os.Bundle;\r\nimport android.view.View;\r\nimport android.view.View.OnClickListener;\r\nimport android.view.View.OnFocusChangeListener;\r\nimport android.widget.Button;\r\nimport android.widget.EditText;\r\nimport android.widget.RadioButton;\r\nimport android.widget.RadioGroup;\r\nimport android.widget.TextView;\r\nimport android.widget.Toast;\r\n\r\npublic class MovieSearchAppActivity extends Activity {\r\n    \r\n    private static final String EMPTY_STRING = \"\";\r\n    \r\n    private EditText searchEditText;\r\n    private RadioButton moviesSearchRadioButton;\r\n    private RadioButton peopleSearchRadioButton;\r\n    private RadioGroup searchRadioGroup;\r\n    private TextView searchTypeTextView;\r\n    private Button searchButton;\r\n    \r\n    @Override\r\n    public void onCreate(Bundle savedInstanceState) {\r\n        \r\n        super.onCreate(savedInstanceState);\r\n        setContentView(R.layout.main);\r\n        \r\n        this.findAllViewsById();\r\n        \r\n        moviesSearchRadioButton.setOnClickListener(radioButtonListener);\r\n        peopleSearchRadioButton.setOnClickListener(radioButtonListener);\r\n        \r\n        searchButton.setOnClickListener(new OnClickListener() {            \r\n            @Override\r\n            public void onClick(View v) {\r\n                String query = searchEditText.getText().toString();\r\n                if (moviesSearchRadioButton.isChecked()) {\r\n                    longToast(moviesSearchRadioButton.getText() + \" \" + query);\r\n                }\r\n                else if (peopleSearchRadioButton.isChecked()) {\r\n                    longToast(peopleSearchRadioButton.getText() + \" \" + query);\r\n                }\r\n            }\r\n        });\r\n        \r\n        searchEditText.setOnFocusChangeListener(new DftTextOnFocusListener(getString(R.string.search)));\r\n        \r\n        int id = searchRadioGroup.getCheckedRadioButtonId();\r\n        RadioButton radioButton = (RadioButton) findViewById(id);\r\n        searchTypeTextView.setText(radioButton.getText());\r\n        \r\n    }\r\n    \r\n    private void findAllViewsById() {\r\n        searchEditText = (EditText) findViewById(R.id.search_edit_text);\r\n        moviesSearchRadioButton = (RadioButton) findViewById(R.id.movie_search_radio_button);\r\n        peopleSearchRadioButton = (RadioButton) findViewById(R.id.people_search_radio_button);\r\n        searchRadioGroup = (RadioGroup) findViewById(R.id.search_radio_group);\r\n        searchTypeTextView = (TextView) findViewById(R.id.search_type_text_view);\r\n        searchButton = (Button) findViewById(R.id.search_button);\r\n    }\r\n    \r\n    public void longToast(CharSequence message) {\r\n        Toast.makeText(this, message, Toast.LENGTH_LONG).show();\r\n    }\r\n    \r\n    private OnClickListener radioButtonListener = new OnClickListener() {\r\n        public void onClick(View v) {\r\n            RadioButton radioButton = (RadioButton) v;\r\n            searchTypeTextView.setText(radioButton.getText());\r\n        }\r\n    };\r\n\r\n    private class DftTextOnFocusListener implements OnFocusChangeListener {\r\n        \r\n        private String defaultText;\r\n\r\n        public DftTextOnFocusListener(String defaultText) {\r\n            this.defaultText = defaultText;\r\n        }\r\n\r\n        public void onFocusChange(View v, boolean hasFocus) {\r\n            if (v instanceof EditText) {\r\n                EditText focusedEditText = (EditText) v;\r\n                \/\/ handle obtaining focus\r\n                if (hasFocus) {\r\n                    if (focusedEditText.getText().toString().equals(defaultText)) {\r\n                        focusedEditText.setText(EMPTY_STRING);\r\n                    }\r\n                }\r\n                \/\/ handle losing focus\r\n                else {\r\n                    if (focusedEditText.getText().toString().equals(EMPTY_STRING)) {\r\n                        focusedEditText.setText(defaultText);\r\n                    }\r\n                }\r\n            }\r\n        }\r\n        \r\n    }\r\n    \r\n}\r\n<\/pre>\n
We start by setting the View<\/a> for our activity using the setContentView<\/a> method. The view used is the one defined by the \u201cmain.xml\u201d file. Then, we take reference of all the UI elements so that they can be manipulated via code. We create two OnClickListener<\/a>s, one for handling the clicks on the radio buttons and one for performing the search when the button is clicked. The listeners are attached to the UI elements by using the setOnClickListener<\/a> method.<\/p>\n
Regarding the radio-buttons, these are defined in terms of  a RadioGroup<\/a> component. The Android UI framework takes care of allowing only one RadioButton<\/a> to be selected at any given time. Moreover, at runtime, we can find which radio button is selected by using the method getCheckedRadioButtonId<\/a>. Note that this method return the globally unique ID of the radio button and can be used as the argument of the findViewById<\/a> method to take reference of the button.<\/p>\n
Finally, we create one OnFocusChangeListener<\/a> and attach it to the EditText<\/a> widget using the setOnFocusChangeListener<\/a> method. With our implementation, we are able to achieve the functionality that is shown in the next image.<\/p>\n
\"\"<\/a><\/p>\n
When the text box  has the focus and is empty, you are ready to type your search query. The query remains there whether the text box has the focus or not. However, when the text box is empty and loses focus, a predefined message appears.<\/p>\n
We are now ready to give our application a first try. This will be done using the emulator provided by the Android SDK. Launch the AVD (Android Virtual Device) Manager from inside Eclipse and create a new device. Give it a distinct name, for example \u201cAndroid1.5-SD\u201d and choose the target platform, in our case Android 1.5. I have also chose the support for SD card, just in case it is needed. This is how the setup should look like:<\/p>\n
\"\"<\/a><\/p>\n
Next, create a new \u201cRun Configuration\u201d in Eclipse, choose our Android Project and the \u201cMovieSearchAppActivity\u201d to launch. This is what you should see:<\/p>\n
<\/a><\/div>\n
In the \u201cTarget\u201d tab,choose the newly create AVD and hit \u201cApply\u201d and \u201cRun\u201d.<\/p>\n
\"\"<\/a><\/p>\n
The Android Emulator will start up and after a little time our application will appear (hit the \u201cMENU\u201d button if the application does not appear automatically).<\/p>\n
\"\"<\/a>Play around with the app. At this time, it does not perform any advanced actions, rather it only gives a Toast when the button is clicked.<\/p>\n
That would be the first part of the \u201cAndroid Full Application Tutorial\u201d series. You can find the whole Eclipse project so far here<\/a>.<\/p>\n
Related Articles :<\/i><\/strong><\/div>\n