0% found this document useful (0 votes)
55 views47 pages

Chapter 4

The document discusses various user interface elements in Android such as TextView, EditText, AutoCompleteTextView, Button, ImageButton, ToggleButton, RadioButton, CheckBox, ProgressBar, ListView, GridView, ImageView and ScrollView. It provides details on how to define and use these elements in XML layouts and Java code, and their properties and functions.
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
55 views47 pages

Chapter 4

The document discusses various user interface elements in Android such as TextView, EditText, AutoCompleteTextView, Button, ImageButton, ToggleButton, RadioButton, CheckBox, ProgressBar, ListView, GridView, ImageView and ScrollView. It provides details on how to define and use these elements in XML layouts and Java code, and their properties and functions.
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 47

Chapter 4

TextView
 A user interface element that displays text to the user.
 The following code sample shows a typical use, with an XML layout and code
to modify the contents of the text view:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/text_view_id"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="@string/hello" />
</LinearLayout>
 This code sample demonstrates how to modify the contents of the text view defined in the
previous XML layout:

public class MainActivity extends Activity {

protected void onCreate(Bundle savedInstanceState) {


super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
final TextView helloTextView = (TextView) findViewById(R.id.text_view_id);
helloTextView.setText(R.string.user_greeting);
}
}
EditText
 A user interface element for entering and modifying text. When you define an
edit text widget, you must specify the R.styleable.TextView_inputType
attribute. For example, for plain text input set inputType to "text":

<EditText
android:id="@+id/plain_text_input"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:inputType="text"/>

 Choosing the input type configures the keyboard type that is shown,
acceptable characters, and appearance of the edit text.
EditText
 EditText is a user interface control which is used to allow the user to enter or
modify the text.
AutoCompleteTextView
 is an editable text view which is used to show the list of suggestions based on
the user typing text. The list of suggestions will be shown as a dropdown
menu from which the user can choose an item to replace the content of
textbox.

 The AutoCompleteTextView is a subclass of EditText class.

 The Threshold property of AutoCompleteTextView is used to define the


minimum number of characters the user must type to see the list of
suggestions.

 In android, we can set the text of AutoCompleteTextView control by


using setAdapter() method in Activity file.
Following is example of binding data AutoCompleteTextView in activity file using
setAdapter() method.

public class MainActivity extends AppCompatActivity {


String[] language ={"C","C++","Java",".NET","iPhone","Android","ASP.NET","PHP"};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//Creating the instance of ArrayAdapter containing list of language names
ArrayAdapter<String> adapter = new ArrayAdapter<String>
(this,android.R.layout.select_dialog_item,language);
//Getting the instance of AutoCompleteTextView
AutoCompleteTextView actv = (AutoCompleteTextView)findViewById(R.id.autoCompleteTextView);
actv.setThreshold(1);//will start working from first character
actv.setAdapter(adapter);//setting the adapter data into the AutoCompleteTextView
actv.setTextColor(Color.RED);
}
}
Button
 is a user interface control which is used to perform an action whenever the
user click or tap on it.
 To specify an action when the button is pressed, set a click listener on the
button object in the corresponding activity code:

final Button button = findViewById(R.id.button_id);


button.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
// Code here executes on main thread after user presses button
}
Image Button

 is a user interface control which is used to display a button with image and
to perform an action when user click or tap on it.

 By default, the ImageButton looks same as normal button and it perform an


action when user click or touches it, but only difference is we will add a
custom image to the button instead of text.

 In android, we can add a image to the button by


using <ImageButton> attribute android:src in XML layout file or by
using setImageResource() method.
Toggle Button

 Toggle Button is a user interface control which is used to


display ON (Checked) or OFF (Unchecked) states as a button with a light
indicator.

 By default, the android ToggleButton will be in OFF (Unchecked) state. We


can change the default state of ToggleButton by using android:checked
attribute.
Radio Button And Radio Group

 is a two states button that can be either checked or unchecked and it’s a
same as CheckBox control, except that it will allow only one option to select
from the group of options.

 Radio Group is used to group one or more radio buttons into separate groups
based on our requirements.

 Generally, we use radio buttons with in a RadioGroup to combine multiple


Radio Buttons into one group and it will make sure that user can select only
one option from the group of multiple options.
CheckBox
 Generally, we can use multiple CheckBox controls in android application to
allow users to select one or more options from the set of values.
ProgressBar
 ProgressBar is a user interface control which is used to indicate the progress
of an operation. For example, downloading a file, uploading a file.
 By default the ProgressBar will be displayed as a spinning wheel, in case if we
want to show it like horizontal bar then we need to change the style property
to horizontal
 In android, the ProgressBar supports two types of modes to show the progress,
those are Determinate and Indeterminate.
 Determinate progress mode in progress bar when we want to show the
quantity of progress has occurred.
 Indeterminate progress mode in progress bar when we don’t know how long
an operation will take or how much work has done.
 By using progressBar.setIndeterminate(true) in activity file programmatically
or using android:indeterminate = “true” attribute in XML layout file, we can
enable Indeterminate progress mode.
 In android there is a class called ProgressDialog that allows you to create
progress bar. In order to do this, you need to instantiate an object of this
class. Its syntax is.
 ProgressDialog progress = new ProgressDialog(this);
 Important methods of ProgressDialog are given below.

setMessage()
setTitle()
setProgressStyle(ProgressDialog.STYLE_HORIZONTAL) :
setProgressStyle(ProgressDialog.STYLE_SPINNER)
setMax()
getProgress() :
getMax()
show(Context context, CharSequence title, CharSequence message)\
incrementProgressBy(int diff)
ListView

 ListView is a ViewGroup which is used to display the list of scrollable of items


in multiple rows and the list items are automatically inserted to the list using
an adapter.
 Generally, the adapter pulls data from a sources such as an array or database
and converts each item into a result view and that’s placed into the list.
 Adapter will act as an intermediate between the data sources and adapter
views such as ListView, Gridview to fill the data into adapter views.
 In android commonly used adapters are:
 Array Adapter
 Base Adapter
1.Array Adapter:
 Whenever you have a list of single items which is backed by an array, you can use
ArrayAdapter.
 Below is Array Adapter code:
ArrayAdapter adapter = new ArrayAdapter<String>
(this,R.layout.activity_listview,StringArray);

2.Base Adapter:
 BaseAdapter is a common base class of a general implementation of an Adapter that
can be used in ListView.
 Whenever you need a customized list you create your own adapter and extend base
adapter in that.
 Base Adapter can be extended to create a custom Adapter for displaying a custom
list item. ArrayAdapter is also an implementation of BaseAdapter.
GridView
 GridView shows items in two-dimensional scrolling grid (rows & columns)
ImageView .
 class is used to display an image file in application.
 ImageView in android comes with different configuration options to support
different scale
 scaleType options are used for scaling the bounds of an image to the bounds
of image view. Below are the listed scaleType configuration properties
supported.
 CENTER: Places the image in center, but does not scale it.
 CENTER_CROP: Scales the image uniformly.
 CENTER_INSIDE: This will place the image inside the container and the edges of
the image will not overlap with that of the container, the image will be inside it.
 FIT_CENTER: Scale the image from the center.
 FIT_END: Scale the image from the end of the container, i.e from the right hand
side.
 FIT_START: Scale the image from the start of the container, i.e from the left hand
side.
 FIT_XY: This will fill the complete container with the image. This generally distorts
the image by stretching/sqeezing it in disproportionate ratios.
 MATRIX: Used to scale the image using the image matrix when drawing.
ScrollView
 ScrollView is a kind of layout which is useful to add a vertical or horizontal scroll
bars to the content which is larger than actual size of layouts such as
linearlayout, relativelayout, framelayout, etc.
 ScrollView can hold only one direct child. In case, if we want to add multiple
views within the scroll view, then we need to include them in another standard
layout.
 ScrollView supports only vertical scrolling. In case, if we want to
implement horizontal scrolling, then we need to
use HorizontalScrollView component.
 The android ScrollView is having property called android:fillViewport, which is
used to define whether the ScrollView should stretch it’s content to fill the
viewport or not.
 id and scrollbars are common attributes.
Toasts

 A toast provides simple feedback about an operation in a small popup.


 It only fills the amount of space required for the message and the
current activity remains visible and interactive.
 Toasts automatically disappear after a timeout.
 Toasts are not clickable.
 First, instantiate a Toast object with one of the makeText() methods.
 This method takes three parameters: the application Context, the
text message, and the duration for the toast.
 It returns a properly initialized Toast object. You can display the toast
notification with show()
 Code:

Toast toast = Toast.makeText(getApplicationContext(), "Default Toast Style",


Toast.LENGTH_SHORT).show();

 Positioning your Toast

 A standard toast notification appears near the bottom of the screen, centered
horizontally. You can change this position with the setGravity(int, int, int) method. This
accepts three parameters: a Gravity constant, an x-position offset, and a y-position
offset.
 For example:
 toast.setGravity(Gravity.TOP|Gravity.LEFT, 0, 0);
Creating Custom Toast View

 To create a custom layout, define a View layout, in XML or in your application


code, and pass the root View object to the setView(View) method.
 The following snippet contains a customized layout for a toast notification
(saved as layout/custom_toast.xml):
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:id="@+id/custom_toast_container"
 android:orientation="horizontal"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:padding="8dp"
 android:background="#DAAA"
 >
 <ImageView android:src="@drawable/droid"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_marginRight="8dp"
 />
 <TextView android:id="@+id/text"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:textColor="#FFF"
 />
 </LinearLayout>
 Notice that the ID of the LinearLayout element is "custom_toast_container". You
must use this ID and the ID of the XML layout file "custom_toast" to inflate the
layout, as shown here:

LayoutInflater inflater = getLayoutInflater();


View layout = inflater.inflate(R.layout.custom_toast,
(ViewGroup) findViewById(R.id.custom_toast_container));

TextView text = (TextView) layout.findViewById(R.id.text);


text.setText("This is a custom toast");

Toast toast = new Toast(getApplicationContext());


toast.setGravity(Gravity.CENTER_VERTICAL, 0, 0);
toast.setDuration(Toast.LENGTH_LONG);
toast.setView(layout);
toast.show();
 First, retrieve the LayoutInflater with getLayoutInflater, and then inflate the
layout from XML using inflate(int, ViewGroup).
 The first parameter is the layout resource ID and the second is the root View. You
can use this inflated layout to find more View objects in the layout, so now
capture and define the content for the ImageView and TextView elements.
 Finally, create a new Toast with Toast(Context) and set some properties of the
toast, such as the gravity and duration.
 Then call setView(View) and pass it the inflated layout. You can now display the
toast with your custom layout by calling show().
Pickers

 Android provides controls for the user to pick a time or pick a date as ready-
to-use dialogs.
 Each picker provides controls for selecting each part of the time (hour,
minute, AM/PM) or date (month, day, year).
 Date Picker allows you to select the date consisting of day, month and year in
your custom user interface. For this functionality android provides DatePicker
and DatePickerDialog components.
DatePicker
DatePickerDialog
Time Picker
TimePickerDialog
 A dialog that prompts the user for the time of day using a TimePicker.

You might also like