How to create Android Clock Widget ~ WithU Technologies

Create an Android Clock Widget

Today we are going to create an Android clock widget with the help of Android Studio IDE. This is a beginner’s Android app development project. Though this is not an app, but to learn the process of android app development, a better start is with android widgets.

Assumptions

Before heading towards the widget development process, we need to ensure that you already completed certain steps which are required to start this project and they are:

Android Studio IDE and SDK tools download and installation.

Basic java knowledge, which can be easily gathered from our post named: Android App Development with hello world project (Though it is not mandatory as we also discuss those java things here)

(If you want to learn about the steps above, then just click on them and they will redirect you to their respective step by step description)

Step 1. Creating a .9png file

Open your Adobe Photoshop and create a new image background with following values:

Image Height: 1-1.5 CM

Image Width : 2-3 CM

And create a simple image like this

Go to Android Asset Studio

Choose your image and customize it according to your needs.

Download the zip file and extract it which contain a res

Step 2. Creating a new project in Android studio IDE

Open Android Studio IDE.

Click on New project and Name it. Select the project location and Click Next.

Select the minimum SDK. (I recommend to set it up to Android 4.0 Ice Cream sandwich).

Select Add no activity in the next window and Click next.

Name your activity without any space and I recommend to name it with lowercase letters.

Click on Finish. Then the Android studio build the project and load the components of the project so it may take few seconds.

Let me remind you that today we are going to create a basic widget which will show you the current time on your Android device Home screen.

Step 3. Editing the Widget layout

To create a new widget java class, follow the path given:

Your application name > src > main > java(Right Click on java and Click on NEW) > Widget > app widget.

Name your app widget and Click on Finish. (It automatically creates all the required files which are able to run a widget on your Android device home screen. The limitations of default widget files are:

- They contain default values especially for the layout, which are needed to be recoded.

- They did not feature the .9png backgrounds, as they are defaulted by some colour values for background.

- And Most importantly the widget does not have any function by default, to do. That is the java class is functionless. So, it only demonstrate in the home screen as a colour patch if started.

So, first of all we have to edit the layout file. You can edit it according to your wish by changing the text size, colour and also by changing the alignment, gravity and padding of the widget.

Open the layout file through the following path:

ClockWidget\app\src\main\res\layout\clock_widget.xml

(The application name and activity name will vary in your case if you changed both of them during new project creation)

Change the android:background by adding the drawable .9png images

Now the .9png is to be needed, so we need the file which was downloaded in STEP 1, which contain res folder.

Open that res folder and copy all the drawable files.

Now, navigate to your project location and then go to the following path in your computer explorer:

ClockWidget\app\src\main\res

Paste all the drawable files inside the res folder of your project.

Save all the files in Android studio and re-open the project.

Now, you have all sizes of .9png files which are ready to be supported in any android device.

You can also edit the values from our project. The layout file code are given below.

Now you have to edit the widget update provider file and it is generally named as Yourapplicationname_info

Navigate to the following path:

ClockWidget\app\src\main\res\xml\clock_widget_info.xml

Change the value of android:updatePeriodMillis="1"

Step 4. Editing the AndroidManifest.xml file

Moving on to our next step where we code the AndroidManifest.xml file, where we declare a broadcast receiver function which will process the Clock widget updates. By default the functions were already created by Android studio widget creator, but still you have to modify and add few items which are can be checked out from the following image or from the code given below.

The code is given below which you have to type it by yourself if you really want to learn Android app development.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.rjchakraborty.clockwidget" ><application
android:icon="@drawable/ic_launcher"
android:label="@string/app_name"
android:theme="@style/AppTheme" ><receiver android:name=".ClockWidget"
android:label="@string/app_name">
<intent-filter>
<action android:name="android.appwidget.action.APPWIDGET_UPDATE" />
</intent-filter><meta-data
android:name="android.appwidget.provider"
android:resource="@xml/clock_widget_info" />
</receiver>
</application></manifest>

Step 5. Adding functions to our widget

This is the most important function in the whole process, as by now you are only editing the pre setuped files with default values.But now you have to add functions to the widget to work it as a Digital clock and for that, you have to add a bunch of codes to your java file. Get started.

Navigate to your project java file from the following path:

ClockWidget\app\src\main\java\com\example\rjchakraborty\clockwidget\ClockWidget.java

(The application name and activity name will vary in your case if you changed both of them during new project creation)

The code for the java file are given below. So, it would be better if you learn first and type those codes by your own hand. Copy-pasting is a easier way out, but it is not the way to learn.

package com.example.rjchakraborty.clockwidget;

import android.appwidget.AppWidgetManager;
import android.appwidget.AppWidgetProvider;
import android.content.ComponentName;
import android.content.Context;
import android.widget.RemoteViews;

import java.text.DateFormat;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.Locale;
import java.util.Timer;
import java.util.TimerTask;

/**
* Implementation of App Widget functionality.
*/
public class ClockWidget extends AppWidgetProvider {

@Override
public void onUpdate(Context context, AppWidgetManager appWidgetManager, int[] appWidgetIds) {

Timer timer = new Timer();
timer.scheduleAtFixedRate(new time(context, appWidgetManager), 1, 86400000 );
}

private class time extends TimerTask {

RemoteViews remoteviews;
AppWidgetManager appWidgetManager;
ComponentName clockWidget;
DateFormat format = SimpleDateFormat.getTimeInstance(SimpleDateFormat.MEDIUM, Locale.getDefault());

public time(Context context, AppWidgetManager appwidgetmanager) {
this.appWidgetManager = appwidgetmanager;
remoteviews = new RemoteViews(context.getPackageName(), R.layout.clock_widget);
clockWidget = new ComponentName(context, ClockWidget.class);
}

@Override
public void run() {
remoteviews.setTextViewText(R.id.appwidget_text, "TIME " +format.format(new Date()));
appWidgetManager.updateAppWidget(clockWidget, remoteviews);
}
}}

Though the layout used by me is not that good as the app is only created for experimental purpose. You can change the look of the widget by editing the layout file ad also by changing the .9png backgrounds.

Optional

Navigate to the following path in Android studio:

ClockWidget\app\src\main\res\values\strings.xml

Generally the string file is auto created by default but you can change the names as per your wish, but that was not necessary.

That's solve for this project. Try it and made it more stylish then the clock widget shown here.Feel free to ask us questions and we will be more than happy to help you as much as we can.