Mobile Android Development Chp.

1 Ali Karim Sir

Chapter 4.
Designing User Interface with View
Syllabus:
4.1 Text View, Edit Text; Button, Image Button; Toggle Button; Radio Button and Radio Group;
Checkbox; Progress Bar
4.2 List View; Grid View; Image View; Scroll View; Custom Toast Alert
4.3 Time and Date Picker.
…..
4a. Develop rich user Interfaces for the given Android application.
4b. Develop Android application using the given view.
4e. Explain the significance of the given display Alert.
4d. Develop the given application using time and date picker.

Q. Descirbe TextView.
Ans:
A standard read-only text label that supports string formatting, multiline display, and automatic
word wrapping. A Text View is a entire text editor, however the basic class is configured to not allow
editing.
 Inherits all of TextView attributes.
 Inherits all TextView methods (setText.getText)
Properties of TextView
1. Alpha: alpha property of the view, as a value between O (entirely transparent) and 1
(completely opaque). [flag]
2. Auto link: Controls whether links such as urls and email addresses are automatically found
and converted to clickable links. [flag]
3. Background: A drawable to use as the background. [reference, color]
4. Buffer type: Determines the minimum type that getText() will return. [enum]
5. Clickable: Defines whether this view reacts to click events. [boolean]
6. Cursor visible: Makes the cursor visible (the default) or invisible. [boolean]
7. Digits: If set, specifics that this TextView has a numeric input method and that these specific
characters are the ones that it will allow to accept. [string]
Mobile Android Development Chp. 1 Ali Karim Sir

8. Id: Supply an identifier name of this view, to later retrieve it with View.findViewByld() or
Activity.findViewByld(). [reference ]
9. Input type: The type of data being placed in a text field, used to help an input method decide
how to let the user enter text. [flag]
10. Max height: Makes the Text View be at most this many pixels tall. [dimension]
11. Min height: Makes the TexiView be at least this many pixels tall. [dimension]
12. On click: Name of the method in this View’s context to invoke when the view is clicked.
[string]
13. Text : Text to display. [string]

Q. Describe Button.
Ans:
Properties of Button
1. Auto link: Controls whether links such as urls and email addresses are automatically found
and convened to clickable links. [flag]
2. Background: To use as the background. [reference. color]
3. Clickable: Defines whether this view reacts to click events. [boolean]
4. Cursor visible: Makes the cursor visible (the default) or invisible. [boolean]
5. id: Supply an identifier name to this view, to later retrieve it with View. find ViewByld() or
Activity.findViewByld(). [reference]
6. Input type: The type of data being placed in a text field, used to help oui an input method to
decide how to let the user enter text. [flag]
7. Max height: Makes the TextView be at most this many pixels tall. [dimension]
8. Min height: Makes the TextView be at least this many pixels tall. [dimension]
9. On click: Name of the method in this View’s context to invoke when the view is clicked.
[string]
10. Text: Text to display. [string]

Button
Properties of Button
1. Auto link: Controls whether links such as urls and email addresses arc automatically found
and convened to clickable links. [flag]
2. Background: To use as the background. [reference. color]
3. Clickable: Defines whether this view reacts to click events. [boolean]
4. Cursor visible: Makes the cursor visible (the default) or invisible. [boolean]
5. hi: Supply an identifier name to this view, to later retrieve it with View.flndViewByld() or
Activity.findViewByld(). [reference]
6. InpLIt type: The type of data being placed in a text 11cM, used to help Out an input method to
decide how lo let the user enter text. [flag]
7. Max height: Makes the TextView be at most this many pixels tall. [dimension]
8. Min height: Makes the TextView be at least this many pixels tall. [dimension]
9. On click: Name of the method in this View’s context to invoke when the view is clicked.
[string]
10. Text: Text to display. [string]

Example of Text View and Button

We have to create linear layout which contains one button and a text view. In button tag we set the
button_id as @ id/button. This id is used to uniquely identify the view. When we click on button, the
text view text will change to ‘You have clicked the button’.
Mobile Android Development Chp. 1 Ali Karim Sir

main. xml
<?xml version—”l .0” encoding—”utf—B”»
<LinearLayout.xmlns : android=”http: //schemas .android. com/apk/res/android”
android: layout width=»fill parent»
android: layout height=»fill parent»
android: orientation=»vertical» >
<Button
android: io=»@+id/button»
android: layout_width=»wrap_content»
android: layout height»wrap content»
android: text=»Click» />
<Text View
android: id=»@+id/textview»
android: layout_width»fill parent»
android: layout_height=»wrap_content»
android:text=»Click on the Button» />
</LinearLayout>

DemoActivity.java
package com.pkg.button;
import android. app. Activity;
import android.os .Bundle;
import anoroio.view.View;
import anõroid.widget.Button;
import android. widget . TextView;

public class EX1Activity extends Activity {

/** Called when the activity is first created. */

public void onCreate (Bundle savedlnstanceState)

super. onCreate (savedlnstancestate);
setContentView (R. layout. main);
//Creating Button variable
Button button = (Button) findViewByld(R.id.button);
//Adding Listener to button
button.setonClickListener (new View. OnClickListener() {
public void onclick(View y) {
// TODO Auto-generated method stub
//Creating TextView Variable
TextView text = (TextView) findViewByld(R.id.textview);
//Sets the new text to TextView (runtime click event)
text.setText(«You have click the button”);
}
});
}}
Mobile Android Development Chp. 1 Ali Karim Sir

Q. Describe ImageButton
Ans:
A push button for which you can specify a customized background image (Drawable).

Properties of ImageButton
1. Adjust view bounds: Set this to true if you want the ImageView to adjust its bounds to
preserve the aspect ratio of its drawable. [boolean]
2. Background: To use as the background. [reference, color]
3. Baseline: The oftct of the baseline within this view, [dimension]
4. Clickable: Defines whether this view reacts to click events. [boolean]
5. Id: Supply an identifier name to this view, to later retrieve it with View.flndViewByld() or
Activity.findViewByld(). [reference]
6. Max height: An optional argument to supply a maximum height for this view. [dimension]
7. Min height: Defines the minimum height of the view.
8. On click: Name of the method in this View’s context to invoke when the view is clicked.
[string]
9. Scale type: Controls how the image should be resized or moved to match the size of this
Image View. [enum]
10. Src: Sets a drawable as the content of this ImageView. [reference, color]
11. Text: Text to display. [string]

Example 1:
Mobile Android Development Chp. 1 Ali Karim Sir
Mobile Android Development Chp. 1 Ali Karim Sir

Q. Describe EditText:
Ans: An editable text entry box that accepts multiline entry. word-wrapping, and hint text.

Properties of EditText
1. Alpha: alpha property of thc view, as a value between O (completely transparent) and 1
(completely opaque)[float]
2. Background: A drawable to use as the background. [reference, color]
3. Clickable: Defines whether this view reacts to click events. [boolean]
4. Cursor visible: Makes the cursor visible (the default) or invisible. [boolean]
5. Id: Supply an identifier name to this view, to later retrieve it with Vicw.flndViewByld() or
Activily.flndViewByld(j. [reference]
6. Max height: Makes the TextView be at most this many pixels tall. [dimension]
7. Min height: Defines the minimum height of the view.
8. On click: Name of the method in this Views context to invoke when the view is clicked.
[string]
9. Text: Text to display. [string]
10. Auto text: If set., specifics that this TextVicw has a textual input method and
automatically corrects some common spelling errors. [boolean]

Q. Describe CheckBox -
Ans:
A two-state button represented by a checked or unchecked box.
1. Like a Swing JCheckBox
2. Example taken from visual Guide to Android GUI widgets.
3. Inherits all of TexiView attributes and Button attributes.

Properties of CheckBox
1. Alpha: alpha property of the view, as a value between O (entirely transparent) and 1
(completely opaque). [float]
2. Background: A drawable to use as the background. [reference, color]
3. Buffer type: Determines the minimum type that getText() will return. [enum]
4. Button: Drawable used for the button graphic. [reference]
5. Checked: Indicates the initial checked state of this button. [boolean]
Mobile Android Development Chp. 1 Ali Karim Sir

6. Clickable: Defines whether this view reacts to click events. [boolean]

7. Cursor Visible: Makes the cursor visible (the default) or invisible. [boolean]
8. Digits: If set, specifies that this Text View has a numeric input method and that these
specific characters are the ones that it will accept. [string]
9. Id: Supply an identifier name of this view, to later retrieve it with View.fìndViewByld() or
Activitv.findViewByld(). [reference]
10. Max height: Makes the TextView be at most this many pixels tall. [dimension]
11. Min height: Defines the minimum height of the view.
12. On click: Name of the method in this View’s context to invoke when the view is clicked.
[string]
13. Text: Text to display. [string].
Mobile Android Development Chp. 1 Ali Karim Sir
Mobile Android Development Chp. 1 Ali Karim Sir
Mobile Android Development Chp. 1 Ali Karim Sir
Mobile Android Development Chp. 1 Ali Karim Sir
Mobile Android Development Chp. 1 Ali Karim Sir
Mobile Android Development Chp. 1 Ali Karim Sir
Mobile Android Development Chp. 1 Ali Karim Sir

Q. Describe Toggle Button.

Ans:
Mobile Android Development Chp. 1 Ali Karim Sir
Mobile Android Development Chp. 1 Ali Karim Sir
Mobile Android Development Chp. 1 Ali Karim Sir

Q. Describe RadioButton and RadioGroup

Ans:
Mobile Android Development Chp. 1 Ali Karim Sir
Mobile Android Development Chp. 1 Ali Karim Sir
Mobile Android Development Chp. 1 Ali Karim Sir
Mobile Android Development Chp. 1 Ali Karim Sir

Q. Describe ProgressBar.
Mobile Android Development Chp. 1 Ali Karim Sir
Mobile Android Development Chp. 1 Ali Karim Sir
Mobile Android Development Chp. 1 Ali Karim Sir

Q. Describe Autocomplete View.

Ans:
Mobile Android Development Chp. 1 Ali Karim Sir
Mobile Android Development Chp. 1 Ali Karim Sir

Q. Describe Spinner.
Ans:
Mobile Android Development Chp. 1 Ali Karim Sir
Mobile Android Development Chp. 1 Ali Karim Sir
Mobile Android Development Chp. 1 Ali Karim Sir

Q. Describe ListView.
Ans:
Mobile Android Development Chp. 1 Ali Karim Sir
Mobile Android Development Chp. 1 Ali Karim Sir

Q. Describe Custom Toast Alert.

Ans: A Toast is view containing quick little message for the user.
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="20dp"
tools:context=".MainActivity">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World, Toast Example"/>
Mobile Android Development Chp. 1 Ali Karim Sir

<Button
android:id="@+id/show"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Show Toast"/>

</LinearLayout>

my_toast.xml
<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="vertical"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="@android:color/background_dark"

android:padding="16dp"

android:id="@+id/toast_root_view" >

<TextView

android:id="@+id/toast_header"

android:textSize="20dp"

android:textColor="@android:color/primary_text_dark"

android:layout_width="match_parent"

android:layout_height="match_parent" />

<TextView

android:id="@+id/toast_body"

android:textColor="@android:color/primary_text_dark"

android:layout_width="match_parent"
Mobile Android Development Chp. 1 Ali Karim Sir

android:layout_height="match_parent" />

</LinearLayout>

MainActivity.java
package com.example.toast_ex;

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.TextView;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity {

Button b1;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

b1=(Button) findViewById(R.id.show);
b1.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
LayoutInflater inflater = getLayoutInflater();

View toastLayout = inflater.inflate(R.layout.my_toast,

(ViewGroup) findViewById(R.id.toast_root_view));

TextView header = (TextView) toastLayout.findViewById(R.id.toast_header);

header.setText("Message for you:");

TextView body = (TextView) toastLayout.findViewById(R.id.toast_body);

body.setText("You have got mail!");

Mobile Android Development Chp. 1 Ali Karim Sir

Toast toast = new Toast(getApplicationContext());

toast.setGravity(Gravity.CENTER, 0, 0);
toast.setDuration(Toast.LENGTH_LONG);
toast.setView(toastLayout);
toast.show();
}
});
}
}
Output (On Android Emulator):

Q. Describe Time and Date Picker.

Ans:
Time Picker: A view for selecting the time of day, in either 24 hour or AMJPM mode. Date
Picker:
This class is a widget for selecting a date. The date should be able to be selected by a year,
month,
and day spinners or a Calendar View.

Properties of Time Picker and Date Picker

1. Add states from children: Sets whether this ViewGroup’s drawable states also include its
children’s drawable states. [boolean]
2. Always drawn with cache: Defines whether the ViewGroup should always draw its
children
using their drawing cache or not. [boolean]
3. Animate layout changes: Defines whether changes in layout (caused by adding and
removing
items ) should cause a LayoutTransition to run. [boolean]
Mobile Android Development Chp. 1 Ali Karim Sir

4. Animation cache: Defines whether layout animations should create a drawing cache for
their
children [boolean]
5. Clip children: Defines whether a child is limited to draw inside of its bounds or not.
[boolean]
6. Id: Supplies an identifier name of this view, to later retrieve it with View.flndViewByld()
or
Activity.findViewByld(). [reference]

activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

<EditText
android:id="@+id/editText1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="50dp"
android:layout_marginTop="150dp"
android:ems="9" />

<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="150dp"
android:layout_toRightOf="@+id/editText1"
android:text="Select Date" />

<EditText
android:id="@+id/editText2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="50dp"
android:layout_below="@+id/editText1"
android:ems="9" />

<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/button1"
android:layout_toRightOf="@+id/editText2"
android:text="Select Time" />
Mobile Android Development Chp. 1 Ali Karim Sir

<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/button2"
android:layout_marginLeft="100dp"
android:layout_marginTop="50dp"
android:textStyle="bold"
android:textSize="18dp"/>

<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/textView1"
android:layout_marginLeft="100dp"
android:layout_marginTop="20dp"
android:textStyle="bold"
android:textSize="18dp"/>

</RelativeLayout>

MainActivity.java
package com.example.time_picker;

import androidx.appcompat.app.AppCompatActivity;

import android.app.DatePickerDialog;
import android.app.TimePickerDialog;
import android.os.Build;
import android.os.Bundle;
import android.text.InputType;
import android.view.View;
import android.widget.Button;
import android.widget.DatePicker;
import android.widget.EditText;
import android.widget.TextView;
import android.widget.TimePicker;

import java.util.Calendar;

public class MainActivity extends AppCompatActivity {

DatePickerDialog datepicker;
TimePickerDialog timepicker;
EditText e1,e2;
Button b1,b2;
TextView tvw1,tvw2;
Mobile Android Development Chp. 1 Ali Karim Sir

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

//Select Date
tvw1=(TextView)findViewById(R.id.textView1);
e1=(EditText) findViewById(R.id.editText1);
e1.setInputType(InputType.TYPE_NULL);
e1.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
final Calendar cldr = Calendar.getInstance();
int day = cldr.get(Calendar.DAY_OF_MONTH);
int month = cldr.get(Calendar.MONTH);
int year = cldr.get(Calendar.YEAR);
// date picker dialog
datepicker = new DatePickerDialog(MainActivity.this,
new DatePickerDialog.OnDateSetListener() {
@Override
public void onDateSet(DatePicker view, int year, int monthOfYear, int
dayOfMonth) {
e1.setText(dayOfMonth + "/" + (monthOfYear + 1) + "/" + year);
}
}, year, month, day);
datepicker.show();
}
});
b1=(Button)findViewById(R.id.button1);
b1.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
tvw1.setText("Selected Date: "+ e1.getText());
}
});

//Select Time
tvw2=(TextView)findViewById(R.id.textView2);
e2=(EditText) findViewById(R.id.editText2);
e2.setInputType(InputType.TYPE_NULL);
e2.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
final Calendar cldr = Calendar.getInstance();
int hour = cldr.get(Calendar.HOUR_OF_DAY);
int minutes = cldr.get(Calendar.MINUTE);
// time picker dialog
timepicker = new TimePickerDialog(MainActivity.this,
new TimePickerDialog.OnTimeSetListener() {
@Override
Mobile Android Development Chp. 1 Ali Karim Sir

public void onTimeSet(TimePicker tp, int sHour, int sMinute) {

e2.setText(sHour + ":" + sMinute);
}
}, hour, minutes, true);
timepicker.show();
}
});
b2=(Button)findViewById(R.id.button2);
b2.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
tvw2.setText("Selected Time: "+ e2.getText());
}
});
}
}

Output (On Android Emulator):

Mobile Android Development Chp. 1 Ali Karim Sir