Search code examples
androidfluttergoogle-material-icons

Is there a way to dynamically load Material Icons in native android (Java)?


Recently i was able to dynamically load Material Design Icons in Flutter by using the flutter_icons/flutter_icons.dart

// First Approach
Icon icon = new Icon(Icons.settings);

// Second Approach
icon = new Icon(MaterialIcons.getIconData(Model.dynamic_icon_name);

Flutter Screenshot

This got me thinking if i could do something similar using a native android approach, with something like

// Glide Theoretical Example
Glide.with(context.getApplicationContext())
  .asBitmap()
  .load(MaterialIcons.getIconData(Model.dynamic_icon_name))
  .apply(new RequestOptions().fitCenter())
  .into(iconView);

I think it would be interesting to know, since i think could provide some advantage that a developer would not need to bundle those assets with the app


Solution

  • There was no effective way of handling this natively on Android, so the solution i ended up going with was having the server host these icons and i could just serve them down using Glide like this.

    Step 1: Backend setup

    • Download the png assets for the icon of your choice, ie: the thumbs_up icon from this Material Icons link
    • Now you can go ahead and unzip the image assets into your server's assets folder, in my case this was in my public folder of the server since i was using a Laravel backend. In the end my icons resided in the path public/material-icons/thumb_up_black.png and made sure to keep a consistent naming convention public/material-icons/{icon_name_color}.png this was the vital point since i needed to reference these assets again.
    • Now we can link the icon with the respective item

    Server side

    
    ...
    
    // Creating the item
    new Item::create([
      'name' => 'Like-able item',
      'icon' => 'thumb_up_black',
    ]);
    
    ...
    

    List items API endpoint result

    [
        {
            "name": "Like-able item",
            "icon_url": "https//server-name.fancy/thumb_up_black.png"
        },
        {
            "name": "Like-able item #2",
            "icon_url": "https//server-name.fancy/thumb_up_black.png"
        },
        ....
    ]
    

    Step 2: Client Setup (Android app)

    • Once i have consumed the API data and about to display the items, i can use Glide to accomplish this.
    
    ItemModel item = new ItemModel(itemDataFromServer);
    
    Glide.with(context.getApplicationContext())
      .asBitmap()
      .load(MaterialIcons.getIconData(item.icon_url))
      .apply(new RequestOptions().fitCenter())
      .into(iconView);
    

    This was finally how i was able to solve this problem, the nice thing with this implementation was that from our three client apps (Android, iOs and Web) we could use the same if not similar method to display accordingly.