Friday, June 24, 2011

Simple Dialogs and Popups in Android

Following Article shows creating a Simple Dialogs and Pop ups in an Android Application.

Following are the Three Types of Dialogs illustrated in this Sample Application.
  • Alert Confirmation
  • Dialog with Select List
  • Progress Dialog
Following is the basic screenshot of the Application:


From the Above Screen Shot, on Clicking the each of the buttons i.e. Alert, Select List and Progress Dialog, their corresponding Dialogs are displayed.

Following is the Screen Showing Alert Confirmation Dialog:


Following is the Screen Showing Select List Dialog:


Following is the Screen Showing Progress Dialog:



Start with creating a Sample Application in Android (in Eclipse off course ) and following is the respective layout and Activity code for the Application:

Layout Code i.e. main.xml

<?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">
    
<TextView  
   android:layout_width="fill_parent" 
   android:layout_height="wrap_content" 
   android:text="@string/hello"/>
    
<Button 
android:text="Show Alert Sample" 
android:id="@+id/btnAlertSample" 
android:layout_width="wrap_content" 
android:layout_height="wrap_content">
</Button>
<Button 
android:text="Show List Dialog Sample" 
android:id="@+id/btnListSample" 
android:layout_width="wrap_content" 
android:layout_height="wrap_content">
</Button>
<Button 
android:text="Show Progressbar Sample" 
android:id="@+id/btnProgress" 
android:layout_width="wrap_content" 
android:layout_height="wrap_content">
</Button>
</LinearLayout>

Following is the Activity Code for the Application (DialogSample.java):

package com.mayuri.dialogs.sample;

import android.app.Activity;
import android.app.AlertDialog;
import android.app.ProgressDialog;
import android.content.DialogInterface;
import android.os.Bundle;
import android.view.View;
import android.widget.Button; 
import android.widget.Toast;
import android.view.View.OnClickListener;
public class DialogSample extends Activity {
Button btnAlert, btnList, btnProgress;
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);        
      btnAlert = (Button)this.findViewById(R.id.btnAlertSample);
      btnList = (Button)this.findViewById(R.id.btnListSample);
      btnProgress = (Button)this.findViewById(R.id.btnProgress);     
       
      btnAlert.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
AlertDialog.Builder builder = new AlertDialog.Builder(DialogSample.this);
builder.setMessage("Are you sure you want to exit?")
      .setCancelable(false)
      .setPositiveButton("Yes", new DialogInterface.OnClickListener() {
          public void onClick(DialogInterface dialog, int id) {
              DialogSample.this.finish();
          }
      })
      .setNegativeButton("No", new DialogInterface.OnClickListener() {
          public void onClick(DialogInterface dialog, int id) {
               dialog.cancel();
          }
      });
AlertDialog alert = builder.create();
alert.show();
}
});       
   btnList.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
final CharSequence[] items = {"Mango", "Orange", "Banana"};
AlertDialog.Builder listBuilder = new AlertDialog.Builder(DialogSample.this);
listBuilder.setTitle("Select A Fruit");
listBuilder.setItems(items, new DialogInterface.OnClickListener() {
   public void onClick(DialogInterface dialog, int item) {
       Toast.makeText(getApplicationContext(), items[item], Toast.LENGTH_SHORT).show();
   }
});
AlertDialog alertList = listBuilder.create();
alertList.show();
}
}); 
       
   btnProgress.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
ProgressDialog progressDialog = ProgressDialog.show(DialogSample.this, "Progress Dialog Example",                      "Please wait...", true);
}
});   

    }
}


Above code is very simple as onClick listeners is added to each of the button and the corresponding dialog is called.

I hope this Article was useful.

That's All from my end for now.

Happy Coding :-))

~Mayuri


Tuesday, June 21, 2011

Simple Example on How to Create Menus In Android

Following article will be helpful in creating custom Menus in Android.

Menus in Android Phones are those which Appears on clicking the leftmost button, which is at the left side of the home screen, Menus Appear at the bottom most area of the Screen, Example as illustrated in the following screen shot.



Following Example will help you to create your own custom menus required for your Application, (Check Screenshot below)



Start with creating the xml file named menus.xml in <application_name>\layout\ folder for defining the Menu List as follows:

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@+id/menu_new"          
          android:title="New" />
          
     <item android:id="@+id/menu_about"         
          android:title="About" />
               
    <item android:id="@+id/menu_help"         
          android:title="Help" />
</menu>

In the above xml, I have simply defined three menus, 'New', 'About' and 'Help', also defined their respective Title and Ids.

Next Step is to call this file in our main Activity Class, this is done as shown in the code for the main Activity class as follows:


package com.mayuri.menuexample;


import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuInflater;
import android.view.MenuItem;
import android.widget.Toast;

public class MenuSample extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);         
       
    }
    
    @Override
    public boolean onCreateOptionsMenu(Menu menu)
    {
        MenuInflater menuInflater = getMenuInflater();
        menuInflater.inflate(R.layout.menus, menu);
        return true;
    } 
    
    @Override
    public boolean onOptionsItemSelected(MenuItem item)
    {
       
        switch (item.getItemId())
        {
        case R.id.menu_about:
            Toast.makeText(MenuSample.this, "You Clicked About", 3000).show();
            return true;
        case R.id.menu_help:
            Toast.makeText(MenuSample.this, "You Clicked Help", 3000).show();
            return true;
        case R.id.menu_new:
            Toast.makeText(MenuSample.this, "You Clicked New", 3000).show();
            return true;
        default:
            return super.onOptionsItemSelected(item);
        }
    }
}

The method onCreateOptionsMenu is required to call the defined menus.xml file with the help of the class 'MenuInflater'.

Then an 'onOptionsItemSelected' is defined on each menu items to get the selection events for the each of the menus and the corresponding Toast Popup is displayed for all the three menu selected events.

Following screenshot shows the Diplayed Toast Popup on the selection of the menu 'Above'


This was the basic example of creating custom menus in Android, Hope it was useful, So thats all from my end for now!

Happy Coding..  :-))

~Mayuri

Wednesday, June 1, 2011

Basic Example of Including a Google Map In Your Application

Google Maps is one of the best Web Mapping Services offered by Google. As I'm the biggest fan of Google's products and services, I love to use Google Maps. It has the wide rage of Functionalites, Options, events, types etc to suit our requirements.

Following code is the simple example to include Google Maps in our Applications.

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"> </script>
<script type="text/javascript">
var map;
function initialize() {
  var myLatlng = new google.maps.LatLng(21.18099395, 72.81892314999999);  
  var myOptions = {
    zoom: 15,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }  
  map = new google.maps.Map(document.getElementById("mymap"), myOptions);
  var marker = new google.maps.Marker({
      position: myLatlng,
      title:"You Are Here Now!!"
  });    
  marker.setMap(map);    
}
</script>
</head>
<body onload="initialize()">
  <div id="mymap" style="width:1000px; height:500px;"></div>
</body>
</html>

The output of the same is as follows:

Explanation:

To start with with HTML part, we need to define a container to include Google maps in our HTML page. In this example I have taken a div by the name "mymap" as the base container to include Google map. The Height, width or any other css properties of the div can be set as per the requirements.

Now comming to the Javascript section, we need to include the Google Maps source js as follows:
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"> </script>

The new instance of the LatLng is created by taking the values of Latitude and Longitude as the parameters, here I have taken the values of Latitude and longitude of my current location, it could vary as per the location.

Then the options array by the name "myOptions" is initilized, by the following parameters:

  • 'zoom' includes the zooming levels of the maps. the more is the zoom level the more we go towards the interior of the location or place.
  • 'center' indicates the center most position of the Map, here I have given the parameters as my current location so the specified location will become the center most location.
  • 'mapTypeId' here I'm using ROADMAP, other options also includes SATELLITE, HYBRID and TERRAIN.

Thus, the map object is initialized by the above specified parameters and the id of the div container of the HTML page.

Then the marker object is placed in the map at the Latitude and the Longitude position specified with the ToolTip specified (see screenshot) as "You Are Here Now!!".

This was the very basic example, of the Map with the marker, you could have multiple markers, events to the markers, Popups etc, and other multiples things to suit your requirements.

Thats all for now from my end.

Happy Coding!! :-))

~ Mayuri



Best Car pool Android Application Best Car Pool Application Source Code Download Here



Best Social Network Cordova Ionic Application Best Social Networking Source Code Cordova Ioinc Application Download Here


Best Android Application, Android Restaurant System Best Android Restaurant Application Source code download here


Best Android Application Android Chat Source code download Android Chat Source code download


Best Android Quiz Source Code Download Best Android Quiz Source Code Download here

More and Lots of useful Android source codes here Best Android Source codes download here


Animated Container in Flutter

Please check this flutter video tutorial for detailed example and implementation of Animated Container in Flutter.