มาใส่ Gradient ให้ StatusBar กันเถอะ

Phongsathon Patthaladilok
te<h @TDG
Published in
2 min readJul 2, 2020
Pic: https://www.uxfree.com/android-marshmallow-status-bar-icons-free-psd/

หลายคนอาจเคยประสบปัญหา เกี่ยวกับการปรับแต่ง StatusBar ให้เป็นในแบบต่างๆ ที่ตนเองต้องการ และในวันนี้ผมจะมาเสนอ หนึ่งในวิธีที่จะปรับแต่ง StatusBar ได้แก่ การนำ Drawable มาใส่แทน ง่ายๆเพียง 4 ขั้นตอน (ต้องขอบอกก่อนว่าผมใช้เป็นภาษา Kotlin นะครับ)

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:angle="0"
android:endColor="@android:color/white"
android:startColor="@android:color/black" />
</shape>

เริ่มด้วยการทำไฟล์ Drawable ที่เป็น Gradient ก่อนเลย โดยจะเริ่มด้วยสีดำ ไปจน จบด้วยสีขาว และทำมุม 0 องศา

ตัวอย่าง Gradient

จากนั้นเราจะทำการนำมาใส่ในแอพของเราโดยการ SetTheme ของแอพ (ดูจากไฟล์ AndroidManifest ในส่วนของ theme) ซึ่งส่วนนี้เราจะกระโดดเข้าไปยังไฟล์ Style แล้วทำการเพิ่ม

<item name="android:statusBarColor">@android:color/transparent</item>
<item name="android:windowLightStatusBar">false</item>
</

อธิบายเพิ่มเติม statusBarColor คือ สีของแถบ StatusBar (ถ้าหากต้องการจะเปลี่ยนสีเพียงอย่างเดียว ก็ทำการเปลี่ยนสีตรงนี้ได้เลย) โดยเราจำทำให้เป็นสีใส เพราะเราจะเอาไฟล์ Gradient มาใส่แทน ส่วน windowLightStatusBar จะเป็นการเปลี่ยนสี Icon ใน StatusBar โดยถ้าค่าเป็น True Icon จะเป็นสีดำ และถ้าค่าเป็น False Icon จะเป็นสีขาว

ขั้นตอนนี้จะทำที่ไฟล์ MainActivity เพื่อทำการ Set Background ของแอพให้เป็นไฟล์ที่เราต้องการด้วยการเพิ่ม Code 1 บรรทัดใน onCreate

window.setBackgroundDrawableResource(R.drawable.gradient)

จะเห็นว่า Background ทั้งหมดของแอพจะถูกเปลี่ยนเป็น Drawable ที่เราเอามาใส่ แต่ถ้าเราต้องการเปลี่ยนแค่ StatusBar เราจึงมีอีกหนึ่งขั้นตอนในการเปลี่ยน Background ในแอพ (จะนำสีดำมาบัง Background เดิมไว้)โดยมาที่ไฟล์ activity_main.xml และเพิ่ม Code ใน ตัว Root ของ View

android:background="@android:color/black"

--

--