KotlinでAndroidアプリの画像上にテキストを描画する方法【初心者向け解説】

このチュートリアルでは、Kotlinを使ってAndroidアプリで画像の上にテキストを描画（重ねて表示）する方法を解説します。ImageViewの上にTextViewを重ねて配置するシンプルな手法を、ステップごとにコード例とともに紹介します。

ステップ1：新しいプロジェクトを作成する

Android Studioで新しいプロジェクトを作成します。メニューから「File」→「New Project」を選択し、必要な項目をすべて入力してプロジェクトを作成してください。

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

res/layout/activity_main.xml に以下のコードを追加します。ImageViewの上にTextViewを重ねて配置し、画面下部にテキストを表示する構成です。

コード例

<?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">
<ImageView
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:background="@drawable/image" />
<TextView
   android:id="@+id/text"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_alignParentBottom="true"
   android:layout_marginBottom="16sp"
   android:padding="4dp"
   android:textSize="24sp"
   android:textStyle="bold|italic" />
</RelativeLayout>

ステップ3：MainActivity.ktを編集する

src/MainActivity.kt に以下のコードを追加します。TextViewに表示するテキストを設定し、文字色を白に変更しています。

import android.graphics.Color
import android.os.Bundle
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity
class MainActivity : AppCompatActivity() {
   override fun onCreate(savedInstanceState: Bundle?) {
      super.onCreate(savedInstanceState)
      setContentView(R.layout.activity_main)
      title = "KotlinApp"
      val textView: TextView = findViewById(R.id.text)
      textView.text = "Into the wild!"
      textView.setTextColor(Color.WHITE)
   }
}

ステップ4：AndroidManifest.xmlを編集する

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

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android" package="com.example.q11">
   <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」アイコンをクリックします。

表示される候補から自分のモバイルデバイスを選択すると、端末の画面にテキストが重ねられた画像が表示されます。