どうも！LSSです！
今回は自身の学習を目的に、カラーピッカーを作ってみて、その作っていく様子をブログの記事ネタにします。
自分と同じ初心者の方には参考になる部分があれば、熟練者（未来の自分含む？）には「俺にもこんな時期があったな～」と微笑ましく見ていただければ幸いです！
AndroidStudioで新規作成
いつものようにEmptyActivityを選んで、次の画面はこんな設定でいきます。
（自分の場合、学習中はプロジェクト名を日付＋何を作ろうとしたか、って感じにしています。）
いっぺん設定してしまうと、その後はNameしか書き換えません。
そして、次の画面のココ！
このimportの左の＋を、自分の場合は予めクリックして開いておきます。
これまでいくつか作ってきて、importが済んでるかどうか不安になって後から開く事がよくあったので、それなら先に開いておいてしまおう！って感じです。
今はまだよく分っていないから、ってだけかもですけどね。
xmlを編集するよ～
次に、タブでxmlのほうを選んで、Designのほうを選んでから、Component Treeの
「ConstraintLayout」を右クリックして、「Convert view」を選びます。
すると変更するレイアウト候補が出てくるので、今回は「LinearLayout」を選択、Applyします。
こうなります。
どうもまだ、ConstraintLayoutが好きになれないのでこんな事しています^^;。
で、毎度おなじみのHelloWorldのテキストビューを削除して、「Widgets」からの「SeekBar」をマウスドラッグでつまみ、下にある「LinearLayout」の配下になるようにドロップします。
↓こうなればOK！
そして今、設置したSeekBarが選択された状態のまま、画面右の「Attributes」から、いくつか項目を探して書き換えます。
「id」→「sbR」に打ち換え
「layout_width」→「match_parent」を選択
「max」→「255」と入力
「progress」→「0」と入力
「background」→「#FF0000」と入力
…おおっと、ここで気がつきましたが、LinearLayoutが(horizontal)になってました！
LinearLayoutを選択して、右のAttributesから、
「orientation」→「vartical」を選択しておきます。
xmlをテキスト表示モードで編集するよ～
ここまで終わったら、Design画面を離れてText画面に変更します。
画面を切り替えると、
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
android:orientation="vertical"
tools:context=".MainActivity">
<SeekBar
android:id="@+id/sbR"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FF0000"
android:max="255"
android:progress="0" />
</LinearLayout>
…てなコードになっているかと思います。
ここで、
android:background="#FF0000"
の行の最後にカーソルを合わせて、キーボードのEnterキーを２回たたきます。
すると、２行分のスキマができるので、そのスキマの上の方の行にカーソルを合わせ
「p」とだけ打つと、いくつかの変換候補が出てきて、その中に
「android:progressTint」ってのがあるので、それをEnterキーかダブルクリックで選択します。
android:progressTint=""
と変換されるので、この""の間に「#FFFFFF」と入力します。
そして、残る１行分のスキマにカーソルを合わせ、今度は「t」とだけ打つと、
「android:thumbTint」ってびがあるので、それを選択します。
android:thumbTint=""
と変換されるので、先ほどと同様、この""の間に「#FFFFFF」と入力します。
結果、
<SeekBar
android:id="@+id/sbR"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FF0000"
android:progressTint="#FFFFFF"
android:thumbTint="#FFFFFF"
android:max="255"
android:progress="0" />
というコードになります。
progressTintはシークバーのツマミより左側のラインの色で、
thumnTintがシークバーのツマミそのものの色を設定します。
「#FFFFFF」で白色になります。
コピペ便利！！
ここまで出来たら、
<SeekBar
の行から、
android:progress="0" />
の行までを マウスドラッグまたはキーボードのカーソルキーとシフトキーで選択し、Ctrl+Cでクリップボードに取り込みます。
取り込んだら、
android:progress="0" />
の行と、
</LinearLayout>
の行の間にまた、Enterキーでいくつかスキマ行を開けてあげて、そこに先ほどコピーした数行のSeekBarタグを２回、Ctrl+Vで貼り付けます。
（結果、SeekBarタグは３つになります。）
この時点で、３つのSeekBarタグの
の行が全て、赤い波線がついてしまっています。
idが重複してますよ！！っていう警告ですね。
ですので、１つめのSeekBarはそのままにしておいて、２つめ、３つめのSeekBarのidを別のものに打ち換えます。
今回は、２つめを「sbG」、３つめを「sbB」に打ち換えます。
あともう一か所。
android:background="#FF0000"
の行、こちらも１つめのSeekBarはそのままにしておいて、２つめ、３つめのSeekBarを打ち換えます。
「#FF0000」の部分を、２つめは「#00FF00」に、３つめは「#0000FF」に変更します。
～閑話休題～
ここでちょっと一休み。
sbRとか#FF0000とか意味不明なものを連発したので、ちょこっと説明。
まず「sbR」「sbG」「sbB」、これはkotlin的には全く意味のない、自分が勝手に考えた文字列です。
idに設定する文字列は「kotlin的に意味のない（予約語でない）」文字列にする必要があるため、勝手に決めました。
今回作った３つのシークバーは、「赤」「緑」「青」の強さをそれぞれ調整して、混ぜ合わせた色を作るためのものなので、
「赤のシークバー」→「seekbarRED」→略して「sbR」
という感じに、LSSがマイルールで付けた名前です。
（「任意の文字列」というやつです。）
任意の文字列なので、この記事を見て真似てみようと思う方がおられましたら、各自もっと自分向きの名前に変えてしまってかまわない部分です^^
で、「#FF0000」は、任意の文字列ではありません。
kotlinに限らず、他のプログラム言語（HTMLとかも）で色を表すのに使われる文字列で、その中身は「#」のあとの６桁の１６進数、これは実際は２桁×３で構成され、「１つめの２桁」は赤、「２つめの２桁」は緑、「３つめの２桁」は青、の強さを表現しています。
１６進数なので、最低値「00」（これは10進数でいうところの0）から、最高値「FF」（これは10進数でいうところの255）の数値を表現できる事になります。
（最初にDesign画面で「max」（シークバーの最大値）に設定した「255」って数値はこれに合わせるためです。）
一つめのシークバーのbackgroundに設定した「#FF0000」は、
赤が「FF」で緑が「00」で青が「00」、赤だけが最高に強いので、
「真っ赤」を表現する事になります。
二つめのシークバーのbackgroundは「#00FF00（緑だけ最強）」、
三つめのシークバーのbackgroundは「#0000FF（青だけ最強）」に設定した、
というのが今やった作業の内容になります。
再び、Design画面へ
ここで、もう一度Design画面に戻ってみます。
ちょっと画面の色が部分的に賑やか~になってきましたねｗ
…てなところで、「その１」はここでいったん終わります。
次回に続きますので、よろしくです！
