Kotlinでテーマ・スタイルを設定する方法を初心者向けにやさしく解説！

Kotlinでテーマ・スタイルを設定する方法

先生と生徒の会話形式で理解しよう

生徒

「KotlinでAndroidアプリを作ってるんですが、ボタンの色とか文字の大きさって、毎回設定しないといけないんですか？」

先生

「その場合はテーマやスタイルを使うと便利ですよ。アプリ全体の見た目を一括でコントロールできます。」

生徒

「テーマとかスタイルって難しそうです…。どうやって使うんですか？」

先生

「大丈夫。順番にわかりやすく説明していくので、一緒にやってみましょう！」

1. テーマとスタイルの違いとは？

テーマ（Theme）は、アプリ全体の色やフォント、背景などを一括で定義するものです。アプリ全体に統一感を持たせたいときに使います。

スタイル（Style）は、個々の部品（ボタンやテキストなど）のデザインを定義します。ボタンごとに色を変えたいときなどに使います。

たとえば、制服がテーマ、ネクタイの色がスタイル…そんなイメージです。

2. styles.xml でスタイルを設定する方法

スタイルは、res/values/styles.xmlに記述します。たとえば、ボタンの背景色や文字色を定義するには以下のように書きます。


<style name="MyButtonStyle">
    <item name="android:background">#2196F3</item>
    <item name="android:textColor">#FFFFFF</item>
    <item name="android:textSize">18sp</item>
</style>

このMyButtonStyleを使えば、何度も同じ色や文字サイズを設定しなくても済みます。

3. スタイルをレイアウトに適用するには？

定義したスタイルは、XMLの中でstyle属性として指定します。


<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    style="@style/MyButtonStyle"
    android:text="スタイル付きボタン" />

これで、毎回個別に色を設定しなくても、同じデザインが自動で適用されます。

4. アプリ全体に反映されるテーマの設定方法

テーマはthemes.xmlに定義され、AndroidManifest.xmlで指定します。


<!-- themes.xml -->
<style name="MyAppTheme" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
    <item name="colorPrimary">#FF5722</item>
    <item name="colorPrimaryVariant">#E64A19</item>
    <item name="colorOnPrimary">#FFFFFF</item>
    <item name="android:fontFamily">sans-serif-medium</item>
</style>


<!-- AndroidManifest.xml -->
<application
    android:theme="@style/MyAppTheme"
    ... >
</application>

こうしておけば、ボタンやテキストの色などがアプリ全体に自動的に反映されます。

5. Kotlinコードからスタイルを変更したいときは？

スタイルやテーマは通常XMLで指定しますが、Kotlinのコードからも色や背景を変更することができます。


val button = findViewById<Button>(R.id.myButton)
button.setBackgroundColor(Color.RED)
button.setTextColor(Color.WHITE)

ただし、同じスタイルを複数の画面で使うなら、やはりstyles.xmlで定義するほうが管理しやすいです。

6. 夜モード・昼モード（ダークテーマ）の切り替え

DayNightテーマを使うと、スマホの設定に応じてアプリの背景が明るくなったり暗くなったりします。以下のように親テーマを指定すれば、対応できます。


<style name="MyAppTheme" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
    <!-- 色やフォントなど -->
</style>

こうすることで、アプリが自動で昼と夜のスタイルを切り替えるようになります。

7. 実行結果のイメージ

上記のスタイルを適用したボタンの表示例：


スタイル付きボタン（背景：青色、文字：白、文字サイズ：18sp）

アプリ全体の背景や文字色も、テーマを通じて統一されたデザインになります。

8. よく使われるスタイル・テーマの項目一覧

以下は、テーマやスタイルでよく使われる設定項目です：

android:background：背景色
android:textColor：文字色
android:textSize：文字サイズ
android:fontFamily：フォント
colorPrimary：メインカラー
colorAccent：アクセントカラー

これらを使いこなせば、KotlinのAndroidアプリ開発で、見た目のカスタマイズがとても簡単になります。

Kotlinを基礎からしっかり学びたい人や、 Java経験を活かしてモダンな言語にステップアップしたい人には、定番の入門書がこちらです。

基礎からわかるKotlinをAmazonで見る

※ Amazon広告リンク

まとめ

Kotlinでテーマやスタイルを設定する方法を振り返ると、Androidアプリのデザインを整えるうえで欠かせない仕組みであることがよくわかります。アプリを開発していると、ボタンの色や文字サイズ、背景色、フォントなど、見た目に関わる設定を繰り返し同じように指定する場面が必ず生まれます。そんなときにスタイルやテーマを活用することで、見た目の統一感を実現しながら、コードやXMLの記述量も大幅に減らすことができます。特に、アプリ全体で共通して使う色やフォントをテーマに登録しておくことで、後からデザインを変更したい場合も1か所を書き換えるだけでアプリ全体に反映され、管理のしやすさが飛躍的に向上します。

また、Material Designに対応したテーマを使うことで、アプリ全体の雰囲気をガラッと変えることもでき、ユーザーにとって心地よいUI・UXを作りやすくなります。スタイルは部品単位で適用できるため、ボタン・テキスト・カードといった細かな要素に個別のデザインを付けたいときに役立ちます。複数の画面で同じデザインを繰り返し使うアプリほど、その効果は大きくなります。スタイルを一度定義しておけば、レイアウトXMLにスタイル名を1行追加するだけで見た目が統一されるため、チーム開発では特に重宝される仕組みです。

さらに、DayNightテーマのように「昼モード・夜モード」を自動切り替えできるテーマを導入すれば、ユーザーの好みやスマホの設定に応じてアプリの見た目を調整できます。現代のアプリではダークテーマ対応が当たり前になっているため、この設定を理解しておくことは大切です。夜間に画面を見たときにまぶしくないように背景色を暗くしてあげることは、ユーザーに対する細やかな配慮のひとつでもあります。

Kotlinコードだけでも色を変更できますが、UI全体を通して統一感を出したいのであれば XML でスタイルやテーマを定義するほうが確実で、後からの修正もしやすくなります。今回紹介したテーマとスタイルの仕組みを理解しておけば、アプリのデザインを大きく変える場合でも効率よく対応でき、開発の負担も軽減されます。色やフォントを変更したり、特定のボタンだけ特別なデザインにしたり、アプリ全体の雰囲気を統一したりと、多彩な使い方が可能になるため、Androidアプリ開発では欠かせない知識です。

テーマ・スタイルを組み合わせた実用的なサンプル


<!-- res/values/styles.xml -->
<style name="MyRoundedButton">
    <item name="android:background">#4CAF50</item>
    <item name="android:textColor">#FFFFFF</item>
    <item name="android:padding">12dp</item>
    <item name="android:fontFamily">sans-serif-medium</item>
</style>

<style name="MyLargeTitleText">
    <item name="android:textColor">#212121</item>
    <item name="android:textSize">24sp</item>
    <item name="android:fontFamily">sans-serif-light</item>
</style>


<!-- res/layout/activity_main.xml -->
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center">

    <TextView
        android:id="@+id/titleText"
        style="@style/MyLargeTitleText"
        android:text="アプリのタイトル" />

    <Button
        android:id="@+id/startButton"
        style="@style/MyRoundedButton"
        android:text="スタート" />
</LinearLayout>


// Kotlin側で動的に変更したい場合
val title = findViewById<TextView>(R.id.titleText)
title.setTextColor(Color.parseColor("#000000"))

val button = findViewById<Button>(R.id.startButton)
button.setBackgroundColor(Color.parseColor("#009688"))

このようにテーマとスタイルを適切に組み合わせることで、見た目の一貫性が保たれ、開発効率も高まります。XML と Kotlin の両方から柔軟にデザインを制御できるため、さまざまな画面構成に応じて調整しやすいのも魅力です。

先生と生徒の振り返り会話

生徒

「テーマとスタイルって難しそうだと思っていたけど、意外と便利なんですね。見た目を揃えたいときに毎回設定しなくていいのは助かります！」

先生

「その通りですよ。一度定義しておけば、アプリ全体で統一したデザインを保てますし、後から変更したいときも簡単です。特にテーマはアプリ全体に影響するので覚えておくと便利です。」

生徒

「DayNightテーマを使えば、自動で暗い色と明るい色を切り替えてくれるのもすごく便利ですね。ユーザーに優しいアプリが作れそうです。」

先生

「そうですね。ユーザーの環境に合わせて見やすいデザインに自動調整されるのは今のアプリでは欠かせません。今日の内容を活かして、より洗練されたアプリを作ってみましょう。」

【未経験OK】Kotlinで始めるプログラミング入門｜ゼロから「動く喜び」を体験する60分

「プログラミングを始めたい」を形にする。最新言語Kotlinで楽しむ、ものづくりの第一歩。

本講座は、プログラミング経験が全くない方のためのエントリー講座です。「コードを書くってどういうこと？」という基本から、世界中で使われている最新言語Kotlin（コトリン）を使って、実際にプログラムを動かすまでを体験します。難しい理屈よりも、まずは「自分の手で動かす楽しさ」を最短距離で実感していただきます。