Create widgets for your app

Let create a simple widgets for your app

Guide is divided in 3 section

UI design

First we need to create xml file

Create a empty xml file and give a widget name

Now paste the below code to your widget.xml file and save it

<?xml version="1.0" encoding="utf-8"?>

<appwidget-provider android:minWidth="250.0dip" android:minHeight="50.0dip" android:updatePeriodMillis="0" android:initialLayout="@layout/home_widget"

  xmlns:android="http://schemas.android.com/apk/res/android" />

let understand above xml code

android:minWidth="250.0dip  =====> This is width of widget
android:minHeight="50.0dip  =====> This is height of widget 
android:initialLayout="@layout/home_widget" =====> This is UI part of widget

Let create a UI design for widget

For creating UI we need an XML editor you can use any editor
For now i am using this online Android XML Visualizer

Before we create a UI you must have little knowledge of Android Layout XML. Click here and google it for more information

Now let create UI design

create a empty xml file and give a home_widget name
image

Now we have to code a UI design

Here i am creating very simple UI

<LinearLayout 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:gravity="center"
 tools:context=".MainActivity"
 android:background="#B3FCD9">

<TextView
android:id="@+id/txtview"
android:layout_width="128dp"
android:layout_height="20dp"
android:layout_alignParentBottom="true"
android:text="Text view" />
    
 <Button
 android:id="@+id/Button"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_marginLeft="20dp"
 android:text="Button" />
</LinearLayout>

Here i have change background color to #B3FCD9 image and i have created TextView and Button in XML

Here is my UI design

Now let add image in background and image view to widget

<LinearLayout 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:gravity="center"
 tools:context=".MainActivity"
 android:background="@drawable/img">

 <ImageView
 android:id="@+id/imageView"
 android:layout_width="0dp"
 android:layout_height="match_parent"
 android:layout_weight="1"
 android:src="@drawable/pic"/>

    
 <Button
 android:id="@+id/Button"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_marginLeft="20dp"
 android:text="Button" />
</LinearLayout>

i have replace the android:background="#B3FCD9" image color with image
image android:background="@drawable/img

Here is my UI design with images

APK

Add widget to your apk
Download your apk from kodular.io and decompile your apk using any apk tool here i am using APK Editor Studio

Now we have following files

open apk editor studio and decompiling your apk

now your apk directory will look like this

copy your widget.xml file and paste in /res/xml folder
copy your home_widget.xml file and paste in /res/layout folder
copy your all images and paste in /res/drawable folder

Now open your AndroidManifest.xml and paste the below code to AndroidManifest.xml

<receiver android:name="home_widget">
            <intent-filter>
                <action android:name="android.appwidget.action.APPWIDGET_UPDATE"/>
            </intent-filter>
            <meta-data android:name="android.appwidget.provider" android:resource="@xml/home_widget"/>
</receiver>

after adding your AndroidManifest.xml will look like this

now save it and compile your apk

Done !!

Here is some screenshots of widgets

AAB

For publishing your app in play console you need AAB file
You can use my tool
https://github.com/sensei-z/Edit_AAB.git

requirements and instructions are available in my Github page

Here we come to the end of the guide

sample apk -

widget_pic -test_apk_with_pic.apk (5.2 MB)

widget_no_pic -test_apk_without_pic.apk (5.2 MB)

AAB Tool - sensei-z/Edit_AAB: A tool which allow you to modify the AAB file (github.com)

22 Likes

Nice guide :+1::+1:

2 Likes

was looking for this from a long time , thanks a lot for this guide :slight_smile:

1 Like

@Yashsehgal022 and @UnknownMan541

Thank you :blush:

2 Likes

This post was flagged by the community and is temporarily hidden.

Man, this is just amazing. I have never even though about the possibility to do something like this. Now I had tons of ideas to improve some of my apps.
The worst part is how to create xml files for specific projects, but I think it won’t be impossible with some effort and help eventually.

Thanks a lot for your contribution.

4 Likes

Congratulations :+1:

2 Likes

@Rogerio_Rios and @almeidapablo
thank you :blush:

2 Likes

@almeidapablo

She is not a man,… lol :rofl:
btw,… Awesome guide @Shreyaa Shreya…
:kodular:eep it up…:slightly_smiling_face:

1 Like

Thank you @Technical_Zone :blush:

1 Like

I do never pay atention at people’s photos, but anyway, the man in begining is more a slang than a way to address to a male.
But that is probably the first girl that I notice here at Kodular Community. May be it is because I don’t pay much attention at photos and can’t figure out by name, but anyway, it is nice to see a woman making good contributions too.

5 Likes

Great Guide.

1 Like

Great Idea :+1: . I guess it’s not possible to update/make changes to the views right? Coz, it seems like it just created the view by the layout. Maybe will work if we do some extra smali reverse engineering :laughing:

1 Like

@Jaxparrow and @UnknownMan541
Thank you

Yeah not possible right now but maybe in future

i tried but it was very hard to understand

3 Likes

I’ll try it If I have some extra time and upload the result if it works. I’ve used Extended views before, for adding new working layouts to reverse engineered applications.

2 Likes

The guide explained above can simply put designs made in XML into Kodular apps, right?
But how will I connect the UI to the code of the app that I made through XML?

not possible yet maybe in future

2 Likes

Greate work !!
How to add function to button click?
Open special screen like wise

2 Likes