Chapter 4

TextView
• TextView displays text to the user and optionally
allows them to edit it programmatically.
• TextView is a complete text editor, however basic
class is configured to not allow editing but we can
edit it.

• <TextView android:id="@+id/simpleTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="AbhiAndroid" />
 Attributes
• id: id is an attribute used to uniquely identify
a textview.
• <TextView android:id="@+id/simpleTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>

• gravity:
• The gravity attribute is an optional attribute which
is used to control the alignment of the text like
left, right, center, top, bottom, center_vertical,
center_horizontal etc.
• <TextView android:id="@+id/simpleTextView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="AbhiAndroid"
android:textSize="20sp"
android:gravity="center_horizontal"/>
• text: text attribute is used to set the text in a text
view.
• <TextView android:id="@+id/simpleTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:textSize="25sp"
android:text="AbhiAndroid"/>
• textColor: textColor attribute is used to set the
text color of a text view. Color value is in the form
of “#argb”, “#rgb”, “#rrggbb”, or “#aarrggbb”.

• <TextView android:id="@+id/simpleTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="AbhiAndroid"
android:layout_centerInParent="true"
android:textSize="25sp"
android:textColor="#f00"/>
• textSize: textSize attribute is used to set the size of
text of a text view. We can set the text size in
sp(scale independent pixel) or dp(density pixel).

• <TextView android:id="@+id/simpleTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="AbhiAndroid"
android:layout_centerInParent="true"
android:textSize="40sp" />
• textStyle: textStyle attribute is used to set the
text style of a text view. The possible text styles
are bold, italic and normal. If we need to use two
or more styles for a text view then “|” operator is
used for that.

• <TextView android:id="@+id/simpleTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="AbhiAndroid"
android:layout_centerInParent="true"
android:textSize="40sp"
android:textStyle="bold|italic"/>
• background: background attribute is used to set
the background of a text view. We can set a color
or a drawable in the background of a text view.

• padding: padding attribute is used to set the

padding from left, right, top or bottom.
• <TextView
• android:id="@+id/simpleTextView"
• android:layout_width="wrap_content"
• android:layout_height="wrap_content"
• android:text="AbhiAndroid"
• android:layout_centerInParent="true"
• android:textSize="40sp"
• android:padding="10dp"
• android:textColor="#fff"
• android:background="#000"/>
 Button
• In Android, Button represents a push button. A Push
buttons can be clicked, or pressed by the user to
perform an action.
• There are different types of buttons
CompoundButton, ToggleButton, RadioButton.

• Button is a subclass of TextView class

• compound button is the subclass of Button class.

• On a button we can perform different actions or
events like click event, pressed event, touch event etc.
• <Button android:id="@+id/simpleButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Abhi Android"/>
 Attributes of Button in Android
• id: id is an attribute used to uniquely identify a text
Button. Below is the example code in which we set the id
of a Button.

• gravity: The gravity attribute is an optional attribute

which is used to control the alignment of the text like left,
right, center, top, bottom, center_vertical,
center_horizontal etc.

• text: text attribute is used to set the text in a Button. We

can set the text in xml as well as in the java class.
• <Button android:id="@+id/simpleButton"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Abhi Android"
android:layout_centerInParent="true"
android:gravity="right|center_vertical"/>
• textColor: textColor attribute is used to set the
text color of a Button. Color value is in the form
of “#argb”, “#rgb”, “#rrggbb”, or “#aarrggbb”.

• textSize: textSize attribute is used to set the size

of the text on Button. We can set the text size in
sp(scale independent pixel) or dp(density pixel).

• textStyle: textStyle attribute is used to set the

text style of a Button. The possible text styles are
bold, italic and normal. If we need to use two or
more styles for a Button then “|” operator is used
for that.
• background: background attribute is used to set
the background of a Button. We can set a color
or a drawable in the background of a Button.

• padding: padding attribute is used to set the

padding from left, right, top or bottom.

• drawableBottom: drawableBottom is the

drawable to be drawn to the below of the text.
• <Button android:id="@+id/simpleButton"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:background="#147D03" android:text="Download
Code" android:textSize="20sp" android:padding="15dp"
android:textStyle="bold|italic"
android:drawableBottom="@drawable/ic_launcher"/>
• drawableTop, drawableRight And
drawableLeft: Just like the drawableBottom
attribute we can draw drawable to the left, right
or top of text.
 EditText

• In Android, EditText is a standard entry widget in

android apps.
• It is an overlay over TextView that configures
itself to be editable.
• EditText is a subclass of TextView with text
editing operations.
• We often use EditText in our applications in order
to provide an input or text field, especially in
forms.
• We can create a EditText instance by declaring it
inside a layout(XML file) or by instantiating it
programmatically (i.e. in Java Class).

• <EditText android:id="@+id/simpleEditText"
android:layout_height="wrap_content"
android:layout_width="match_parent"/>
 Attributes of EditText
• id: id is an attribute used to uniquely identify a
text EditText.

• gravity: The gravity attribute is an optional

attribute which is used to control the alignment
of the text like left, right, center, top, bottom,
center_vertical, center_horizontal etc.

• text: text attribute is used to set the text in a

EditText. We can set the text in xml as well as in
the java class.
• <EditText android:id="@+id/simpleEditText"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Enter Email"
• android:gravity=“right"/>
• hint: hint is an attribute used to set the hint i.e.
what you want user to enter in this edit text.
Whenever user start to type in edit text the hint
will automatically disappear.
<EditText
android:id="@+id/simpleEditText"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:hint="Enter Your Name Here" />
• textColor: textColor attribute is used to set the text color of
a text edit text. Color value is in the form of “#argb”, “#rgb”,
“#rrggbb”, or “#aarrggbb”.

• textColorHint: textColorHint is an attribute used to set the

color of displayed hint.

• textSize: textSize attribute is used to set the size of text of a

edit text. We can set the text size in sp(scale independent
pixel) or dp(density pixel).

• textStyle: textStyle attribute is used to set the text style of a

edit text. The possible text styles are bold, italic and
normal. If we need to use two or more styles for a edit text
then “|” operator is used for that.
• background: background attribute is used to set
the background of a edit text. We can set a color
or a drawable in the background of a edit text.

• padding: padding attribute is used to set the

padding from left, right, top or bottom.

• inputType:Setting the InputType of

an EditText tells the system keyboard what kind of
input you are expecting
• <EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="text"/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType=“number"/>

<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType=“textpassword"/>
• <EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="date"/>
 ImageButton
• In Android, ImageButton is used to display a
normal button with a custom image in a button.
• In simple words we can say, ImageButton is
a button with an image that can be pressed or
clicked by the users.
• By default it looks like a normal button with the
standard button background that changes the
color during different button states.
• id: id is an attribute used to uniquely identify
a image button. Below is the example code in
which we set the id of a image button.

• src: src is an attribute used to set a source file

of image or you can say image in your image
button to make your layout look attractive.
• <ImageButton
android:id="@+id/simpleImageButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/home" />
• background: background attribute is used to set the
background of an image button. We can set a color or a
drawable in the background of a Button.
• padding: padding attribute is used to set the padding from
left, right, top or bottom of the ImageButton.
• paddingRight : set the padding from the right side of the
image button.
• paddingLeft : set the padding from the left side of the
image button.
• paddingTop : set the padding from the top side of the
image button.
• paddingBottom : set the padding from the bottom side of
the image button.
• padding : set the padding from the all side’s of the image
button.
• <ImageButton
android:id="@+id/simpleImageButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#000"
android:src="@drawable/home"
android:padding="30dp"/>
 ToggleButton
• In Android, ToggleButton is used to display
checked and unchecked state of a button.
• ToggleButton basically an off/on button with a
light indicator which indicate the current state of
toggle button.
• The most simple example of ToggleButton is
doing on/off in sound, Bluetooth, wifi, hotspot etc.
• It is a subclass of compoundButton.
• id: id is an attribute used to uniquely identify
a toggle button.
• checked: checked is an attribute of toggle
button used to set the current state of a
toggle button. The value should be true or
false where true shows the checked state and
false shows unchecked state of a toggle
button. The default value of checked attribute
is false.
• <ToggleButton
android:id="@+id/simpleToggleButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="true" />
• gravity: The gravity attribute is an optional
attribute which is used to control the alignment
of the text in ToogleButton like left, right, center,
top, bottom, center_vertical, center_horizontal
etc.

• textOn And textOff: textOn attribute is used to

set the text when toggle button is in checked/on
state.
• We can set the textOn in XML as well as in
the java class.
• <ToggleButton
android:id="@+id/simpleToggleButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="true"
android:layout_centerHorizontal="true"
android:textOff="Disable"
android:textOn="Enable"/>
• drawableBottom, drawableTop, drawableRight And
drawableLeft: These attribute draw the drawable below,
top, right and left of the text of ToggleButton.

• padding: padding attribute is used to set the padding from

left, right, top or bottom.
• paddingRight :set the padding from the right side of the
toggle button.
• paddingLeft :set the padding from the left side of the
toggle button.
• paddingTop :set the padding from the top side of the
toggle button.
• paddingBottom :set the padding from the bottom side of
the toggle button.
• Padding :set the padding from the all side’s of the toggle
button.
• background: background attribute is used to set the
background of a toggle button. We can set a color or a
drawable in the background of a toggle button.

• textStyle: textStyle attribute is used to set the text style

of the text of a Toggle button. You can set bold, italic and
normal. If you need to use two or more styles for a text
view then “|” operator is used for that.

• textSize: textSize attribute set the size of the text of a

toggle button. We can set the text size in sp(scale
independent pixel) or dp(density pixel).

• textColor: textColor attribute is used to set the text color

of a toggle button. Color value is in the form of “#argb”,
“#rgb”, “#rrggbb”, or “#aarrggbb”.
 RadioButton & RadioGroup
• In Android, RadioButton are mainly used together in
a RadioGroup.
• In RadioGroup checking the one radio button out of
several radio button added in it will automatically
unchecked all the others.

• It means at one time we can checked only one

radio button from a group of radio buttons which
belong to same radio group.
• RadioButon is a two state button that can be
checked or unchecked.
• If a radio button is unchecked then a user can
check it by simply clicking on it.
• Once a RadiaButton is checked by user it can’t be
unchecked by simply pressing on the same
button.
• It will automatically unchecked when you press
any other RadioButton within same RadioGroup.
 Attributes
• id: id is an attribute used to uniquely identify a
radio button.
• checked: checked attribute in radio button is used
to set the current state of a radio button.
• We can set it either true or false where true shows
the checked state and false shows unchecked state
of a radio button.
• As usual default value of checked attribute is false.
We can also set the current state in JAVA.
• text: text attribute is used to set the text in a
radio button. We can set the text both ways
either in XML or in JAVA class.

• You can use all attribute gravity,textcolor,textstyle

,background,padding , drawableBottom,
drawableTop, drawableLeft And drawableRight etc
<RadioButton
android:id="@+id/simpleRadioButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="true"
android:layout_centerHorizontal="true"
android:text="Radiobutton1" />
Example of RadioButton and RadioGroup
• <RadioGroup
android:layout_width="wrap_content" <RadioButton
android:layout_height="wrap_content"> android:id="@+id/aus"
<RadioButton
android:id="@+id/India" android:layout_width="wrap_content"
android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:layout_marginLeft="20dp" android:layout_marginLeft="20dp"
android:layout_marginTop="10dp" android:layout_marginTop="10dp"
android:checked="true" android:checked="false"
android:text="India" android:text="Australlia"
android:textColor="#154"
android:textColor="#154"
android:textSize="20sp"
android:textStyle="bold" /> android:textSize="20sp"
android:textStyle="bold" />
<RadioButton
android:id="@+id/US"
android:layout_width="wrap_content" </RadioGroup>
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginTop="10dp"
android:checked="false"
android:text="US"
android:textColor="#154"
android:textSize="20sp"
android:textStyle="bold" />
 CheckBox
• In Android, CheckBox is a type of two
state button either unchecked or checked in Android.
Or you can say it is a type of on/off switch that can be
toggled by the users. You should use checkbox when
presenting a group of selectable options to users that
are not mutually exclusive.
• CompoundButton is the parent class
of CheckBox class.
 Attributes
• .id: id is an attribute used to uniquely identify a
check box. Below we set the id of a image button.
• checked: checked is an attribute of check box used
to set the current state of a check box.
• The value should be true or false where true shows
the checked state and false shows unchecked state
of a check box.
• The default value of checked attribute is false.
• We can also set the current state programmatically.

• You can use all attribute gravity,textcolor,textstyle

,background,padding , drawableBottom,
drawableTop, drawableLeft And drawableRight etc
• <CheckBox android:id="@+id/simpleCheckBox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Simple CheckBox"
android:checked="true"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<CheckBox
android:id="@+id/India"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginTop="10dp"
android:checked="true"
android:text="India"
android:textColor="#154"
android:textSize="20sp"
android:textStyle="bold" />
• <CheckBox
• android:id="@+id/US"
• android:layout_width="wrap_content"
• android:layout_height="wrap_content"
• android:layout_marginLeft="20dp"
• android:layout_marginTop="10dp"
• android:checked="true"
• android:text="US"
• android:textColor="#154"
• android:textSize="20sp"
• android:textStyle="bold" />

• <CheckBox
• android:id="@+id/aus"
• android:layout_width="wrap_content"
• android:layout_height="wrap_content"
• android:layout_marginLeft="20dp"
• android:layout_marginTop="10dp"
• android:checked="false"
• android:text="Australlia"
• android:textColor="#154"
• android:textSize="20sp"
• android:textStyle="bold" /></LinearLayout>
 ProgressBar

• In Android, ProgressBar is used to display the

status of work being done like analyzing status of
work or downloading a file etc.
• In Android, by default a progress bar will be
displayed as a spinning wheel but If we want it to
be displayed as a horizontal bar then we need to
use style attribute as horizontal.
• It mainly use
the “android.widget.ProgressBar” class.
• A progress bar can also be made indeterminate.
• In this mode a progress bar shows a
cyclic animation without an indication of
progress.
• This mode is used in application when we don’t
know the amount of work to be done.
• Important Methods Used In ProgressBar:
• 1. getMax() – returns the maximum value of
progress bar
• We can get the maximum value of the progress bar
in java class.
• This method returns a integer value.
• ProgressBar simpleProgressBar=(ProgressBar)
findViewById(R.id.simpleProgressBar);
• int maxValue=simpleProgressBar.getMax();
• getProgress() – returns current progress value

We can get the current progress value from a

progress bar in java class.
• This method also returns a integer value.
• ProgressBar
simpleProgressBar=(ProgressBar)findViewById(R.id.simpleProgressBar);
• progressValue=simpleProgressBar.getProgress();
Attributes of ProgressBar In Android:

• id: id is an attribute used to uniquely identify a

Progress bar.
• max: max is an attribute used in android to
define maximum value of the progress can take.
It must be an integer value like 100, 200 etc.
• progress: progress is an attribute used in
android to define the default progress value
between 0 and max. It must be an integer
value.
• <ProgressBar
android:layout_width="match_parent"
android:layout_height="300dp"
style="@style/Widget.AppCompat.ProgressBar.Horizontal"
android:max="100"
android:progress="30" />
 Spinning progressbar
• <ProgressBar
android:layout_width="match_parent"
android:layout_height="300dp"
android:max="100" />
• indeterminate: indeterminate attribute is used
in Android to enable the indeterminate mode.
• In this mode a progress bar shows a
cyclic animation without an indication of
progress.
• This mode is used in application when we don’t
know the amount of work to be done.
• In this mode the actual working will not be
shown.
• <ProgressBar
android:layout_width="match_parent"
android:layout_height="300dp"
style="@style/Widget.AppCompat.ProgressBar.Horizontal"
android:max="100"
android:progress="30"
android:indeterminate="true"
/>
• background: background attribute is used to set the
background of a Progress bar.
• We can set a color or a drawable in the background of a
Progress bar.
• <ProgressBar
android:id="@+id/simpleProgressBar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:max="100" android:progress="50"
style="@style/Widget.AppCompat.ProgressBar.Hor
izontal"
• android:background="#000"/>
• progressDrawable: progress drawable is an attribute
used in Android to set the custom drawable for the
progress mode.
• Step 1: Add this code in activity_main.xml or main.xml
inside layout.
• <ProgressBar android:id="@+id/simpleProgressBar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:max="100" android:progress="60"
android:layout_marginTop="100dp"
style="@style/Widget.AppCompat.ProgressBar.Horizontal
"
android:progressDrawable="@drawable/custom_progress
"/>
• Step 2: Create a new drawable resource xml in drawable folder and
name it custom_progress.
• (Right click on drawable folder->new->drawable resource file)

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

• <layer-list
xmlns:android="http://schemas.android.com/apk/res/android" >
• <item>
• <shape>
• <gradient
• android:endColor="#fff“
• android:startColor="#1ff“
• android:useLevel="true" />
• </shape>
• </item>
• </layer-list>