【Android Studio＆Kotlin】「GradientDrawable」コードで動的に生成する

2021年9月14日 2021年9月14日 10分6秒

YOSHITAKA

こんにちは。YOSHITAKA（@YOSHITA19704216）です。

初心者

xmlファイルではなく、kotlinのコードで動的に色を変えることはできますか？

よしたか

学んだことをアウトプットしていきます。

この記事を読むことで

xmlファイルではなく、kotlinのコードで動的に色を変える方法がわかります。

Contents

xmlファイルではなく、kotlinのコードで動的に色を変える方法

対象者

大前提

kotlinのコードで動的に色を変える方法がまだわからない人向けです。

xmlファイルで色や丸の大きさを指定

レイアウトファイルで作成すると次のように色や大きさ、角丸に変更することができる。

シェイプドローアブルを作成します。

シェイプドローアブルはXML 内で定義される一般的な図形です。

見本の紹介

ファイルの場所:
res/drawable/filename.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android">
  <stroke android:width="3dp" android:color="#FF0000FF" />
  <corners android:radius="3dp" />
  <solid android:color="#660000FF" />
</shape>

見本2

公式サイトから属性の型を明記したものを提示しています。

”integer”の部分は数字と単位を入力して調整してみてください。

もちろんすべて細かく設定する必要はありません。

構文:

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape=["rectangle" | "oval" | "line" | "ring"] >
    <corners
        android:radius="integer"
        android:topLeftRadius="integer"
        android:topRightRadius="integer"
        android:bottomLeftRadius="integer"
        android:bottomRightRadius="integer" />
    <gradient
        android:angle="integer"
        android:centerX="float"
        android:centerY="float"
        android:centerColor="integer"
        android:endColor="color"
        android:gradientRadius="integer"
        android:startColor="color"
        android:type=["linear" | "radial" | "sweep"]
        android:useLevel=["true" | "false"] />
    <padding
        android:left="integer"
        android:top="integer"
        android:right="integer"
        android:bottom="integer" />
    <size
        android:width="integer"
        android:height="integer" />
    <solid
        android:color="color" />
    <stroke
        android:width="integer"
        android:color="color"
        android:dashWidth="integer"
        android:dashGap="integer" />
</shape>

必須のコード

要素:

<shape>
スケールドローアブル。

ルート要素でなければなりません。

属性:

xmlns:android
文字列。必須です。

XML 名前空間を “http://schemas.android.com/apk/res/android” として定義します。

android:shape
キーワード。

図形タイプを定義します。

有効な値は次のとおりです。

値	説明
`"rectangle"`	四角形。これはデフォルトの図形です。
`"oval"`	楕円形。
`"line"`	水平線。この図形には線の太さを指定する `<stroke>` 要素が必要です。
`"ring"`	同心円。

よく使う要素

自分がよく使った要素を紹介しておきます。

属性でよく使う属性は書いておきますが、公式サイトで確認してみてください。

公式サイトはこちらになります。

※属性は詳細を設定するための文字列になります。

`要素 <corners>`

形の角を丸くします。

四角形にのみ適用できます。

属性:

android:radius
ディメンション。大きさを指定します。

すべての角の半径を、ディメンション値またはディメンションリソースで指定します。

`要素 <gradient>`

図形のグラデーション色を指定します。

属性:

android:startColor
開始の色。

開始色を 16 進値またはカラーリソースで指定します。

android:centerColor

中央の色。

グラデーションの開始色と終了色の間の中間色を、16 進値またはカラーリソースで指定します（任意）。

android:endColor

端の色。

終了色を 16 進値またはカラーリソースで指定します。

要素 <solid>

図形に使用する単色。

属性:

android:color

図形の色。

形に適用する色を 16 進値またはカラーリソースで指定します。

要素 <stroke>

図形の枠線。

属性:

android:width
ディメンション。大きさを設定します。

線の太さをディメンション値またはディメンションリソースで指定します。

android:color

枠線の色。

線の色を 16 進値またはカラーリソースで指定します。

レイアウトしたコードを動的に変更する

以下のように指定して、色を変更していく。

//基本的な使い方
val drawable = GradientDrawable()
drawable.setStroke(3, Color.parseColor("#FF0000FF")) //枠線の太さと色の変更
drawable.cornerRadius = 3f //コーナーの設定方法
drawable.setColor(Color.parseColor("#660000FF")) //背景色の変更方法1
drawable.setColor(100)//背景色の変更方法2 お好きな方法で色を選択

応用で使用したのは次のようにしました。

lateinitで遅延して設定するようにしています。

setColorは随時指定された色を入れました。
（今回は割愛しています。）

//応用 コールバック関数を利用した時に次のように設定しました。
//コールバック関数でリアルタイムに指定する時は、セットカラーの値も変数にして変更します。
lateinit var colorBackground: ImageView
(colorBackground.drawable as GradientDrawable).setColor(0)