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

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

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



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

ไฟล์ 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 ตามภาพ

- ส่วน icon attribute ให้เราคลิกขวาที่โฟลเดอร์ drawable > New > Vector Asset



หลังจากทำเสร็จ 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

