Android - Widgets Tutorial

A widget is a small gadget or control of your android application placed on the home screen. Widgets can be very handy as they allow you to put your favourite applications on your home screen in order to quickly access them. You have probably seen some common widgets, such as music widget, weather widget, clock widget e.t.c
Widgets could be of many types such as information widgets, collection widgets, control widgets and hybrid widgets. Android provides us a complete framework to develop our own widgets.

Widget - XML file

In order to create an application widget , first thing you need is AppWidgetProviderInfo object, which you will define in a separate widget XML file. In order to do that, right click on your project and create a new folder calledxml. Now right click on the newly created folder and create a new XML file. The resource type of the XML file should be set to AppWidgetProvider. In the xml file, define some properties which are as follows −
<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>

Widget - Layout file

Now you have to define the layout of your widget in your default XML file. You can drag components to generate auto xml.

Widget - Java file

After defining layout, now create a new JAVA file or use existing one, and extend it with AppWidgetProvider class and override its update method as follows.
In the update method, you have to define the object of two classes which are PendingIntent and RemoteViews. Its syntax is −
PendingIntent pending = PendingIntent.getActivity(context, 0, intent, 0);
RemoteViews views = new RemoteViews(context.getPackageName(), R.layout.activity_main);
In the end you have to call an update method updateAppWidget() of the AppWidgetManager class. Its syntax is −
appWidgetManager.updateAppWidget(currentWidgetId,views);
A part from the updateAppWidget method, there are other methods defined in this class to manipulate widgets. They are as follows −
Sr.NoMethod & Description
1onDeleted(Context context, int[] appWidgetIds)
This is called when an instance of AppWidgetProvider is deleted.
2onDisabled(Context context)
This is called when the last instance of AppWidgetProvider is deleted
3onEnabled(Context context)
This is called when an instance of AppWidgetProvider is created.
4onReceive(Context context, Intent intent)
It is used to dispatch calls to the various methods of the class

Widget - Manifest file

You also have to declare the AppWidgetProvider class in your manifest file as follows:
<receiver android:name="ExampleAppWidgetProvider" >
   
   <intent-filter>
      <action android:name="android.appwidget.action.APPWIDGET_UPDATE" />
   </intent-filter>
   
   <meta-data android:name="android.appwidget.provider"
      android:resource="@xml/example_appwidget_info" />
</receiver>

Example

Here is an example demonstrating the use of application Widget. It creates a basic widget applications that will open this current website in the browser.
To experiment with this example, you need to run this on an actual device on which internet is running.
StepsDescription
1You will use Android studio to create an Android application under a package com.example.sairamkrishna.myapplication. While creating this project, make sure you Target SDK and Compile With at the latest version of Android SDK to use higher levels of APIs.
2Modify src/MainActivity.java file to add widget code.
3Modify the res/layout/activity_main to add respective XML components
4Create a new folder and xml file under res/xml/mywidget.xml to add respective XML components
5Modify the AndroidManifest.xml to add the necessary permissions
6Run the application and choose a running android device and install the application on it and verify the results.
Following is the content of the modified MainActivity.java.
package com.example.sairamkrishna.myapplication;

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;
import android.widget.Toast;

public class MainActivity extends AppWidgetProvider{
   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.tutorialspoint.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.button, pending);
         appWidgetManager.updateAppWidget(currentWidgetId,views);
         Toast.makeText(context, "widget added", Toast.LENGTH_SHORT).show();
      }
   }
}
Following is the modified content of the xml res/layout/activity_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:paddingLeft="@dimen/activity_horizontal_margin"
   android:paddingRight="@dimen/activity_horizontal_margin"
   android:paddingTop="@dimen/activity_vertical_margin"
   android:paddingBottom="@dimen/activity_vertical_margin"
   tools:context=".MainActivity"
   android:transitionGroup="true">
   
   <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Tutorials point"
      android:id="@+id/textView"
      android:layout_centerHorizontal="true"
      android:textColor="#ff3412ff"
      android:textSize="35dp" />
      
   <Button
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Widget"
      android:id="@+id/button"
      android:layout_centerHorizontal="true"
      android:layout_marginTop="61dp"
      android:layout_below="@+id/textView" />

&lr;/RelativeLayout>
Following is the content of the res/xml/mywidget.xml.
<?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>
Following is the content of the res/values/string.xml.
<resources>
   <string name="app_name">My Application</string>
   <string name="hello_world">Hello world!</string>
   <string name="action_settings">Settings</string>
</resources>
Following is the content of AndroidManifest.xml file.
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
   package="com.example.sairamkrishna.myapplication" >
   
   <application
      android:allowBackup="true"
      android:icon="@mipmap/ic_launcher"
      android:label="@string/app_name"
      android:theme="@style/AppTheme" >
      <receiver android:name=".MainActivity">
      
      <intent-filter>
         <action android:name="android.appwidget.action.APPWIDGET_UPDATE"></action>
      </intent-filter>
      
      <meta-data android:name="android.appwidget.provider"
         android:resource="@xml/mywidget"></meta-data>
      
      </receive>
   
   </application>
</manifest>
Let's try to run your application. I assume you have connected your actual Android Mobile device with your computer. To run the app from Android studio, open one of your project's activity files and click Run Eclipse Run Icon icon from the tool bar. Before starting your application, Android studio will display following window to select an option where you want to run your Android application.
Anroid Widget Tutorial
Select your mobile device as an option and then check your mobile device which will display your default screen −
Anroid Widget Tutorial
Go to your widget section and add your created widget to the desktop or home screen. It would look something like this −
Anroid Widget Tutorial
Now 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. After pressing the button , the following screen would appear −
Anroid Widget Tutorial
Note. By just changing the url in the java file, your widget will open your desired website in the browser.

Comments

Post a Comment

Popular posts from this blog

Android - TextureView Tutorial

Image
If you want to display a live video stream or any content stream such as video or an OpenGL scene, you can use TextureView provided by android in order to do that. In order to use TextureView, all you need to do is get its SurfaceTexture.The SurfaceTexture can then be used to render content. In order to do this, you just need to do instantiate an object of this class and implement SurfaceTextureListener interface. Its syntax is given below: private TextureView myTexture ; public class MainActivity extends Activity implements SurfaceTextureListener { protected void onCreate ( Bundle savedInstanceState ) { myTexture = new TextureView ( this ); myTexture . setSurfaceTextureListener ( this ); setContentView ( myTexture ); } } After that, what you need to do is to override its methods. The methods are listed as follows − @Override public void onSurfaceTextureAvailable ( SurfaceTexture arg0 , int arg1 , int arg2 ) { } @Override
Read more

Android - JetPlayer Tutorial

Image
The Android platform includes a JET engine that lets you add interactive playback of JET audio content in your applications. Android provides JetPlayer class to handle this stuff. In order to Jet Content , you need to use the JetCreator tool that comes with AndroidSDK. The usage of jetCreator has been discussed in the example. In order to play the content created by JetCreator, you need JetPlayer class supported by android. In order to use JetPlayer , you need to instantiate an object of JetPlayer class. Its syntax is given below − JetPlayer jetPlayer = JetPlayer.getJetPlayer(); The next thing you need to do is to call loadJetFile method and pass in the path of your Jet file. After that you have to add this into the Queue of JetPlayer. Its syntax is given below − jetPlayer . loadJetFile ( "/sdcard/level1.jet" ); byte segmentId = 0 ; // queue segment 5, repeat once, use General MIDI, transpose by -1 octave jetPlayer . queueJetSegment ( 5 , - 1 , 1 , - 1 , 0
Read more

Android - Notifications

Image
A  notification  is a message you can display to the user outside of your application's normal UI. When you tell the system to issue a notification, it first appears as an icon in the notification area. To see the details of the notification, the user opens the notification drawer. Both the notification area and the notification drawer are system-controlled areas that the user can view at any time. Android  Toast  class provides a handy way to show users alerts but problem is that these alerts are not persistent which means alert flashes on the screen for a few seconds and then disappears. To see the details of the notification, you will have to select the icon which will display notification drawer having detail about the notification. While working with emulator with virtual device, you will have to click and drag down the status bar to expand it which will give you detail as follows. This will be just  64 dp  tall and called normal view. Above expanded form can have
Read more