10 January 2016

Make homescreen widget of android app

What we will do?
-> We will make a sample homescreen widget with text, image and button.

What we will need?
  • activity_main.xml
  • mywidget.xml
  • Changes in MainActivity.java
  • Changes in AndroidManifest.xml
Step 1 : Create a new application. Go to File->New->Android Application Project.

Step 2 : Give name as SampleWidget and package name as com.mia.samplewidget. Then click Next continuously. 
Click Finish

Step 3 : Go to activity_main.xml. Add an ImageView, TextView and Button in a RelativeLayout,

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:background="#FFFFFF"
   android:transitionGroup="true">


   <ImageView
       android:id="@+id/imageView1"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_alignParentLeft="true"
       android:layout_alignParentTop="true"
       android:src="@drawable/logo" />


   <TextView
       android:id="@+id/textView"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_alignLeft="@+id/imageView1"
       android:layout_alignRight="@+id/imageView1"
       android:layout_below="@+id/imageView1"
       android:text="Made In Android"
       android:textColor="#000000"
       android:textSize="35dp" />


   <Button
       android:id="@+id/button1"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_alignBottom="@+id/textView"
       android:layout_alignParentRight="true"
       android:layout_alignTop="@+id/imageView1"
       android:layout_marginLeft="22dp"
       android:layout_marginTop="29dp"
       android:gravity="center"
       android:background="#6E6E6E"
       android:layout_toRightOf="@+id/imageView1"
       android:text="Visit Site" />


</RelativeLayout>

Step 4 : Create a new folder in res folder. Right-click on res->New Folder and name it as xml

Step 5 : Right click on xml->Android XML File and name it as mywidget.xml.
Code for mywidget.xml is given below

mywidget.xml
<?xml version="1.0" encoding="utf-8"?>
<appwidget-provider 
   xmlns:android="http://schemas.android.com/apk/res/android" 
   android:minWidth="250dp" 
   android:updatePeriodMillis="0" 
   android:minHeight="146dp" 
   android:initialLayout="@layout/activity_main">
</appwidget-provider>

Step 6 : Open MainActivity.java from src->com.mia.samplewidget

MainActivity.java
package com.mia.samplewidget;

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.Button;
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.madeinandroid.net";
         
         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(); 
      }   
   }
}

Step 7 : Open AndroidMainfest.xml and alter the default code to the below code.

AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.mia.samplewidget"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="21" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name" >
          
         <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>
      </receiver>
        
    </application>

</manifest>

Step 8 : Run the application. Then go to Widgets section from your Emulator/Mobile and drag the widget to the homescreen.
Github download
Stay Tuned with Made In Android

Previous Page Next Page Home
Top