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.

    Code:
    '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
       cs1.Initialize.Typeface(
    Typeface.MATERIALICONS)
       cs1.Size(buttonArg.TextSize).RelativeSize(relativeSize)
       cs1.VerticalAlign(
    DipToCurrent(shiftDown))
       cs1.Append(
    Chr(materialIconCode)).PopAll
       cs1.Typeface(
    Typeface.DEFAULT).Append(" " & buttonArg.Text).PopAll
       cs2.Initialize.VerticalAlign(-
    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:

    Code:
    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
      edit.png
      File size:
      58.2 KB
      Views:
      167
    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:

    Code:
    '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
        cs1.Initialize
        cs1.Typeface(
    Typeface.MATERIALICONS)
        cs1.RelativeSize(relativeSize).VerticalAlign(
    DipToCurrent(shiftDown))
        cs1.Append(
    Chr(materialIconCode)).PopAll
        cs2.Initialize
        cs2.Typeface(
    Typeface.DEFAULT).Append(" " & normalText).PopAll
        cs3.Initialize.VerticalAlign(-
    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:

    Code:
    saveButton.Text = c.addIconToText(saveButton.Text, 0xE5CA1.25)
    ...which is more flexible in the long run.
     
    fred-han, GMan, peacemaker and 2 others like this.
Loading...
  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