22 2月 2020

[Android Studio]背景色・文字色・サイズ・フォント変更・タイトルバー非表示

by | posted in: Android Studio | 0

実行環境: Android Studio 3.5.3

Android Studioの備忘録です。背景色（Background Color）、文字色（Text Color）、文字サイズ（Text Size）、フォント（Font Family）の変更方法とタイトルバー非表示の方法を説明します。

デフォルトの表示から、以下の画像のような出力に変えます。

下準備として、以下のファイルのありかを確認します。それぞれの変更に必要になるファイルとフォルダです。

  • styles.xml app>res>values
  • colors.xml app>res>values
  • font/〇〇〇.oft app>res * デフォルトではfontフォルダは無いので、実際のディレクトリに移動して作成する。 project名>app>src>main>res にfontフォルダを作成して、その中に使いたいフォントotfファイルを入れる。今回の例ではlogotype.oftを使用しています。otfのみ動作確認しました。ttfは動かなかったです。
  • activity_main.xml app>res>rayout

背景色（Background Color）の変更方法

styles.xml に以下を追加します。”window_background1″は任意な文字で大丈夫。

<item name="android:windowBackground">@color/window_background1</item>

colors.xml に以下を追加します。先ほど決めた ”window_background1″ を間違えずに。色は#から始まるWEB配色で指定しました（薄い黄土色）。

<color name="window_background1">#e6cf8a</color>

以上です。

文字色（Text Color）の変更方法

何通りかあるようです。今回は全体的に反映させる方法と、個別に反映させる方法を記載します。

全体に反映

styles.xml に以下を追加します。”regTextColor”は任意な文字で大丈夫。 

<item name="android:textColor">@color/regTextColor</item>

colors.xml に以下を追加します。先ほど決めた ”regTextColor” を間違えずに。色は#から始まるWEB配色で指定しました (若干薄い黒)。

<color name="regTextColor">#212121</color>

個別に反映

activity_main.xmlの反映させたいTextViewの中に以下を追加します。 色は#から始まるWEB配色で指定しました（青）。

android:textColor="#2253e6"

以上です。

文字サイズ（Text Size）の変更方法

activity_main.xmlの反映させたいTextViewの中に以下を追加します。今回は30spにしました。

android:textSize="30sp"

フォント（Font Family）の変更方法

上述しましたが、まずは app > res の下にfontフォルダを作成し、その中に使用したいフォントファイルを入れます。その後、styles.xml に以下の行を追加します。今回はlogotype.oftファイルを使用しているので、logotypeと記入します。(使用するフォントのファイル名は英小文字にリネームしないと動かなかったです）

<item name="android:fontFamily">@font/logotype</item>

以上です。

タイトルバー非表示

styles.xml の冒頭にある”<style name= … ” の部分を以下に書き換えます。

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

以上です。

実際のコード：

styles.xml のcolorPrimary、colorPrimaryDark、colorAccent　も好みの色に変更しています。

styles.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="android:fontFamily">@font/logotype</item>
        <item name="android:windowBackground">@color/window_background1</item>
        <item name="android:textColor">@color/regTextColor</item>

    </style>

</resources>

colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#ffc926</color>
    <color name="colorPrimaryDark">#e6b422</color>
    <color name="colorAccent">#66500f</color>
    <color name="window_background1">#e6cf8a</color>
    <color name="regTextColor">#212121</color>
</resources>

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="32dp"
        android:layout_marginTop="32dp"
        android:text="@string/textView1"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="32dp"
        android:layout_marginTop="16dp"
        android:text="@string/textView2"
        android:textSize="30sp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView1" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="32dp"
        android:layout_marginTop="16dp"
        android:text="@string/textView3"
        android:textColor="#2253e6"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView2" />

</androidx.constraintlayout.widget.ConstraintLayout>