Skip to content

Commit e276bd3

Browse files
skydovesskydoves
committed
Add docs
1 parent 9939ef2 commit e276bd3

File tree

12 files changed

+1680
-0
lines changed

12 files changed

+1680
-0
lines changed

‎.gitignore‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,3 +61,6 @@ google-services.json
6161
freeline.py
6262
freeline/
6363
freeline_project_description.json
64+
65+
# MkDocs
66+
site/

‎docs/alphatileview.md‎

Lines changed: 200 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,200 @@
1+
# AlphaTileView
2+
3+
`AlphaTileView` is a custom view that displays ARGB colors with a checkered tile background, making transparent colors visible and distinguishable.
4+
5+
<img src="https://user-images.githubusercontent.com/24237865/45364416-09377d00-b615-11e8-9707-b83f55053480.jpg" width="280"/>
6+
7+
## Why Use AlphaTileView?
8+
9+
When displaying colors with transparency on a regular view, the alpha channel mixes with the parent view's background color, making it difficult to see the actual color. `AlphaTileView` solves this by showing colors against a checkered pattern (similar to design tools like Photoshop).
10+
11+
| Regular View | AlphaTileView |
12+
|:------------:|:-------------:|
13+
| Transparent colors blend with background | Transparent colors shown against checkered pattern |
14+
15+
## XML Layout
16+
17+
```xml
18+
<com.skydoves.colorpickerview.AlphaTileView
19+
android:id="@+id/alphaTileView"
20+
android:layout_width="55dp"
21+
android:layout_height="55dp"
22+
app:tileSize="20"
23+
app:tileEvenColor="@color/tile_even"
24+
app:tileOddColor="@color/tile_odd" />
25+
```
26+
27+
## XML Attributes
28+
29+
| Attribute | Description | Default |
30+
|-----------|-------------|---------|
31+
| `tileSize` | The size of each repeating tile in dp | 10 |
32+
| `tileEvenColor` | The color of even tiles | White |
33+
| `tileOddColor` | The color of odd tiles | Light Gray |
34+
35+
## Setting the Color
36+
37+
Set the display color programmatically:
38+
39+
=== "Kotlin"
40+
41+
```kotlin
42+
val alphaTileView = findViewById<AlphaTileView>(R.id.alphaTileView)
43+
alphaTileView.setPaintColor(Color.argb(128, 255, 0, 0)) // Semi-transparent red
44+
```
45+
46+
=== "Java"
47+
48+
```java
49+
AlphaTileView alphaTileView = findViewById(R.id.alphaTileView);
50+
alphaTileView.setPaintColor(Color.argb(128, 255, 0, 0)); // Semi-transparent red
51+
```
52+
53+
## With ColorEnvelope
54+
55+
Use `AlphaTileView` with `ColorEnvelopeListener` to display the selected color:
56+
57+
```kotlin
58+
colorPickerView.setColorListener(ColorEnvelopeListener { envelope, fromUser ->
59+
alphaTileView.setPaintColor(envelope.color)
60+
textView.text = "#${envelope.hexCode}"
61+
})
62+
```
63+
64+
## Custom Tile Colors
65+
66+
Create custom tile colors for different visual styles:
67+
68+
```xml
69+
<!-- In colors.xml -->
70+
<color name="tile_light">#FFFFFF</color>
71+
<color name="tile_dark">#CCCCCC</color>
72+
```
73+
74+
```xml
75+
<com.skydoves.colorpickerview.AlphaTileView
76+
android:id="@+id/alphaTileView"
77+
android:layout_width="60dp"
78+
android:layout_height="60dp"
79+
app:tileSize="12"
80+
app:tileEvenColor="@color/tile_light"
81+
app:tileOddColor="@color/tile_dark" />
82+
```
83+
84+
## Use Cases
85+
86+
### Color Preview
87+
88+
Display the currently selected color with proper alpha visualization:
89+
90+
```xml
91+
<LinearLayout
92+
android:layout_width="match_parent"
93+
android:layout_height="wrap_content"
94+
android:orientation="horizontal"
95+
android:padding="16dp">
96+
97+
<com.skydoves.colorpickerview.AlphaTileView
98+
android:id="@+id/colorPreview"
99+
android:layout_width="48dp"
100+
android:layout_height="48dp"
101+
app:tileSize="8" />
102+
103+
<TextView
104+
android:id="@+id/hexCode"
105+
android:layout_width="wrap_content"
106+
android:layout_height="wrap_content"
107+
android:layout_marginStart="16dp"
108+
android:layout_gravity="center_vertical" />
109+
110+
</LinearLayout>
111+
```
112+
113+
### In Custom FlagView
114+
115+
Use `AlphaTileView` inside a custom `FlagView` to show accurate color previews:
116+
117+
```kotlin
118+
class CustomFlag(context: Context, layout: Int) : FlagView(context, layout) {
119+
120+
private val alphaTileView: AlphaTileView = findViewById(R.id.flag_color_preview)
121+
private val hexCodeText: TextView = findViewById(R.id.flag_hex_code)
122+
123+
override fun onRefresh(colorEnvelope: ColorEnvelope) {
124+
alphaTileView.setPaintColor(colorEnvelope.color)
125+
hexCodeText.text = "#${colorEnvelope.hexCode}"
126+
}
127+
}
128+
```
129+
130+
### Color History/Palette
131+
132+
Create a row of color swatches that properly display transparency:
133+
134+
```xml
135+
<LinearLayout
136+
android:layout_width="match_parent"
137+
android:layout_height="wrap_content"
138+
android:orientation="horizontal">
139+
140+
<com.skydoves.colorpickerview.AlphaTileView
141+
android:id="@+id/color1"
142+
android:layout_width="40dp"
143+
android:layout_height="40dp"
144+
android:layout_margin="4dp" />
145+
146+
<com.skydoves.colorpickerview.AlphaTileView
147+
android:id="@+id/color2"
148+
android:layout_width="40dp"
149+
android:layout_height="40dp"
150+
android:layout_margin="4dp" />
151+
152+
<com.skydoves.colorpickerview.AlphaTileView
153+
android:id="@+id/color3"
154+
android:layout_width="40dp"
155+
android:layout_height="40dp"
156+
android:layout_margin="4dp" />
157+
158+
</LinearLayout>
159+
```
160+
161+
## Complete Example
162+
163+
```kotlin
164+
class MainActivity : AppCompatActivity() {
165+
166+
override fun onCreate(savedInstanceState: Bundle?) {
167+
super.onCreate(savedInstanceState)
168+
setContentView(R.layout.activity_main)
169+
170+
val colorPickerView = findViewById<ColorPickerView>(R.id.colorPickerView)
171+
val alphaSlideBar = findViewById<AlphaSlideBar>(R.id.alphaSlideBar)
172+
val alphaTileView = findViewById<AlphaTileView>(R.id.alphaTileView)
173+
val hexCodeText = findViewById<TextView>(R.id.hexCodeText)
174+
val argbText = findViewById<TextView>(R.id.argbText)
175+
176+
// Attach alpha slider to see transparency effect
177+
colorPickerView.attachAlphaSlider(alphaSlideBar)
178+
179+
colorPickerView.setColorListener(ColorEnvelopeListener { envelope, fromUser ->
180+
// Update the AlphaTileView with the selected color
181+
alphaTileView.setPaintColor(envelope.color)
182+
183+
// Update text displays
184+
hexCodeText.text = "#${envelope.hexCode}"
185+
val argb = envelope.argb
186+
argbText.text = "A:${argb[0]} R:${argb[1]} G:${argb[2]} B:${argb[3]}"
187+
})
188+
}
189+
}
190+
```
191+
192+
## Tips
193+
194+
!!! tip "Tile Size"
195+
196+
Smaller tile sizes create a finer checkered pattern, which can be better for small preview areas. Larger tiles work well for bigger preview areas.
197+
198+
!!! tip "Contrast"
199+
200+
Choose tile colors with enough contrast to make the checkered pattern visible but not distracting. Light gray and white is a common combination.

0 commit comments

Comments
 (0)