Code Monkey home page Code Monkey logo

calligraphy's Introduction

Calligraphy

Android Arsenal

Custom fonts in Android an OK way.

Are you fed up of Custom Views to set fonts? Or traversing the ViewTree to find TextViews? Yeah me too.

alt text

##Getting started

Dependency

Include the dependency Download (.aar) :

dependencies {
    compile 'uk.co.chrisjenx:calligraphy:2.1.0'
}

Add Fonts

Add your custom fonts to assets/ all font definitions are relative to this path.

Usage

<TextView fontPath="fonts/MyFont.ttf"/>

Note: The missing namespace, this IS intentional.

Installation

Define your default font using CalligraphyConfig, in your Application class in the #onCreate() method.

@Override
public void onCreate() {
    super.onCreate();
    CalligraphyConfig.initDefault(new CalligraphyConfig.Builder()
                            .setDefaultFontPath("fonts/Roboto-RobotoRegular.ttf")
                            .setFontAttrId(R.attr.fontPath)
                            .build()
            );
    //....
}

Note: You don't need to define CalligraphyConfig but the library will apply no default font and use the default attribute of R.id.fontPath.

Inject into Context

Wrap the Activity Context:

@Override
protected void attachBaseContext(Context newBase) {
    super.attachBaseContext(CalligraphyContextWrapper.wrap(newBase));
}

You're good to go!

Usage

Custom font per TextView

<TextView
    android:text="@string/hello_world"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    fontPath="fonts/Roboto-Bold.ttf"/>

Note: Popular IDE's (Android Studio, IntelliJ) will likely mark this as an error despite being correct. You may want to add tools:ignore="MissingPrefix" to either the View itself or its parent ViewGroup to avoid this. You'll need to add the tools namespace to have access to this "ignore" attribute. xmlns:tools=" http://schemas.android.com/tools". See https://code.google.com/p/android/issues/detail?id=65176.

Custom font in TextAppearance

<style name="TextAppearance.FontPath" parent="android:TextAppearance">
    <!-- Custom Attr-->
    <item name="fontPath">fonts/RobotoCondensed-Regular.ttf</item>
</style>
<TextView
    android:text="@string/hello_world"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textAppearance="@style/TextAppearance.FontPath"/>

Custom font in Styles

<style name="TextViewCustomFont">
    <item name="fontPath">fonts/RobotoCondensed-Regular.ttf</item>
</style>

Custom font defined in Theme

<style name="AppTheme" parent="android:Theme.Holo.Light.DarkActionBar">
    <item name="android:textViewStyle">@style/AppTheme.Widget.TextView</item>
</style>

<style name="AppTheme.Widget"/>

<style name="AppTheme.Widget.TextView" parent="android:Widget.Holo.Light.TextView">
    <item name="fontPath">fonts/Roboto-ThinItalic.ttf</item>
</style>

#FAQ

Font Resolution

The CalligraphyFactory looks for the font in a pretty specific order, for the most part it's very similar to how the Android framework resolves attributes.

  1. View xml - attr defined here will always take priority.
  2. Style xml - attr defined here is checked next.
  3. TextAppearance xml - attr is checked next, the only caveat to this is IF you have a font defined in the Style and a TextAttribute defined in the View the Style attribute is picked first!
  4. Theme - if defined this is used.
  5. Default - if defined in the CalligraphyConfig this is used of none of the above are found OR if one of the above returns an invalid font.

Why not piggyback off of fontFamily attribute?

We originally did, but it conflicted with users wanting to actually use that attribute, you now have to define a custom attribute.

Why no jar?

We needed to ship a custom ID with Calligraphy to improve the Font Injection flow. This unfortunately means that is has to be an aar. But you're using Gradle now anyway right?

Multiple Typeface's per TextView / Spannables

It is possible to use multiple Typefaces inside a TextView, this isn't new concept to Android.

This could be achieved using something like the following code.

SpannableStringBuilder sBuilder = new SpannableStringBuilder();
sBuilder.append("Hello!") // Bold this
        .append("I use Calligraphy"); // Default TextView font.
// Create the Typeface you want to apply to certain text
CalligraphyTypefaceSpan typefaceSpan = new CalligraphyTypefaceSpan(TypefaceUtils.load(getAssets(), "fonts/Roboto-Bold.ttf"));
// Apply typeface to the Spannable 0 - 6 "Hello!" This can of course by dynamic.
sBuilder.setSpan(typefaceSpan, 0, 6, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
setText(sBuilder, TextView.BufferType.SPANNABLE);

Of course this is just an example. Your mileage may vary.

#Colaborators

#Note

This library was created because it is currently not possible to declare a custom font in XML files in Android.

If you feel this should be possible to do, please star this issue on the official Android bug tracker.

#Licence

Copyright 2013 Christopher Jenkins

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

calligraphy's People

Contributors

chrisjenx avatar dlew avatar fingertricks avatar smuldr avatar veinhorn avatar wasabeef avatar mluedke2 avatar nsk-mironov avatar taxomania avatar shaunidiot avatar ened avatar scottyab avatar ryanmeador avatar matthewmichihara avatar manuelpeinado avatar manish05 avatar loganj avatar barbosa avatar loeschg avatar bod avatar blinskey avatar danikula avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.