In order to develop a little more elegant and techie application for the Android platform, the widgets are no doubt played an integral part in the Android app development process since its introduction in the app development industry in 2008, which enables a user to access the app from the home screen of their devices or application. Also, a widget makes the user enable to get the required information.
Due to the ability to add some exciting features in the Android application, these widgets are getting more popularity and also provide a wonderful convenience to the app users on one side and of course, on the other side, these widgets are providing a great helping hand to the Android app developers in the development of a well-functioning app with multiple in-built features with the less code and time requirement.
On the same path, these days the Android widgets Time and Weather are getting more love from the user as every android user is loving to add these two widgets on the home screen of their devices. These two widgets help them to get faster access to know the time and weather details just on their mobile screens. Well, today in a way to deliver better and enhanced services to the user, utmost app development companies are trusting to develop their own widgets, to offer a bit more convenience and facility to the app users. Hence in this post, we are going to describe how you can build your own widgets for the Android platform.
Here’s the code to implement an event timer widget in Android:
To give you a better reference, let’s implement a custom widget event countdown timer for Android. This widget will inform the users about every single detail of the event mentioning its time, start date, end date, event name, etc.
Simply use the code to develop the widget yourself:
- In the manifest file of your Android App declare and app widget, using the mentioned code:
<receiver
android:name=”.widget.MainWidgetProvider” android:icon=”@drawable/ic_launcher” android:label=”@string/app_name”>
<intent-filter>
<action android:name=”android.appwidget.action.APPWIDGET_UPDATE” />
<action android:name=”android.appwidget.action.ACTION_WIDGET_RECEIVER” />
</intent-filter>
<meta-data android:name=”android.appwidget.provider” android:resource=”@xml/lock_screen_widget” />
</receiver>
- Now is the time to create a configuration file for the widget with metadata in the XML directory, which defines the qualities of the widget. It’s a basic structure for the widget which will let it know what it should look like with the mentioned points:
The widget size and Resizing
The duration between the updates
Preview for widget menu and images
Type of widget
Here is the code to configure the My Day widget for Android:
<appwidget-provider xmlns:android=”http://schemas.android.com/apk/res/android” android:initialLayout=”@layout/widget_days_only_count” android:minHeight=”@dimen/widget_height” android:configure=”com.yalantis.myday.activities.MainActivity” android:minWidth=”@dimen/widget_width” android:previewImage=”@drawable/widget_preview” android:updatePeriodMillis=”0″ />
In the above code, all the configured attributes in the widget are optional along with the self-dependency. Also, in the code we didn’t set any resize mode, therefore the widget can’t be resized, alongside that, we also did not set any configuration in the app to update the time settings. The app widget will work on the user’s settings.
- Add Configuration Activity:
The widget will be automatically launched and get on the working mode itself whenever the user makes it on the home screen of the device. Besides that, a user can change the font, picture, and other elements of the widget as per their choice.
- Make a call in the app for WidgetProider:
In the below code here is a description for all the widget logics
override fun onUpdate( context: Context, appWidgetManager: AppWidgetManager, appWidgetIds: IntArray )
{
super.onUpdate(context, appWidgetManager, appWidgetIds) for (appWidgetId in appWidgetIds)
{
updateWidgets(context, appWidgetId)
}
}
Use the following code to contain the service of the app widget:
class WidgetUpdateService : Service()
{
override fun onBind(intent: Intent): IBinder? { return null
}
override fun onStartCommand(intent: Intent, flags: Int, startId: Int):
Int { updateLockAndHomeWidget() return START_NOT_STICKY }
fun updateLockAndHomeWidget() { val intent = Intent(this, MainWidgetProvider::class.java) intent.action = SyncStateContract.Constants.IntentActions.WIDGET_UPDATE_ACTION val ids = AppWidgetManager.getInstance(this) .getAppWidgetIds(ComponentName(this, MainWidgetProvider::class.java)) intent.putExtra(AppWidgetManager.EXTRA_APPWIDGET_IDS, ids) sendBroadcast(intent)
}
}
- Write the mentioned code to implement the AlarmManaget facility in the widget:
fun setWidgetService()
{
val alarmManager = getSystemService(Context.ALARM_SERVICE) as AlarmManager val pi = PendingIntent.getService( this, 0, Intent( this, WidgetUpdateService::class.java ), PendingIntent.FLAG_UPDATE_CURRENT ) alarmManager.set(AlarmManager.RTC_WAKEUP, App.sharedPrefManager.getUpdateTime(),
pi)
}
- Now add the code to implement the user interface in the widget along with the following features:
Frame, Linear, Grid and Relative Structure, Analog Clock, Buttons, Image Buttons, View Image, Progress bar, Text View, ListView, and many more.
private fun buildUpdate( data: String, context: Context, movingPickerManager: MovingPickerManager ): Bitmap
{
val layoutInflater = LayoutInflater.from(context) val linearLayout = layoutInflater.inflate(R.layout.event_name_layout, null) as LinearLayout val textView = linearLayout.findViewById<View>(R.id.textView) as TextView textView.setText(movingPickerManager.getSpannedText(data, App.getPickerTextTypeFace())) linearLayout.measure( makeMeasureSpec(0, MeasureSpec.UNSPECIFIED), makeMeasureSpec(0, MeasureSpec.UNSPECIFIED) ) linearLayout.layout( 0, 0, linearLayout.measuredWidth, linearLayout.measuredHeight ) val bitmap = Bitmap.createBitmap( linearLayout.measuredWidth, linearLayout.measuredHeight, Bitmap.Config.ARGB_8888 ) val canvas = Canvas(bitmap) linearLayout.background?.draw(canvas) linearLayout.draw(canvas) return bitmap
}
With the fine implementation of the code, your widget is ready.
