TextView をカスタムフォントでグラデーション表示する

こんにちは、まっさん(@Tera_Msaki)です。

この記事は Android スマホ用のアプリ開発の中で、
今後の開発で再使用性が高いと思われるコーディングをまとめたものです。
Java での開発経験、XML 構文規則、Android のアプリ開発経験がある方を対象としています。
Android のアプリ開発でお役にたててれば、嬉しいです。
（これから Android のアプリ開発や Java での開発を始めたい方への案内は、記事の最後で紹介します）

この記事のテーマ

　TextView をカスタムフォント＋グラデーション表示で
　リッチな TextView を実装する

TextViewは文字を表示するコンポーネントタイプの View です。
標準フォントとして、DEFAULT、DEFAULT_BOLD、SANS_SERIF、SERIF、MONOSPACE、
スタイルとして、NORMAL、BOLD、ITALIC、BOLD_ITALIC が用意されています。
文字の色は、textColorで指定しますが、単色しか指定できません。
今回は、カスタムフォントを使用したり、文字の色はグラデーションで表示するなど、
リッチな TextView の実装を説明します。

カスタムフォント
グラデーション表示
これからAndroidのアプリ開発やJavaでの開発を始めたい方へ

カスタムフォント

カスタムフォントは、Google Fonts からダウンロードできます。
ダウンロードしてきた TTFファイル（ TrueType フォント）を、
Android Studio のプロジェクトに追加するだけで、
カスタムフォントを使用することができます。

Google Fonts

Making the web more beautiful, fast, and open through great typography

カスタムフォントのダウンロード

Google Fonts で使用するカスタムフォントを選択して、
ダウンロードします。
ダウンロードしたファイルは圧縮されていますので、
使用するスタイルの TTFファイルを解凍します。
フォントによっては、VariableFontが含まれている場合もあります。
VariableFont は、コードからスタイルを変更することができます。
注意点としては、解凍したファイル名は、
大文字などAndroid Studioで扱えない文字が含まれていますので、
ファイル名に変更してください。

Sentence に文字を入力すれば、サンプル以外の文字でフォントを確認できます

カスタムフォントを Android Studio のプロジェクトに追加

リソース（ res）にフォント用のフォルダを追加します。

fontフォルダに解凍した TTFファイルを貼り付けます。

カスタムフォントの使用

レイアウト定義ファイルのTextViewの fontFamilyに
追加したカスタムフォントを指定できるようになります。

:
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:fontFamily="@font/customfont"/>
:

グラデーション表示

文字のグラデーション表示は、Shaderを使用します。
Shaderには、LinearGradient、RadialGradient、SweepGradient などがあり、
今回は、中心点と半径から円形のグラデーションする RadialGradient を使用しました。

    private final SimpleDateFormat      MMSS = new SimpleDateFormat("m''ss", Locale.getDefault());
    private final int[]                 margins = {0,0};
    private long                        limit;
    :

    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        view =  inflater.inflate(R.layout.fragment, container, false);
        :

        TextView counter = view.findViewById(R.id.counter);
        :

        counter.setText(MMSS.format(limit));
        if (margins[0] == 0) {
            // センタリング
            counter.measure(0,0);
            counter.getLocationOnScreen(margins);
            RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) counter.getLayoutParams();
            layoutParams.removeRule(RelativeLayout.CENTER_HORIZONTAL);
            layoutParams.setMargins(margins[0] - (counter.getMeasuredWidth() / 2), 0, 0, 0);
            // グラデーション
            Shader shader = new RadialGradient(
                counter.getMeasuredWidth() / 2.0f, counter.getMeasuredHeight(), counter.getMeasuredWidth() / 2.0f,
                context.getColor(R.color.yellow), context.getColor(R.color.red), Shader.TileMode.CLAMP);
            counter.getPaint().setShader(shader);
		    }
		    :

        return view;
    }

TextViewを中央に表示して、表示内容を更新する必要があったので、
表示を少し細工する必要がありました。
使用するカスタムフォントが等幅フォントでないため、
layout_centerHorizontalで中央表示すると、
表示内容を更新する度に表示位置がズレるため、
初回表示後に、layout_centerHorizontal を無効化、
Marginを指定して、表示位置を固定しています。
RadialGradientで中心点と半径を指定する必要がありますので、
初回表示後のTextViewの幅、高さを取得して、計算します。

今回は、ここまでです。
参考：XMLフォント

誤字脱字、意味不明でわかりづらい、
もっと詳しく知りたいなどのご意見は、
このページの最後にあるコメントか、
こちらから、お願いいたします♪

ポチッとして頂けると、
次のコンテンツを作成する励みになります♪

これからAndroidのアプリ開発やJavaでの開発を始めたい方へ

初めての Android のアプリ開発では、アプリケーション開発経験がない方や、
アプリケーション開発経験がある方でも、Java や C# などのオブジェクト指向言語が初めての方は、
書籍などによる独学ではアプリ開発できるようになるには、
かなりの時間がかかりますので、オンラインスクールでの習得をおススメします。

未経験者からシステムエンジニアを目指すのに最適かと、
まずは無料相談から♪