Android Code Snippet adding Material icons to text

Discussion in 'Code Snippets' started by Dave O, Nov 3, 2018.

  1. Dave O

    Dave O Active Member Licensed User

    The MaterialIcons font is handy for creating icon-only buttons. You can do this right in the Designer.

    If, however, you want to add an icon to some existing button text (say, a "Save" button with a checkmark before the "Save" text), you can't do this directly in the Designer because the Material font only offers uppercase letters.

    So here's a subroutine that takes any existing button with any existing text (e.g. "Save") and prefixes it with a Material icon. It uses CSBuilder to build a CharSequence containing both parts, then assigns that as the button's new text.

    'prefixes the given text with the given Material icon (with a space between).
    'relativeSize is usually around 1.2 for 18-point text, smaller for larger text.
    'shiftDown is usually around 5 (non-dip) for 18-point text, larger for larger text
    Sub addIconToButton(buttonArg As Button, materialIconCode As Int, relativeSize As Float, shiftDown As Int)
    Dim cs1, cs2 As CSBuilder
    Typeface.DEFAULT).Append(" " & buttonArg.Text).PopAll
    DipToCurrent(shiftDown - 2)).Append(cs1).PopAll
       buttonArg.Text = cs2
    End Sub
    You would then set up a normal button with button text using the DEFAULT typeface, and call the sub like this:

    addIconToButton(saveButton, 0xE5CA1.25)     'checkmark icon
    I couldn't figure out an easy way to match the sizes between the two fonts, so I've added a parameter for relative sizing (where 1.0 is the same point size, but often doesn't turn out to be the same actual size).

    Similarly, it's hard to get two different fonts to align vertically, so I had to add a parameter for shifting the icon down.

    (If you have any ideas about auto-sizing or auto-shifting that will kill off these last 2 parameters, that would be great - let me know.)

    Hope you find this useful. Cheers!

    Attached Files:

    • edit.png
      File size:
      58.2 KB
    Last edited: Nov 4, 2018
  2. Dave O

    Dave O Active Member Licensed User

    If you're trying to add a Material icon to other visible text (e.g. a toast message, label, etc.), you can use this variation of the code above:

    'prefixes the given text with the given Material icon (with a space between).
    'relativeSize is usually around 1.2 for 18-point text, smaller for larger text.
    'shiftDown is usually around 5 (non-dip) for 18-point text, larger for larger text
    Sub addIconToText(normalText As String, materialIconCode As Int, relativeSize As Float, shiftDown As Int) As CSBuilder
    Dim cs1, cs2, cs3 As CSBuilder
    Typeface.DEFAULT).Append(" " & normalText).PopAll
    DipToCurrent(shiftDown - 2)).Append(cs1).Append(cs2).PopAll
    Return cs3
    End Sub
    This is a more general solution, because you can apply it to buttons, labels, toasts, etc. For the Save button above, you would code it as:

    saveButton.Text = c.addIconToText(saveButton.Text, 0xE5CA1.25)
    ...which is more flexible in the long run.
    Mehrzad238, JMB, fred-han and 4 others like this.
  3. Dave O

    Dave O Active Member Licensed User

    For adding icons to button text, here's a more general sub that lets you put the icon on the left (prefix) or the right (suffix) of the button text:

    'prefixes or suffixes the given text with the given Material icon (with a space between).
    'relativeSize is usually around 1.3 for 18-point text, smaller for larger text.
    'shiftDown is usually around 5 for 18-point text, larger for larger text
    Sub addIconToButton(button As Button, materialIconCode As Int, relativeSize As Float, shiftDown As Int, prefixFlag As Boolean)
    Dim iconCS, textCS, fullCS As CSBuilder
    DipToCurrent(shiftDown - 2))
    If prefixFlag = True Then
    " ").Append(textCS)
    " ").Append(iconCS)
    End If
    button.Text = fullCS.PopAll
    End Sub
    You would then call this by adding the new argument at the end:

    addIconToButton(saveButton, 0xE5CA1.25false)     'add checkmark icon after text
    Also, this code could adapted to the addIconToText sub above pretty much as is.
    Mehrzad238 likes this.
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice