Androidで文字列に下付き文字・上付き文字を表示する方法

はじめに

このチュートリアルでは、Androidアプリで文字列の一部を下付き文字（Subscript）や上付き文字（Superscript）として表示する方法を解説します。

化学式（H₂Oなど）や数式（X²など）を表示したい場合、SpannableStringBuilderとSubscriptSpan、SuperscriptSpanを組み合わせることで、簡単に実現できます。

ステップ1：新規プロジェクトの作成

Android Studioを開き、「File」→「New Project」を選択して新しいプロジェクトを作成します。必要な情報をすべて入力してください。

ステップ2：レイアウトファイルの編集

res/layout/activity_main.xml に以下のコードを追加します。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
   xmlns:tools="https://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:padding="8dp"
   tools:context=".MainActivity">
   <TextView
      android:id="@+id/textView"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:textSize="36sp"
      android:textStyle="bold"
      android:layout_centerInParent="true"
      android:fontFamily="sans-serif-condensed"/>
</RelativeLayout>

ステップ3：MainActivity.java の編集

src/MainActivity.java に以下のコードを追加します。

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.text.SpannableStringBuilder;
import android.text.Spanned;
import android.text.style.RelativeSizeSpan;
import android.text.style.SubscriptSpan;
import android.text.style.SuperscriptSpan;
import android.widget.TextView;
public class MainActivity extends AppCompatActivity {
   TextView textView;
   String strText;
   SpannableStringBuilder spannableStringBuilder;
   @Override
   protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);
      textView = findViewById(R.id.textView);
      strText= "Test text to show SubscriptSpan X2 and SuperscriptSpan Y5 example.";
      spannableStringBuilder = new SpannableStringBuilder(strText);
      SubscriptSpan subscriptSpan = new SubscriptSpan();
      SuperscriptSpan superscriptSpan = new SuperscriptSpan();
      spannableStringBuilder.setSpan(subscriptSpan, strText.indexOf("2"),
      strText.indexOf("2") + ("2").length(),
      Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
      spannableStringBuilder.setSpan(superscriptSpan, strText.indexOf("5"), strText.indexOf("5") + ("5").length(),
      Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
      showSmallSizeText("2");
      showSmallSizeText("5");
      textView.setText(spannableStringBuilder);
   }
   private void showSmallSizeText(String s) {
      RelativeSizeSpan relativeSizeSpan = new RelativeSizeSpan(.5f);
      spannableStringBuilder.setSpan(relativeSizeSpan, strText.indexOf(s), strText.indexOf(s) + (s).length(),Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
   }
}

コードのポイント

• SubscriptSpan：指定した範囲の文字列を下付き文字として表示します。
• SuperscriptSpan：指定した範囲の文字列を上付き文字として表示します。
• RelativeSizeSpan：下付き・上付き部分のサイズを0.5倍に縮小し、自然な見た目に整えています。
• setSpan()：開始位置と終了位置を指定してスパンを適用します。SPAN_EXCLUSIVE_EXCLUSIVEを指定することで、後続のテキスト挿入の影響を受けないようにしています。

ステップ4：AndroidManifest.xml の編集

androidManifest.xml に以下のコードを追加します。

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android" package="app.com.sample">
   <application
      android:allowBackup="true"
      android:icon="@mipmap/ic_launcher"
      android:label="@string/app_name"
      android:roundIcon="@mipmap/ic_launcher_round"
      android:supportsRtl="true"
      android:theme="@style/AppTheme">
      <activity android:name=".MainActivity">
         <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
         </intent-filter>
      </activity>
   </application>
</manifest>

アプリの実行

それでは、アプリケーションを実行してみましょう。ここでは、実際のAndroid端末がパソコンに接続されているものとします。Android Studioからアプリを実行するには、プロジェクト内のアクティビティファイルを開き、ツールバーの実行（Run）アイコンをクリックします。ドロップダウンから接続済みのモバイルデバイスを選択すると、端末の画面に以下のように表示されます。