Posted By Our Mentors
Amreen Khan
Android Developer
animesh bansal
iphone App Developer
Devendra chouksey
Android Developer
Dilip Saket
IOS apps developer
Hemraj Jhariya
iOS Developer
Jaihind singh Rajput
Smart Phone App Dev
Mujahid khan
Android developer
Narendra Yadav
android developer
Narinder Gupta
Mobile App Architect
Pradeep singh Thakur
Mobile App Architect
Sanjay Sharma
Andriod Developer
Shakti Rajpal
IT Architect
Soniya Vishwakarma
iPhone App Developer
Sunil Raghuwanshi
iPhone App Developer
Supriya Kapse
Senior developer
View current Topics
How to create Analog Clock Widget in android ? Android
Hi friends app widget is very impotant feature of android . Widgets are an essential aspect of home screen customization. You can imagine them as "at-a-glance" views of an app's most important data and functionality that is accessible right from the user's home screen. Users can move widgets across their home screen panels, and, if supported, resize them to tailor the amount of information within a widget to their preference.
Posted By: Sanjay Sharma Date: 13 Apr 2013 View: 321
      Rate This !!


In this post we disscss on following topic:

1. What is Widget?

2. What is AppWidgetProvider?

3. What is Alalog clock ?

4. How to create a analog clock widget ?

5. How can we see and set widget in to Home screen ?

6. How to remove widget from home screen ?

 

1. What is Widget?                                                                         

App Widgets are miniature application views that can be embedded in other applications (such as the Home screen) and receive periodic updates. These views are referred to as Widgets in the user interface, and you can publish one with an App Widget provider. An application component that is able to hold other App Widgets is called an App Widget host.

 

2. What is AppWidgetProvider?

This Class defines the basic methods that allow you to programmatically interface with the App Widget, based on broadcast events. Through it, you will receive broadcasts when the App Widget is updated, enabled, disabled and deleted.

 

3. What is Alalog clock ?

This widget display an analogic clock with two hands for hours and minutes.

4. How to create a analog clock widget ?

For create analog clock widget follow the below instructions:

aCreate a xml file which define layout of your widget in this layout we take a analog clock as a UI control :

            widget_layout.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:padding="@dimen/widget_margin" >

 

    <AnalogClock

        android:id="@+id/widget_aclock"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"          

        android:layout_centerHorizontal="true"

        android:layout_centerVertical="true" />

   

   

</RelativeLayout>

         

b. Create a xml file for in xml folder of your application and define appwidget-provider  tag in it and set your widget layout in it . So your file look like .

          widget_info.xml           

 

<appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"

    android:minWidth="294dp"

    android:minHeight="72dp"

    android:initialLayout="@layout/widget_layout"

    android:updatePeriodMillis="0"

    android:resizeMode="horizontal|vertical">

</appwidget-provider>

c. Now create a java file which extends AppWidgetProvider class and override its onUpdate (Context context, AppWidgetManager appWidgetManager,int[] appWidgetIds) method.

 

 

 

       @Override

       public void onUpdate(Context context, AppWidgetManager appWidgetManager,

                     int[] appWidgetIds) {

             

              super.onUpdate(context, appWidgetManager, appWidgetIds);

             

              final int N = appWidgetIds.length;

 

        for (int i=0; i<N; i++) {

             

                     int appWidgetId = appWidgetIds[i];             

                    

               // Intent to launch AnalogActivity

               Intent intent = new Intent(context, AnalogActivity.class);

              

               intent.putExtra(AppWidgetManager.EXTRA_APPWIDGET_ID, appWidgetId);        

              

               // This line show this intent is different from previous intent.

               intent.setData(Uri.parse("tel:/"+ (int)System.currentTimeMillis()));             

              

               // Creating a pending intent, which will be invoked when the user

               // clicks on the widget

               PendingIntent pendingIntent = PendingIntent.getActivity(context, 0, intent,PendingIntent.FLAG_UPDATE_CURRENT);             

      

               // Get the layout for the App Widget

               RemoteViews views = new RemoteViews(context.getPackageName(), R.layout.widget_layout);         

              

               // adding  onClick listener of clock

               views.setOnClickPendingIntent(R.id.widget_aclock, pendingIntent);

      

               // Tell the AppWidgetManager to perform an update on the current app widget

               appWidgetManager.updateAppWidget(appWidgetId, views);

              

        }

       

       

          

       }

      

 

d. Now create a activity class and get intent in it and get Widgetid  from bundle by the use of AppWidgetManager.

 

 

Intent intent = getIntent();

       Bundle extras = intent.getExtras();

      

      

       if (extras != null) {

           mAppWidgetId = extras.getInt(

                   AppWidgetManager.EXTRA_APPWIDGET_ID,

                   AppWidgetManager.INVALID_APPWIDGET_ID);

         

                                                  }

e . In Androidmanifest.xml  and register the AnalogTimeProvider receiver for updating the time of our clock:

<receiver android:name="AnalogTimeProvider" >

            <intent-filter>

                <action android:name="android.appwidget.action.APPWIDGET_UPDATE" />

            </intent-filter>

            <meta-data android:name="android.appwidget.provider"

                android:resource="@xml/widget_info" />

        </receiver>

 

5. How can we see and set widget in to Home screen ?

After creating analog clock widget we can see it after following below instructions:

a.  Go to home screen and long press

first.png

 

b. After long press you can see a dialog is open with heading add to Home screen  and several option in list like below screen :

second.png

 

c.  Click on the widget option of list  then you can see an other dialog is open  with heading Choose widget this dialog show the list of all available widget of your phone. We can also see our widget Analog clock. choose your widget  :

 

third.png

 

d. You can see your analog widget is now showing in your home screen :

fourth.png

 

 

6. How to remove widget from home screen ?

a.  For removing your widget long press on the widget which you want to delete you can see in bottom of screen a box in open like below :

five.png

 

b. Move your widget upon that box now your widget color is convert into red color then release the widget into the box.

six.png

 

c. Now you can see your home screen  is cleare :

seven.png

 

That’s it.

 

Now we create a demo project for well understanding of above discution:

Step 1:

We create a sample demo project:

Create a project:

Project Name : VincentAnalogClock

Package Name : com.vit.analog

Activity Name:AnalogActivity.java

 

Step 1 :

Create a xml file which define layout of your widget in this layout we take a analog clock as a UI control :

            widget_layout.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:padding="@dimen/widget_margin" >

 

    <AnalogClock

        android:id="@+id/widget_aclock"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"          

        android:layout_centerHorizontal="true"

        android:layout_centerVertical="true" />

   

   

</RelativeLayout>

 

Step 2.

 Create a xml file for in xml folder of your application and define appwidget-provider  tag in it and set your widget layout in it . So your file look like .

          widget_info.xml           

 

<appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"

    android:minWidth="294dp"

    android:minHeight="72dp"

    android:initialLayout="@layout/widget_layout"

    android:updatePeriodMillis="0"

    android:resizeMode="horizontal|vertical">

</appwidget-provider>

Step 3.

Now create a java file which extends AppWidgetProvider class and override its onUpdate (Context context, AppWidgetManager appWidgetManager,int[] appWidgetIds) method.

         AnalogTimeProvider.java

package com.vit.analog;

 

import android.app.PendingIntent;

import android.appwidget.AppWidgetManager;

import android.appwidget.AppWidgetProvider;

import android.content.Context;

import android.content.Intent;

import android.net.Uri;

import android.widget.RemoteViews;

 

public class AnalogTimeProvider extends AppWidgetProvider {   

         

         

          @Override

          public void onUpdate(Context context, AppWidgetManager appWidgetManager,

                             int[] appWidgetIds) {

                  

                   super.onUpdate(context, appWidgetManager, appWidgetIds);

                  

                   final int N = appWidgetIds.length;

 

        for (int i=0; i<N; i++) {

         

                             int appWidgetId = appWidgetIds[i];                   

                            

                  // Intent to launch AnalogActivity

                  Intent intent = new Intent(context, AnalogActivity.class);

                 

                  intent.putExtra(AppWidgetManager.EXTRA_APPWIDGET_ID, appWidgetId);                 

                 

                  // This line show this intent is different from previous intent.

                  intent.setData(Uri.parse("tel:/"+ (int)System.currentTimeMillis()));          

                 

                  // Creating a pending intent, which will be invoked when the user

                  // clicks on the widget

                  PendingIntent pendingIntent = PendingIntent.getActivity(context, 0, intent,PendingIntent.FLAG_UPDATE_CURRENT);           

         

                  // Get the layout for the App Widget

                  RemoteViews views = new RemoteViews(context.getPackageName(), R.layout.widget_layout);                

                 

                  // adding  onClick listener of clock

                  views.setOnClickPendingIntent(R.id.widget_aclock, pendingIntent);

         

                  // Tell the AppWidgetManager to perform an update on the current app widget

                  appWidgetManager.updateAppWidget(appWidgetId, views);

                 

        }

       

       

          

          }

         

 

         

         

}

 

Step 4 . Open your Androidmanifest.xml  and register the AnalogTimeProvider receiver :

<receiver android:name="AnalogTimeProvider" >

            <intent-filter>

                <action android:name="android.appwidget.action.APPWIDGET_UPDATE" />

            </intent-filter>

            <meta-data android:name="android.appwidget.provider"

                android:resource="@xml/widget_info" />

        </receiver>

 

Step 5:

Create a layout for our AnalogActivity class.:

  activity_analog.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:background="@drawable/water26" >

   

    <TextView

        android:id="@+id/analog_widget"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_centerHorizontal="true"

        android:layout_centerVertical="true"

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

   

   

   

       

</RelativeLayout>

Step 6: Create a Activity which get Intent and extact id of widget from it by the help of AppWidgetManager.

                AnalogActivity.java

package com.vit.analog;

 

import android.app.Activity;

import android.appwidget.AppWidgetManager;

import android.content.Intent;

import android.os.Bundle;

import android.view.Menu;

 

public class AnalogActivity extends Activity {

     private int mAppWidgetId = 0;

 

    @Override

    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_analog);

         

          Intent intent = getIntent();

    Bundle extras = intent.getExtras();

   

   

     if (extras != null) {

        mAppWidgetId = extras.getInt(

                AppWidgetManager.EXTRA_APPWIDGET_ID,

                AppWidgetManager.INVALID_APPWIDGET_ID);

      

    }

         

    }

   

 

   

    @Override

    public boolean onCreateOptionsMenu(Menu menu) {

        getMenuInflater().inflate(R.menu.activity_main, menu);

        return true;

    }

}

When you run you will see following screen :

eight.png

 

 

Now your widget is created you can see it with the hep of  above maitaion instruction.

 

 

That’s it

Hope fully this post is usefull for u.

Any queries and suggestions are welcome.

 

Regards,

Sanjay Sharma

Vincent IT Inc


Posted Queries