This document provides information about a mobile application development course including: - The course teacher and outcomes which include explaining Android features, configuring development tools, designing user interfaces using layouts and components. - Commonly used Android view classes for creating user interfaces like TextView, EditText, Button, ImageView, CheckBox, RadioButton, ListView and more. - Code examples for implementing views like ImageView, CheckBox, RadioButton, RadioGroup, ImageButton, ProgressBar and more.

1. Mobile Application Development
1
Course teacher: Mr Kiran Khandarkar,
Assistant Professor in CSE Department.

2. 2
Course Outcomes
ESC155: Mobile Application Development
ESC255: Lab-III: Mobile Application Development
 CO1: Explain Android Ecosystem and features of android operating system (II Understand)
 CO2: Configure Android environment and development tools. (III Apply)
 CO3: Use different layouts and control flow for designing User interface. (III Apply)
 CO4: Design user interface using different UI Components of Android. (III Apply)
 CO5: Demonstrate different lifecycles in Android. (III Apply)
 CO6: Illustrate process of publishing an android app on google play store. (III Apply)

3. • UNIT-IV: Text View, Edit Text, Button, Image Button, Radio Button and
Radio Group, Progress Bar, Image View
Textbooks/ Reference Books :
1. Composing Mobile Apps , by Anubhav Pradhan, Anil V Deshpande, Wiley
Publication.
2. Android App Development for Dummies , Michael Burton , Wiley
Publication.
3. Android Programming for Beginners , John Horton , Packt Publishing.
3

4. 4
• The Basic building block for user interface is a View object which is created
from the View class and occupies a rectangular area on the screen.
• View referes to Android.view class , which is the super class for all the GUI
Components like Textview, ImageView, Button etc.
Views are divided into following categories,
Basic Views: it contain Commonly used view such as Textview,EditText, Button
views
Picker Views: It has views which enable users to select from list like Datepicker,
Timepicker.
ListView : It has views like ListView and Spinner Views.

5. 5

6. 6
Most Commonly Used Android View classes:
These views can be used to create a useful input and output fields.
•Text View
•EditText
•Button
•ImageView
•ImageButton
•CheckBox
•Radio button
•RadioGroup
•ListView
•Spinner
•AutoCompleteTextView

7. 7
Image view:
Image view helps to display images in an android application.
Any image can be selected, we just have to paste our image in a
drawable folder from where we can access it.
For example: In below Code “@drawable/ic_laucher” has been
taken.

8. 8
XML coding of Image view:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:gravity="center_horizontal" >
<ImageView
android:id="@+id/myimageview"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_margin="20dp"
android:gravity="center"
android:padding="10dp"
android:src="@drawable/ic_launcher" />

9. 9
Check Box:
Checkbox is used in that applications where we have to select
one option from multiple provided. Checkbox is mainly used
when 2 or more options are present.

10. 10
XML coding of checkbox:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<CheckBox
android:id="@+id/checkBox1"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_margin="20dp"
android:text="Formget."
android:checked="true" />
<CheckBox
android:id="@+id/checkBox2"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_margin="20dp"
android:text="Mailget." />
</LinearLayout>

11. 11
Radio Button:
Radio button is like checkbox, but there is slight difference between them.
Radio button is a two-states button that can be either checked or
unchecked.

12. 12
XML coding of Radio Button:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:gravity="center_horizontal" >
<RadioButton
android:id="@+id/radioButton1"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_margin="20dp"
android:text="Formget"
android:checked="true" />
<RadioButton
android:id="@+id/radioButton1"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_margin="20dp"
android:text="Mailget" />
</LinearLayout>

13. 13

14. 14
<?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" >
<RadioGroup android:id="@+id/radioSex"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<RadioButton android:id="@+id/radioMale"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/radio_male"
android:checked="true" />
<RadioButton android:id="@+id/radioFemale"
android:layout_width="wrap_content"
android:layout_height="wrap_content" android:text="@string/radio_female" />
</RadioGroup>
<Button android:id="@+id/btnDisplay"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/btn_display" />
</LinearLayout>

15. 15
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.Toast;
public class MyAndroidAppActivity extends Activity { private RadioGroup
radioSexGroup;
private RadioButton radioSexButton;
private Button btnDisplay;
@Override public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
addListenerOnButton(); }
public void addListenerOnButton() {
radioSexGroup = (RadioGroup) findViewById(R.id.radioSex);
btnDisplay = (Button) findViewById(R.id.btnDisplay);

16. 16
btnDisplay.setOnClickListener(new OnClickListener( )
{ @Override public void onClick(View v)
{ // get selected radio button from radioGroup
int selectedId = radioSexGroup.getCheckedRadioButtonId();
// find the radiobutton by returned id
radioSexButton = (RadioButton) findViewById(selectedId);
Toast.makeText(MyAndroidAppActivity.this, radioSexButton.getText(),
Toast.LENGTH_SHORT).show();
}
});
}
}

17. 17

18. 18

19. 19
Image Button View:
Image button is a button but it carries an image on it. We can put
an image or a certain text on it and when we click it provides the
operations assigned to it.

20. 20
Syntax For Image Button In XML Coding Is:
XML coding of Image button:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<ImageButton
android:id="@+id/imageButton1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="@drawable/ic_launcher" />
</LinearLayout>

21. 21
Attribute Description
android:text Used to specify the text to be
displayed in the TextView
android:textSize Using this attribute we can control
the size of the text.
android:textColor Using this attribute we can specify
the color of our text.
android:textAllCaps If set True, this will make the text
appear in upper case.
android:letterSpacing Using this attribute we can set the
spacing between
TextView is the most widely used view used to show pre-defined text on display screen.

22. 22
Code for Progress Bar

23. 23
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity">
<ProgressBar
android:id="@+id/simpleProgressBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="invisible"
android:layout_centerHorizontal="true"/>
<Button
android:id="@+id/startButton"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:text="Start"
android:textSize="20sp"
android:textStyle="bold"
android:layout_centerHorizontal="true"
android:layout_marginTop="100dp"
android:padding="10dp"
android:background="#0f0"
android:textColor="#fff"/>
</RelativeLayout>

24. 24
import android.graphics.Color;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.ProgressBar;
import android.widget.Button;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// initiate progress bar and start button
final ProgressBar simpleProgressBar = (ProgressBar) findViewById(R.id.simpleProgressBar);
Button startButton = (Button) findViewById(R.id.startButton);
// perform click event on button
startButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// visible the progress bar
simpleProgressBar.setVisibility(View.VISIBLE);
}
});
}
}

25. 25