Customizing TextInputLayout – Part 2

In previous article Customizing TextInputLayout – Part 1, we learnt how to customize TextInputLayout and how to apply hint color to it.

Going to next step of TextInputLayout, in this article we are going to customize this widget by applying custom Typeface to it.

Change Typeface of TextInputLayout

First what you need to do is, download some decent fonts online. You can also use fonts which I have used in demo by downloading it from here.

After downloading fonts, open your “MainActivity.java” file. Actually there is no any method to apply custom fonts in XMl layout file. So we need to patch some part of TextInputLayout to apply custom font.

Declare objects and assign ids to them. Here, in my demo, I took 3 TextInputLayout and apply ids like below.

[xml]

<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android”
xmlns:tools=”http://schemas.android.com/tools”
xmlns:app=”http://schemas.android.com/apk/res-auto”
android:layout_width=”match_parent”
android:layout_height=”match_parent”
android:paddingLeft=”@dimen/activity_horizontal_margin”
android:paddingRight=”@dimen/activity_horizontal_margin”
android:paddingTop=”@dimen/activity_vertical_margin”
android:paddingBottom=”@dimen/activity_vertical_margin”
tools:context=”.MainActivity”
android:orientation=”vertical”>

<android.support.design.widget.TextInputLayout
android:id=”@+id/tilFirstName”
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
app:hintTextAppearance=”@style/TextAppearence.TextInputLayout.Blue”>

<EditText
android:id=”@+id/edtFirstName”
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:hint=”First Name”
android:inputType=”text”
android:singleLine=”true”/>

</android.support.design.widget.TextInputLayout>

<android.support.design.widget.TextInputLayout
android:id=”@+id/tilLastName”
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
app:hintTextAppearance=”@style/TextAppearence.TextInputLayout.Red”>

<EditText
android:id=”@+id/lastName”
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:hint=”Last Name”
android:inputType=”text”
android:singleLine=”true”/>

</android.support.design.widget.TextInputLayout>

<android.support.design.widget.TextInputLayout
android:id=”@+id/tilEmail”
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
app:hintTextAppearance=”@android:style/TextAppearance”>

<EditText
android:id=”@+id/mail”
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:hint=”e-mail”
android:inputType=”textEmailAddress”
android:singleLine=”true”/>

</android.support.design.widget.TextInputLayout>

</LinearLayout>

[/xml]

In your activity, code will be like

[java]
tilFiratName = (TextInputLayout) findViewById(R.id.tilFirstName);
tilLastName = (TextInputLayout) findViewById(R.id.tilLastName);
tilEmail = (TextInputLayout)findViewById(R.id.tilEmail);
[/java]

After declaring objects, you need to write following method inside your activity. Copy paste below code.

[java]
private void setTypefaceToInputLayout(TextInputLayout inputLayout, String typeFace){

final Typeface tf = Typeface.createFromAsset(getAssets(), typeFace);

inputLayout.getEditText().setTypeface(tf);
try {
// Retrieve the CollapsingTextHelper Field
final Field collapsingTextHelperField = inputLayout.getClass().getDeclaredField(“mCollapsingTextHelper”);
collapsingTextHelperField.setAccessible(true);

// Retrieve an instance of CollapsingTextHelper and its TextPaint
final Object collapsingTextHelper = collapsingTextHelperField.get(inputLayout);
final Field tpf = collapsingTextHelper.getClass().getDeclaredField(“mTextPaint”);
tpf.setAccessible(true);

// Apply your Typeface to the CollapsingTextHelper TextPaint
((TextPaint) tpf.get(collapsingTextHelper)).setTypeface(tf);
} catch (Exception ignored) {
// Nothing to do
}
}

[/java]

All things are done to apply Typeface to TextInputLayout. We have objects, we have typeface files and we have method to apply font. So simply write below single line of code to apply font to TextInputLayout.

Syntax
[java]
setTypefaceToInputLayout(textInputObject,”Typeface_File_Name.ttf”);
[/java]

Example

[java]
setTypefaceToInputLayout(tilFiratName,”KGCamdenMarketScript.ttf”);
[/java]

Demo

The source code for this article is available here

Summary

In this article, we learnt how to apply custom Typeface to TextInputLayout. You can apply any Typeface to as per your need.