Archive for the ‘Types of Views’ Category

How to create Christmas Card Gallery using Grid view

November 18th, 2011 by admin | 1 Comment | Filed in Android Tutorials, Types of Views

Lets develop a Christmas Card Gallery application. We will need to follow these steps :
Step 1: Create a new android project using motodev studios.
Step 2: Choose the name and SDK version for the app. Your AndroidManifest.xml will look
like this :

			
			
			

			
			
			
			
			
			
			

			
			
		   

Step 3: Put your app launcher icon image into res/drawable folder.
Step 4: Open your res/layout/main.xml and put following code there :

			
			
          

Step 5 : Write your app name into res/value/String.xml

			
			
			Hello World
			Christmas Card gallery
			
		   

Step 6 : write following code in your MainActivity.java file

		package com.cardGallery;

		import android.app.Activity;
		import android.content.Context;
		import android.os.Bundle;
		import android.view.View;
		import android.view.ViewGroup;
		import android.widget.AdapterView;
		import android.widget.BaseAdapter;
		import android.widget.GridView;
		import android.widget.ImageView;
		import android.widget.Toast;
		import android.widget.AdapterView.OnItemClickListener;

		public class MainActivity extends Activity
		{
		//---the images to display---
		Integer[] imageIDs = {
		R.drawable.card1,
		R.drawable.card2,
		R.drawable.card3,
		R.drawable.card4,
		R.drawable.card5,
		R.drawable.card6,
		R.drawable.card7,
		R.drawable.card8,
		R.drawable.card9,
		R.drawable.card10,
		R.drawable.card11,
		R.drawable.card12,
		R.drawable.card13,
		R.drawable.card14,
		R.drawable.card15

		};

		@Override
		public void onCreate(Bundle savedInstanceState)
		{
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);

		GridView gridView = (GridView) findViewById(R.id.cardview);
		gridView.setAdapter(new ImageAdapter(this));

		gridView.setOnItemClickListener(new OnItemClickListener()
		{
		public void onItemClick(AdapterView parent,
		View v, int position, long id)
		{
		Toast.makeText(getBaseContext(),
		"Card" + (position + 1) + " selected",
		Toast.LENGTH_SHORT).show();
		}
		});
		}

		public class ImageAdapter extends BaseAdapter
		{
		private Context context;

		public ImageAdapter(Context c)
		{
		context = c;
		}

		//---returns the number of images---
		public int getCount() {
		return imageIDs.length;
		}

		//---returns the ID of an item---
		public Object getItem(int position) {
		return position;
		}

		public long getItemId(int position) {
		return position;
		}

		//---returns an ImageView view---
		public View getView(int position, View convertView, ViewGroup parent)
		{
		ImageView imageView;
		if (convertView == null) {
		imageView = new ImageView(context);
		imageView.setLayoutParams(new GridView.LayoutParams(85, 85));
		imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
		imageView.setPadding(5, 5, 5, 5);
		} else {
		imageView = (ImageView) convertView;
		}
		imageView.setImageResource(imageIDs[position]);
		return imageView;
		}
		}
		}
		

Step 7 : Run your application it will look like this.
result

Step 8 : In main menu your app icon will be shown like this :
app_icon

Tags: , , , , , , , , , , , , , ,

TableLayout in Android

November 15th, 2011 by admin | 1 Comment | Filed in Android Tutorials, Types of Views

droid_tool
TableLayout displays data in table view.
This example is for TableLayout :

Steps :
Step 1. Create a new android project.
Step 2. Give the project name.
Step 3. Open res/layout/main.xml

Step 4. Here is the code :


android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:stretchColumns="1">
android:layout_column="2"
android:text="row1col1"
android:padding="3dip" />
android:text="row1col2"
android:gravity="right"
android:padding="3dip" />
android:layout_column="2"
android:text="row2col1"
android:padding="3dip" />
android:text="row2col2"
android:gravity="right"
android:padding="3dip" />
android:layout_column="2"
android:text="row3col1"
android:padding="3dip" />
android:text="row3col2"
android:gravity="right"
android:padding="3dip" />

android:layout_height="2dip"
android:background="#FF909090" />

android:layout_height="2dip"
android:background="#FF909090" />

Step 5.Run you app. it will look like this :
tableLayout

Tags: , , , , , ,

RelativeLayout in Android

November 15th, 2011 by admin | 1 Comment | Filed in Android Tutorials, Flash AS 3.0, Types of Views

droid_tool

RelativeLayout is a ViewGroup that displays child View elements in their relative positions.
The position of a View is as relative to elements.
This example is for Relative Layout :

Steps :
Step 1. Create a new android project.
Step 2. Give the project name.
Step 3. Open res/layout/main.xml

Step 4. Here is the code :



Step 5.Run you app. it will look like this :
RelativeLayout

Tags: , , , , ,

Linear Layout in Android

November 15th, 2011 by admin | No Comments | Filed in Android Tutorials, Types of Views
This example is for Linear views :
Steps :
Step 1. Create a new android project.
Step 2. Give the project name.
Step 3. Open res/layout/main.xml
There is a root LinearLayout that defines its orientation to be vertical and horizontal.
Step 4. Here is the code :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1">
<TextView
android:text="column one"
android:gravity="center_horizontal"
android:background="#aa0000"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1"/>
<TextView
android:text=" column two"
android:gravity="center_horizontal"
android:background="#00aa00"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="1"/>
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1">
<TextView
android:text="row one"
android:textSize="15pt"
android:gravity="center_vertical"
android:background="#000000"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<TextView
android:text="row two"
android:textSize="15pt"
android:gravity="center_vertical"
android:background="#aaaaaa"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"/>
</LinearLayout>
</LinearLayout>
Step 5.Run you app. it will look like this :

droid_tool

This example is for Linear views :

Steps :

Step 1. Create a new android project.

Step 2. Give the project name.

Step 3. Open res/layout/main.xml

There is a root LinearLayout that defines its orientation to be vertical and horizontal.

Step 4. Here is the code :


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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="vertical"

android:layout_width="fill_parent"

android:layout_height="fill_parent">

<LinearLayout

android:orientation="horizontal"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:layout_weight="1">

<TextView

android:text="column one"

android:gravity="center_horizontal"

android:background="#aa0000"

android:layout_width="wrap_content"

android:layout_height="fill_parent"

android:layout_weight="1"/>

<TextView

android:text=" column two"

android:gravity="center_horizontal"

android:background="#00aa00"

android:layout_width="wrap_content"

android:layout_height="fill_parent"

android:layout_weight="1"/>

</LinearLayout>

<LinearLayout

android:orientation="vertical"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:layout_weight="1">

<TextView

android:text="row one"

android:textSize="15pt"

android:gravity="center_vertical"

android:background="#000000"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_weight="1"/>

<TextView

android:text="row two"

android:textSize="15pt"

android:gravity="center_vertical"

android:background="#aaaaaa"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_weight="1"/>

</LinearLayout>

</LinearLayout>

Step 5.Run you app. it will look like this :

LinearView

Tags: , , , , ,