-- 00 Create ColorMyViews Project and One Box
add res/font/roboto.ttf
activity_main.xml
1-<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" 1+<androidx.constraintlayout.widget.ConstraintLayout 2+ xmlns:android="http://schemas.android.com/apk/res/android" 6+ android:id="@+id/constraint_layout"
12+ android:id="@+id/box_one_text"
add res/values/dimens.xml
16dp 8dp 24spactivity_main.xml
13- android:layout_width="wrap_content" 13+ android:layout_width="0dp" 15+ android:layout_marginStart="@dimen/margin_wide" 16+ android:layout_marginTop="@dimen/margin_wide" 17+ android:layout_marginEnd="@dimen/margin_wide"
res/values/strings.xml
3+ Box One
activity_main.xml
18- android:text="Hello World!" 18+ android:text="@string/box_one"
19- app:layout_constraintBottom_toBottomOf="parent" 20- app:layout_constraintLeft_toLeftOf="parent" 21- app:layout_constraintRight_toRightOf="parent" 19+ app:layout_constraintEnd_toEndOf="parent" 20+ app:layout_constraintStart_toStartOf="parent"
13+ style="@style/whiteBox"
res/values/styles.xml
9+ 10+ <style name="whiteBox"> 11+ @android:color/holo_green_light 12+ center 13+ @dimen/box_text_size 14+ bold 15+ @android:color/white 16+ @font/roboto 17+ </style>
-- 01 Add Aligned Boxes with Click Handlers
res/values/strings.xml
4+ Box Two
activity_main.xml
24+ <TextView 25+ android:id="@+id/box_two_text" 26+ android:layout_width="130dp" 27+ android:layout_height="130dp" 28+ android:layout_marginStart="@dimen/margin_wide" 29+ android:layout_marginTop="@dimen/margin_wide" 30+ android:layout_marginBottom="@dimen/margin_half" 31+ android:text="@string/box_two" 32+ app:layout_constraintStart_toStartOf="parent" 33+ app:layout_constraintTop_toBottomOf="@+id/box_one_text" 34+ app:layout_constraintVertical_bias="0.0" /> 35+
res/values/strings.xml
5+ Box Three
activity_main.xml
36+ <TextView 37+ android:id="@+id/box_three_text" 38+ style="@style/whiteBox" 39+ android:layout_width="0dp" 40+ android:layout_height="wrap_content" 41+ android:layout_marginStart="@dimen/margin_wide" 42+ android:layout_marginEnd="@dimen/margin_wide" 43+ android:text="@string/box_three" 44+ app:layout_constraintEnd_toEndOf="parent" 45+ app:layout_constraintStart_toEndOf="@+id/box_two_text" 46+ app:layout_constraintTop_toTopOf="@+id/box_two_text" /> 47+
res/values/strings.xml
6+ Box Four
activity_main.xml
44+ app:layout_constraintBottom_toTopOf="@+id/box_four_text" 49+ <TextView 50+ android:id="@+id/box_four_text" 51+ style="@style/whiteBox" 52+ android:layout_width="0dp" 53+ android:layout_height="wrap_content" 54+ android:layout_marginStart="@dimen/margin_wide" 55+ android:layout_marginTop="@dimen/margin_wide" 56+ android:layout_marginEnd="@dimen/margin_wide" 57+ android:layout_marginBottom="@dimen/margin_wide" 58+ android:text="@string/box_four" 59+ app:layout_constraintEnd_toEndOf="parent" 60+ app:layout_constraintStart_toEndOf="@+id/box_two_text" 61+ app:layout_constraintTop_toBottomOf="@+id/box_three_text" 62+ app:layout_constraintVertical_chainStyle="spread_inside" /> 63+
res/values/strings.xml
7+ Box Five
activity_main.xml
59+ app:layout_constraintBottom_toTopOf="@+id/box_five_text" 65+ <TextView 66+ android:id="@+id/box_five_text" 67+ style="@style/whiteBox" 68+ android:layout_width="0dp" 69+ android:layout_height="wrap_content" 70+ android:layout_marginStart="@dimen/margin_wide" 71+ android:layout_marginEnd="@dimen/margin_wide" 72+ android:text="@string/box_five" 73+ app:layout_constraintBottom_toBottomOf="@+id/box_two_text" 74+ app:layout_constraintEnd_toEndOf="parent" 75+ app:layout_constraintStart_toEndOf="@+id/box_two_text" 76+ app:layout_constraintTop_toBottomOf="@+id/box_four_text" /> 77+
MainActivity.kt
11+ 12+ setListeners()
13+ 14+ private fun setListeners() { 15+ val clickableViews: List = 16+ listOf(box_one_text, box_two_text, box_three_text, 17+ box_four_text, box_five_text) 18+ 19+ for (item in clickableViews) { 20+ item.setOnClickListener { makeColored(it) } 21+ } 22+ }
5+import android.view.View 6+import kotlinx.android.synthetic.main.activity_main.*
25+ 26+ private fun makeColored(view: View) { 27+ when (view.id) { 28+ 29+ R.id.box_one_text -> view.setBackgroundColor(Color.DKGRAY) 30+ R.id.box_two_text -> view.setBackgroundColor(Color.GRAY) 31+ 32+ R.id.box_three_text -> view.setBackgroundResource(android.R.color.holo_green_light) 33+ R.id.box_four_text -> view.setBackgroundResource(android.R.color.holo_green_dark) 34+ R.id.box_five_text -> view.setBackgroundResource(android.R.color.holo_green_light) 35+ 36+ else -> view.setBackgroundColor(Color.LTGRAY) 37+ } 38+ }
3+import android.graphics.Color
activity_main.xml
26+ style="@style/whiteBox"
res/values/styles.xml
11- @android:color/holo_green_light 11+ @android:color/white
activity_main.xml
9- tools:context=".MainActivity"> 9+ tools:context=".MainActivity" 10+ tools:background="@android:color/holo_blue_light">
strings.xml
8+ This is a game:
activity_main.xml
80+ <TextView 81+ android:id="@+id/label_text" 82+ android:layout_width="wrap_content" 83+ android:layout_height="wrap_content" 84+ android:layout_marginStart="@dimen/margin_wide" 85+ android:fontFamily="@font/roboto" 86+ android:text="@string/how_to_play" 87+ android:textSize="@dimen/box_text_size" 88+ android:textStyle="bold" 89+ app:layout_constraintStart_toStartOf="parent" /> 90+ 34+ app:layout_constraintBottom_toTopOf="@+id/label_text"
strings.xml
9+ Tap the screen and buttons.
activity_main.xml
92+ <TextView 93+ android:id="@+id/info_text" 94+ android:layout_width="wrap_content" 95+ android:layout_height="wrap_content" 96+ android:layout_marginStart="@dimen/margin_wide" 97+ android:layout_marginTop="@dimen/margin_half" 98+ android:layout_marginBottom="@dimen/margin_half" 99+ android:layout_marginEnd="@dimen/margin_wide" 100+ android:fontFamily="@font/roboto" 101+ android:text="@string/tap_the_boxes_and_buttons" 102+ app:layout_constraintBottom_toBottomOf="parent" 103+ app:layout_constraintEnd_toEndOf="parent" 104+ app:layout_constraintHorizontal_bias="1.0" 105+ app:layout_constraintStart_toEndOf="@+id/label_text" 106+ app:layout_constraintTop_toBottomOf="@+id/box_two_text" 107+ app:layout_constraintVertical_bias="0.12" /> 108+ 90+ app:layout_constraintBaseline_toBaselineOf="@+id/info_text"
strings.xml
10+ RED
activity_main.xml
110+ <Button 111+ android:id="@+id/red_button" 112+ android:layout_width="wrap_content" 113+ android:layout_height="wrap_content" 114+ android:fontFamily="@font/roboto" 115+ android:text="@string/button_red" 116+ app:layout_constraintHorizontal_bias="0.5" 117+ app:layout_constraintHorizontal_chainStyle="spread" 118+ app:layout_constraintStart_toStartOf="parent" /> 119+
strings.xml
11+ YELLOW
activity_main.xml
120+ <Button 121+ android:id="@+id/yellow_button" 122+ android:layout_width="wrap_content" 123+ android:layout_height="wrap_content" 124+ android:layout_marginTop="@dimen/margin_half" 125+ android:layout_marginBottom="@dimen/margin_wide" 126+ android:fontFamily="@font/roboto" 127+ android:text="@string/button_yellow" 128+ app:layout_constraintBottom_toBottomOf="parent" 129+ app:layout_constraintHorizontal_bias="0.5" 130+ app:layout_constraintStart_toEndOf="@+id/red_button" 131+ app:layout_constraintTop_toBottomOf="@+id/label_text" 132+ app:layout_constraintVertical_bias="1.0" /> 133+ 116+ app:layout_constraintBaseline_toBaselineOf="@+id/yellow_button" 117+ app:layout_constraintEnd_toStartOf="@+id/yellow_button"
strings.xml
12+ GREEN
activity_main.xml
136+ <Button 137+ android:id="@+id/green_button" 138+ android:layout_width="wrap_content" 139+ android:layout_height="wrap_content" 140+ android:fontFamily="@font/roboto" 141+ android:text="@string/button_green" 142+ app:layout_constraintBaseline_toBaselineOf="@+id/yellow_button" 143+ app:layout_constraintEnd_toEndOf="parent" 144+ app:layout_constraintHorizontal_bias="0.5" 145+ app:layout_constraintStart_toEndOf="@+id/yellow_button" /> 146+ 131+ app:layout_constraintEnd_toStartOf="@+id/green_button"
colors.xml
6+ #12C700 7+ #E54304 8+ #FFC107
MainActivity.kt
20- box_four_text, box_five_text) 20+ box_four_text, box_five_text, constraint_layout, 21+ red_button, green_button, yellow_button) 38+ R.id.red_button -> box_three_text.setBackgroundResource(R.color.my_red) 39+ R.id.yellow_button -> box_four_text.setBackgroundResource(R.color.my_yellow) 40+ R.id.green_button -> box_five_text.setBackgroundResource(R.color.my_green)