[F/OS] 🔘 Button Icon Extension - Android, Material and Custom Icons

[Gordon_Lu]

Introduction

I was testing a couple of extensions and I realized that the Button Addon extension by Andres Cotes needs some updates, including the color of the icons, the sizes and some more. So I cooked up this extension to help you insert icons to your buttons. No assets for Android and Material, just download it, import it and you're good.

This extension offers four types of icons.

Icon Type	Description	Icons Available
Default	Android's default icons that you can use, available in a helper block.	67
Material	Google's Material Icons, available here.	2,500 +
Custom	Your custom icons that you can add to your app!	Unlimited
Font	Icon fonts in your assets or ASD.	Unlimited

The default icons that Android provides in the R.drawable class are kind of old, so I recommend you to use them only if you are making apps intending for old Android devices, or apps with the Classic theme, although you can technically use any icon for any theme. Material Icons are icons provided by Google using material design, and if you want to build an app with professional UI, this should be for you.

Stats

Built with: AppInventor Extensions Template

Version: 2

Documentation

SetAndroidButtonIcons

Sets the icon of the specified button, using the default Android drawable icons. Use 0 if you do not want an icon to appear.

Parameters: component = component, leftIcon = Icon/number(int), topIcon = Icon/number(int), rightIcon = Icon/number(int), bottomIcon = Icon/number(int)

SetCustomButtonIcons

Sets the icon of the specified button. Use an empty text block if you do not want an icon to appear. Please use absolute paths or full paths in this instance.

Parameters: component = component, leftIcon = text, topIcon = text, rightIcon = text, bottomIcon = text

SetFontButtonIcons

Sets the button's icons from the given icon font. Please use absolute or full paths in this instance. If you do not want an icon, use an empty text block.

Parameters: component = component, fontPath = text, leftIcon = text, topIcon = text, rightIcon = text, bottomIcon = text, color = color, size = number (int)

SetIconPadding

Sets the size of the padding between the icon and the text, in pixels.

Parameters: component = component, padding = number (int)

SetMaterialButtonIcons

Sets the material icon of the specified button. Use an empty text block if you do not want an icon to appear. The size of the icons should be in pixels.

Parameters: component = component, leftIcon = text, topIcon = text, rightIcon = text, bottomIcon = text, color = color, size = number (int)

Downloads

AIX (V2):
com.gordonlu.buttonicons.aix (190.2 KB)

AIA (V2):
ButtonIcons.aia (235.1 KB)

FAQ

Q1: Does this extension support GIFs?

A1: No, unfortunately it does not. Try using a JPG or PNG image instead.

Q2: Is this extension open source?

A2: Yes of course! You can modify the code here in GitHub, but please give me a credit by linking to this topic and mentioning the author.

GitHub - gordonlu310/ButtonIcons: An extension that sets icons for App Inventor...

Credits

Thanks to @Kumaraswamy for helping me creating this extension and for his guidance, shout-out to him.

Also, thanks to @shreyash for his guide on creating extensions, I'm using Extensions Template for the first time and this is only possible because of his guide.

Please click the beautiful Like button if you like the extension, it took a lot of effort and time to make it.

As I have exams from the 3rd to 13th next month, I definitely need a break from the builders. I'll be back in 2 weeks. Please, if you have questions in those two weeks, drop a reply in this post and I'll answer your questions after my exams. Goodbye.

Gute Rutsch! Happy New Year! 新年快樂！

[TIMAI2]

Could the material icons be made to show in companion if one used a ttf font file, as with @Anke 's extension?

Do you add text to a button using the standard button text property?

[Gordon_Lu]

@TIMAI2

Do you add text to a button using the standard button text property?

No, there is a function in TextView that allows you to assign a Drawable to a button. You can take a look at the source code.

[TIMAI2]

I do not see in your extension blocks where one would add the text?

[Anke]

[Gordon_Lu]

@Gordon_Lu

Please note that this feature is only supported in the built app, as App Inventor does not send the font to your companion.

Try it in the built app.

[Anke]

@Gordon_Lu

as App Inventor does not send the font to your companion

What does that mean? (The assets are in the ASD with Companion).

[Gordon_Lu]

The extension assets are not sent over to the Companion, but it is compiled with the built app. (this is with extensions template)

[TIMAI2]

Still not answered my question about button text...

[Gordon_Lu]

@TIMAI2

where one would add the text?

You don't need to add the text, because the extension only changes the drawable of the button, not the text. Those are two different properties of a Button.

And yes, you add the text using the Text property. It's in the AIA file.

[TIMAI2]

Thank you

[Kevinkun]

one suggestion:
for this block:
https://community.appinventor.mit.edu/uploads/default/original/3X/c/0/c09bb463f7f9368ff2d5d91d799da3913e53765d.png
you can add a line to avoid use the replace block by users.

public Drawable createDrawable(String path) {
      if(path.startsWith("file://")) {
			path = path.replace("file://", "");
		}
        if (path == "") {
            return null;
        } else {

[TIMAI2]

@Gordon_Lu

The biggest disadvantage of material icons is that you cannot test this feature with the Companion, and you must use the APK.

Reworked (using RUSH) with a bit of extra code to make a temp file of the ttf, and now works in companion and when compiled:

JAVA

package uk.co.metricrat.buttonmaticon;


import android.graphics.Canvas;
import com.google.appinventor.components.annotations.SimpleFunction;
import com.google.appinventor.components.runtime.AndroidNonvisibleComponent;
import com.google.appinventor.components.runtime.AndroidViewComponent;
import com.google.appinventor.components.runtime.ComponentContainer;
import android.widget.Button;
import android.graphics.Paint;
import java.io.*;
import java.io.File;
import android.graphics.Bitmap;
import android.graphics.drawable.Drawable;
import android.graphics.Typeface;
import android.graphics.drawable.BitmapDrawable;
import android.util.DisplayMetrics;


public class ButtonMatIcon extends AndroidNonvisibleComponent {
  String filePath;
  String newFilePath;
  public ButtonMatIcon(ComponentContainer container) {
    super(container.$form());
  }


  public String GetFont() throws IOException {

    File file = File.createTempFile("temp", ".ttf");
    filePath = file.getAbsolutePath();
    try {
      InputStream in = form.openAssetForExtension(this, "material-icons.ttf");
      int size = in.available();
      byte[] buffer = new byte[size];
      in.read(buffer);
      in.close();
      FileOutputStream out = new FileOutputStream(filePath);
      out.write(buffer);
      out.close();
    } catch (IOException e) {
      e.printStackTrace();
    }
    return filePath;
  }


  public Drawable createMaterialIcon(String icon, int color, int size) throws IOException {
    if (icon == "") {
      return null;
    } else {
      newFilePath = GetFont();
      Typeface typeface = Typeface.createFromFile(newFilePath);
      Paint paint = new Paint();
      paint.setTypeface(typeface);
      paint.setColor(color);
      paint.setTextSize((float)size);
      paint.setTextAlign(Paint.Align.CENTER);
      Bitmap bit = Bitmap.createBitmap(size, size, Bitmap.Config.ARGB_8888);
      Canvas canvas = new Canvas(bit);
      canvas.drawText(icon, (float) (canvas.getWidth() / 2),   (((float) (canvas.getHeight() / 2)) - ((paint.descent() + paint.ascent()) / 2)), paint);
      return new BitmapDrawable(form.getResources(), bit);
    }
  }

  @SimpleFunction(description = "Sets the material icon of the specified button. Use an empty text block if you do not want an icon to appear. The size of the icons should be in pixels.")
  public void SetMaterialButtonIcons(AndroidViewComponent component, String leftIcon, String topIcon, String rightIcon, String bottomIcon, int color, int size) throws IOException {
    Button button = (Button) component.getView();
    int pixels = size * getDensity();
    button.setCompoundDrawablesWithIntrinsicBounds(createMaterialIcon(leftIcon, color, pixels), createMaterialIcon(topIcon, color, pixels),
            createMaterialIcon(rightIcon, color, pixels), createMaterialIcon(bottomIcon, color, pixels));
  }

  @SimpleFunction(description = "Sets the size of the padding between the icon and the text.")
  public void SetIconPadding(AndroidViewComponent component, int padding) {
    Button button = (Button) component.getView();
    button.setCompoundDrawablePadding(padding);
  }

  public int getDensity(){
    DisplayMetrics metrics = form.getResources().getDisplayMetrics();
    return (int) metrics.density;
  }

}

uk.co.metricrat.buttonmaticon.aix (192.5 KB)

[Gordon_Lu]

Thank you for all of your suggestions. I made version 2 of this extension that works in the Companion, accepts full paths, and even accepts custom icon fonts. I also renamed SetButtonIcons to SetAndroidButtonIcons because the former sounded too generic.

Icon font from: Journal Dingbats 2 Font · 1001 Fonts

Credits: @TIMAI2, @Kevinkun Thank you both!

[Kevinkun]

below code can get Typeface no mater the font file at assets or asd, then no need to copy font file from asset to asd.

Typeface tf = Typeface.DEFAULT;
		if (fontName.startsWith("//")) {
			fontName = fontName.substring(2);
			if (isReplForm) {
				String realpath;
				String files = this.context.getExternalFilesDir(null).getPath();
				if (Build.VERSION.SDK_INT >= 29) {
					realpath = files + "/assets/" + fontName;
				} else {
					realpath = files + "/AppInventor/assets/" + fontName;
				}
				tf = Typeface.createFromFile(realpath);
			} else {
				tf = Typeface.createFromAsset(this.context.getAssets(), fontName);
			}
		} else {
			if (fontName.toLowerCase().startsWith("file://")) {
				fontName = fontName.substring(7);
			}
			tf = Typeface.createFromFile(fontName);
		}

[RR_Media]

Thanks @Gordon_Lu for such a long awaited and useful feature!

[chaeri]

Hello, I'm trying to add my custom icon to the button I created. I followed the blocks displayed above when putting custom buttons, but it didn't work. What did I do wrong?

I want to put the icon on the left side of the button with the text "Restaurants Near Me."

I would appreciate your help. Thank you!

[Gordon_Lu]

For this version, you will have to also copy the image to ASD before you set the custom button icons. Look at the sample project.