RSS

Category Archives: Android tutorials

How to’s in Android programing

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
  2. <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>
    
  3. in the drawable folder (any of them drawable – hdpi, mdpi…) add a new xml known as custom_tab_indicator.xml as referenced above
  4. <?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.

 
2 Comments

Posted by on September 28, 2012 in Android, Android tutorials, Code

 

Tags: , , ,

The ViewPager

So this is the first on the series on android open source libraries that I have come across. The ViewPager is used in alot of apps. It allows you to swipe across the screen to change the layout or move to the next page, sort of like tabs but not really. Its used in alot of apps, Google play store app uses it.

Im going to use Jake Wharton ViewPagerIndicator. 

  1. Go over to Git here or at the site, then look for a download button. Its going to a zip folder, unzip somewhere you will remember (in your worlkspace is good).
  2. Open eclipse, in your workspace, go to file -> Import. A dialog box will appear prompting you, under android select ‘Existing Android Code into Workspace’
  3. Browse into the folder you just unzipped and select ‘library’
  4. (I kno I skipped a number). Click ok and ok again in the next dialog.
  5. Start up your android project if you havent already. Now at the Project Explorer on your left, Right click on the folder of your application and choose properties. It should take you to this dialog. Choose android on the left.
  6.  Click on the ‘Add’ button then choose Library – the folder we imported into your workspace.
  7. If you are getting an error – “Found 2 versions of android-support-v4.jar in the dependency list but not all the versions are identical (check is based on SHA-1 only at this time).”. Go over to your ‘libs’ folder and replace android-support-v4.jar file with that in the library project you imported. Go to Project -> Clean.

We are now good to go. There are two things involved here: a ViewPager and an Indicator. The ViewPager is the main page while the indicator is sort of like the tab (in this case).

    1. In your project add a new xml file. (main_activity.xml – it was the default)
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">

    <com.viewpagerindicator.TabPageIndicator
        android:id="@+id/indicator"
        android:layout_height="wrap_content"
        android:layout_width="fill_parent"
        />
    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        />
</LinearLayout>
    1. Also create xml file – one or more that will be the different pages that a user can swipe through
<!-- page.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" >

    <TextView
        android:id="@+id/tvTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Title"
        android:textAppearance="?android:attr/textAppearanceLarge" />
<a href="https://mycodeandlife.files.wordpress.com/2012/09/device-2012-09-27-204357.png"><img src="https://mycodeandlife.files.wordpress.com/2012/09/device-2012-09-27-204357.png?w=200" alt="" title="device-2012-09-27-204357" width="200" height="300" class="aligncenter size-medium wp-image-300" /></a>
    <TextView
        android:id="@+id/tvdesc"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Description" />

</LinearLayout>

On the java side we have MainActivity.java

package com.gilo.viewpagerexample;

import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.os.Parcelable;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.TextView;

import com.viewpagerindicator.TabPageIndicator;

public class MainActivity extends Activity{
        //these are the titles that will appear on the "tabs"
	final String[] page_titles = new String[]{"Home", "Me", "Apps", "Android", "About"};
	//this will go the description TextView
        final String[] desc = new String[]{
			"This is the homepage the first one you will see.",
			"I'm pretty much me for now I run this really cool blog you should check it out at mycodeandlife.wordpress.com",
			"I build appps mostly for fun. If you ever want an app just holla",
			"This is the android section",
			"This blog is my journal through life in code and development"
	};
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //Instantiating the adapter
        GiloAdapter mAdapter = new GiloAdapter(this);

        //instantiate the Views
        ViewPager mPager = (ViewPager)findViewById(R.id.pager);
        mPager.setAdapter(mAdapter);

        TabPageIndicator mIndicator = (TabPageIndicator)findViewById(R.id.indicator);
        mIndicator.setViewPager(mPager);
    }

    private class GiloAdapter extends PagerAdapter{

    	Context context;

    	public GiloAdapter(Context c){
    		this.context = c;
    	}

    	//This is the number of pages -- 5
		@Override
		public int getCount() {
			// TODO Auto-generated method stub
			return page_titles.length;
		}

		@Override
		public boolean isViewFromObject(View v, Object o) {
			// TODO Auto-generated method stub
			return v.equals(o);
		}

		//This is the title of the page that will apppear on the "tab"
		public CharSequence getPageTitle(int position) {
            return page_titles[position];
        }

		//This is where all the magic happen
		public Object instantiateItem(View pager, int position) {
			final LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    		View v = inflater.inflate(R.layout.page, null, false);

    		TextView title = (TextView)v.findViewById(R.id.tvTitle);
    		TextView description = (TextView) v.findViewById(R.id.tvdesc);

    		title.setText(page_titles[position]);
    		description.setText(desc[position]);

    		//This is very important
    		( (ViewPager) pager ).addView( v, 0 );

    		return v;
		}

    	@Override
    	public void destroyItem(View pager, int position, Object view) {
    		((ViewPager) pager).removeView((View) view);
    	}

    	@Override
    	public void finishUpdate(View view) {
    	}

    	@Override
    	public void restoreState(Parcelable p, ClassLoader c) {
    	}

    	@Override
    	public Parcelable saveState() {
    		return null;
    	}

    	@Override
    	public void startUpdate(View view) {
    	}

    }

}

The ViewPage takes an Adapter in this case I’ve written GiloAdapter. The most important method is instantiateItem(View pager, int position) which selects which Layoout to use. I used a LayoutInflator but with only one Layout.(The current library uses fragments). If you are familiar with Adapters from ListViews then its almost the same idea. The destroyItem() is also important that you override or your app will force close with weird error messages.

Lastly we are going to use the default style in the library, so in the manifest add this in the manifest in your Activity tag:

android:theme="@style/Theme.PageIndicatorDefaults"

The .MainActivity in my app

<activity
            android:name=".MainActivity"
             android:theme="@style/Theme.PageIndicatorDefaults"
            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>

And we have

Thats it, next blogposts we’ll change the colors(customise), maybe look at another indicator.
Drop a comment if you found this helpful or if you got some error you can’t figure out, and I’ll try and have a look.

 
12 Comments

Posted by on September 27, 2012 in Android, Android tutorials, Code

 

Tags: , , , ,

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);
    }
    
}

 
Leave a comment

Posted by on September 7, 2012 in Android, Android tutorials, Code

 

Tags: , ,

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

 
1 Comment

Posted by on August 16, 2012 in Android, Android tutorials, Code

 

Tags: , , ,

Android app that makes a phone call

The other day, it something like a week ago, I thought of if Varsity(something I’m building) could make a call. So I got down to digging out information. Anyway so, its all got to do with intents. A while ago I did, an email intent, I am mentioning this because its really similar. Basically when describing the intent you pass in the parameter Intent.ACTION_CALL.
Maybe to understand this you have to put into consideration what an intent is. Intents are the little messages that are passed in between Activities, say like in this case between our app and the phone app. We first have to describe this – that it will launch the call.

String num="0123456789";
Intent callIntent = new Intent(Intent.ACTION_CALL);
callIntent.setData(Uri.parse("tel: " + num));
startActivity(callIntent);

That should do it.

 
Leave a comment

Posted by on August 16, 2012 in Android, Android tutorials

 

Android Emulator’s Proxy settings

hey guys, this is gonna be a short one. If you are behind a proxy and you’ve wrote this cool app that accesses the internet and just cant get it to run on the emulator, then you are in the right place, well if you aren’t then a little won’t hurt you.
Changing the proxy settings on eclipse or the skd manager doesn’t change the proxy on the emulator, so what you got to do is to start the emulator.
Locate the settings – either press Menu -> settings at the home screen or from the launcher look for settings.

or

Go to Wireless and Networks -> Mobile Networks -> Access Point Names -> Telkila

Change the proxy and port and username and password if you have one. Another thing: DON’T forget to save. Hit menu then save:

 
Leave a comment

Posted by on July 25, 2012 in Android tutorials

 

Creating a StatusBar Notification

The following is the code for creating a status bar notification; it also includes a Dialog box, but that’s not in the scope of this blogpost:

import android.app.Activity;
import android.app.Dialog;
import android.app.Notification;
import android.app.NotificationManager;
import android.app.PendingIntent;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.TextView;

public class StatusBar extends Activity implements OnClickListener {

	Button notify, dialog;
	NotificationManager nm;

	static final int uniqueId = 32125;

	protected void onCreate(Bundle b){
		super.onCreate(b);
		setContentView(R.layout.status);

		notify = (Button) findViewById(R.id.bNotify);
		dialog = (Button) findViewById(R.id.bDialog);
		nm = (NotificationManager) getSystemService(NOTIFICATION_SERVICE);
		nm.cancel(uniqueId);

		notify.setOnClickListener(this);
		dialog.setOnClickListener(this);
	}

	public void onClick(View v) {
		switch(v.getId()){
		case R.id.bNotify:
			Intent intent = new Intent(this, StatusBar.class);
			PendingIntent pi = PendingIntent.getActivity(this, 0, intent, 0);

			String body = "You have been notified by gilo";
			String title = "gilo";

			Notification n = new Notification(R.drawable.ic_launcher,body, System.currentTimeMillis());
			n.setLatestEventInfo(this, title, body, pi);
			n.defaults=Notification.DEFAULT_ALL;
			nm.notify(uniqueId, n);
			finish();
			break;
		case R.id.bDialog:
			Dialog d =new Dialog(this);
			d.setTitle("Oh Yeah!!");
			TextView tv =new TextView(this);
			tv.setText("This is a dialog");

			d.setContentView(tv);
			d.show();
			break;
		}
	}
}