How to set an image in the drawable Left / Right of a button using an icon font (Iconics)

Overview

Icon fonts are useful, aren't they? Icon fonts allow you to display icon images in your text. In other words, you can easily create icons + text buttons. However, since it is displayed as one element, there is a problem that different sizes cannot be used for the text and the icon, and the baseline is aligned between the icon and the text.

Android buttons can display icons inside the buttons by using the drawableLeft and drawableRight attributes. It seems that this attribute can solve the above problem, but it cannot be used as it is because it is necessary to specify the image.

Therefore, I will explain how to convert the icon font to a drawable vector and display it as an icon.

Iconics is used as a library for using icon fonts.

result

If you specify the drawable_icon_font_left attribute as shown below, the icon will be displayed nicely.

<Button
    android:text="{faw-android} android"
    />
<Button
    android:text="android"
    app:drawable_icon_font_left="@{`faw_android`}"
    />

image1

How it works

Install Iconics and enable dataBinding

Add the following settings in ** build.gradle **. Here, we will use AwesomeFont as an example.

android {
    ...
    dataBinding {
        enabled = true
    }
}

dependencies {
    ...
    compile "com.mikepenz:iconics-core:2.8.2@aar"
    compile 'com.mikepenz:fontawesome-typeface:4.7.0.0@aar'
}

Enable Iconics

Add the following settings to the Activity and Fragment to be used.

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        LayoutInflaterCompat.setFactory(getLayoutInflater(), new IconicsLayoutInflater(getDelegate()));

        super.onCreate(savedInstanceState);
        DataBindingUtil.setContentView(this, R.layout.activity_main);
    }
}

BindingAdapter definition

** Define the drawable_icon_font_left ** attribute.

Within the method, it will generate a Drawable from the specified characters. At that time, you can set the same color as the text or set the icon size a little larger than the text size according to your preference.

public class BindingAdapterManager {

    @BindingAdapter("drawable_icon_font_left")
    public static void setDrawableIconFontLeft(final Button button, final String icon) {
        final Context context = button.getContext();
        final IconicsDrawable iconicsDrawable = new IconicsDrawable(context)
                .icon(FontAwesome.Icon.valueOf(icon))
                .color(button.getCurrentTextColor())
                .sizePx((int)(button.getTextSize() * 1.25));
        button.setCompoundDrawables(iconicsDrawable, null, null, null);
    }
}

sample

I have a project that works on Drawable-Icon-Font @ github.

Acknowledgments

This tip was born during the development of "a site where you can buy and sell smartphone photo materials Snapmart". Unfortunately, the Android version is still under development and is not available yet. If you have an iPhone, please download and use it! Snapmart App (iOS)

Recommended Posts

How to set an image in the drawable Left / Right of a button using an icon font (Iconics)
[Swift] How to set an image in the background without using UIImageView.
Mandels to create an image of the Mandelbrot set
[Rails 6] How to set a background image in Rails [CSS]
[Rails] How to display an image in the view
How to make an image posted using css look like an icon
How to get the length of an audio file in java
How to set the indent to 2 single-byte spaces in the JAXB implementation of the JDK
[Java] How to get to the front of a specific string using the String class
How to change the value of a variable at a breakpoint in intelliJ
How to get the absolute path of a directory running in Java
[Swift] How to get the number of elements in an array (super basic)
Try adding text to an image in Scala using the Java standard library
Make a margin to the left of the TextField
How to get the ID of a user authenticated with Firebase in Swift
Set the time of LocalDateTime to a specific time
[Note] [Beginner] How to write when changing the value of an array element in a Ruby iterative statement
How to make a unique combination of data in the rails intermediate table
How to set environment variables in the properties file of Spring boot application
I made a sample of how to write delegate in SwiftUI 2.0 using MapKit
How to install Docker in the local environment of an existing Rails application [Rails 6 / MySQL 8]
How to get the class name of the argument of LoggerFactory.getLogger when using SLF4J in Java
How to set the log level to be displayed in the release version of orhanobut / logger
How to use git with the power of jgit in an environment without git commands
How to implement a circular profile image in Rails using CarrierWave and R Magick
Summary of how to use the proxy set in IE when connecting with Java
[Rails] How to display the weather forecast of the registered address in Japanese using OpenWeatherMap
How to make an image partially transparent in Processing
How to set the display time to Japan time in Rails
How to convert A to a and a to A using AND and OR in Java
How to judge the click of any area of the image
I built an environment to execute unit tests using Oracle database (oracle12c) on the Docker in Docker (dind) image of GitLab-CI.
How to specify an array in the return value / argument of the method in the CORBA IDL file
Considering the adoption of Java language in the Reiwa era ~ How to choose a safe SDK
Add an icon to the header link using Rails fontawesome
How to set chrony when the time shifts in CentOS7
How to change a string in an array to a number in Ruby
How to create a placeholder part to use in the IN clause
How to retrieve the hash value in an array in Ruby
How to move another class with a button action of another class.
[Ruby] How to retrieve the contents of a double hash
How to add the same Indexes in a nested array
How to derive the last day of the month in Java
[jsoup] How to get the full amount of a document
How to set up a proxy with authentication in Feign
[Rails] How to convert the URI of the image sent by http to https when using Twitter API
[Java] How to search for a value in an array (or list) with the contains method
Using the face detection function of Watson Visual Recognition, I tried to process a whole body image of a person into an image of only the face part
How to determine whether you flicked left or right in PagerView
[Swift5] How to get an array and the complement of arrays
How to set the IP address and host name of CentOS8
How to display 0 on the left side of the standard input value
How to output the value when there is an array in the array
Fix the file name of war to the one set in Maven
How to get the contents of Map using for statement Memorandum
How to get the id of PRIMAY KEY auto_incremented in MyBatis
The milliseconds to set in /lib/calendars.properties of Java jre is UTC
Cast an array of Strings to a List of Integers in Java
How to store the information entered in textarea in a variable in the method
How to output a list of strings in JSF as comma-separated strings
How to solve the unknown error when using slf4j in Java