Saturday 22 December 2012

My first Android Widget [Android Tutorial ] ^^


In this tutorial, we will discuss a very important facet of Android but much less used by developers. It is the development of Widget. We will create a small widget.
Firstly, I want to thank device-manual.blogspot.com for giving me the chance to write an article on this site. [Note Axon] Thank Nazim Benbourahla have written this tutorial [/ Score Axon ]

What is a Widget?

A widget is an element that you can place on your desktop. This element provides an opportunity to interact with the user, as well as easy access to certain information. In this large family Widget, we can distinguish two types:
  • The native widgets : Those natively installed with the phone, as your google search bar, clock, weather (on HTC for example) ..
  • Non-native widgets : These widgets are placed when installing new applications or added by the user.
Android provides an opportunity for all users to personalize their offices, there have widgets on the different offices.
Consider examples to understand more clearly what a Widget:
  • Google search bar.
  • Clock.
  • Shortcuts social networks.
  • Quick control of the MP3 player.

How to create a Widget

So this tutorial is not too difficult, some prerequisites are required. Including the basics of Android programming and the creation of a view in Android. [Note Axon] I advise you to go for a ride on the blog Nazim Benbourahla where there are many very interesting tutorials: http: / / www.tutos-android.com[/ Axon End Note]
Widget creation is available since version 1.5 of Android and this framework through the AppWidget .
This framework allows developers to create their own widgets. Each widget is an BroadcastReceivercoupled with a metadata XML file that describes the details of the Widget. You can also easily add a widget to an application that you have already created.
Here are the methods that you can override in the class AppWidget :
  • OnEnabled () : Call when your widget is created. Initializing your widget and its data can be made ​​here.
  • OnDisabled () : Call just before the widget is deleted and monitoring OnDeleted method ().
  • OnUpdates () : when the Call Widget requires an update to its interface.
  • OnDeleted () : Call when the widget is deleted.
  • OnReceive () : The default implementation of this method is to retrieve an event and calls the corresponding method (see above).
To create a widget, we need the following:
  • Subject AppWidgetProviderInfo : It describes:
    • The metadatas for a particular widget.
    • The AppWidget Layout .
    • Frequencies of updates widget
    • Class AppWidgetProvider (This file is defined in XML).
  • Implement the class AppWidgetProvider : This class defines how to conduct exchanges with your widget. It is mainly based on the events broadcast . So we need a BroadCast Receiver .
  • Of course a view for your widget

My first Widget "Hello Word"

We will move slowly in this tutorial and create our HelloWorldWidget.
To begin creating a project " HelloWorldWidget "with the following data:
  • Build Target / SDK Version: Version 2.2 .
  • Application Name: My Hello World Widget .
  • Package name: com.android.tuto.widget .
  • Activity created: HelloWorldWidgetActivity .
In your view file main.xml (res / layout), create a view with a textView as below.
 version="1.0" encoding="utf-8"?>
 xmlns:android="http://schemas.android.com/apk/res/android"
      android:layout_width="fill_parent"
      android:orientation="vertical"
      android:layout_gravity="center"
      android:layout_height="wrap_content">
 
 android:id="@+id/hello_world_widget"
      android:text="@string/hello_world_widget"
      android:layout_height="wrap_content"
      android:layout_width="wrap_content"
      android:layout_gravity="center"
      android:layout_marginTop="5dip"
      android:padding="10dip"
      android:textColor="#FFF"/>
 
So it looks like a simple file view file without any complexity.
now in the resource file strings.xml must add the variable hello_world_widget. which will:
 Version = "1.0"  encoding = "utf-8" ?> 
>
   name = "hello" > Hello World, HelloWorldWidgetActivity! </ string >
   name = "app_name" > My Hello World Widget < / string >
   name = "hello_world_widget" > Welcome to my Widget Hello World :) </ string >
 </ resources >
Earlier we were talking about an XML configuration file for the widget. So for this file simply create a file xml file in your res. In the latter create a my_widget_provider.xml which contain the following code:
 version="1.0" encoding="utf-8"?>
 xmlns:android="http://schemas.android.com/apk/res/android"
      android:minWidth="160dip"
      android:minHeight="80dip"
      android:updatePeriodMillis="10000"
      android:initialLayout="@layout/main"
/>
Little explanation about this code:
  • android: minWidth : Minimum width of the widget.
  • android: minHeight : Minimum height of the Widget.
  • android: updatePeriodMillis : Time to update the Widget.
  • android: initialLayout : A view that will be applied to the widget.
Modify the Java class ( HelloWorldWidgetActivity ). Which will simply code
package com.android.tuto.widget;
import android.appwidget.AppWidgetProvider;
 
public class HelloWorldWidgetActivity extends AppWidgetProvider {
}
Finally it is necessary to modify the manifest as follows:
 version="1.0" encoding="utf-8"?>
 xmlns:android="http://schemas.android.com/apk/res/android"
 package="com.android.tuto.widget" android:versionCode="1"
 android:versionName="1.0">
  android:icon="@drawable/icon" android:label="@string/app_name">
 
 
   android:name=".HelloWorldWidgetActivity"
   android:label="@string/app_name">
   
     android:name="android.appwidget.action.APPWIDGET_UPDATE" />
   
android:name="android.appwidget.provider" android:resource="@xml/my_widget_provider" />      
We will test this. Run the project. One has the impression that nothing is happening, simply because we just create a widget that will put on your desktop.
This requires the following steps:
1. Once on the home screen of the emulator, click and hold the Home button.
2. Click Widget
3. Another screen appears, simply choose our Widget
4. Which will:)
This is our first Hello World Widget is finished.

Conclusion

So this tutorial ends here, in the hope that it has helped to understand how the Widget and Framwork AppWidget. Hoping that this collaboration with tutomobile continue. Do not hesitate to contact me on my website or comment on this article.

No comments:

Post a Comment

Free Automatic Backlink