Professional Documents
Culture Documents
DEVELOPMENT
Preparaed By
Mr. Gajendra Kumar Ahirwar
CONTENT
Layouts overview: Using Linear, Relative & Frame
Layout
Views: Text view, Image view, List view, Grid View,
Stack View
Padding & Margin with views & layouts,
Sliding drawer
Layout Overview
Android Layout is used to define the user interface that
holds the UI controls or widgets that will appear on the
screen of an android application or activity screen.
Layout basically refers to the arrangement of elements on a
page these elements are likely to be images, texts or styles.
A layout defines the structure for a user interface in app, such
as in an activity. All elements in the layout are built using a
hierarchy of View and ViewGroup objects.
A View usually draws something the user can see and
interact with. Whereas a ViewGroup is an invisible container
that defines the layout structure for View and
other ViewGroup objects.
Layout Overview
Declare a layout in two ways:
android:foreground
This defines the drawable to draw over the content and possible values may be
a color value, in the form of "#rgb", "#argb", "#rrggbb", or "#aarrggbb".
android:foregroundGravity
Defines the gravity to apply to the foreground drawable. The gravity defaults to
fill. Possible values are top, bottom, left, right, center, center_vertical,
center_horizontal etc.
android:measureAllChildren
Determines whether to measure all children or just those in the VISIBLE or
INVISIBLE state when measuring. Defaults to false
Frame Layout Example
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"> <ImageView
android:src="@drawable/ic_launcher"
android:scaleType="fitCenter" android:layout_height="250px"
android:layout_width="250px"/>
</FrameLayout>
VIEWS
Views: Text view,
Image view,
List view,
Grid View,
Stack View
VIEWS
A View is a fundamental element for any user interface
(or design) in android. View provides you with a
rectangular space that can be used to display, interact
or handle events.
The view is a superclass for any graphical components
in android.
Usually, each view is rectangular and can hold textual
and visual contents.
Attached to a view, there are several attributes that
define the property and functionality of that view.
VIEWS: Sample code
<YourViewName <TextView
Attribute_1 = value_1 android:id="@+id/title"
Attribute_2 = value_2 android:layout_width="match_parent"
Attribute_3 = value_3 android:layout_height="wrap_content"
Attribute_4 = value_4 android:text="TechVidvan Android"
. android:textSize="40sp"
. android:textColor="#078A0D"
. android:textStyle="bold"
Attribute_n = value_n android:gravity="center"
/> android:layout_margin="20dp"
/>
Types of Views
Android provides a bunch of views that can be used depending
upon the needs of your application. Some of them are as
follows:
1. TextView
2. ImageView
3. List View
4. Grid View
5. Stack View
6. Button: ImageButton, ToggleButton, RadioButton,
RadioGroup, CheckBox
1. Text View
TextView is the most widely used view used to show pre-
defined text on display screen.
This class is used to display text on the android application
screen.
It also allows user to optionally edit it. Although it contains text
editing operations, the basic class does not allow editing, So
Edit Text class is included to do so.
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.
Text View Sample code
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/hello_world"
android:background="#000“
android:textColor="#fff"
android:layout_centerHorizontal="true"
/>
Text View Attributes
Attribute Description Example Value
android:background Background for the view #ffffff
Method to invoke when
android:onClick onButtonClicked
clicked
Controls how view
android:visibility invisible
appears
Hint text to display when
android:hint @string/hint
empty
android:text Text to display in view @string/foo
android:textColor Color of the text #000000
android:textSize Size of the text 21sp
Style of the text
android:textStyle Bold
formatting
If set True, this will make
android:textAllCaps the text appear in upper HELLO FRIENDS
case.
Edit Text View
<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:imeOptions="actionDone"
android:maxLines="3“
/>
Edit Text View Attributes
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.
All the available constant values can be checked here.
We can use more than one constant value, by separating them using |, for example :
android:inputType="textCapSentences|textAutoCorrect"Copy
android:imeOptions In most input methods, like keyboard or SMS sending form, the bottom right corner of the
keyboard has an action button appropriate for that input method. It can
be Done, Next, Send, Go etc. To specify the keyboard action button, use
the android:imeOptions attribute with an action value such
as actionSend or actionSearch etc.
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 accomodate, 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.
2. ImageView
Image view helps to display images in an android
application.
Any image can be selected, we just have to paste our image
in a drawable folder from where we can access it.
ImageView is used to show any picture on the user
interface.
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 Sample Code
<ImageView
android:id="@+id/img"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="fitCenter"
android:src="@drawable/img_nature“
/>
ImageView Attributes
Attribute Description
android:maxHeight Used to specify a maximum
height for this view.
android:maxWidth Used to specify a maximum
width for this view.
android:src Sets a drawable as the content
for this ImageView.
android:scaleType Controls how the image
should be resized or moved to
match the size of the
ImageView.
android:tint Tints the color of the image in
the ImageView.
3. List View
ListView in Android is a type of ViewGroup that shows the list
of items in the form of rows.
In ListView the list layout is created using ListView.
It shows the list in vertical form and it becomes scrollable
automatically.
The items are added automatically using Adapter.
example of it is our device's Contact List. With ListView, user
can easily browse the information, while scrolling up and down.
An adapter basically bridges between the UI component and the
data source for items.
An adapter holds the data and sends it to the Adapter view after
that View takes the data from the adapter view and shows it in
ListViews.
Parameters of ListView
We can also set the action to be processed after a list item is
clicked using the onListItemClick() method. In this
method, 4 parameters are passed:
ListView: This contains the item of the view.
View: This tells the specific view that was selected.
Position: It tells the position of the selected item in the
array.
Id: Id is used to uniquely identify a view.
Attributes of ListView
Id: id uniquely identifies a ListView.
Divider: This defines the color or drawable among different list items.
DividerHeight: This defines the height of the divider between list.
Items.listSelector: This property sets the selector for listView.
Entries: This specifies the reference to the array resource.
Background: It sets the background of the ListView. Background can
be either color or even an image.
ChoiceMode: It sets the number of items that can be selected at once.
TextSize: It sets the size of the text that will be displayed.
Layout_width: It sets the width of the layout.
Layout_height: It sets the height of the layout.
Layout_gravity: It sets the gravity of the layout.
Adapters
Adapters in listView are here to help the View fetch data
from the source and show them on the screen to users.
ListView is a subclass of AdapterView class. And, we have
two adapters in Android:
1. Array Adapter in Android:
We use this when we want a list of single items, backed by
an Array.
2. Base Adapter in Android
It is the base class of normal implementation of Adapters
that are used in ListView.
How to create listView in
Android
Using the Array Adapter
1. To implement this, we will first create a new project and name it. Then we
will create the ListView in the activity_main.xml file as follows:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/ap
k/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ListView
android:id="@+id/listview1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:divider="#07755C"
android:dividerHeight="2dp"></ListView>
</LinearLayout>
How to create listView in
Android
2. Next, we will write the following code
in MainActivity.java file as follows:
package com.DataFlair.mylistview; private String[] names = {"User 1", "User 2",
import android.os.Bundle; "User 3", "User 4", "User 5", "User 6", "User
import android.widget.ArrayAdapter; 7", "User 8", "User 9", "User 10", "User 11",
import android.widget.ListView; "User 12", "User 13", "User 14", "User 15",
import "User 16", "User 17", "User 18", "User 19",
androidx.appcompat.app.AppCompatActivity; "User 20"};
public class MainActivity extends @Override
AppCompatActivity { protected void onCreate(Bundle
private ListView mylist; savedInstanceState) {
private ArrayAdapter myAdapter; super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mylist = findViewById(R.id.listview1);
myAdapter = new ArrayAdapter(this,
android.R.layout.simple_list_item_1, names);
mylist.setAdapter(myAdapter);
}
How to create listView in
Android
3. After we have written all the codes, we will now run the
code.
4. Grid View
A grid basically shows the list of Items in a 2-Dimensional View.
2-Dimensional View of the list of icons or images is shown in the
form of Rows and Columns.
If the list of item is not fitting in the screen, it automatically becomes
scrollable, we don’t need a Scroll view or something with it.
Grid is created with the help of Android GridView that is present in
Containers.
A grid can be dragged from the list of Containers and dropped on the
Screen.
To fill the layout with icons or images we need to use Adapter. An
Adapter simply inserts the data in the GridView by taking the content
from the source.
Grid View Attributes
android: id – A Grid needs to be uniquely identified to choose it in case of requirement. For
this purpose, id is defined for each grid using this attribute.
android: gravity – This attribute sets the alignment of the GridView. We can align a Grid
using, left, right, below, etc.
android: columnWidth – This attribute is used to set the width of the Column to a fixed
size using dp, sp, px, in or mm.
android: stretchMode – stretchMode attribute is used to stretch and fill the empty space in a
cell if any. The values that it may hold are – none, spacingWidth, columnWidth,
spacingwidthUniform.
android: horizontalSpacing – This attribute defines the spacing between the columns. The
spacing could be in dp, sp, px, in or mm.
android: numColumns – This attribute defines the number of icons or images that can be
arranged in a column.
android: height – This attribute sets the height of the Android GridView in dp, sp, px, in or
mm.
android: width – This attribute sets the width of the GridView in dp, sp, px, in or mm.
android: verticalSpacing – This attribute defines the spacing between the rows. The
spacing could be in dp, sp, px, in or mm.
How to Implement GridView in
Android?
Step 1: First of all we will create a new project and name it.
Then we will define the Android GridView
in activiy_main.xml file as follow:
<?xml version="1.0" encoding="utf-8"?>
<GridView
xmlns:android="http://schemas.android.com/ap
k/res/android"
android:id="@+id/mygrid"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:columnWidth="110dp"
android:numColumns="auto_fit"
android:stretchMode="columnWidth"
android:verticalSpacing="15dp"
android:horizontalSpacing="15dp"
android:gravity="center" />
How to Implement GridView in
Android?
Step 2: After this, we will now create a file named, SetImageAdapter.java file.
We will create it in the same folder, where we have MainActivity.java file.
Now, we will write the following code in SetImageAdapter.java file:
package com.DataFlair.mycats;
import android.content.Context;
import android.view.View; private Context Cont;
import android.view.ViewGroup; public SetImageAdapter(Context c) {
import android.widget.BaseAdapter;
Cont = c;
import android.widget.GridView;
import android.widget.ImageView; }
public class SetImageAdapter extends BaseAdapter { public int getCount() {
public Integer[] thumbImages = { return thumbImages.length;
R.drawable.img1, R.drawable.img2, }
R.drawable.img11, R.drawable.img12,
public Object getItem(int position) {
R.drawable.img3, R.drawable.img13,
R.drawable.img4, R.drawable.img9, return null;
R.drawable.img5, R.drawable.img8, }
R.drawable.img1, R.drawable.img1, public long getItemId(int position) {
R.drawable.img6, R.drawable.img7, return 0;
R.drawable.img11, R.drawable.img10,
}
R.drawable.img1, R.drawable.img2,
R.drawable.img5, R.drawable.img8, public View getView(int position, View convertView, ViewGroup
R.drawable.img1, R.drawable.img1, parent) {
R.drawable.img6, R.drawable.img7, ImageView imgview = new ImageView(Cont);
R.drawable.img11, R.drawable.img10, imgview.setLayoutParams(new GridView.LayoutParams(370, 250));
R.drawable.img1, R.drawable.img2,
imgview.setScaleType(ImageView.ScaleType.CENTER_CROP);
R.drawable.img11, R.drawable.img12,
R.drawable.img3, R.drawable.img13, imgview.setPadding(10,10,10, 10);
R.drawable.img4, R.drawable.img9, imgview.setImageResource(thumbImages[position]);
R.drawable.img5, R.drawable.img8, return imgview;
R.drawable.img1, R.drawable.img1, }
R.drawable.img6, R.drawable.img7
}
};
How to Implement GridView in
Android?
Step 3: Now we will write the following code in the MainActivity.java file:
package com.DataFlair.mycats;
import android.os.Bundle;
import android.widget.GridView;
import
androidx.appcompat.app.AppCompatActivity;
public class MainActivity extends
AppCompatActivity {
@Override
protected void onCreate(Bundle
savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
GridView gv = findViewById(R.id.mygrid);
gv.setAdapter(new SetImageAdapter(this));
}
}
How to Implement GridView in
Android?
Step 4: After that, we will run the app following would be shown on the Screen:
i) This is the GridView.
ViewGroup
ViewGroup is a container that holds several views,
layouts, or even other view groups inside it.
Using the view group, you can give rise to several views
and layouts.
A View object is usually a widget, for example, A ViewGroup object is typically a layout
Button, TextView, ImageView, etc. containing several views and layouts inside it.
It is a special widget composed of two children views, one is the handle
that the user’s drags, and other is content attached to the handle
which dragged along-with it.
Important Methods Of Slider Drawer
1. open(): This method is used to opens the drawer immediately. Sometime
we open the drawer on View click (Button, TextView etc).
Example:
SlidingDrawer simpleSlidingDrawer
=(SlidingDrawer)findViewById(R.id.simpleSlidingDrawer);
simpleSlidingDrawer.open(); // open the Sliding Drawer
This attribute is used as an Identifier for the child that represents the drawer’s
handle handle.
This is always visible in the application
Here you can define the drawer’s content. In order to make the contents visible,
content one can click the handle and see it. open() and close() methods
are there to make content visible and invisible.
Depends upon the requirement the view differs. Some prefer to have in
rotation
90/180/270/360 degrees etc.
Example we create a button for handle the content and use the id of the
button in the handle attribute of SlidingDrawer.
<SlidingDrawer
android:id="@+id/drawer"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:content="@+id/content"
android:orientation="horizontal"
android:rotation="180"
android:handle="@+id/handleImageView">
<ImageView android:id="@id/handleImageView"
android:layout_width="wrap_content“
android:layout_height="wrap_content"
android:rotation="270"
android:src="@drawable/ic_launcher" />
<LinearLayout
android:id="@id/content“
android:layout_width="fill_parent“
android:layout_height="fill_parent"
android:orientation="horizontal"
android:rotation="180">
</LinearLayout>
</SlidingDrawer>