Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Android SDK
Code

Paano I-Code ang Bottom Navigation Bar para sa Android App

by
Difficulty:BeginnerLength:MediumLanguages:

Tagalog (Wikang Tagalog) translation by Anna Nelson (you can also view the original English article)

Final product image
What You'll Be Creating

Ang koponan ng material design sa Google ay tumutukoy sa functionality ng bottom navigation bars sa Android ng ganito:

Ang bottom navigation bars ay ginagawang mabilis tuklasin at paglipatin sa pagitan ng top-level views sa isang tap.
Ang pag-tap sa bottom navigation icon ay magdadala sa iyo direkta sa nauugnay na view o nire-refresh nito ang kasalukuyang active view.

Ayon sa patnubay ng opisyal na material design para sa bottom navigation bar, ito ay dapat gamitin kapag ang iyong app ay mayroong:

  • tatlo hanggang limang top-level destinations
  • destinations na kailangan ng direktang access

Ang halimbawa ng sikat na app na nagpapatupad ng bottom navigation bar ay ang Google+ Android app mula sa Google, kung saan ginagamit ito para mag navigate sa iba’t ibang destinations ng app. Makikita mo ito sa pamamagitan ng pag download ng Google+ app mula sa Google Play store (kung wala ka pa nito sa iyong device). Ang sumusunod na screenshot ay mula sa Google+ app na ipinapakita ang bottom navigation bar.

Screenshot of Google Android app

Sa post na ito, matututunan mo kung paano ipakita ang menu items sa loob ng bottom navigation bar sa Android. Gagamitin natin ang BottomNavigationView Api para magawa ito. Para sa karagdagang bonus, matututunan mo din kung paano gamitin ang Android Studio templates feature para mabilis na ma-bootstrap ang iyong proyekto gamit ang bottom navigation bar.

Ang isang halimbawa na proyekto (in Kotlin) para sa pagtuturona ito ay matatagpuan sa aming GitHub na lugar at maaari mong madaling sundin.

Mga Pangunahing Kailangan 

Para masundan ang pagtuturong ito, kakailanganin ninyo ang mga sumusunod: 

1. Gumawa ng isang Proyekto sa Android Studio

Buksan na angAndroid Studio 3 at gumawa ng bagong proyekto (maaari mo itong pangalanan ng BottomNavigationDemo) gamit ang isang empty activity natatawaging MainActivity. Siguraduhin din na tingnan ang Include Kotlin support check box.

Create Android Project dialog

2. Paglagay ng BottomNavigationView

Para simulang gamitin ang BottomNavigationView sa iyong proyekto, siguraduhin na iyong i-import ang design support at gayon din ang Android support artifact.Idagdag ang mga ito sa iyong module's build.gradle file para i-import ang mga ito.

Gayon din, puntahan ang iyong res/layout/activlty_main.xml file para isama ang BottomNavigationView widget. Ang layout file na ito ay may kasama ring ConstraintLayout at FrameLayout. Tandaan na ang FrameLayout ay magsisilbing container o lalagyan para sa iba’t ibang fragments na ilalagay dito anumang oras ang menu item ay pinindot sa bottom navigation bar. (Pupunta tayo dito sa ilang sandali.)

Dito ay gumawa tayo ng BottomNavigationView widget na may id navigationView. Ang opisyal na dokumentasyon ay nagsasabi na:

Ang BottomNavigationView ay kumakatawan sa standard bottom navigation bar para sa application. Ito ay implementasyon ng material design bottom navigation.
Sa bottom navigation bars ay nagiging madali para sa users na siyasatin at pagpalitin sa pagitan ng top-level views sa isang tap. Kailangan itong gamitin kapag ang application ay mayroong tatlo hanggang limang top-level destinations.

Ang importanteng attributes na iyong dapat tandaan na inilagay sa BottomNavigationView ay ang mga:

  • app:itemBackgroundang: attributes na ito ay nilalagay ang background ng ating menu items sa nariyang resource. Sa atin ay binigyan lang natin ito ng kulay sa background.
  • app:itemIconTint: inaayos ang tint kung saan nilagay sa ating menu items’ icons.
  • app:itemTextColor: inaaayos ang mga kulay na gagamitin sa iba’t ibang states (normal, selected, focused, etc.) ng menu item text.

Para maisama ang menu items para sa bottom navigation bar, maaari nating gamitin ang attribute app:menu na may value na tumuturo papunta sa menu resource file.

Narito ang res/menu/navigation.xml menu resource file:

Dito ay tinukoy natin ang Menu gamit ang <menu> nagsisilbing lalagyan para sa menu items. Ang <item> ay gumagawa ng MenuItem, na kumakatawan sa isang item sa menu. Kung iyong makikita, bawat <item> ay may id, may icon, at pamagat.

3. Initialization ng Components

Sunod, ii-initialize natin ang instance ng BottomNavigationView. Ang Initialization ay nangyayari sa loob ng onCreate() sa MainActivity.kt.

4. Pagsusuri sa App

Ngayon maaari na nating paganahin ang app!

First demo app showing bottom navigation

Kung iyong makikita, ang ating bottom navigation bar ay nakikita sa ilalim ng app screen. Walang mangyayari kung pipindutin mo ang alinman sa navigation items doon – tatalakayin natin ito sa susunod na bahagi.

5. Pag-configure sa Click Events

Ngayon, tingnan natin kung paano i-configure ang click events para sa bawat items sa bottom navigation bar. Tandaan na ang pagpindot sa kahit na anong item doon ay dapat magdala sa user sa bagong destination sa app.

Dito ay tinawag natin ang method setOnNavigationItemSelectedListener. Narito kung ano ginawa nito batay sa opisyal na dokumentasyon.

Maglagay ng tagapakinig na aabisuhan kapag pinili ang bottom navigation item.

Ginamit natin ang when expression para gawin ang iba’t ibang aksyon batay sa menu item na pinindot-ang menu item ay nagsisilbing constants para sa when expression. Sa dulo ng bawat when branch, ibabalik natin ang true.

Ipapasa natin ang mOnNavigationItemSelectedListenerlistener sa setOnNavigationItemSelectedListener() bilang argument

Tandaan na mayroon pang ibang kaparehong method na tinatawag na setOnNavigationItemReselectedListener, na aabisuhan kapag ang kasalukuyang napiling bottom navigation item ay napili uli.

Sunod, gagawa tayo ng iba’t ibang pahina (o Fragments) para sa bawat menu items sa navigation drawer para kapag ang menu item ay pinindot o tinap, ipapakita nito ang iba’t ibang Android Fragment o pahina.

6. Paggawa ng Fragments (Mga Pahina)

Magsisimula tayo sa SongsFragment.kt class, at dapat iyong sundin ang parehong proseso para sa natitirang dalawang fragment classes - AlbumsFragment.kt at ArtistsFragment.kt.

Narito ang aking SongsFragment.kt:

At saka, narito ang aking R.layout.fragment_songs:

7. Paglunsad ng Fragments

Kapag ang alinman sa menu items ay pinindot, binubuksan natin ang kaukulang Fragment at gayon din binabago ang pamagat ng action bar. 

Dito ay ginagamit natin ang method na tinatawag na openFragment() na ginagamit ang FragmentTransaction para ilagay ang ating fragment sa UI.

Ngayon ay i-run ang proyekto uli at tingan kung paano ang lahat ng ito ay gagana!

Final app demo with click events

Anumang oras na ikaw ay pumindot sa kahit na anong menu item, dadalhin nito ang user sa bagong Fragment.

Tandaan na kapag mayroon tayong higit sa apat na menu items sa bottom navigation bar-sa madaling salita sa BottomNavigationView – ang Android system ay awtomatikong ii-enable ang shift mode. Sa mode na ito, kapag ang kahit na alin sa menu items ay pinindot, ang iba pang items sa kanan o kaliwa ng pinindot na item ay nalilipat.

BottomNavigationView with shift mode

8. Bonus: Paggamit ng Android Studio Templates

Ngayon na iyo ng natutunan ang tungkol sa API na kasama sa paggawa ng bottom navigation bar mula sa scratch sa Android, ipapakita ko ang shortcut na magpapabilis nito sa susunod. Maaari mong gamitin ang template sa halip na i-code ang navigation bar mula sa scratch.

Ang Anroid Studio ay nagbibigay ng code templates na sinusunod ang Android design at development best practices. Ang mga nariyang code templates (na mayron sa Java at Kotlin) ay makakakatulong sa iyo para mabilis mong masimulan ang iyong proyekto. Ang isang template na iyan ay makakatulong para makagawa ng bottom navigation bar.

Para magamit itong magaling na feature para sa bagong proyekto, una ay gamitin muna ang Android Studio.

Create Android Project dialog

Ilagay ang pangalan ng application at pindutin ang Next button. Hindi mo na kailangang galawin ang defaults dahil sila ay nasa Target Android Devices dialog.

Pindutin uli ang Next button. 

Add an Activity to Mobile dialog

Sa Add an Actiivity sa Mobile dialog, piliin ang Bottom Navigation Activity. Pindutin uli ang Next button pagkatapos nito.

Configure Activity dialog

Sa huling dialog, maaari mong baguhin ang pangalan ng Activity, o baguhin ang pangalan ng layout o pamagat kung gusto mo. At ang panghuli, pindutin ang Finish button para tanggapin lahat ng configurations.

Ang Android Studio ay nakatulong sa atin ngayon na makagawa ng proyekto na may bottom navigation activity. Napaka-suwabe!

Ikaw ay mahigpit na pinapayuhan na mas alamin pa ang nagawang code.

Sa nariyan ng proyekto ng Android Studio, para magamit ang template na ito, pumunta lang sa File > New > Activity > Bottom Navigation Activity.

Navigation from file menu to Bottom Navigation Activity

Tandaan na ang templates na kasama sa Android Studio ay maganda para sa simpleng layouts at sa paggawa ng pangunahing apps, subalit kung gusto mong simulan ang iyong app, maaari mong subukan ang ilan sa app templates na makikita sa Envato Market.

Malaking tipid sila sa oras para sa may karanasan ng developers, nakakatulong sa kanila na malampasan ang hirap sa paggawa ng app mula sa scratch at sa halip ay ituon ang kanilang mga talento sa kakaiba at customized na bahagi ng paggawa ng bagong app.

Konklusyon

Sa pagtuturong ito, iyong natutunan kung paano gumawa ng bottom navigation bar sa Android gamit ang BottomNavigationView API mula sa scratch. Siniyasat din natin kung paano mabilis na magagamit ang Android Studio templates para makagawa ng bottom navigation activity.

Labis kong inirerekomenda ang pagtingin sa opisyal na patnubay para sa material design para sa bottom navigation bar para mas malaman ang tungkol sa kung paano maayos na madi-disenyo at magagamit ang bottom navigation bar sa Android.

Para mas malaman ang tungkol sa coding para sa Android, tingnan ang ilan sa iba pang kurso at pagtuturo dito sa Envato Tuts+!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.