มาทำ BottomBar ใน Android เกร๋ๆ ด้วย SmoothBottomBar กันเต๊อะ 😍

W.Songsak
W.Songsak
Nov 6 · 3 min read

ไลบรารี่ที่จะช่วยเปลี่ยนแอพที่ดูน่าเบื่อๆ เป็นแอพเท่ห์ๆ ไม่ซ้ำใคร 😎


รอช้าอยู่ใยมาเริ่มกันเล้ยย!!! 💖💕

เริ่มแรกให้ทำการสร้างโปรเจค โดยเลือกเทมเพลตเป็น Empty Activity

หลังจากนั้นให้เลือกภาษาที่จะใช้เขียนแอพเป็นภาษา Kotlin ซึ่งโดยปรกติ Android Studio มันจะเซ็ตค่าไว้เป็น Kotlin อยู่แล้ว

เมื่อสร้างโปรเจคเสร็จแล้ว สิ่งที่เราจะต้องทำ มีด้วยกัน 2 ส่วน คือ plug ตัวไลบรารี SmoothBottomBar และเริ่มละเลงโค๊ด(อันที่จริงแทบไม่ได้เขียนโค๊ดด้วยซ้ำ 555+)


  1. ติดตั้งไลบรารี SmoothBottomBar 📲
  • ให้ทำการเปิดไฟล์ build.gradle(Project) แล้วเพิ่มโค๊ด
allprojects {
repositories {
google()
jcenter()
maven { url 'https://jitpack.io' } // บรรทัดนี้
}
}
  • ทำการเปิดไฟล์ build.gradle(Module) แล้วเพิ่มโค๊ดด้านล่าง
dependencies {
...
implementation 'com.github.ibrahimsn98:SmoothBottomBar:1.5'
}

จิ้มที่ปุ่ม Sync Now เบาๆ เพียงเท่านี้ การติดตั้งไลบรารีของเราก็เป็นอันเสร็จ 📲🤪


2. เริ่มต้นใช้งานไลบรารี

  • ขั้นแรกให้เราสร้างไฟล์ menu
➡ คลิกขวาที่ res > New > Android Resource File

แล้วจะมีโฟลเดอร์เพิ่มขึ้นมาตามรูปด้านล่างเลยครับ

ไฟล์ menu_main เป็นไฟล์ที่เราจะเอาไว้กำหนดว่าเมนูของเราจะมีไอดี ไอคอน สี และจำนวนปุ่มกี่ปุ่ม เป็นต้น

จากนั้นกดเปิดไฟล์ menu_main.xml จะเจอหน้าจอโล่งๆ แบบนี้

หลังจากนั้นให้เราเอาโค๊ดด้านล่างไปแปะภายใต้แท็ก <menu>…</menu> ได้เลย

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

<item
android:id="@+id/item0"
android:title="@string/menu_dashboard"
android:icon="@drawable/ic_dashboard_white_24dp"/>

<item
android:id="@+id/item2"
android:title="@string/menu_store"
android:icon="@drawable/ic_store_white_24dp"/>

<item
android:id="@+id/item3"
android:title="@string/menu_profile"
android:icon="@drawable/ic_person_outline_white_24dp"/>

</menu>

เมื่อแปะโค๊ดเสร็จ Android Studio จะฟ้อง error แดงๆ(ตรงตัวหนังสือเอียงๆ และหนาๆ) ซึ่งนั้นแปลว่าเราทำถูกแล้วฮะ 💭

ที่ title แดงเพราะเรายังไม่ได้ประกาศว่ามีสตริงตัวนี้ในโปรเจ เช่นเดียวกันกับ icon โปรเจคเรายังไม่มีไฟล์นี้ Android Studio มันเลยไม่รู้จะเอาข้อมูลอะไรมาแสดง

วิธีการแก้ก็ง่ายแสนง่าย 🤪 🤪

  • สำหรับ title attribute ให้เราเอาเมาส์ไปจิ้มที่ @string/menu_dashboard หลังจากนั้นกด alt+enter จะมี popup เด้งขึ้นมาให้เราใส่ค่าของ menu_dashboard ตามภาพ
➡ Resource value : ใส่ตัวหนังสือที่จ้องการแสดง
  • ส่วน icon attribute ให้เราคลิกขวาที่โฟลเดอร์ drawable > New > Vector Asset
➡ drawable > New > Vector Asset
➡ กดที่ Clip Art > เลือก icon ให้ตรงกับ title > เปลี่ยนสีเป็นสีขาว > เปลี่ยน name จาก black เป็น white

หลังจากทำเสร็จ error ก็จะหายไป ให้แก้จนครบทุกเมนู


  • ขั้นตอนถัดไปเราจะเอา widget SmoothBottomBar ไปแสดงที่หน้า MainActivity ให้เราเปิดไฟล์ activity_main.xml ที่อยู่ภายใต้โฟลเดอร์ res/layout แล้วเอาโค๊ดนี้ไปว่างหลังแท็ก TextView
<me.ibrahimsn.lib.SmoothBottomBar
android:id="@+id/bottomBar"
android:layout_width="match_parent"
android:layout_height="70dp"
app:backgroundColor="#432EBF"
app:menu="@menu/menu_main" />

จะเห็นว่า Android Studio มันจะเตือนสีแดงๆ ถ้าเอาเมาส์ไปจิ้มตรงหลอดไฟแดง มันจะบอกว่า widget ของเราขาด constraints attribute เนื่องจากว่า widget ทุกตัวที่อยู่ภายใต้ ConstraintLayout จำเป็นต้องกำนหดว่าจะให้ไป ชิดบน ล่าง ช้าย ขวา บราๆ เราก็เพิ่มโค๊ดไปอีกบรรทัด เพื่อบอกว่า bottom navigationbar ของเราจะชิดขอบด้านล่างนะ

<me.ibrahimsn.lib.SmoothBottomBar
...
app:layout_constraintBottom_toBottomOf="parent"/>
การแสดงผลก็จะถูกต้องตามที่เราต้องการ

ถึงตรงนี้ เราสามารถกด Run app ของเราได้แล้ว

Attributes ที่รองรับการปรับแต่ง ตามด้านล่างเลยครับ 🔧🔧🔧

<me.ibrahimsn.lib.SmoothBottomBar
app:backgroundColor=""
app:textColor=""
app:textSize=""
app:iconSize=""
app:indicatorColor=""
app:sideMargins=""
app:itemPadding=""
app:iconTint=""
app:iconTintActive=""
app:activeItem=""
app:duration=""
app:menu=""/>
  • ส่วนสุดท้าย คือ เราจะดักอีเวนต์ทุกครั้งที่ user กดเปลี่ยนเมนู ให้เพิ่มโค๊ด listener ไว้ในไฟล์ MainActivity ที่อยู่ภายใต้โฟลเดอร์ java
...
import kotlinx.android.synthetic.main.activity_main.* // ใช้ทำ View binding

class MainActivity : AppCompatActivity() {

override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)


bottomBar.onItemSelected = {
// จะถูกเรียกทุกครั้งที่ผู้ใช้กดที่ menu item หรือ selected
// "Item $it selected"
}

bottomBar.onItemReselected = {
// จะถูกเรียกทุกครั้งที่ menu item นั้นๆ เปลี่ยนจาก selected เป็น deselected แล้วผู้ใช้กลับมากดเลือกที่เมนูนี้อีกครั้ง
// "Item $it re-selected"
}
}
}

จบแล้ววว 👏👏👏


อ่านเพิ่มเติมได้ที่ https://github.com/ibrahimsn98/SmoothBottomBar

W.Songsak

Written by

W.Songsak

สายเลือดสีเขียวบริสุทธิ์ Android, Vue, NodeJs

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade