Android Webview Example

Dear All,

In this example, we are going to see Android Webview. By using Webview we can load the HTML Application inside your android application.

Step 1 :

Create simple Android project in your Eclipse (Hello Word Android Project).

Step 2 :

Create "assets" folder in project Main directory.

Step 3 :

Copy & Paste your .html(dot html) file into the assets folder or create new html file inside your assets folder.

Step 4 : 

In this example , I have taken simple web example using jQuery Mobile UI. Copied html,javascript and css into the assets folder.

Step 5 :

Create Webview control in your main.xml.

updated main.xml :

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:paddingBottom="@dimen/activity_vertical_margin"

    android:paddingLeft="@dimen/activity_horizontal_margin"

    android:paddingRight="@dimen/activity_horizontal_margin"

    android:paddingTop="@dimen/activity_vertical_margin"

    tools:context=".WebviewActivity" >

    <WebView

        android:id="@+id/webView1"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:layout_alignParentLeft="true"

        android:layout_alignParentTop="true" />

</RelativeLayout>

Step 6 : 

Modified MainActivity.java :

package com.seedev.webviewsample;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.webkit.WebView;

public class MainActivity extends Activity {
WebView myWebView;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);

//Find a view that was identified by the id attribute from XML.
myWebView = (WebView) findViewById(R.id.webView1);

//set the javascript enable true
myWebView.getSettings().setJavaScriptEnabled(true);

//Load the index.html file into the webview. 
myWebView.loadUrl("file:///android_asset/index.html");

}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.webview, menu);
return true;
}
}

Step 7 :

Now, Run the application in the Emulator/Device.

Download source code from Github.

Adding Background Music to Android App

In this post, Let see how to add the background music to Android Project. In this example we are going to see adding background music to our Hello World Android Project.

Download Source from Github.

Step 1 :

Create new Android Project (Hello World Android Project) in Eclipse.

Step 2 :

In this example, Create Main Activity name called, BackgroundMusic.

Step 3 :

Modify BackgroundMusic.java file :

package com.seedev.backgroundmusicapp;

import android.media.MediaPlayer;
import android.os.Bundle;
import android.app.Activity;
import android.util.Log;
import android.view.Menu;

public class BackgroundMusic extends Activity {

public static final String TAG = "BackgroundMusic APP";

// Create MediaPlayer object;
MediaPlayer myPlayer;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_background_music);
Log.d(TAG, "onCreate");
}
/*
* During onResume event , we have to get the resource and start the media player.
*/
@Override
protected void onResume() {
Log.d(TAG, "onResume");
// create Media player for given resource id.
myPlayer = MediaPlayer.create(getApplicationContext(),
R.raw.avicii_vs_thomas_newson);

// start or resume the playback
myPlayer.start();

super.onResume();
}

/*
* During onPause event , we have to stop palying the music & also release the resource.
*/
@Override
protected void onPause() {
Log.d(TAG, "onPause");
if (myPlayer != null) {
if (myPlayer.isPlaying()) {//To Check whether mediaplayer is playing or not.
// Stops playback after playback has been stopped or paused.
myPlayer.stop();
// After release(), the media object no longer available.
myPlayer.release();
}
}
super.onPause();
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.background_music, menu);
return true;
}

}

Step 4 : 

Now run the application in the emulator/device. We can here background music in our Hello World Android Project.

Let see you all in other beautify android sample application.

Adding Button to Android Application

Today let see , How to add a button to our android application. Button is a very essential control that will be used to trigger various events in android application based on user action. Now let see list of steps to add a simple button to our android application & associate an event.

If you wish to download sample source code click here.

Steps to follow to Add Button in Android Application :

Step 1 : 

       Create Hello World Android Project in eclipse, If you don't know how click here.

Step 2 :

       For this example, I have created project ButtonSampleApp inside my eclipse workspace.

Step 3 :

       Open the main activity xml(activity-mani.xml) file as shown below.

Step 4 :

       Now in this step I will explain how to add button to our application. We can add button to our application in two ways.

•  Drag and Drop button from the Graphical View.  (Explained in Steps 4a)
•  Directly add button control to Activity XML file. (Explained in Steps 4b)

Step 4a.1 : Drag and Drop from Graphical View

       Drag and drop a Button from palette as shown in below screen.

Step 4a.2 : 

        You can change the button property. Select the button and open the property perspective. Refer the below image to open property perspective.

Step 4a.3:

       In below image of button property, where the Android button properties can be modified as we wish (like Button Text, Style, Hint, Colour,  Content Description etc.).

     
Step 4b.1 : Add the button using  XML file:

       Add <Button /> control in the xml file.

Step 4b.2 :

       Add Unique id for this button as you wish, this ID is essential to relate to Android Layout.We also add layout_width, layout_height to button control.

       <Button

        android:id="@+id/button1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"/>

Step 4b.3 :

       Now we are going to add the label to the button using android:text. This Label will be seen in your device/emulator.

        <Button

        android:id="@+id/button1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="Button" />

Step 4b.4 :

      In this example, I am adding button below to my textview and also centerHorizontal is true.

        <Button

        android:id="@+id/button1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_below="@+id/textView1"

        android:layout_centerHorizontal="true"        

        android:text="Button" />

Step 6 : 

       After adding the button in  any of the above methods , Final Updated Activity xml file will look as below.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:paddingBottom="@dimen/activity_vertical_margin"

    android:paddingLeft="@dimen/activity_horizontal_margin"

    android:paddingRight="@dimen/activity_horizontal_margin"

    android:paddingTop="@dimen/activity_vertical_margin"

    tools:context=".MainActivity" >

    <TextView

        android:id="@+id/textView1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="@string/hello_world" />

    <Button

        android:id="@+id/button1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_below="@+id/textView1"

        android:layout_centerHorizontal="true"

        android:text="Button" />

</RelativeLayout>

Step 7 :

       Until now, we have added the button to our application. But if you run on the application in the Emulator/Device, we can just see the button appearing on the screen. On click of the button , nothing will happen, Since there is no event associated to the Button.

      In Upcoming steps I will explain how to add event to the button we have added.

Step 8 :

      In this sample, I am going to add the onClick event to the button. On click of the button we will  display an welcome message using Toast Widget.

Step 9 :

      To change the text/label of the button from "Button" to "Welcome".

<Button

        android:id="@+id/button1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_below="@+id/textView1"

        android:layout_centerHorizontal="true"

        android:text="Welcome" />

Step 10 :

      Adding the onClick event to the button. On click of the button I am calling the welcomeMsg method in the Mani Activity class.

<Button

        android:id="@+id/button1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_below="@+id/textView1"

        android:layout_centerHorizontal="true"

        android:onClick="welcomeMsg"

        android:text="Welcome" />

Step 11 :

     Added a welcomeMsg method to the Main Activity class.

 public void welcomeMsg(View v){

           //Insert your code here

}

Step 12 :

       Now, Adding welcome message to the method.

public void welcomeMsg(View v){

       Toast.makeText(this.getApplicationContext(), "Welcome to android application development", Toast.LENGTH_LONG).show();

}

Step 13 :

       Now run the application in the Emulator/Device. On click of the button you will get welcome message. 

Step 14 :

       Now, You learned how to add a button to your android application and associate event to it.

   
   

Android Launcher Icon Generator - Online

Hi all, we can create our android launcher icon for our android application in online. It is very simple process.

To create Launcher Icon for Android APP click here. You can create Launcher icon by using the existing image, clipart , or text.

You can create also create Notification icons,Action bar and tab icons and more Click here.

Displaying Image / Picture Android Sample

 In this example, let see how to add Image in the Android Project below Text View.

Download source code from Github.

Steps to Displaying Image / Picture in Android Project :

Step 1 :

       Create new android project in eclipse. If you don't know how to create a android project in eclipse, Click here.

Step 2 :

      Copy the image you wish to display into res/drawable-mdpi folder. Refer below Screen shot, In this example, I have added the dubai_fireworks_2014.jpg.

       Note: Most of Android device have a generic restriction of maximum App Size 16MB, Kindly choose your images accordingly. (Preferred Size less than 2MB). If you are using bigger images resize using ImageReducer.

Step 3 (a) : Adding ImageView control in the XML :

• Now open your main activity xml file, under layout/activity_main.xml.Add following ImageView control to layout/activity_main.xml.

                <ImageView />

• Then, You have to add the width and height property to the ImageView control.

                <ImageView 

                       android:layout_width="wrap_content"

                       android:layout_height="wrap_content" />

• After that you have specify your image source. Give ctrl+space (Both mac and windows users)  after android:src="@drawable/,  you will get list of image files in the drawable folder.Select your image name then press enter.

               <ImageView 

                       android:layout_width="wrap_content"

                       android:layout_height="wrap_content"                              

                       android:src="@drawable/dubai_fireworks_2014" />

Step 3 (b) : Adding image using Eclipse Graphical View :

• Drag and drop ImageView from Images & Media tab to activity_main.xml Graphical view. 

• It will pop up the Resource Chooser window.Select the image from Project Resource, then press ok button.

Step 4 : 

      After step 3 successfully done, you can see the picture similar to this. Screen shot is taken from Graphical View.

Step 5 :

       In our example, I am displaying image below the text view, So I have added the android:layout_below="@id/textview1". textview1 is id of the TextView.

Step 6 :

     Updated activity_main.xml file:

           <TextView

                 android:id="@+id/textview1"

                 android:layout_width="wrap_content"

                 android:layout_height="wrap_content"

                 android:text="@string/hello_world" />

          <ImageView 

               android:layout_width="wrap_content"

               android:layout_height="wrap_content"

               android:src="@drawable/dubai_fireworks_2014"

               android:layout_below="@id/textview1"/>

Step 7 :

      For each ImageView, you should add contentDescription. Now You will get warning near the content Description in the eclipse. 

Step 8 :       

      But you can run your project in the emulator with out any problem. Let see how to remove the warning message. 

Step 9 :

      Add android:contentDescription="", to the ImageView.

 <ImageView 

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:src="@drawable/dubai_fireworks_2014"

        android:layout_below="@id/textview1"

        android:contentDescription="Dubai Fireworks 2014"

        />

Step 10 :

       After added the content Description. Again you will get warning message near the content description. [Warning Message : Hardcoded string "Dubai Fireworks 2014", should use @string resource].

Step 11 :

      Let see how to remove this warning message from eclipse. Now select the "Dubai Fireworks 2014" text in the android:contentDescription attribute. 

Step 12 :

      Next select, Refactor  -> Android -> Extract Android String.

Step 13 : 

      It will pop up the below window. Next click ok button. Now our warning message will get disappear from eclipse screen. Replace by R.String is refer name for your string.

Step 14 :

      It will add new string entry in the String.xml file. Refer that string name in the ContentDescription.

• Updated String.xml file :

             <?xml version="1.0" encoding="utf-8"?>

                  <resources>

                      <string name="app_name">Image Sample</string>

                      <string name="action_settings">Settings</string>

                      <string name="hello_world">Hello world!</string>

                      <string name="dubai_fireworks_2014">Dubai Fireworks 2014</string>

                  </resources>

•  Updated activity_main.xml file :

             <TextView

                    android:id="@+id/textview1"

                    android:layout_width="wrap_content"

                    android:layout_height="wrap_content"

                    android:text="@string/hello_world" />

            <ImageView 

                    android:layout_width="wrap_content"

                    android:layout_height="wrap_content"

                    android:src="@drawable/dubai_fireworks_2014"

                    android:layout_below="@id/"

                    android:contentDescription="@string/dubai_fireworks_2014"/>

Step 15 :

      Now your application run in Android Emulator.Click here to see how to run application in emulator.

Step 16 :

      Now we have developed Display image in the Android Project.

How to create Android Virtual Device / Create Emulator in Eclispe

This post help you to create a new Android Virtual Device in your Eclipse .

Steps to create Android Virtual Device :

Step 1 :

       In eclipse Window -> Android Virtual Device Manager.

(or)  On click of the Android Virtual Device Manager icon in the eclipse tool bar.

Step 2 :

       It will open Android Virtual Device Manager Window. It will display all the virtual device you already have in your system. In the below screen shot i have some of virtual device to test my application.

Step 3 :

       Click on the New button to create new Virtual Device. It will open Create new Android Virtual Device(AVD) window.

Step 4 :

• AVD Name - Your Android Virtual Device Name.
• Device -  Select your Target Device.
• Target - Select your Target Device Android Version.
• CPU/ABI - Select Intel Atom(x86) or ARM.
• Internal Storage - Give internal storage space for AVD.
• SD Card  - Give SD Card storage space.

Step 5 :

       Click OK button create Android Virtual Device. We created virtual device/emulator for testing our android application. Please refer below image.

Step 6 :

       Now you learned how to create Android Virtual Device / Emulator in eclipse.

Simple Android App Development - Step By Step

I have started learning Android. In the below post I have posted in step by steps to create your first android App. It will be interesting to create and use the app you developed. Sorry to trouble you with my poor english. This is my first post. I am very happy for that.I love to do coding. We can learn and improve our self from what we love.

Download Source Code from GitHub.

Steps to Create Simple Android Project : 

Step 1 : 

      Download Latest ADT (Android Development Tool) ZIP from Android Developer Tool.

Step 2 :

       Downloaded ZIP File contains Eclipse and SDK.

Step 3 :

       In the Eclipse folder, for Mac users will find Eclipse.app ,while the Windows user will find Eclipse.exe. Open the Eclipse. Select the workspace to work, then click ok button.

Step 4 :

      To Create First Project : File -> Android Application Project. In Next Window, You have to give your Application Name, Project Name(To show your project in eclipse). Package Name is unique across all the package installed on your mobile.  

Step 5:

       Next we want to select the Minimum & Target SDK version. I have selected Minimum SDK version API 8 (for Least Device Capability). Target SDK version API 18 (Latest Device Capability).

Step 6 :

      Click on the Next button. You will get below screen. Don't change any thing in this screen now. Just click Next again.

Step 7 :
   
      Next you will get below screen. In that screen creating launch icon for your project (This Icon will appear in your emulator and Device). In this example,  I have changed Shape to Circle and Foreground Scaling to Center.

Step 8 :

      Next you will get below screen. Now just click Next Button.

   

Step 9 :

      Next you will get below screen. This is final screen to create your android project.  Just click on the Finish button.

Step 10 :

• Expand your project will find res/ folder. Inside res/ folder you will find folder called layout/. Our Main activity xml is inside layout/ folder. 
• Just open the activity_main.xml. You will find the Hello World! text. 

Step 11 :

      On click on the activity_main.xml tab,you find the xml tags. Inside the RelativeLayout you will find TextView.

<TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="@string/hello_world" />

Step 12 :

     Ctrl+click(Windows users) / cmd +click(mac users) on the @string/hello_world. It will open the string.xml.

String.xml file :

<?xml version="1.0" encoding="utf-8"?>

<resources>

    <string name="app_name">SampleAPP</string>

    <string name="action_settings">Settings</string>

    <string name="hello_world">Hello world!</string>

</resources>

Step 13 :

      Change text Hello world! to Welcome to my first Android App!.

Modified String.xml file :

<?xml version="1.0" encoding="utf-8"?>

<resources>

    <string name="app_name">SampleAPP</string>

    <string name="action_settings">Settings</string>

    <string name="hello_world">Welcome to my first Android App!</string>

</resources>

Step 14 :   

      To run the application in Emulator,  Right click on the project ->Run As -> Android Application.

Step 15 :

      It will pop up the Android Device Chooser window. Select Launch a new android virtual device option.Then select the device to run the application. If you don't have Android Virtual Device, Click here to see how to create AVD.

Step 16 :

       Now your application run in Android Emulator.

          

Step 17: 

       Now we have developed our first android app.