Android
FrameLayout Example
Android FrameLayout Example
activity_main.xml
File: activity_main.xml
1.
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
2.
xmlns:tools="http://schemas.android.com/tools"
3.
android:id="@+id/FrameLayout1"
4.
android:layout_width="match_parent"
5.
android:layout_height="match_parent"
6.
tools:context=".MainActivity" >
7.
8.
<ImageButton
9.
android:id="@+id/imageButton1"
10.
android:layout_width="wrap_content"
11.
android:layout_height="wrap_content"
12.
android:src="@drawable/ic_launcher" />
13.
14. </FrameLayout>
Activity class
File: MainActivity.java
1.
package com.example.framelayout;
2.
3.
import android.os.Bundle;
4.
import android.app.Activity;
5.
import android.view.Menu;
6.
7.
public class MainActivity extends Activity {
8.
9.
@Override
10.
protected void onCreate(Bundle savedInstanceState) {
11.
super.onCreate(savedInstanceState);
12.
setContentView(R.layout.activity_main);
13.
}
14.
15.
@Override
16.
public boolean onCreateOptionsMenu(Menu menu) {
17.
// Inflate the menu; this adds items to the action bar if it is present.
18.
getMenuInflater().inflate(R.menu.activity_main, menu);
19.
return true;
20.
}
21.
22. }
Android
FrameLayout Example
Android FrameLayout Example
activity_main.xml
File: activity_main.xml
1.
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
2.
xmlns:tools="http://schemas.android.com/tools"
3.
android:id="@+id/FrameLayout1"
4.
android:layout_width="match_parent"
5.
android:layout_height="match_parent"
6.
tools:context=".MainActivity" >
7.
8.
<ImageButton
9.
android:id="@+id/imageButton1"
10.
android:layout_width="wrap_content"
11.
android:layout_height="wrap_content"
12.
android:src="@drawable/ic_launcher" />
13.
14. </FrameLayout>
Activity class
File: MainActivity.java
1.
package com.example.framelayout;
2.
3.
import android.os.Bundle;
4.
import android.app.Activity;
5.
import android.view.Menu;
6.
7.
public class MainActivity extends Activity {
8.
9.
@Override
10.
protected void onCreate(Bundle savedInstanceState) {
11.
super.onCreate(savedInstanceState);
12.
setContentView(R.layout.activity_main);
13.
}
14.
15.
@Override
16.
public boolean onCreateOptionsMenu(Menu menu) {
17.
// Inflate the menu; this adds items to the action bar if it is present.
18.
getMenuInflater().inflate(R.menu.activity_main, menu);
19.
return true;
20.
}
21.
22. }
Android
LinearLayout Example
Android LinearLayout Example
activity_main.xml
File: activity_main.xml
1.
<!-- <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
2.
xmlns:tools="http://schemas.android.com/tools"
3.
android:layout_width="match_parent"
4.
android:layout_height="match_parent"
5.
tools:context=".MainActivity" >
6.
7.
<Button
8.
android:id="@+id/button1"
9.
android:layout_width="wrap_content"
10.
android:layout_height="wrap_content"
11.
android:text="Button1" />
12.
13.
<Button
14.
android:id="@+id/button2"
15.
android:layout_width="wrap_content"
16.
android:layout_height="wrap_content"
17.
android:text="Button2" />
18.
19.
<Button
20.
android:id="@+id/button3"
21.
android:layout_width="wrap_content"
22.
android:layout_height="wrap_content"
23.
android:text="Button3" />
1.
24.
</LinearLayout> -->
25.
<!-- <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
26.
xmlns:tools="http://schemas.android.com/tools"
27.
android:layout_width="match_parent"
28.
android:layout_height="match_parent"
29.
tools:context=".MainActivity" >
30.
31.
<Button
32.
android:id="@+id/button1"
33.
android:layout_width="wrap_content"
34.
android:layout_height="fill_parent"
35.
android:text="Button1" />
36.
37.
<Button
38.
android:id="@+id/button2"
39.
android:layout_width="wrap_content"
40.
android:layout_height="fill_parent"
41.
android:text="Button2" />
42.
43.
<Button
44.
android:id="@+id/button3"
45.
android:layout_width="wrap_content"
46.
android:layout_height="fill_parent"
47.
android:text="Button3" />
48.
49.
</LinearLayout> -->
50.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
51.
xmlns:tools="http://schemas.android.com/tools"
52.
android:layout_width="fill_parent"
53.
android:layout_height="match_parent"
54.
android:orientation="vertical"
55.
tools:context=".MainActivity" >
56.
57.
<Button
58.
android:id="@+id/button2"
59.
android:layout_width="match_parent"
60.
android:layout_height="wrap_content"
61.
android:text="Button2" />
62.
63.
<Button
64.
android:id="@+id/button1"
65.
android:layout_width="match_parent"
66.
android:layout_height="wrap_content"
67.
android:text="Button1" />
68.
69.
<Button
70.
android:id="@+id/button3"
71.
android:layout_width="match_parent"
72.
android:layout_height="wrap_content"
73.
android:text="Button3" />
74.
75. </LinearLayout>
Activity class
File: MainActivity.java
1.
package com.example.linearlayout;
2.
3.
import android.os.Bundle;
4.
import android.app.Activity;
5.
import android.view.Menu;
6.
7.
public class MainActivity extends Activity {
8.
9.
@Override
10.
protected void onCreate(Bundle savedInstanceState) {
11.
super.onCreate(savedInstanceState);
12.
setContentView(R.layout.activity_main);
13.
}
14.
15.
@Override
16.
public boolean onCreateOptionsMenu(Menu menu) {
17.
// Inflate the menu; this adds items to the action bar if it is present.
18.
getMenuInflater().inflate(R.menu.activity_main, menu);
19.
return true;
20.
}
21.
22. }
Android Table Layout
Android
TableLayout going to be arranged groups of views into rows and columns. You
will use the <TableRow> element to build a row in the table. Each row has
zero or more cells; each cell can hold one View object.
TableLayout containers do
not display border lines for their rows, columns, or cells.
TableLayout Attributes
Example
Android Absolute Layout
ABSOLUTE LAYOUT
AbsoluteLayout Attributes
Public Constructors
Example
Android Frame Layout
FrameLayout Attributes
Example
Android List View
Android ListView is a view which groups several items and display them in
vertical scrollable list. The list items are automatically inserted to the list
using an Adapter that
pulls content from a source such as an array or database.
LIST VIEW
ListView Attributes
ArrayAdapter
Example
TableLayout Attributes
Following are the important
attributes specific to TableLayout −
Attribute
|
Description
|
android:id
|
This is the ID which uniquely identifies the layout.
|
android:collapseColumns
|
This specifies the zero-based index of the columns to
collapse. The column indices must be separated by a comma: 1, 2, 5.
|
android:collapseColumns
|
The zero-based index of the columns to shrink. The column
indices must be separated by a comma: 1, 2, 5.
|
android:stretchColumns
|
The zero-based index of the columns to stretch. The column
indices must be separated by a comma: 1, 2, 5.
|
Example
This example will take you
through simple steps to show how to create your own Android application using
Table Layout. Follow the following steps to modify the Android application we
created in Hello World Example chapter −
Step
|
Description
|
1
|
You will use Android Studio IDE to create an Android
application and name it asdemo under
a package com.example.demo as explained in the Hello World Example chapter.
|
2
|
Modify the default content of res/layout/activity_main.xml file to include few widgets in table
layout.
|
3
|
No need to modify string.xml, Android studio takes care of
default constants
|
4
|
Run the application to launch Android emulator and verify the
result of the changes done in the application.
|
Following is the content of
the modified main activity filesrc/com.example.demo/MainActivity.java.
This file can include each of the fundamental lifecycle methods.
package com.example.demo;
import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
}
Following will be the
content of res/layout/activity_main.xml file −
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TableRow
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:text="Time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1" />
<TextClock
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/textClock"
android:layout_column="2" />
</TableRow>
<TableRow>
<TextView
android:text="First Name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1" />
<EditText
android:width="200px"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</TableRow>
<TableRow>
<TextView
android:text="Last Name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="1" />
<EditText
android:width="100px"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</TableRow>
<TableRow
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<RatingBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/ratingBar"
android:layout_column="2" />
</TableRow>
<TableRow
android:layout_width="fill_parent"
android:layout_height="fill_parent"/>
<TableRow
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Submit"
android:id="@+id/button"
android:layout_column="2" />
</TableRow>
</TableLayout>
Following will be the
content of res/values/strings.xml to define two new constants −
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">HelloWorld</string>
<string name="action_settings">Settings</string>
</resources>
Let's try to run our
modified Hello World! application we just modified. I assume
you had created your AVD while doing environment setup. To run
the app from Android Studio, open one of your project's activity files and
click Run 
icon from
the toolbar. Android studio installs the app on your AVD and starts it and if
everything is fine with your setup and application, it will display following
Emulator window −
icon from
the toolbar. Android studio installs the app on your AVD and starts it and if
everything is fine with your setup and application, it will display following
Emulator window −
Android Absolute Layout
An
Absolute Layout lets you specify exact locations (x/y coordinates) of its
children. Absolute layouts are less flexible and harder to maintain than other
types of layouts without absolute positioning.
ABSOLUTE LAYOUT
AbsoluteLayout Attributes
Following are the important
attributes specific to AbsoluteLayout −
Attribute
|
Description
|
android:id
|
This is the ID which uniquely identifies the layout.
|
android:layout_x
|
This specifies the x-coordinate of the view.
|
android:layout_y
|
This specifies the y-coordinate of the view.
|
Public Constructors
AbsoluteLayout(Context context)
|
AbsoluteLayout(Context context, AttributeSet attrs)
|
AbsoluteLayout(Context context, AttributeSet attrs, int
defStyleAttr)
|
AbsoluteLayout(Context context, AttributeSet attrs, int
defStyleAttr, int defStyleRes)
|
Example
This example will take you
through simple steps to show how to create your own Android application using
absolute layout. Follow the following steps to modify the Android application
we created in Hello World Example chapter −
Step
|
Description
|
1
|
You will use Android studio IDE to create an Android
application and name it asdemo under
a package com.example.demo as explained in the Hello World Example chapter.
|
2
|
Modify the default content of res/layout/activity_main.xml file to include few widgets in
absolute layout.
|
3
|
No need to modify string.xml, Android studio takes care of
default constants
|
4
|
Run the application to launch Android emulator and verify the
result of the changes done in the application.
|
Following is the content of
the modified main activity filesrc/com.example.demo/MainActivity.java.
This file can include each of the fundamental lifecycle methods.
package com.example.demo;
import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
}
Following will be the
content of res/layout/activity_main.xml file −
<AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<Button
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="OK"
android:layout_x="50px"
android:layout_y="361px" />
<Button
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="Cancel"
android:layout_x="225px"
android:layout_y="361px" />
</AbsoluteLayout>
Following will be the
content of res/values/strings.xml to define two new constants −
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">demo</string>
<string name="action_settings">Settings</string>
</resources>
Let's try to run our
modified Hello World! application we just modified. I assume
you had created your AVD while doing environment setup. To run
the app from Android Studio, open one of your project's activity files and
click Run 
icon from
the toolbar. Android Studio installs the app on your AVD and starts it and if
everything is fine with your setup and application, it will display following
Emulator window −
icon from
the toolbar. Android Studio installs the app on your AVD and starts it and if
everything is fine with your setup and application, it will display following
Emulator window −
Android Frame Layout
Frame Layout
is designed to block out an area on the screen to display a single item.
Generally, FrameLayout should be used to hold a single child view, because it
can be difficult to organize child views in a way that's scalable to different
screen sizes without the children overlapping each other.
FrameLayout Attributes
Following are the important
attributes specific to FrameLayout −
Attribute
|
Description
|
android:id
|
This is the ID which uniquely identifies the layout.
|
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.
|
Example
This example will take you
through simple steps to show how to create your own Android application using
frame layout. Follow the following steps to modify the Android application we
created in Hello World Example chapter −
Step
|
Description
|
1
|
You will use Android studio IDE to create an Android
application and name it asdemo under
a package com.example.demo as explained in the Hello World Example chapter.
|
2
|
Modify the default content of res/layout/activity_main.xml file to include few widgets in frame
layout.
|
3
|
No need to change string.xml, android takes care default
constants
|
4
|
Run the application to launch Android emulator and verify the
result of the changes done in the application.
|
Following is the content of
the modified main activity filesrc/com.example.demo/MainActivity.java.
This file can include each of the fundamental lifecycle methods.
package com.example.demo;
import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
}
Following will be the
content of res/layout/activity_main.xml file −
<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"/>
<TextView
android:text="Frame Demo"
android:textSize="30px"
android:textStyle="bold"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:gravity="center"/>
</FrameLayout>
Following will be the
content of res/values/strings.xml to define two new constants −
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">demo</string>
<string name="action_settings">Settings</string>
</resources>
Let's try to run our
modified Hello World! application we just modified. I assume
you had created your AVD while doing environment setup. To run
the app from Android Studio, open one of your project's activity files and
click Run icon from
the toolbar. Android Studio installs the app on your AVD and starts it and if
everything is fine with your setup and application, it will display following
Emulator window −
icon from
the toolbar. Android Studio installs the app on your AVD and starts it and if
everything is fine with your setup and application, it will display following
Emulator window −
Android List View
Android ListView is a view which groups several items and display them in
vertical scrollable list. The list items are automatically inserted to the list
using an Adapter that
pulls content from a source such as an array or database.
LIST VIEW
An adapter actually bridges
between UI components and the data source that fill data into UI Component.
Adapter holds the data and send the data to adapter view, the view can takes
the data from adapter view and shows the data on different views like as
spinner, list view, grid view etc.
The ListView and GridView are subclasses of AdapterView and they can be populated by binding
them to an Adapter, which
retrieves data from an external source and creates a View that represents each
data entry.
Android provides several
subclasses of Adapter that are useful for retrieving different kinds of data
and building views for an AdapterView ( i.e. ListView or GridView). The common
adapters are ArrayAdapter,Base
Adapter, CursorAdapter,SimpleCursorAdapter,SpinnerAdapter and WrapperListAdapter.
We will see separate examples for both the adapters.
ListView Attributes
Following are the important
attributes specific to GridView −
Attribute
|
Description
|
android:id
|
This is the ID which uniquely identifies the layout.
|
android:divider
|
This is drawable or color to draw between list items. .
|
android:dividerHeight
|
This specifies height of the divider. This could be in px, dp,
sp, in, or mm.
|
android:entries
|
Specifies the reference to an array resource that will
populate the ListView.
|
android:footerDividersEnabled
|
When set to false, the ListView will not draw the divider
before each footer view. The default value is true.
|
android:headerDividersEnabled
|
When set to false, the ListView will not draw the divider
after each header view. The default value is true.
|
ArrayAdapter
You can use this adapter
when your data source is an array. By default, ArrayAdapter creates a view for
each array item by calling toString() on each item and placing the contents in
a TextView. Consider you
have an array of strings you want to display in a ListView, initialize a new ArrayAdapter using a constructor to specify the
layout for each string and the string array −
ArrayAdapter adapter = new ArrayAdapter<String>(this,R.layout.ListView,StringArray);
Here are arguments for this
constructor −
·
First argument this is the application context. Most of
the case, keep it this.
·
Second argument will be layout
defined in XML file and having TextView for each string in the array.
·
Final argument is an array of
strings which will be populated in the text view.
Once you have array adapter
created, then simply call setAdapter() on your ListViewobject as follows −
ListView listView = (ListView) findViewById(R.id.listview);
listView.setAdapter(adapter);
You will define your list
view under res/layout directory in an XML file. For our example we are going to
using activity_main.xml file.
Example
Following is the example
which will take you through simple steps to show how to create your own Android
application using ListView. Follow the following steps to modify the Android
application we created in Hello
World Example chapter −
Step
|
Description
|
1
|
You will use Android Studio IDE to create an Android
application and name it asListDisplay under a package com.example.ListDisplay as explained in the Hello World Example chapter.
|
2
|
Modify the default content of res/layout/activity_main.xml file to include ListView content
with the self explanatory attributes.
|
3
|
No need to change string.xml, Android studio takes care of
default string constants.
|
4
|
Create a Text View file res/layout/activity_listview.xml.
This file will have setting to display all the list items. So you can
customize its fonts, padding, color etc. using this file.
|
6
|
Run the application to launch Android emulator and verify the
result of the changes done in the application.
|
Following is the content of
the modified main activity filesrc/com.example.ListDisplay/ListDisplay.java.
This file can include each of the fundamental life cycle methods.
package com.example.ListDisplay;
import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.widget.ArrayAdapter;
import android.widget.ListView;
public class ListDisplay extends Activity {
// Array of strings...
String[] mobileArray = {"Android","IPhone","WindowsMobile","Blackberry","WebOS","Ubuntu","Windows7","Max OS X"};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ArrayAdapter adapter = new ArrayAdapter<String>(this, R.layout.activity_listview, mobileArray);
ListView listView = (ListView) findViewById(R.id.mobile_list);
listView.setAdapter(adapter);
}
}
Following will be the
content of res/layout/activity_main.xml file −
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".ListActivity" >
<ListView
android:id="@+id/mobile_list"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
</ListView>
</LinearLayout>
Following will be the
content of res/values/strings.xml to define two new constants −
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">ListDisplay</string>
<string name="action_settings">Settings</string>
</resources>
Following will be the
content of res/layout/activity_listview.xml file:
<?xml version="1.0" encoding="utf-8"?>
<!-- Single List Item Design -->
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/label"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="10dip"
android:textSize="16dip"
android:textStyle="bold" >
</TextView>
Let's try to run our
modified Hello World! application we just modified. I assume
you had created your AVD while doing environment set-up. To run
the app from Android studio, open one of your project's activity files and
click Run icon from
the tool bar. Android studio installs the app on your AVD and starts it and if
everything is fine with your set-up and application, it will display following
Emulator window −
icon from
the tool bar. Android studio installs the app on your AVD and starts it and if
everything is fine with your set-up and application, it will display following
Emulator window −
