Customising the ViewPager

So we found out how to use the ViewPager here and so next is how to customise the ViewPager indicator to match with your app’s theme – all the colors and stuff. If you haven’t already, please check the previous blog post. This is the continuation

We are going to build a style, which we will reference in the manifest as the Activity’s theme.

1. Go to the values folder in you project  and add the following entry

<resources>
    <style name="StyledIndicators" parent="@android:style/Theme.Light.NoTitleBar">
        <item name="vpiTabPageIndicatorStyle">@style/CustomTabPageIndicator</item>
    </style>
    
    <style name="CustomTabPageIndicator" parent="Widget.TabPageIndicator">
        <item name="android:background">@drawable/custom_tab_indicator</item>
        <item name="android:textColor">#FF555555</item>
    </style>

</resources>

2. in the drawable folder (any of them drawable – hdpi, mdpi…) add a new xml known as custom_tab_indicator.xml as referenced above

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- Non focused states -->
    <item android:drawable="@drawable/custom_tab_indicator_unselected" android:state_focused="false" android:state_pressed="false" android:state_selected="false"/>
    <item android:drawable="@drawable/custom_tab_indicator_selected" android:state_focused="false" android:state_pressed="false" android:state_selected="true"/>

    <!-- Focused states -->
    <item android:drawable="@drawable/custom_tab_indicator_unselected_focused" android:state_focused="true" android:state_pressed="false" android:state_selected="false"/>
    <item android:drawable="@drawable/custom_tab_indicator_selected_focused" android:state_focused="true" android:state_pressed="false" android:state_selected="true"/>

    <!-- Pressed -->
    <!-- Non focused states -->
    <item android:drawable="@drawable/custom_tab_indicator_unselected_pressed" android:state_focused="false" android:state_pressed="true" android:state_selected="false"/>
    <item android:drawable="@drawable/custom_tab_indicator_selected_pressed" android:state_focused="false" android:state_pressed="true" android:state_selected="true"/>

    <!-- Focused states -->
    <item android:drawable="@drawable/custom_tab_indicator_unselected_pressed" android:state_focused="true" android:state_pressed="true" android:state_selected="false"/>
    <item android:drawable="@drawable/custom_tab_indicator_selected_pressed" android:state_focused="true" android:state_pressed="true" android:state_selected="true"/>

</selector>

The images are here. Download them and place in your drawable folder. You can photoshop them to get the right color you want.

Lastly at the manifest, add the following theme in your activity tag.

 android:theme="@style/StyledIndicators"

And So you should have:

 <activity
            android:name=".MainActivity"
             android:theme="@style/StyledIndicators"
            android:label="@string/title_activity_main" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

Here is a screenshot.

 

Fonts

TextView and views and Buttons have a method setTpeface that allows you to set a font. But first download a font or if you already have one thats alright. Place the font file (.otf , .ttf) into the assets folder of your project.

We create a font object by accessing the assets folder. So at the onCreate method (or just when you want it):

Typeface font = Typeface.createFromAsset(this.getAssets(),"AnnabelScript.ttf");

Make sure you have the full name of the font including the extension.

Next just apply the font to the Views that you want.

        TextView tv1 = (TextView) findViewById(R.id.textView1);
        TextView tv2 = (TextView) findViewById(R.id.textView2);
        TextView tv3 = (TextView) findViewById(R.id.textView3);
        TextView tv4 = (TextView) findViewById(R.id.textView4);
       
        tv1.setTypeface(font);
        tv2.setTypeface(font);
        tv3.setTypeface(font);
        tv4.setTypeface(font);

The whole page:

package com.example.myblog;

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

public class MainActivity extends Activity {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        TextView tv1 = (TextView) findViewById(R.id.textView1);
        TextView tv2 = (TextView) findViewById(R.id.textView2);
        TextView tv3 = (TextView) findViewById(R.id.textView3);
        TextView tv4 = (TextView) findViewById(R.id.textView4);
        
        Typeface font = Typeface.createFromAsset(this.getAssets(),"AnnabelScript.ttf");
        
        tv1.setTypeface(font);
        tv2.setTypeface(font);
        tv3.setTypeface(font);
        tv4.setTypeface(font);
    }
    
}

 

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….