A Cool Photo Gallery

The end-result is

Starting at the xml, create a new xml file. This xml file will contain a listview.

gallery.xml

<!---gallery.xml--->

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="@drawable/bag_cake"
     >
     <ListView
            android:id="@+id/lvdata"
            android:layout_width="fill_parent"
            android:layout_height="0dp"
            android:layout_marginBottom="1dp"
            android:layout_weight="1"
            android:cacheColorHint="#251e1b" android:layout_marginTop="1dp">
        </ListView>
    

</LinearLayout>

Next the row-item. This will be used by the photoAdapter and define how each row item should be placed.

row_photo.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content" >



    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="80dp"
        android:layout_weight="1" >


        <ImageView
            android:id="@+id/iv1"
            android:layout_width="80dp"
            android:layout_height="fill_parent"
            android:layout_margin="2dp"
            android:layout_weight="0.25"
            android:scaleType="fitXY"
            android:src="@drawable/ic_launcher" />


        <ImageView
            android:id="@+id/iv2"
            android:layout_width="80dp"
            android:layout_height="fill_parent"
            android:layout_margin="2dp"
            android:layout_weight="0.25"
            android:scaleType="fitXY"
            android:src="@drawable/ic_launcher" />


        <ImageView
            android:id="@+id/iv3"
            android:layout_width="80dp"
            android:layout_height="fill_parent"
            android:layout_margin="2dp"
            android:layout_weight="0.25"
            android:scaleType="fitXY"
            android:src="@drawable/ic_launcher" />


        <ImageView
            android:id="@+id/iv4"
            android:layout_width="80dp"
            android:layout_height="fill_parent"
            android:layout_margin="2dp"
            android:layout_weight="0.25"
            android:scaleType="fitXY"
            android:src="@drawable/ic_launcher" />

    </LinearLayout>

</LinearLayout>

Thats it for the xml. There java files, one that defines the row as an object(Photo class), the PhotoAdapter Class and the implementation – (Gallery.java).

Photo.java

package com.gilo.zosi;

public class Photo {
	private int iv1;
	private int iv2;
	private int iv3;
	private int iv4;

	public Photo(int iv1, int iv2, int iv3, int iv4) {
                //The constructor takes the ids of three images and initiliases them
		super();
		this.iv1 = iv1;
		this.iv2 = iv2;
		this.iv3 = iv3;
		this.iv4 = iv4;
	}

	public int getIv1() {
		return iv1;
	}

	public void setIv1(int iv1) {
		this.iv1 = iv1;
	}

	public int getIv2() {
		return iv2;
	}

	public void setIv2(int iv2) {
		this.iv2 = iv2;
	}

	public int getIv3() {
		return iv3;
	}

	public void setIv3(int iv3) {
		this.iv3 = iv3;
	}

	public int getIv4() {
		return iv4;
	}

	public void setIv4(int iv4) {
		this.iv4 = iv4;
	}

}

and for PhotoAdapter.java

package com.gilo.zosi;

import java.util.ArrayList;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;

public class PhotoAdapter extends BaseAdapter {
	private ArrayList<Photo> list;
	private LayoutInflater mInflater;

	public PhotoAdapter(Context context, ArrayList<Photo> list) {
		this.list = list;
		this.mInflater = LayoutInflater.from(context);
	}

	@Override
	public int getCount() {
		return list.size();
	}

	@Override
	public Object getItem(int position) {
		return list.get(position);
	}

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

	@Override
	public View getView(int position, View convertView, ViewGroup parent) {
		ViewHolder holder;
		if (convertView == null) {
			convertView = mInflater.inflate(R.layout.row_photo, null);
			holder = new ViewHolder();
			holder.iv1 = (ImageView) convertView.findViewById(R.id.iv1);
			holder.iv2 = (ImageView) convertView.findViewById(R.id.iv2);
			holder.iv3 = (ImageView) convertView.findViewById(R.id.iv3);
			holder.iv4 = (ImageView) convertView.findViewById(R.id.iv4);
			convertView.setTag(holder);
		} else {
			holder = (ViewHolder) convertView.getTag();
		}
		holder.iv1.setImageResource(list.get(position).getIv1());
		holder.iv2.setImageResource(list.get(position).getIv2());
		holder.iv3.setImageResource(list.get(position).getIv3());
		holder.iv4.setImageResource(list.get(position).getIv4());
		return convertView;
	}

	private static class ViewHolder {
		private ImageView iv1, iv2, iv3, iv4;
	}
}

package com.gilo.zosi;

import java.util.ArrayList;

import android.app.Activity;
import android.graphics.Typeface;
import android.os.Bundle;
import android.widget.Button;
import android.widget.ListView;
import android.widget.TextView;

public class Gallery extends Activity{

	ListView gallery;
	ArrayList<Photo> row = new ArrayList<Photo>();

	protected void onCreate(Bundle icicle){
		super.onCreate(icicle);
		setContentView(R.layout.gallery);
		
		gallery = (ListView) findViewById(R.id.lvdata);
		
		init();
		
		gallery.setAdapter(new PhotoAdapter(getBaseContext(), row));
	}
	
	private void init(){
		
		Photo p1 = new Photo(R.drawable.p1, R.drawable.p2, R.drawable.p3, R.drawable.p4);
		Photo p2 = new Photo(R.drawable.p5, R.drawable.p6, R.drawable.p7, R.drawable.p8);
		Photo p3 = new Photo(R.drawable.p9, R.drawable.p10, R.drawable.p11, R.drawable.p12);
		
		row.add(p1);
		row.add(p2);
		row.add(p3);
		row.add(p2);
		row.add(p1);
		row.add(p3);
		row.add(p2);
		
		
	}
}

 

Android Custom dialogs

We are gonna try make something like this:

First off, start with the xml side of it. Open a new xml file in the layout folder. Name it something. It is in this xml file that we are going to design how it will look. Here is the xml for this one:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/layout_root"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffff"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp"
        android:orientation="horizontal" >
		
        <!-- This is for the info image -->
        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="20dp"
            android:src="@android:drawable/ic_menu_info_details" />

        <!-- Title -->
        <TextView
            android:id="@+id/tvmessagedialogtitle"
            android:layout_width="184dp"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:layout_marginTop="4dip"
            android:layout_weight="0.01"
            android:padding="8dp"
            android:text="Message"
            android:textColor="#343434"
            android:textSize="16dip"
            android:textStyle="normal"
            android:typeface="normal" />
    </LinearLayout>

    <!-- Underline with this bluish color -->
    <View
        android:layout_width="fill_parent"
        android:layout_height="2dip"
        android:background="#09adb9" />

    <!-- The message -->
    <TextView
        android:id="@+id/tvmessagedialogtext"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:layout_marginBottom="10dp"
        android:layout_marginTop="4dip"
        android:gravity="left"
        android:padding="8dp"
        android:text="Message"
        android:textColor="#343434"
        android:textSize="15dip"
        android:textStyle="normal"
        android:typeface="normal" />

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp"
        android:orientation="horizontal" >

        <!-- Yes button -->
        <Button
            
            android:id="@+id/bmessageDialogYes"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="4dip"
            android:layout_marginLeft="60dp"
            android:background="#ffffff"
            android:padding="8dp"
            android:text="Yes"
            android:textColor="#343434"
            android:textSize="13dip"
            android:textStyle="normal"
            android:typeface="normal" />

        <!-- No Button -->
        
        <Button
            android:id="@+id/bmessageDialogNo"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="4dip"
            android:layout_marginLeft="80dp"
            android:background="#ffffff"
            android:padding="8dp"
            android:text="No"
            android:textColor="#343434"
            android:textSize="13dip"
            android:textStyle="normal"
            android:typeface="normal" />
    </LinearLayout>

</LinearLayout>

By default, dialogs are set to come with a title, even when none is defined it still gives this blank grey area thats not cool at all. So we want to get rid of that. Ive got to say I found this at stackoverflow.com, I dont remember who it was, but I’m still going to give him/her credit here.
So go over to the res folder, under it there is a values folder then open styles.xml. Add the following entry between the tags.

<style name="FullHeightDialog" parent="android:style/Theme.Dialog">
   <item name="android:windowNoTitle">true</item>
	</style>

Now over at the java side:

Dialog dialog = new Dialog(this, R.style.FullHeightDialog); //this is a reference to the style above
dialog.setContentView(R.layout.yesnomessage); //I saved the xml file above as yesnomessage.xml
dialog.setCancelable(true);

//to set the message
TextView message =(TextView) dialog.findViewById(R.id.tvmessagedialogtext);
message.setText("You are about to call " + num + ". Are you sure you want to call?");

//add some action to the buttons
            String num = "0123456789"
            yes = (Button) dialog.findViewById(R.id.bmessageDialogYes);
            yes.setOnClickListener(new OnClickListener() {
				
				public void onClick(View v) {
					Intent callIntent = new Intent(Intent.ACTION_CALL);
					callIntent.setData(Uri.parse("tel: " + num));
					dialog.dismiss();
					startActivity(callIntent);
					
				}
			});
            
            no = (Button) dialog.findViewById(R.id.bmessageDialogNo);
            no.setOnClickListener(new OnClickListener() {
				
				public void onClick(View v) {
					// TODO Auto-generated method stub
					dialog.dismiss();
				}
			});
           
            dialog.show();

Thats it, so this is sort of the interface to my earlier blogpost on how to make a phone call from the app. If the user presses yes on the dialog it starts up an Intent that is passed to the phone app which is launched.

Till again….

 

Android animating buttons

Create an xml file in the drawable folder and select the root element as “selector”.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item 
        android:state_pressed="true"
        android:drawable="@drawable/toast"
        >
    </item>
     <item 
        android:state_focused="true"
        android:drawable="@drawable/smart"
        >
    </item>
    
      <item 
        android:drawable="@drawable/looking"
        >
    </item>

</selector>

In the layout xml file let the background of the button refer to the above xml:

<Button
        android:id="@+id/badd"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/custom" />

And now you have something that looks like:

When highlighted(focused):

And when you click on it: