CHAPTER 8

USING
EDITTEXT , TOAST &
IMAGEVIEW
 The EditText Class
 The Android SDK provides a number of widgets for
retrieving data from users.
 The most common of them is called EditText which is used
for accepting text input from the user.

 The EditText class is available in the package called

android .widget and is derived from TextView.
 Creating The EditText Widget
 To define an EditText control in an XML layout file we can
use the following code:

<EditText
android:id="@+id/
android:id ="@+id/edittext
edittext""
android:layout_height="
android:layout_height ="wrap_content
wrap_content""
android:layout_width="
android:layout_width ="match_parent
match_parent"" />
 Important Properties of EditText
 android:hint
This property puts some text in the edit box that goes away
when the user starts entering text .
<EditText
android:id="@+id/
android:id ="@+id/edittext
edittext""
android:hint=“type here”
android:layout_height="
android:layout_height ="wrap_content
wrap_content""
android:layout_width="
android:layout_width ="match_parent
match_parent"" />
 Important Properties of EditText
 This property should not be used with text property as it
will override hint property
 Important Properties of EditText
 android:inputType
This property controls the type of data allowed to enter in a
text field. For example , to restrict the user to input only
numbers , we can set it as:

<EditText
android:id="@+id/
android:id ="@+id/edittext
edittext""
android:inputType=“number”
android:layout_height="
android:layout_height ="wrap_content
wrap_content""
android:layout_width="
android:layout_width ="match_parent
match_parent"" />
 Important Properties of EditText
 Similarly to accept user input as password , we can set
inputType to the value textPassword:

<EditText
android:id="@+id/
android:id ="@+id/edittext
edittext""
android:inputType=“textPassword”
android:layout_height="
android:layout_height ="wrap_content
wrap_content""
android:layout_width="
android:layout_width ="match_parent
match_parent"" />
 Password Setting Through Code
 Android allows us to set the password through code and
for this we need to call the setInputType
setInputType(( ) method on
EditText object

ed.setInputType(InputType.TYPE_CLASS_TEXT|
InputType.TYPE_TEXT_VARIATION_PASSWORD);

This method receives an integer argument which is framed by

btiwise ORing members of InputType class
 Important Properties of EditText
 Similarly to accept user input as phone number , we can
set inputType to the value phone

<EditText
android:id="@+id/
android:id ="@+id/edittext
edittext""
android:inputType=“phone”
android:layout_height="
android:layout_height ="wrap_content
wrap_content""
android:layout_width="
android:layout_width ="match_parent
match_parent"" />
 Important Properties of EditText
 Other important values for inputType are:

 textAutoCorrect

 date

 textCapWords

 textCapCharacters

 textEmailAddress
 Important Properties of EditText
 To restrict the displayable number of lines we can use the
android:lines property.
 If this is not set, the entry field grows as the user enters text.
However, setting a size allows the user to scroll within a fixed
sized to edit the text
<EditText
android:id="@+id/editText"
android:layout_height="wrap_content"
android:hint="type here“
android:lines=“4”
android:layout_width="match_parent" />
 Important Properties of EditText
 In order to capitalize what user types in an EditText we
can use it’s “capitalize” property

<EditText
android:id="@+id/EditText01"
android:id ="@+id/EditText01"
android:layout_height="
android:layout_height ="wrap_content
wrap_content""
android:capitalize=“characters”
android:capitalize =“characters”
android:layout_width="
android:layout_width ="match_parent
match_parent"" />

Other possible values are none, words, sentences

 Important Properties of EditText
 To restrict the user input to specific digits only we can use
the android:digits property.
 When it is set, then android ensures only numeric input
should be allowed and only digits specified can be
inputted by the user
 <EditText
android:id="@+id/
android:id ="@+id/editText
editText""
android:layout_height="
android:layout_height ="wrap_content
wrap_content""
android:digits=“2468”
android:digits =“2468”
android:layout_width="
android:layout_width ="match_parent
match_parent"" />
 Important Point!
 Although it sounds that digits property is only for digits but
we can provide any set of characters to this property and
it will ensure that only those characters should be allowed.

 For example:
android:digits=“
android:digits =“abcd
abcd””
will only allow the letters “abcd” and nothing else
 Other Useful Methods Of EditText

 The EditText control provides us 2 very useful methods

using which we can get/set text in EditText.
 These are :

public Editable getText

getText()
()
(for obtaining contents of EditText)
public void setText
setText((CharSequence
CharSequence))
(for setting contents of EditText)
 Using Toast
 An Android Toast is a small message displayed on the
screen, similar to a tool tip or other similar popup
notification.

 A Toast is displayed on top of the main content of an

activity, and only remains visible for a short time period.

 The screenshot on next slide shows how a Toast looks like

on the screen:
Using Toast
 How To Create A Toast ?
 To create a new Toast, we call a static method on
the Toast class named makeText
makeText()().

 This method is overloaded .

 One of them directly accepts a String object.

 The second expects a string resource ID.

 The Prototype Of makeText
makeText(( ) Method

 public static Toast makeText (Context , CharSequence ,

int )
To make a standard toast that just contains a text view with
the text as a constant String.
Parameter Desc:
1.Reference to current Context
2.Message To Show
3.Duration
 What Is Context ?
 Context is base class of Activity and is abstract by nature.

 We generally call context when we need to get information

about different parts of our application like Activities,
Applications etc.

 Some operations where context is involved:

 Loading common resources
 Creating dynamic views
 Displaying Toast messages
 Launching Activities etc.
What Is Context ?
 How To Get A Context ?
 Different ways of getting context:
 getApplicationContext()

 this

 The first is a method belonging to Activity class and

second is the current object reference called this.
 Now since Activity extends from Context , we can say that
an Activity is also a Context, so we can use this wherever
we require Context
 Second And Third Argument Of makeText
makeText(( )

2. Second argument can be any message

3. Third argument are any of following 2 constants:

public static final int LENGTH_LONG : Show the view or text
notification for a long period of time.
public static final int LENGTH_SHORT :Show the view or text
notification for a short period of time.
 Sample Code
Toast t;
t=Toast.makeText
t= Toast.makeText((this,”Hello”,Toast.LENGTH_LONG
this,”Hello”,Toast.LENGTH_LONG);
);
 How To Show The Toast ?
 To show Toast Messages we need to call it’s method
show()
It’s prototype is
public void show ()
The Code:
Toast t;
t=Toast.makeText
t= Toast.makeText((this,”Hello”,Toast.LENGTH_LONG
this,”Hello”,Toast.LENGTH_LONG); );
t.show(( );
t.show
 Setting Position Of Toast
 We can change the positioning on the screen of
a Toast message using the setGravity() method.

 Here is an example:
 toast.setGravity(Gravity.CENTER, 0, 0);

 This call will center the toast on screen

 Details Of setGravity
setGravity(( ) Method
 The first parameter of the setGravity() method specifies
the overall position of the Toast. We can use following
constants for this:
 TOP
 BOTTOM
 LEFT
 RIGHT
 CENTER
 CENTER_HORIZONTAL
 CENTER_VERTICAL
 Details Of setGravity
setGravity(( ) Method

 The two other parameters of the setGravity() method are

an X and Y offset to the position defined by
the Gravity constant.

 If, for instance, we need the Toast to be displayed at the

top, centered horizontally, but 20 pixels down from the top
position, you would use this setGravity() call:

toast.setGravity(Gravity.TOP | Gravity.CENTER_HORIZONTALLY, 0, 20);

 Displaying Images In The App
 When it comes to displaying images, Android supports
three common image formats:
PNG
JPG
GIF
BMP
WebP
 The images for the Android application are stored in the
directory res/
res/drawable
drawable
 Displaying Images In The App
 To support devices of different densities, we can store the
images of low, medium, high, and extra high resolutions
in these folders.

 The images with resolutions of 480dpi,320dpi, 240dpi,,

160dpi, and 120dpi and sizes 144*144px,, 96x96px,,
72x72px,, 48x48px and 36x36px are usually stored in
the res/drawable-xxhdpi,, res/drawable-xhdpi
res/drawable-hdpi,, res/drawable-mdpi,, and
res/drawable-ldpi folders respectively
 Displaying Images In The App
 We can put images of different dpi in these folder
accordingly and android will take care which images
should be draw according to the screen density of device.

 Point to remember is that we have to put the images with

the same name.
 Adding Images To drawable Folder

 Android Studio allows us to add images as follows:

 Rightclick on drawable, new Image Asset
 On Asset type choose Action Bar and Tab Icons

 Choose the image path

 Give your image a name in Resource name

 Next->Finish

 The image will be saved in the /res/drawable folder.

 Also , we can add the image by directly pasting it in
drawable folder
 Adding Images To drawable Folder

 All image filenames should be lowercase and contain only

letters, numbers, and underscores.
 After we add images to the res/drawable folders, the R.java
file gets updated and includes a reference to the newly added
image and hence can be used in the layout file or other Java
code. The syntax for referencing the image in the layout file is
@drawable
drawable//image_filename
 In Java code, the image can be referenced using the following
syntax:
R.drawable.image_filename
 The ImageView Control
 The class used to display images is
android.widget.ImageView

 The ImageView class can load images from various

sources (such as resources or content providers), takes care
of computing its measurement from the image so that it can
be used in any layout manager
 Steps Reqd To Display The Image

1. Store the image in respective folder.

2. Add the ImageView widget to XML file
3.Set the “src” attribute of ImageView to the image to be
displayed.

It’s syntax is:

android:src=“@drawable/<img nam>”
For eg:
android:src=“@drawable/smiley”
 Displaying The Image Programmatically

To programmatically set the image we call the

setImageResource() method of ImageView whose
protoype is:

public void setImageResource (int resId)

Sample Call:

img.setImageResource (R.drawable.android);
 EXERCISE
Design an app containing several images in drawable
folder , an ImageView and a Button . The ImageView
should display a default image and on every click on
the button done by the user the image in ImageView
should change.
 End Of Lecture

For any queries mail us @: scalive4u@gmail.com

Call us @ : 0755-4271659, 7879165533

Agenda for Next Lecture:

1. Android’s choice based controls
2. CheckBox
3. RadioButton
4. ToggleButton
5. Switch