Thursday 4 September 2014

HB Blog 16: Simple Android Widgets. [Tutorial]

Widgets are an essential aspect of home screen customization.
Widgets could be of many types such as information widgets, collection widgets, control widgets and hybrid widgets. 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.
The screenshot below shows the Music App Widget.
Refer the below link for complete sample code:-
Download Sample Code
Download Apk File

The below screenshots shows my sample widget.I prefer less graphical UI for my sample widget as it makes more understandable and code remains simple.But,at the same time remember to have attractive UI for your widget,as it attracts user more.
Creation of application widgets needs following files:-
1)Widget - XML file
2)Widget - Layout file
3)Widget - Java file
4)Widget - Manifest file

Though, I have provide complete sample code, I will still give some important code snippets.

1)Widget - XML file
1
2
3
4
5
6
7
8
9
//Place Xml file into res->Xml folder.
<?xml version="1.0" encoding="utf-8"?>
<appwidget-provider
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:minWidth="146dp"
   android:updatePeriodMillis="0"
   android:minHeight="146dp"
   android:initialLayout="@layout/activity_main">
</appwidget-provider>

2)Widget - Layout file
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
//The layout that you want to design for widget
 <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:text="@string/website"
        android:textAppearance="?android:attr/textAppearanceMedium" />
    <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:layout_marginLeft="18dp"
        android:text="@string/btn_follow" />

3)Widget - Java file
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
//Extend AppWidgetProvider class and override one or more of the onUpdate(Context, AppWidgetManager, int[]), onDeleted(Context, int[]), onEnabled(Context) or onDisabled(Context) methods to implement your own AppWidget functionality. 
 @Override
    public void onUpdate(Context context, AppWidgetManager appWidgetManager, int[] appWidgetIds)
    {
        for(int i = 0; i < appWidgetIds.length; i++){
            int currentWidgetId = appWidgetIds[i];
            String url = "http://www.harshalbenake.blogspot.com";
            Intent intent = new Intent(Intent.ACTION_VIEW);
            intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
            intent.setData(Uri.parse(url));
            PendingIntent pending = PendingIntent.getActivity(context, 0, intent, 0);
            RemoteViews views = new RemoteViews(context.getPackageName(), R.layout.activity_main);
            views.setOnClickPendingIntent(R.id.button1, pending);
            appWidgetManager.updateAppWidget(currentWidgetId, views);
            Toast.makeText(context, "widget added", Toast.LENGTH_SHORT).show();
        }
    }

4)Widget - Manifest file

1
2
3
4
5
6
7
8
9
//most important change in manifest file is that, there is not need for any activity, only receiver will be needed.
 <receiver android:name="MainActivity" >
            <intent-filter>
                <action android:name="android.appwidget.action.APPWIDGET_UPDATE" />
            </intent-filter>
            <meta-data
                android:name="android.appwidget.provider"
                android:resource="@xml/mywidget" />
        </receiver>
After completing your coding and running it on your device, you can go to your widget section and add your created widget to the dsktop or homescreen.

Now if you are using above sample, just tap on the widget button that appears , to launch the browser. But before that please make sure that you are connected to the internet.

No comments:

Post a Comment