Building A VoIP Application In Android : Part 1

So you want to build a VoIP application and have no idea where to get started? Well, you have come to the right place. This tutorial will attempt to help you get started with building a VoIP application on Android, by no means is this tutorial an exhaustive end to end guide but rather a simple starting point to build upon. So lets get started.

There are quite a lot of libraries out there which help you build a VoIP application. Today in this tutorial I will be using PJSIP as our preferred choice. With the latest 2.2 version of PJSIP, it now supports object oriented programming. Sounds simple enough ? Well, its not. Building the library from the source files is a big pain and took me hours to finally get it done.  I have integrated OpenSSL in it as well for TLS support.

Building PJSIP :

Requirements :

1. Java, JDK.

2. Android SDK & Android NDK

3. SWIG

4.Pyparcer

SWIG provides glue/bindings between the C/C++ library and Java code by generating wrappers

Pyparcer is a python parser tool which is used by swig internally to parse the interface file before generating the bindings needed for the app, so make sure you have pyparcer installed before hand. We never use it directly but Swig invokes it automatically.

Steps:

1. Getting the latest PJSIP source code from their repository

2. This guide will assume the path of the downloaded PJSIP src code to be pjsip/src

3. Create a new config_site.h file under pjsip/src/pjlib/include/pj with the following text

#define PJ_CONFIG_ANDROID 1

#define PJ_AUTOCONF 1

#define PJ_IS_LITTLE_ENDIAN 1

#define PJ_HAS_SSL_SOCK 1

#include <pj/ config_site_sample.h>

4. Set the path to your Android NDK in the PATH variable

5. Ideally you should compile OpenSSL and integrate it with PJSIP, but I couldn't get it work. So I have used a port of OpenSSL for Android.

6. Build the above project using ndk-build command

7. Now go to pjsip/src folder and run the following command
./configure-android --with-ssl=/path/to/compiled-openssl-folder

8. If that was successful, run the following command
make dep && make clean && make

9. That should have built the needed lib files with OpenSSL support enabled

10. Now navigate to pjsip/src/pjsip-apps/src/swig folder

11. Add SWIG path to your PATH variable

12. Run the following command
make

If everything went well, you should now see a pjsua2.so file under pjsip/src/pjsip-apps/src/swig/java/android/libs/ folder.

That's all that is to be done to build PJSIP for Android. You should now be able to call the native library functions from your Java code. In Part 2 of the tutorial we will have a look at how to start using the compiled library from a demo Android app and basic functions of the PJSIP library. Hope you liked this tutorial, feel free to leave your comments below.

And yes, you should soon see a great VoIP application from me on the Playstore !

Hello after a gap ! Timely & Youtube apps are here !

So, I am now settling down with my new job as an Engineer for Novanet. So in the meanwhile, I have release two more of my Android experiments to github  but never had an opportunity to blog about them. So this blog post is just to inform that I will soon be back to blogging about my experiments with Android. In the meantime please find descriptions about the 2 projects I have posted on github recently :

1. Timely Text View

     So we all loved the animations in the Timely app, and I was really curious to know how they achieved it. I suck at UI badly, so I had almost very little hope of actually figuring out the logic behind it, that's when I stumbled upon an excellent blog post by Sriram Ramani. So with him explaining the logic behind the animation I just figured out the missing bits and pieces and made a simple ready to use library. Yes you can now have to those animations in your app.! The github link below should take you directly to the project.

Timely TextView : https://github.com/adnan-SM/TimelyTextView


2. Youtube app

    I had already written a few blog posts about Chat heads previously(Its here, in case you need them), so I always wanted to improve it, take it a step further and make it more useful. The result? A floating video player ! Just like the latest Youtube app. Hit the link below now to see the source code !

Chat-head Video : https://github.com/adnan-SM/ChatHead-Video-Youtube-Style-



Well, before I finish just so guys know I am working on VOIP related app for the new firm, so expect a few tutorials and knowledge sharing in the VOIP domain as well. That's all for now, stay tuned for further blog posts, I have plans for moving to a privately hosted domain and a WP site as well. Will update soon ! Don't forget to follow me on G+, so that you don't miss any tutorials !

Thanks again for all the support and the love. And yes thanks for 16k visits to the blog as well !  

Android Card Layout

I have been using the Card layout in my apps for quite a while now and I absolutely love the look they provide. I recently came across the updated Book My Show app which leverages the Card Layout as well and I liked it. So I decided to write a small tutorial on how to use the Card Layout in your app, I have tried to replicate the BMS app to some extent(Also we won't be using any external libraries to get the Card Layout). Here is what the end result will look like :

                        

Looks great, doesn't it ? So what are we waiting for lets get going. We are going to use 3 classes, 2 xml files and an image to achieve that.


Update : I have improved this tutorial by using nine patch images. I have the code updated on the Github Repo. I have now updated this tutorial to reflect the same. Now I set the background of the list_row.xml to the nine patch image.

                         

 


MainActivity.java

package com.example.testcardlayout;

import java.util.ArrayList;
import java.util.List;
import android.app.ActionBar;
import android.app.Activity;
import android.graphics.Color;
import android.graphics.drawable.ColorDrawable;
import android.os.Bundle;
import android.view.Menu;
import android.widget.ListView;

public class MainActivity extends Activity {

 private List rowItems;

    private static Integer[] images = {
            R.drawable.red,
            R.drawable.red,
            R.drawable.red,
            R.drawable.red,
            R.drawable.red,
            R.drawable.red,
            R.drawable.red,            
            R.drawable.red
    };

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  
  // Intialize and set the Action Bar Background to Holo Blue
  ActionBar actionBar = getActionBar();
  actionBar.setBackgroundDrawable(new ColorDrawable(Color.parseColor("#33b5e5" )));
  
  ListView lv = (ListView) findViewById(R.id.myList);
  rowItems = new ArrayList();
   
         String[] titles = {"Movie1","Movie2","Movie3","Movie4","Movie5","Movie6","Movie7","Movie8"};
         String[] descriptions = {"First Movie","Second movie","Third Movie","Fourth Movie","Fifth Movie",
           "Sixth Movie","Seventh Movie","Eighth Movie"};
        
                //Populate the List
         for (int i = 0; i < titles.length; i++) {
             RowItem item = new RowItem(images[i], titles[i], descriptions[i]);
             rowItems.add(item);
         }

         // Set the adapter on the ListView
         LazyAdapter adapter = new LazyAdapter(getApplicationContext(), R.layout.list_row, rowItems);
         lv.setAdapter(adapter);
 }

}

Let me explain what we did there :

1. Defined a set of images, I have all pointing to the same image in the drawable folder. These images are going to be used for the imageview. Typically in a real life scenario these images will be added dynamically from your server.
2. We then initialized the ActionBar and set the background to HOLO Blue.
3. We populated the rowItems list with RowItem objects(RowItem is a simple POJO class)
4. We then create an instance of the LazyAdapter(Our Custom Adapter) and  set it to our listview.
5. Also note we passed in the resource for each list item as R.layout.list_row. This defines what each list item will contain.

Now lets have a look at out Custom Adapter:

LazyAdapter.java

package com.example.testcardlayout;

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

import java.util.List;

public class LazyAdapter extends ArrayAdapter {

    Context context;

    public LazyAdapter(Context context, int resourceId, List items){
        super(context, resourceId, items);
        this.context = context;
    }

    public class ViewHolder{
        ImageView image;
        TextView title;
        TextView description;
    }


    public View getView(int position, View convertView, ViewGroup parent){
        ViewHolder holder;
        RowItem rowItem = getItem(position);

        LayoutInflater mInflater = (LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        if (convertView == null){
            convertView = mInflater.inflate(R.layout.list_row, null);
            holder = new ViewHolder();
            holder.image = (ImageView)convertView.findViewById(R.id.list_image);
            holder.title = (TextView)convertView.findViewById(R.id.title);
            holder.description = (TextView)convertView.findViewById(R.id.description);
            convertView.setTag(holder);
        } else
            holder = (ViewHolder)convertView.getTag();

        holder.image.setImageResource(rowItem.getImageId());
        holder.title.setText(rowItem.getTitle());
        holder.description.setText(rowItem.getDesc());

        return convertView;
    }

Here I implement a custom Adapter for our ListView. I have made use of the Holder pattern to make sure the performance of our ListView is maximum. But if none of this makes sense to you at the moment, don't worry I am planning to write a small tutorial on the same soon. For now trust me and agree with me on this.

There is one final java class which is the POJO class:

RowItem.java

package com.example.testcardlayout;

public class RowItem {
    private int imageId;
    private String title;
    private String description;

    public RowItem(int imageId, String title, String desc) {
        this.imageId = imageId;
        this.title = title;
        this.description = desc;
    }
    public int getImageId() {
        return imageId;
    }
    public void setImageId(int imageId) {
        this.imageId = imageId;
    }
    public String getDesc() {
        return description;
    }
    public void setDesc(String desc) {
        this.description = desc;
    }
    public String getTitle() {
        return title;
    }
    public void setTitle(String title) {
        this.title = title;
    }
    @Override
    public String toString() {
        return title + "\n" + description;
    }
}

Now let us have a look at the XML files which define our layouts :

1. activity_main.xml

This layout defines a plain simple ListView within a Linear Layout

2. list_row.xml

This layout defines a an ImageView and 2 TextViews to be displayed as an individual list item. Also look at how I set the background of this layout to @drawable/card_greenborder. That gives it the Card look.

That's all ! Congratulations, you have successfully built the Card Layout and can now use it in your app. A few things to note here though :

• I have used a Nine Patch drawable for better performance.
• This was just a simple demo of how to achieve the Card UI in your app without using any external libraries, you can customize the list_row.xml to suit your needs.
• A big thanks to Andrew Ruffalo for his help on the card background.
• Also beginning from this tutorial onwards I will be maintaining a Github repo to post all the source code I develop for tutorials.

Source Code :  Github

Feel free to drop me a comment below if you like my tutorial or if you run into any problem. I would really appreciate it if you could share this post if you liked it.

Shared Preferences In Android

So a lot of times you see a few of your favorite apps make the app more customisable and friendlier to you by letting you choose your favorite theme, font and whole bunch of other stuff. Ever wondered how they do it? Wished your apps had such personalisation? Well, look no further today in this tutorial I will be covering something called Shared Preferences in Android which is exactly the magic behind the personalisation of your app for each user.

Shared Preference - It is named so because the preference value  is shared between different components of your app. These are a lightweight mechanism to store key value pairs and use those data later on in the app. You see the bigger picture now don't you? Each of your choice(theme, font etc) are stored as a preference. Thus every time the app starts it reads the stored preferences and customises the entire app for you. Exciting, isn't it ? Enough of my ranting, lets go see how you can setup this awesome thing in your apps.


So to better demonstrate the concept, let me assume that we wish to save the username of the user, so that the next time he opens the app he doesn't need to type the password.

The code snippet below explains how to save a key value pair in a shared preference :

String USERNAME_KEY ="UserName";
String prefName = "userNamePref";

public void savePreferences(){

  SharedPreferences  prefs = getSharedPreferences(prefName, MODE_PRIVATE);
  SharedPreferences.Editor prefEditor = prefs.edit();
  prefEditor.putString(USERNAME_KEY, "user123");
  prefEditor.commit();

 }

Let me quickly explain what we did there :

1. Created a instance of SharedPreferences called 'prefs', using the getSharedPreferences() method. This method opens the preference named userNamePref if it already exists or creates a new preference if it doesn't exist.
2. Opened the editor to modify the value stored within the preference.
3. Inserted the username of the user(i.e. user123 in this case) into the preference.
4. Lastly, after you have edited the preference you always need to call the commit() on the Editor, else the preference value won't be stored. This is a very common mistake and I forget it quite a few times as well.

So now that you have created a new preference you would like to read it every time the user opens the app so that you can fetch the saved username and display it to the user. So let us see how we read it :

SharedPreferences userPrefs = getSharedPreferences(prefName, MODE_PRIVATE);
String userName = userPrefs.getString(USERNAME_KEY, "");

That's all there is to reading the SharedPreference, the getString() method takes 2 parameters : key and a default value which is returned if the shared preference is not found. In this case if the shared preference is not found then we return an empty string. That's all there is to a simple Shared Preference.

This Shared Preference is available only to components within your app. There are a few extra methods to change the accessibility of the shared preferences but I will be covering that in a follow-up post sometime next week. If you have any queries feel free to drop me a comment below !

Android Invisible App

Have you ever been in a situation where you wished you could have a transparent/invisible activity. May be the next killer spy app or probably a screen monitoring or recording app? Well guess what you are in luck ! In this tutorial I will be showing you how to create a transparent activity in Android. So lets see how we can create our hidden/invisible Activity.

All the magic is going to happen through a simple XML file, the styles.xml in your res folder(if the file already exists then just add the new style at the end) :

That's it, now you just need to apply this to the Activity which you want to be transparent in the AndroidManifest.xml

Congratulations, you now have a transparent activity ready for your spying app! So now whenever you start this activity the user won't see any UI as it is completely invisible. You can now perform any actions in the MainActivity.java and the user wont even know that there is something happening.

That's all great but with great power comes great responsibility, so there are two things which you need to make sure as an efficient Android developer :

1. Our transparent activity is still registering touches, so the user is going to be pissed at you if he can't see your activity but his touches don't get registered on the screen. So we would want to make our app to stop listening for touch events so that the user's touches are registered on the visible UI screen.

This is pretty simple as well, all we need to do is add a single line of code in our MainActivity.java

 getWindow().addFlags(WindowManager.LayoutParams.FLAG_NOT_TOUCHABLE);   // Do not listen for touch events

Basically what that does is, it tells Android to stop registering Touch Events for this activity. Now the user can click the screen as normal without even knowing that your activity is is there spying on him. :P

2. I would not recommend the use of this unless absolutely necessary because since the activity is invisible it will be running and hogging the resources from the device. You can call the finish() method but even after that the app will be in the background consuming resource until the OS kills it. So please make sure you use this only if absolutely necessary and there is no other way of achieving what you want.



That's all from my end, feel free to drop me a comment below if you have any queries !

How To Send SMS In Android

Hi guys, today in this tutorial we will be looking at how you can send SMS in Android through your next killer app you are designing.

You can use two methods to send out SMS :

1. SmsManager API

2. Built In SMS Application

Using the SmsManager API - using this API you can send SMS directly from within your apps. Here is how

SmsManager smsManager = SmsManager.getDefault();
 smsManager.sendTextMessage("1234567890", null, "SMS Text goes here!", null, null);

That's it, its that simple !
1.  The first parameter is where you send the mobile number to which you wish to send the SMS to.
2.  The 3rd parameter contains the text of the SMS to be sent out.
3.  We create an instance of the SmsManager and using the sendTextMessage method we send out the SMS.
This will send the message using the user's credits, so it is always advised to confirm with the user once before sending out the SMS.

Using the Built-In SMS App - using this method you can redirect the user from your application to the default Messaging app in the device where the user can proceed further as needed.

Here is how we can invoke the default SMS app :

Intent sendIntent = new Intent(Intent.ACTION_VIEW);
 sendIntent.putExtra("sms_body", "The SMS text goes here!"); 
 sendIntent.setType("vnd.android-dir/mms-sms");
 startActivity(sendIntent);

Here is what we did :

1.  Create a new intent with the action as Intent.ACTION_VIEW
2.  Set the body of the SMS using the putExtra method, make sure you put the key as " sms_body".
3.  Set the type to  "vnd.android-dir/mms-sms".
4.  Start the activity.

The user will now be redirected to his default/chosen SMS app. Also for both the above methods to work you need to have the Send SMS permission so add the following permission in the Android Manifest :

That's all there is to send out a SMS through your app. Also if your targeting devices on Android 4.4 and above make sure to check this link :  Android 4.4 SMS Changes

Feel free to drop me any comments/queries. 

Implemeting A Simple Splash Screen

A splash screen is basically the loading screen of the app. Some people use the splash screen to load the application while others use it to show branding. Today in this article we will be looking at how to create a simple splash screen which will be shown to the user's for a couple of minutes before the app is loaded.

This is the image I have chosen to display as my splash screen for my app. You can select any image you wish as your splash screen. Android doesn't provide any built in mechanism for displaying a splash screen, so we will be using a timer to display the image for a certain time period before we start the app. 

I will be using a simple XML and Java class to demonstrate the same, so let's see how we can create our Splash screen :

SplashScreenActivity.java

public class SplashScreenActivity extends Activity {

 // Show the Splash Screen for 3secs(3000ms)
 long START_UP_DELAY = 3000L;
 
 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.splashscreen);
  
  
  // Add delay so that Splash Screen is displayed for 3secs
  new Handler().postDelayed(new Runnable() {
   @Override
   public void run() {

    Intent loginPage = new Intent(SplashScreenActivity.this, LoginActivity.class);
    startActivity(loginPage);
   }
  }, START_UP_DELAY);
 }
 
 // Override the onPause method to kill this Activity, so that pressing the back button doesn't bring up this screen.
 @Override
 protected void onPause() {
  // TODO Auto-generated method stub
  super.onPause();
  this.finish();
 }
}

The corresponding XML file for the UI :

splashscreen.xml

That's it, its that simple to display a Splash Screen. The code is self explanatory with the comments but here is a gist of what we did above:

1.  The XML for the UI just contains an ImageView which shows the splash screen image.

2.  We created a new handler and basically made it wait for the required delay and then started the Login Activity(This is the activity you want to open after the splash screen)

3.  The more tricky part here in this tutorial is the code in the onPause(), we call this.finish() in the onPause. This is done so that we kill this activity once the splash screen is shown, because we don't want to be showing the splash screen image again if the user presses the back button.

A better approach instead of calling finish() would be to set the android:noHistory="true"  attribute for SplashScreenActivity in the AndroidManifest. Also make sure you set SplashScreenActivity.java as your Launcher activity so that when the user starts the app the splash screen is shown first.

Well, that's all there is from my end for this tutorial. If you have any queries feel free to drop me a comment below.