Showing posts with label custom. Show all posts
Showing posts with label custom. Show all posts

Sunday, September 13, 2015

Note of Color and Font



TextView with Colored Text

There are different ways to change the color of text inside a TextView and I want to share one way of them with you.
In general, we can add styling to strings with HTML markup. I will use the <font> tag to display the word 'Colors' in a TextView. Steps are simple:
1. Store your styled text resource as an HTML-escaped string. Add a new string resource with text 'Colors', surround each character with the <font> tag including color and then replace the angle bracket at start of each <font> tag with &lt;
<string name="colored_message">&lt;font color="#0057e7">C&lt;/font>&lt;font color="#d62d20">o&lt;/font>&lt;font color="#ffa700">l&lt;/font>&lt;font color="#0057e7">o&lt;/font>&lt;font color="#008744">r&lt;/font>&lt;font color="#d62d20">s&lt;/font></string>
More information about string-resource formatting and styling can be found at Formatting and Styling.
2. Get the string from the string-table and convert the HTML text into styled text.
String text = getResources().getString(R.string.colored_message);
CharSequence styledText = Html.fromHtml(text);
3. Change the text of your TextView.
textView.setText(styledText);

App Font

Again, there are different ways to use custom fonts. I will use the Calligraphy library to change the font of my whole app. The library and its documentation can be found at Calligraphy
Here's a sample usage:
1. Add an assets folder to your project if it does not have one.
Adding the assets folder from inside the Android Studio.
And then add a sub-folder to the assets and name it fonts.
2. Get your font and copy it to the fonts folder. I will use the free font, Back To School. I renamed the file to BackToSchool.ttf
3. Add the Calligraphy library to the dependencies of your project.
compile 'uk.co.chrisjenx:calligraphy:2.1.0'
4. Create an application class and override the onCreate method.
public class FontColorsApp extends Application {
    @Override
    public void onCreate() {
        super.onCreate();

        CalligraphyConfig.initDefault(new CalligraphyConfig.Builder()
                        .setDefaultFontPath("fonts/BackToSchool.ttf")
                        .setFontAttrId(R.attr.fontPath)
                        .build()
        );
    }
}
5. In your manifest, set the name attribute of your <application> to the new application class.
<application
    android:name=".FontColorsApp"
    ...
6. Override the attachBaseContext() in your activities.
@Override
protected void attachBaseContext(Context newBase) {
    super.attachBaseContext(CalligraphyContextWrapper.wrap(newBase));
}
Run your app and it should display your text using the font from the assets.
Hope it helps and let me hear from you.