Special thanks to the color picker icon created by iconixar<\/strong>)<\/p>\n\n\n\nThen, I uploaded it to Google Drive. I changed its sharing access to public by choosing anyone can see and then copied the link. And pasted it in Niotron IDE in the space for icon URL.<\/p>\n\n\n\n
A disclaimer here: the icon URL doesn’t always work.<\/em><\/p>\n\n\n\nClick on Continue button. You will soon see a sample extension generated for you on the left.<\/p>\n\n\n\n
Now, this is Java. I know most of you are unfamiliar with Java. The great thing about the advent of AIs like ChatGPT is that you can ask it to write the extension for you. However, you still need to know a little bit to make changes. So, let\u2019s quickly go over this code.<\/p>\n\n\n
\n
\npackage com.obsidiansoft.colorpicker;<\/strong> is just your project\u2019s address.<\/li>\n\n\n\nThose lines with import <\/strong>in front of them are like \u201ctools\u201d or \u201cingredients\u201d that the extension needs for accessing the phone\u2019s screen, app data, and for showing up in MIT App Inventor\u2019s designer and blocks section.<\/li>\n\n\n\n@DesignerComponent <\/strong>is how your extension looks in the designer section of MIT App Inventor.<\/li>\n\n\n\n@SimpleObject(external = true) <\/strong>means it\u2019s a simple object<\/strong> users can add blocks for.<\/li>\n\n\n\n@UsesPermissions(permissionNames = “”) <\/strong>specify any special permissions such as camera, internet here.<\/li>\n\n\n\npublic class ColorPicker extends AndroidNonvisibleComponent {<\/strong> This is just telling that it is a component that doesn’t show up visibly and does its work in the background.<\/li>\n\n\n\ncontext <\/strong>helps access resources,<\/li>\n\n\n\nactivity <\/strong>helps show things like dialogs or popups.<\/li>\n\n\n\npublic ColorPicker(ComponentContainer container)<\/strong> is the constructor. This runs when the user adds your extension to their project. It connects your extension to the app\u2019s screen and environment.<\/li>\n<\/ul>\n\n\n\nTill now, all extensions are almost identical. The difference comes when we come to part of simple functions and simple events. <\/p>\n\n\n\n
\nSimple functions<\/strong>, such as TestFunction, generated here, will become a block in App Inventor<\/li>\n\n\n\nSimple events<\/strong>, such as TestEvent generated here, will become an event in App Inventor.<\/li>\n<\/ul>\n\n\n\n<\/p>\n\n\n\n
Now, you can use ChatGPT to make your Java simple functions and events for you. But remember that your import statements will also change depending on what tools you use inside your function. For example, I need to show dialogs and buttons for my color picker, so you will see more import statements in the code that I will give to you.<\/p>\n\n\n\n
This is the code: you can copy paste it entirely too, but I would recommend changing your package name to your actual one \ud83d\ude09 and also not using the icon URL given in this code too as that is just a place holder.<\/p>\n\n\n\n
package com.obsidiansoft.colorpicker;\n\nimport android.app.Activity;\nimport android.app.AlertDialog;\nimport android.content.Context;\nimport android.graphics.Color;\nimport android.view.View;\nimport android.widget.Button;\nimport android.widget.LinearLayout;\nimport android.widget.ScrollView;\nimport android.widget.Toast;\n\nimport com.google.appinventor.components.annotations.*;\nimport com.google.appinventor.components.common.ComponentCategory;\nimport com.google.appinventor.components.runtime.AndroidNonvisibleComponent;\nimport com.google.appinventor.components.runtime.ComponentContainer;\nimport com.google.appinventor.components.runtime.EventDispatcher;\n\n@DesignerComponent(\n version = 1,\n description = \"A simple extension for picking colors.\",\n category = ComponentCategory.EXTENSION,\n nonVisible = true,\n iconName = \"https:\/\/i.postimg.cc\/XYZ\/color-picker.png\")\n\n@SimpleObject(external = true)\npublic class ColorPicker extends AndroidNonvisibleComponent {\n\n private Context context;\n private Activity activity;\n\n public ColorPicker(ComponentContainer container) {\n super(container.$form());\n this.activity = container.$context();\n this.context = container.$context();\n }\n\n @SimpleFunction(description = \"Show a simple color picker dialog.\")\n public void ShowColorPicker() {\n\n final int[] colors = {\n Color.RED, Color.GREEN, Color.BLUE, Color.YELLOW,\n Color.MAGENTA, Color.CYAN, Color.BLACK, Color.WHITE,\n Color.GRAY, Color.DKGRAY, Color.LTGRAY, Color.parseColor(\"#FFA500\")\n };\n\n final String[] colorNames = {\n \"Red\", \"Green\", \"Blue\", \"Yellow\",\n \"Magenta\", \"Cyan\", \"Black\", \"White\",\n \"Gray\", \"Dark Gray\", \"Light Gray\", \"Orange\"\n };\n\n final AlertDialog dialog = new AlertDialog.Builder(context).create();\n\n ScrollView scrollView = new ScrollView(context);\n LinearLayout mainLayout = new LinearLayout(context);\n mainLayout.setOrientation(LinearLayout.VERTICAL);\n scrollView.addView(mainLayout);\n\n for (int i = 0; i < colors.length; i++) {\n final int selectedColor = colors[i];\n final String selectedName = colorNames[i];\n\n Button btn = new Button(context);\n btn.setText(selectedName);\n btn.setBackgroundColor(selectedColor);\n btn.setTextColor(i == 7 ? Color.BLACK : Color.WHITE);\n btn.setPadding(10, 10, 10, 10);\n\n btn.setOnClickListener(new View.OnClickListener() {\n @Override\n public void onClick(View v) {\n Toast.makeText(context, \"You picked: \" + selectedName, Toast.LENGTH_SHORT).show();\n GotColor(selectedColor);\n dialog.dismiss(); \n }\n });\n\n mainLayout.addView(btn);\n }\n\n dialog.setTitle(\"Pick a Color\");\n dialog.setView(scrollView);\n dialog.show();\n }\n\n @SimpleEvent(description = \"Triggered when a color is chosen.\")\n public void GotColor(int colorValue) {\n EventDispatcher.dispatchEvent(this, \"GotColor\", colorValue);\n }\n}<\/code><\/pre>\n\n\n\nClick the save button at the top and then click the compile button. An AIX file for your extension should be successfully downloaded to your computer to, most probably, your downloads folder.<\/p>\n\n\n\n
Now, let\u2019s test our new extension out.<\/p>\n\n\n\n
Open up MIT App Inventor. Start a new project.<\/p>\n\n\n\n
In designer view, o to the Extensions section. It comes on the left towards the very bottom. Click on Import Extension \u2192 Choose File \u2192 Upload your .aix file.<\/p>\n\n\n\n
Drag your ColorPicker extension into the project workspace.<\/p>\n\n\n\n
Add a button from the UserInterface palette. Rename it to pickColorBtn and change the text accordingly. Add a label for preview. I am just going to make its font size bigger.<\/p>\n\n\n\n
In the blocks section, get the button click event. Click on your custom extension, and you can see the simple function and event visibly here. Call the extension\u2019s showColorPicker in the button click event. And get the extension\u2019s GotColor Event, and here set the label\u2019s background color to the color returned by the event.<\/p>\n\n\n\nToo complicated process for you. No worries \ud83d\ude09 You can download the extension (aix) file from here:<\/p>\n\n\n\n
https:\/\/github.com\/amnaMahmoodObs\/ColorPickerExtension\/releases\/tag\/v1.0.0<\/a><\/p>\n\n\n\nI hope you liked this easy way of making extensions for MIT App Inventor or even Kodular.<\/p>\n\n\n\n
You can also check out the video tutorial for this project on my channel.<\/p>\n\n\n\n
![\"\"](\"https:\/\/obsidiansofteducation.com\/wp-content\/uploads\/2025\/11\/snake-game-16-1024x576.jpg\")
<\/figure>\n<\/div>\n\n\n![\"\"](\"https:\/\/obsidiansofteducation.com\/wp-content\/uploads\/2025\/11\/ApplicationFrameHost_2Gki6HMX3l-1-1024x794.png\")
<\/figure>\n<\/div>\n\n\n![\"\"](\"https:\/\/obsidiansofteducation.com\/wp-content\/uploads\/2025\/11\/image.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/obsidiansofteducation.com\/wp-content\/uploads\/2025\/11\/image-1.png\")
<\/figure>\n\n\n\n