How to Use

Welcome to the droidicon wiki!

1. Add library project

Android Studio

Add this to your build.gradle file:

dependencies {
    compile 'com.github.theDazzler:droidicon:x.y.z@aar'
}

replace 'x.y.z' with version number you wish to use

repositories {
        mavenCentral()
    }

2. Setup

Add this xmlns:droidicon="http://schemas.android.com/apk/res-auto" to the top of your xml layout file. Here is an example:

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:droidicon="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="4dp" >

That's it!

3. Usage

Ready-made Badges

Ready-made badges can be added to your layout like this:

<com.thedazzler.droidicon.badges.FacebookDroidiconBadge
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginRight="4dp"
/>

<com.thedazzler.droidicon.badges.VimeoDroidiconBadge
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginRight="4dp"
/>

<com.thedazzler.droidicon.badges.SpotifyDroidiconBadge
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_marginRight="4dp"
/>

That will add a Facebook, Vimeo, and Spotify badge to your layout. Click here for a list of all ready-made badges.

Custom Badges

Custom Badges can be added to your app in xml. To add a badge, do this:

<com.thedazzler.droidicon.badges.DroidiconBadge
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   droidicon:db_bg_color="@color/blue"
   droidicon:db_icon_color="@color/white"
   droidicon:db_icon="fa-user"
/>

That will add a badge with a blue background color and white icon. The icon will be the FontAwesome icon "fa-user".

You can add a stroke to the icon by doing this:

<com.thedazzler.droidicon.badges.DroidiconBadge
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   droidicon:db_bg_color="@color/blue"
   droidicon:db_icon_color="@color/white"
   droidicon:db_icon="fa-user"
   droidicon:db_draw_contour="true"
   droidicon:db_contour_width="5"
   droidicon:db_contour_color="@color/orange"
 />

This will add a 5 pixel orange stroke to the "fa-user" icon.

change size

droidicon:db_size="40dp"

creates a badge that fits inside a 40dp x 40dp square

add transparency

droidicon:db_alpha="125"

The alpha value can range from 0-255. 0 means the icon will be invisible, and 255 means it will be full color.

change padding to create more or less space between icon and badge circle

droidicon:db_icon_padding="20dp"

The list of all custom attributes for DroidiconBadge is here

Custom Icons

Icon names are like this:

• Google Material Design icons: use prefix "gmd". i.e "gmd-phone-bluetooth-speaker"
• FontAwesome icons: use prefix "fa". i.e "fa-user"
• Entypo icons: use prefix "entypo". i.e "entypo-phone"
• Entypo social icons: uses prefix "esocial". i.e "esocial-c-tumblr"
• Iconic icons: use prefix "iconic". i.e "iconic-download"
• Unicode icons use prefix "unicode", with the unicode value. i.e "unicode-0x5672"
• YOUR own icons Convert and merge all your own icons into a font file(.ttf/.otf..etc, there are plenty of tools available that can convert svg files into fonts, like IcoMoon) and name the prefix to anything you like.

The easiest way to add icons without the background is to do it programmatically.

iconView = findViewById(R.id.test_icon);
iconImageView = (ImageView)findViewById(R.id.some_image_view);

IconicFontDrawable iconicFontDrawable = new IconicFontDrawable(this.getApplicationContext());
iconicFontDrawable.setIcon("fa-thumbs-up");
iconicFontDrawable.setIconColor(getResources().getColor(R.color.light_blue));

//setBackground will fulfill the whole view with icon
iconView.setBackground(iconicFontDrawable);

//OR...set the width and height to the icon and use it as bounded drawables
iconicFontDrawable..setIntrinsicWidth(x);
iconicFontDrawable..setIntrinsicHeight(y);
//setImageDrawable to ImageView
iconImageView.setImageDrawable(iconicFontDrawable);

This will create a light blue thumbs-up icon without the circular background.

Init YOUR own icons set

1. Generate a font file, and put it into res/raw/

2. Init your own icons set in app, before you use them.

   //Init your icons name-val mapping Map<String, Integer> customMap = new HashMap<String, Integer>(); customMap.put("custom-1", 0xe600); customMap.put("custom-2", 0xe601); customMap.put("custom-3", 0xe602);

3. Create a CustomTypefaceHolder The params in the constructor are:

• • Prefix name: the prefix you would like to use, make sure this one matches whatever you have in your name-val mapping.
• • The font file resource: e.g. Your font file is under res/raw/custom.ttf then put 'R.raw.custom' here.
• • Name-val map: the name-val mapping you created before.

  CustomTypefaceHolder customTypefaceHolder = new CustomTypefaceHolder("custom", R.raw.custom, customMap);

  //Add it to TypefaceManager. TypefaceManager.getInstance().addNewTypefaceHolder(customTypefaceHolder);

  //That's it! Use it in your app IconicFontDrawable customDrawable1 = new IconicFontDrawable(context); customDrawable1.setIcon("custom-1");

add a stroke

iconView = findViewById(R.id.test_icon);

IconicFontDrawable iconicFontDrawable = new IconicFontDrawable(this.getApplicationContext());
iconicFontDrawable.setIcon("fa-thumbs-up");
iconicFontDrawable.setIconColor(getResources().getColor(R.color.light_blue));
iconicFontDrawable.setContourColor(getResources().getColor(R.color.dark_blue));
iconicFontDrawable.setContourWidth(5);
iconicFontDrawable.drawContour(true);

iconView.setBackground(iconicFontDrawable);

add a ColorFilter

iconicFontDrawable.setColorFilter(Color.CYAN, PorterDuff.Mode.MULTIPLY);

Adds a MULTIPLY filter