Views in Android

Introducing views

View is the basic building block of UI(User Interface)

in android.
View refers to the android.view.View class, which is the
super class for all the GUI components like TextView,
ImageView, Button etc.
View can be considered as a rectangle on the screen that
shows some type of content.
It can be an image, a piece of text, a button or anything
that an android application can display.
The rectangle here is actually invisible, but every view
occupies a rectangle shape
The size of rectangle can set it manually, by specifying
the exact size(with proper units) or by using some
predefined values. These predefined values are
match_parent and wrap_content.
match_parent means it will occupy the complete space
available on the display of the device,
wrap_content means it will occupy only that much
space as required for its content to display.
A View is also known as Widget in Android. Any
visual(that we can see on screen) and interactive(with
which user can interact with) is called a Widget.

XML syntax for creating a View

<ViewName
Attribute1=Value1
Attribute2=Value2
Attribute3=Value3
.
.
AttributeN=ValueN
/>
It always start with an angle bracket, followed by
the View name.
we write attributes that will define how that view
will look on the screen of the application along
with a value for the attribute. Each view has its
own attributes

● In the end, it is closed by />

So, every View subclass needs to follow this

format so that it can appear on the screen of the
app. And this format is nothing but default XML
style
There are two attributes that are necessary for
every View. These are:
android:layout_height and
android:layout_width.

These attributes define the size of the invisible

rectangle that a view makes. Using these
attributes we can easily control the size for every
view in our android application.
Apart from the above mentioned attributes,
attributes like gravity, layout_gravity,
padding and margin are some other commonly
used attributes
Most commonly used Android View classes
Here we have some of the most commonly used
android View classes:
TextView
EditText
Button
ImageView
ImageButton
CheckBox
RadioButton
ListView
GridView
DatePicker
Spinner, etc.
TextView in Android
TextView is the most widely used view used to
show pre-defined text on display screen.
This is a view which is not only used alone, but is
also used along with other Views as well, like when
you are creating a form, where you have
EditText view, CheckBox view etc, then to
mention the labels and other information, we will
have to use the TextView alongside.

Following are some of the main attributes that are

most commonly used:

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 letters of the text.
Android:hint :This attribute is used to show a
default text, if no text is set in the TextView.
Generally, when we populate a TextView using
dynamic data coming from server(using the
programmatic approach), then we set this attribute
to show some default text in the TextView until
data is fetched from server.

<TextView
android:id="@+id/st"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Studytonight"
android:textSize="45sp"
android:padding="20dp"
android:textColor="#DD2C00"/>
EditText View in Android
EditText is a TextView which is editable.
It has almost similar properties as a TextView.
EditText is used when you want to have a text field in
your application where user can enter any text.
It can be either single line or multi-line.
Touching a text field places makes the field active,
places a cursor and automatically displays the keyboard.
Following are some of the attributes that are most
commonly used:

Attribute Description
android:inputType
Used to specify what the text entered should be
like and for what purpose it will be used. If this is
set to none, then the text cannot be edited. Some
commonly used constant values for this attribute
are:

text
textAutoComplete - This provides with
suggestions as user is typing in text.
textAutoCorrect - This will enable auto correct on
user input text.
textPassword - Display the entered text in form of
dots or stars.
textUri
textEmailAddress
phone - This will present only the numeric
keyboard to users.
datetime, etc.

We can use more than one constant value, by

separating them using |, for example :

android:inputType="textCapSentences|textAutoCor
rect"

android:minLines It provides the view, with a

height equivalent to the specified number of lines
on the screen. So, if you enter a value 2, then by
default the EditText view will be 2 lines tall, even
without any text added to it. It will the the default
height.
android:maxLines It sets the maximum number
of lines that the EditText view can accommodate,
visually. In other words when we say maxLines has
a value 3, it means that the EditText view field will
be 3 lines tall after which it will stop increasing in
size as more and more text is added to it, usually a
scroll bar is shown when number of lines exceeds
the limit set.
android:hint It displays a hint message before
anyone types in the EditText.
android:maxLength It allows to specify the
maximum number of characters that the user can
enter into the field.

Below is a sample of a default EditText field:

<EditText
android:id="@+id/et_address"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Write your email Address here"
android:textSize="20sp"
android:inputType="textWebEmailAddress"

android:maxLines="3"/>
CheckBox View in Android

Checkbox is used when you have to show

multiple options to the user and the user is
allowed to choose as many options as they want,
by tapping on them.
You can set its default check status as true or
false and other properties are same as TextView.
<CheckBox
android:id="@+id/myCheckbox"
 android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="DY Patil University"
android:checked="true"
android:textColor="@android:color/black"
android:layout_marginLeft="30dp"/>

RadioButton View in Android

RadioButton is used when you have to allow
selection of only one option among the list of
multiple options.

It is used under its parent view – RadioGroup so

that we can get one selected value out of all the
listed radio buttons.
<RadioGroup
android:id="@+id/rg_gender"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_marginLeft="20dp">

<RadioButton
android:id="@+id/rb_male"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Male"
android:textColor="@android:color/black"/>

<RadioButton
android:id="@+id/rb_female"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
 android:textColor="@android:color/black"

android:text="Female"/>

Here we have some commonly used attributes,

which you can use to style your RadioButton and
CheckBox view.

● android:textColor: To change the color of

the text.
● android:textSize: To adjust the size of the
text.
● android:textStyle: To style the text,
possible values are Bold or Italic etc.
● android:background: To give a background
color to your Radio button.

Button View in Android

Button, as understood by its name, is a
component which can be pressed or clicked by the
user to perform an action. It has the same
properties as a TextView, with a few Button
specific properties
<Button
android:id="@+id/btn_submit"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Submit"

android:textColor="@android:color/holo_blue_dark
"
/>

Button b = (Button)
findViewById(R.id.btn_submit);
// setting on click event listener
b.setOnClickListener(new
View.OnClickListener() {
public void onClick(View v) {
 // Perform action on click

}
});

Using android:onClick to add behaviour to

Button

We can also assign a method directly in the layout

XML while defining the button using,
android:onClick attribute, like specified below.

<Button
android:id="@+id/btn_submit"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Submit"

android:textColor="@android:color/holo_blue_dark
"
android:onClick="study"
/>
When user will click on the Button defined in the
above layout xml file, then Android system will call
study(View) method, defined in
MainActivity.java file. In order for this to
work, the method must be public and accept a
View type as its only parameter.
public void study(View view) {

//Perform action on click

Commonly used attributes for Button

Here are some commonly used attributes for

styling the Button View

● android:gravity: This can be used to set

the position of any View on the app screen.
The available value are right, left, center,
center_vertical etc. You can also use to values
together, using the | symbol.
● android:textSize: To set text size inside
button.
● android:background: To set the
background color of the button.
●
ImageView and ImageButton in Android
ImageView and ImageButton are used in Android
application to place an image in the view.
ImageButton is used to use an image as a button
in your android application.

ImageView in Android

ImageView is used to show any picture on the

user interface.
Following are some of the main attributes that are
most commonly used:

Attribute Description

android: Used to specify a maximum height

maxHeigh for this view.
t
android: Used to specify a maximum width
maxWidth for this view.

android: Sets a drawable as the content for

src this ImageView.

android: Controls how the image should be

scaleTyp resized or moved to match the size
e of the ImageView.

android: Tints the color of the image in the

tint ImageView.

Therefore, any image that we want to display in the

app should be placed under the drawable folder.
This folder can be found under app → res →
drawable. To insert an image, simply copy the
image and then right click on drawable → Paste.
<ImageView
android:id="@+id/img"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="fitCenter"

android:src="@drawable/img_nature"/>
A few more, commonly used attributes with
ImageView

Following are some of the commonly used

attributes:

● android:background: This property gives a

background color to your ImageView. When
your image is not able to entirely fill the
ImageView, then background color is used to
fill the area not covered by the image.
 ● android:padding: To provide padding or
extra space inside the ImageView for the
image.

Using an Image as Button

ImageButton has the same property as

ImageView. Only one feature is extra, which is,
images set through ImageButton are clickable, and
actions can be attached with them upon clicking.
Here is how you define an ImageButton in the
layout XML file:
<ImageButton
android:id="@+id/imgButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="fitCenter"

android:src="@drawable/img_nature"/>

imageButton =
(ImageButton)findViewById(R.id.imgButton);
imageButton.setOnClickListener(new
View.OnClickListener() {
@Override
 public void onClick(View v) {

// do anything here

}
});

Switch

In Android Studio Switch is a two-state toggle

switch widget that can be used to select between
two options. It is mainly used to display the on and
off state of an option, which looks like a simple
slider control to the user. The user may drag the
"thumb" back and forth to choose the selected
option, or we can simply tap to toggle the state of
the switch.