Comment utiliser les icônes et les symboles de "Font Awesome" sur une application Android native

J'essaie d'utiliser Font Awesome sur mon application, j'ai pu intégrer la police en utilisant Typeface.createFromAsset(), mais je souhaite également utiliser les icônes fournies par cette police, mais jusqu'à présent, je n'ai pas été en mesure de le faire.

Cette police particulière contient des icônes à l'intérieur de la zone d'utilisation privée Unicode (PUA), pour des éléments tels que les contrôles du lecteur multimédia, l'accès au système de fichiers, les flèches, etc.

Quelqu'un a-t-il utilisé des polices contenant des icônes et des symboles sur Android, est-ce possible?

Font Awesome semble fonctionner correctement pour moi dans mon application Android. J'ai fait ce qui suit:

1. Copié fontawesome-webfont.ttfdans mon dossier assests
2. J'ai trouvé les entités de caractères pour les icônes que je voulais, en utilisant cette page: http://fortawesome.github.io/Font-Awesome/cheatsheet/

3. Création d'une entrée dans strings.xml pour chaque icône. Par exemple pour un cœur:

   <string name="icon_heart">&#xf004;</string>

4. Référencé ladite entrée dans la vue de ma mise en page xml:

    <Button
        android:id="@+id/like"
        style="?android:attr/buttonStyleSmall"
        ...
        android:text="@string/icon_heart" />

5. J'ai chargé la police dans ma méthode onCreate et la définir pour les vues appropriées:

   Typeface font = Typeface.createFromAsset( getAssets(), "fontawesome-webfont.ttf" );
   ...
   Button button = (Button)findViewById( R.id.like );
   button.setTypeface(font);

Essayez IcoMoon: http://icomoon.io

• Choisissez les icônes que vous voulez
• Attribuer des caractères à chaque icône
• Téléchargez la police

Disons que vous avez choisi l'icône de lecture, lui avez attribué la lettre «P» et téléchargé le fichier icomoon.ttfdans votre dossier d'actifs. Voici comment vous affichez l'icône:

xml:

<TextView
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:textSize="48sp"
  android:text="P" />

Java:

Typeface typeface = Typeface.createFromAsset(getAssets(), "icomoon.ttf");
textView.setTypeface(typeface);

J'ai donné une conférence sur la création de belles applications Android, qui comprend des explications sur l'utilisation des polices d'icônes, ainsi que l'ajout de dégradés pour rendre les icônes encore plus jolies: http://www.sqisland.com/talks/beautiful-android

L'explication de la police des icônes commence à la diapositive 34: http://www.sqisland.com/talks/beautiful-android/#34

Peut-être trop tard, mais j'avais le même besoin, j'ai donc publié ceci https://github.com/liltof/font-awsome-for-android C'est une version xml prête pour Android de la police géniale utilisable, tout comme Keith Corwin l'a dit

J'espère que cela aidera les autres.

Comme ci-dessus est un excellent exemple et fonctionne très bien:

Typeface font = Typeface.createFromAsset(getAssets(), "fontawesome-webfont.ttf" );

Button button = (Button)findViewById( R.id.like );
button.setTypeface(font);

MAIS! > cela fonctionnera si la chaîne à l'intérieur du bouton que vous définissez à partir de xml:

<string name="icon_heart">&#xf004;</string>
button.setText(getString(R.string.icon_heart));

Si vous avez besoin de l'ajouter dynamiquement, vous pouvez utiliser ceci:

String iconHeart = "";
String valHexStr = iconHeart.replace("&#x", "").replace(";", "");
long valLong = Long.parseLong(valHexStr,16);
button.setText((char) valLong + "");

Si vous voulez un setText programmatique sans ajouter de chaîne à string.xml

voir son code hexadécimal ici:

http://fortawesome.github.io/Font-Awesome/cheatsheet/

remplacer & # xf066; à 0xf066

 Typeface typeface = Typeface.createFromAsset(getAssets(), "fontawesome-webfont.ttf");
    textView.setTypeface(typeface);
    textView.setText(new String(new char[]{0xf006 }));

Il existe une petite bibliothèque utile conçue à ces fins :

dependencies {
    compile 'com.shamanland:fonticon:0.1.9'
}

Obtenez une démo sur Google Play .

Vous pouvez facilement ajouter une icône basée sur une police dans votre mise en page:

<com.shamanland.fonticon.FontIconView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/ic_android"
    android:textSize="@dimen/icon_size"
    android:textColor="@color/icon_color"
    />

Vous pouvez gonfler font-icon à Drawablepartir de xml:

<?xml version="1.0" encoding="utf-8"?>
<font-icon
    xmlns:android="http://schemas.android.com/apk/res-auto"
    android:text="@string/ic_android"
    android:textSize="@dimen/big_icon_size"
    android:textColor="@color/green_170"
    />

Code Java:

Drawable icon = FontIconDrawable.inflate(getResources(), R.xml.ic_android);

Liens:

• Page du projet
• Repo Github

J'ai créé cette classe d'assistance en C # (Xamarin) pour définir par programme la propriété text. Cela fonctionne plutôt bien pour moi:

internal static class FontAwesomeManager
{
    private static readonly Typeface AwesomeFont = Typeface.CreateFromAsset(App.Application.Context.Assets, "FontAwesome.ttf");

    private static readonly Dictionary<FontAwesomeIcon, string> IconMap = new Dictionary<FontAwesomeIcon, string>
    {
        {FontAwesomeIcon.Bars, "\uf0c9"},
        {FontAwesomeIcon.Calendar, "\uf073"},
        {FontAwesomeIcon.Child, "\uf1ae"},
        {FontAwesomeIcon.Cog, "\uf013"},
        {FontAwesomeIcon.Eye, "\uf06e"},
        {FontAwesomeIcon.Filter, "\uf0b0"},
        {FontAwesomeIcon.Link, "\uf0c1"},
        {FontAwesomeIcon.ListOrderedList, "\uf0cb"},
        {FontAwesomeIcon.PencilSquareOutline, "\uf044"},
        {FontAwesomeIcon.Picture, "\uf03e"},
        {FontAwesomeIcon.PlayCircleOutline, "\uf01d"},
        {FontAwesomeIcon.SignOut, "\uf08b"},
        {FontAwesomeIcon.Sliders, "\uf1de"}
    };

    public static void Awesomify(this TextView view, FontAwesomeIcon icon)
    {
        var iconString = IconMap[icon];

        view.Text = iconString;
        view.SetTypeface(AwesomeFont, TypefaceStyle.Normal);
    }
}

enum FontAwesomeIcon
{
    Bars,
    Calendar,
    Child,
    Cog,
    Eye,
    Filter,
    Link,
    ListOrderedList,
    PencilSquareOutline,
    Picture,
    PlayCircleOutline,
    SignOut,
    Sliders
}

Cela devrait être assez facile à convertir en Java, je pense. J'espère que cela aide quelqu'un!

L'une des bibliothèques que j'utilise pour Font Awesome est la suivante:

https://github.com/Bearded-Hen/Android-Bootstrap

Plus précisément,

https://github.com/Bearded-Hen/Android-Bootstrap/wiki/Font-Awesome-Text

La documentation est facile à comprendre.

Tout d'abord, ajoutez les dépendances nécessaires dans build.gradle:

dependencies {
    compile 'com.beardedhen:androidbootstrap:1.2.3'
}

Deuxièmement, vous pouvez ajouter ceci dans votre XML:

<com.beardedhen.androidbootstrap.FontAwesomeText
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    fontawesometext:fa_icon="fa-github"
    android:layout_margin="10dp" 
    android:textSize="32sp"
/>

mais assurez-vous de l'ajouter dans votre mise en page racine si vous souhaitez utiliser l'exemple de code ci-dessus:

    xmlns:fontawesometext="http://schemas.android.com/apk/res-auto"

La bibliothèque FontView vous permet d'utiliser des caractères de police normaux / unicode comme icônes / graphiques dans votre application. Il peut charger la police via des actifs ou un emplacement réseau.

L'avantage de cette bibliothèque est que:

1 - it takes care of remote resources for you
2 - scales the font size in dynamically sized views
3 - allows the font to easily be styled.

https://github.com/shellum/fontView

Exemple:

Layout:

<com.finalhack.fontview.FontView
        android:id="@+id/someActionIcon"
        android:layout_width="80dp"
        android:layout_height="80dp" />

Java:

fontView.setupFont("fonts/font.ttf", character, FontView.ImageType.CIRCLE);
fontView.addForegroundColor(Color.RED);
fontView.addBackgroundColor(Color.WHITE);

Il existe une autre solution intéressante que vous pouvez utiliser directement dans vos fichiers xml de mise en page et qui ne nécessite pas d'utilisation setTypeface.

C'est Iconify de Joan Zapata . Vous pouvez lire ici les nouveautés d' Iconify v2 . Il comprend 9 bibliothèques de polices différentes que vous pouvez simplement utiliser en ajoutant des dépendances à votre fichier build.gradle .

Dans les fichiers xml de mise en page, il est possible de choisir entre ces widgets:

com.joanzapata.iconify.widget.IconTextview
com.joanzapata.iconify.widget.IconButton
com.joanzapata.iconify.widget.IconToggleButton

Créez initialement un dossier d'actifs et copiez l'icône fontawesome (.ttf) Comment créer un dossier d'actifs?

app -> clic droit -> nouveau -> dossier -> dossier d'actifs

prochaine étape télécharger comment télécharger le fichier .ttf? cliquez ici -> et cliquez sur le bouton de téléchargement après l'extrait de téléchargement et ouvrez les polices Web. enfin, choisissez le dossier de ressources de collage de vrai style de texte (ttf).

comment concevoir des fichiers xml et java sous android?

app -> res -> valeurs string.xml

resources
    string name="calander_font" >&#xf073; <string
resources

cet exemple d'une police plus Unicode cliquez ici

Activity_main.xml

 <TextView
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:id="@+id/calander_view"/>

MainActivity.java

calander_tv = (TextView)findViewById(R.id.calander_view);

Typeface typeface = Typeface.createFromAsset(getAssets(),"/fonts/fa-solid-900.ttf");
calander_tv.setTypeface(typeface);
calander_tv.setText(R.string.calander_font);

Production:

Image de sortie

Je suis un peu en retard à la fête mais j'ai écrit une vue personnalisée qui vous permet de le faire, par défaut, elle est définie sur entypo, mais vous pouvez la modifier pour utiliser n'importe quelle iconfont: vérifiez-la ici: github.com/MarsVard/IconView

// modifier la bibliothèque est ancienne et n'est plus prise en charge ... nouvelle ici https://github.com/MarsVard/IonIconView

Si vous n'avez besoin que de quelques icônes de polices géniales, vous pouvez également utiliser http://fa2png.io pour générer des images de pixels normales. Mais si vous ajoutez régulièrement de nouvelles icônes / boutons, je recommanderais la version .ttf car elle est plus flexible.

Si quelqu'un se demande comment l'ajouter par programme, vous devez le faire de cette façon.

   button_info.setText(R.string.icon_heart);
    button_info.append(" Hallo"); //<<--- This is the tricky part

Comme toutes les réponses sont excellentes, je ne voulais pas utiliser de bibliothèque et chaque solution avec une seule ligne de code java rendait mon Activitieset Fragmentstrès compliqué. J'ai donc écrit la TextViewclasse comme suit:

public class FontAwesomeTextView extends TextView {
private static final String TAG = "TextViewFontAwesome";
public FontAwesomeTextView(Context context) {
    super(context);
    init();
}

public FontAwesomeTextView(Context context, AttributeSet attrs) {
    super(context, attrs);
    init();
}

public FontAwesomeTextView(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    init();
}

@TargetApi(Build.VERSION_CODES.LOLLIPOP)
public FontAwesomeTextView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
    super(context, attrs, defStyleAttr, defStyleRes);
    init();
}

private void setCustomFont(Context ctx, AttributeSet attrs) {
    TypedArray a = ctx.obtainStyledAttributes(attrs, R.styleable.TextViewPlus);
    String customFont = a.getString(R.styleable.TextViewPlus_customFont);
    setCustomFont(ctx, customFont);
    a.recycle();
}

private void init() {
    if (!isInEditMode()) {
        Typeface tf = Typeface.createFromAsset(getContext().getAssets(), "fontawesome-webfont.ttf");
        setTypeface(tf);
    }
}

public boolean setCustomFont(Context ctx, String asset) {
    Typeface typeface = null;
    try {
        typeface = Typeface.createFromAsset(ctx.getAssets(), asset);
    } catch (Exception e) {
        Log.e(TAG, "Unable to load typeface: "+e.getMessage());
        return false;
    }

    setTypeface(typeface);
    return true;
}
}

ce que vous devez faire est de copier le ttffichier de police dans un assetsdossier et d'utiliser cette feuille de triche pour trouver chaque chaîne d'icônes.

J'espère que cela t'aides.