30-50% off hundreds of digital assets! WordPress themes, video, music and more 30-50% Off Go to Sale
Advertisement
  1. Code
  2. Android SDK
Code

I-code Ang image Gallery Android App Gamit Ang Glide

by
Difficulty:IntermediateLength:LongLanguages:

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

Final product image
What You'll Be Creating

1. Ano ang Glide?

Ang Glide ay sikat na open-source na Android library sa pag load ng mga images, videos at animated GIFs. Gamit ang Glide maaari kang mag load at mag display ng media mula sa iba’t ibang  napakaraming sources, katulad ng remote servers o mga local file system.

Dati pa, ang Glide ay gumagamit ng custom implementation ng HttpURLConnection para i-load ang images sa internet. Subalit ang Glide ay nagbibigay din ng plugins sa ibang sikat na networking libraries katulad ng Volley o OkHttp.

2. Bakit Kailangang Gumamit ng Glide?

Ang pag-gawa ng iyong sariling media loading at display functionality  sa Java ay  minsan masakit sa ulo: kailangan mong isaalang-alang ang caching, decoding, pag ayos ng network connections, threading, exception handling, at marami pang iba. Ang Glide ay madaling gamitin, planado, dokumentado, at nasuri ng maayos na uri ng library kung kaya hindi masasayang ang iyong oras at hindi pa sasakit ang iyong ulo.

Sa pagtuturong ito,matututunan natin ang tungkol sa Glide 3 sa pamamagitan ng pag-gawa ng simpleng image gallery app. Maglo-load ito ng images sa internet at ipapakita ito na thumbnailds sa RecyclerView at kapag ang gumagamit ay pumindot sa kahit na ilang images, magbubukas ito ng detalyadong actibidad kasama iyong malaking image.

3. Gumawa ng Android Studio Project

Gawing exciting ang iyong Android Studio at gumawa ng bagong proyekto na may blankong aktibidad na tinatawag na MainActivity.

Android Studio new project screenshot

2. Ideklara Ang Dependencies

Pagkatapos gumawa ng bagong proyekto, isa-isahin ang mga sumusunod na dependencies sa iyong build.gradle.

O kaya Maven:

Siguraduhin na i-sync ang iyong proyekto pagkatapos idagdag ang Glide dependency.

Integration Libraries

Kung gusto mong gumamit ng networking library katulad ng OkHttp o Volley sa iyong proyekto para sa network operations, inirerekomenda na isama ang natatanging Glide integration sa library na iyong ginagamit(sa halip na yung dati kung saan kasama ang HttpURLConnection).

Volley

OkHttp

Maaari mong bisitahin ang opisyal na Glide integration libraries para sa karagdagang impormasyon.

3. Magdagdag ng Internet Permission

Dahil ang Glide ay gumagana para makagawa ng network request sa pag-load ng images sa pamamagitan ng internet, kailangan nating isama ang permission INTERNET sa AndroidManifest.xml.

4. Gumawa ng Layout

Magsimula tayo sa pamamagitan ng paggawa ng RecyclerView.

Paggawa ng Custom Item Layout

Sunod, gumawa tayo ng XML layout na magagamit sa bawat item (ImageView) sa loob ng RecyclerView.

Ngayon at natapos na natin ang paggawa ng layout, ang susunod na hakbang ay gumawa ng RecyclerView adapter para sa pagpadami ng data. Subalit bago natin gawin ito, gumawa muna tayo ng simpleng data model.

5. Gumawa ng Data Model

Gagawin natin ang simpleng data model para sa RecyclerView. Ang modelong ito ay gagamitin ang Parcelable para sa  high-performance na pagdala ng data mula sa isang component patungo sa isa pa. Sa ating sitwasyon, ang data ay maipapadala mula sa SpaceGalleryActivity patungo sa SpacePhotoActivity.

6. Gumawa ng Adapter

Gagawa tayo ng adaptor para mapadami ang RecyclerView na may data.Gagawin din natin ang click listener para buksan ang detalyadong aktibidad—SpacePhotoActivity—na may extrang SpacePhoto. Ang detalyadong aktibidad ay ipapakita ang close-up ng image. Gagawin natin ito sa mga susunod na bahagi nitong pagtururo.

7. Ang Paglo-load ng Images Galing sa URL

Dito ay kung saan natin kailangan ang Glide na gawin ang trabaho nito- na kunin ang mga images mula sa internet at ipakita ito sa isa-isang ImageViews, gamit ang RecyclerView onBindViewHolder() na paraan habang ang gumagamit ay ginagalaw ang app.

Narito ang mga hakbang kung papaano gagana ang glide:

  • with(Context context): Sisimulan natin ang proseso ng paglo-load sa pamamagitan ng una ay ang pagpasa ng context with() na pamamaraan .
  • load (String string) : Ang image source ay nakasaad kung ito ay directory path, a URI o URL.
  • placeholder(int resourceId): ang local application resource id, sa malamang ay maaaring i-drawing, ito ay magiging placeholder hanggang sa ang image ay ma-load at maipakita.
  • into(ImageView imageView): ang target image view kung saan ang image ay ilalagay.

Tatandaan na ang Glide ay maaari ding mag-load ng local images, ipagawa lamang argument ang alin  man sa Android resource id, ang file path, o kaya ang Uri sa load() na pamamaraan.

Pagpapalaki or Pagpapaliit ng Image at Pagta-transform

Maaari mong palakihin o paliitin ang size ng image bago ito ipakita sa ImageView gamit ang Glide's .override (int width, int height) na pamamaraan. Makakatulong ito sa paggawa ng thumbnails sa iyong app kapag maglo-load ng iba’t ibang sukat ng image galing sa server. Tatandaan na ang sukat ay pixels hindi dp.

Mayroon din na mga sumusunod na image transformation:

  • fitCenter(): Sukatin ang image ng pare-pareho (habang pinapanatili ang image’s aspect ratio) para mapunan ng image ang  nasabing area. Ang buong image ay makikita, subalit maaaring may pataas o pahalang na padding. 
  • centerCrop(): sukatin ang image ng pare-pareho(habang pinapanatili ang image’s aspect ratio) para mapunan ng image ang nasabing area, na hanggat maaari mas maraming image na nakalabas mas maganda.Kung kinakailangan, ang image ay puputulin ng pahalang o pataas para magkasya.

8. Pag-set ng Adapter

Dito gagawa tayo ng ating RecyclerView na may GridLayoutManager bilang layout manager, i-set ang adapter, at isama ito sa RecyclerView.

9. Paggawa ng Detalyadong Aktibidad

Gumawa ng bagong aktibidad at pangalanan ito ng SpacePhotoActivity. Kukunin natin ang SpacePhoto extra at i-load ang image gamit ang Glide katulad ng ginawa natin dati. Dito inaasahan natin na ang file o URL ay Bitmap, kung kaya gagamitin natin ang as Bitmap() para ang tatanggapin ng Glide ay Bitmap. At kung hindi, hindi gagana ang load at lalabas ang .error () callback-na magiging dahilan para ang drawable resource ay babalik sa paglabas ng error callback. Maaari mo ring gamitin ang asGif() kung gusto mong siguraduhin na ang na-load mong image ay GIF.(Ipapaliwanag ko kung papaano gumagana ang GIFs sa Glide maya-maya lamang.)

Tatandaan na nag-set din tayo ng kakaibang cache para sa na-load na images: DiskCacheStrategy.SOURCE. Mas ipapaliwanag ko ang tungkol sa caching sa susunod na bahagi nito.

Ang Detalyadong Layout

Narito ang layout para ipakita ang detalyadong aktibidad. Ilalabas lamang nito ang pwedeng i-scroll na ImageView na ipapakita ang full-resolution na bersyon ng na-load na image. 

10. Caching sa Glide

Kung titingnan mong maigi, makikita mo na pag binisita mo uli ang image na dating ni-load, naglo-load ito na mas mabilis kumpara dati.Ano ang nagpapabilis dito? Ito ay ang Glide caching system.

Pagkatapos ma-load ang image galing sa internet, ika-cache ito ng Glide sa memory at sa disk,hindi na paulit-ulit ang requests sa network at mas mabilis ang pagkuha ng image.Kung kaya, susuriin muna ng Glide kung ang image ay alinman sa dalawa nasa memory o kaya nasa disk bago ito i-load galing sa network.

Subalit depende sa iyong application, maaari mong iwasan ang caching—halimbawa kung ang images na ipinapakita ay maaaring magbago ng madalas at hindi maire-reload.

Paano Tanggalin ang Caching?

Maaari mong iwasan ang caching sa pamamagitan ng pagtawag .skipMemoryCache(totoo).Subalit tatandaan na ang image ay ika-cache pa din sa disk-para maiwasan din ito, gamitin ang .diskCacheStrategy(DiskCacheStrategy strategy) na paraan, kung saan kukunin ang isa sa mga sumusunod na enum values:

  • DiskCacheStrategy.NONE: walang data na naka-save sa cache.
  • DiskCacheStrategy.SOURCE: orihinal na data ay naka-save sa cache.
  • DiskCacheStrategy.RESULT: sini-save ang resulta ng data pagkatapos ng transformations sa cache.
  • DiskCacheStrategy.ALL: naka-cache ang parehong orihinal na data at transformed data.

Para maiwasan pareho ang memory at disk caching ng sabay, gamitin lamang ang parehong pamamaraan ng paisa-isa:

11. Request Listeners

Sa Glide, maaari mong gawin ang RequestListener para i-monitor ang status ng request na ginawa mo habang naglo-load ang image.Isa lamang sa mga pamamaraan na ito ang maaaring gamitin.

  • onException(): ay lumalabas kapag may exception na nangyayari kung kaya magagawan mo ng paraan ang exceptions sa pamamaraan na ito.
  • onResourceReady(): paganahin kapag ang image ay na-load.

Balik tayo sa image gallery app, baguhin  natin ang nakalabas ng kaunti gamit ang RequestListener na magsi-set ng ImageView at magbabago din ng kulay ng background ng layout sa pamamagitan ng pag extract ng dark at vibrate na kulay ng ating image gamit ang Android Palette API.

Dito maaari mo ring itago ang progress dialog kung mayroon ka nito. Sa huling pagbabago  na ito, siguraduhin na isama ang Palette dependency sa iyong build.gradle:

12. Pagsusuri ng App

At ang panghuli, maaari mong paganahin ang app! Pindutin sa thumbnail para makakuha ng full-sized na bersyon ng image.

Emulator running the application screenshots

10. Animations

Kung pagaganahin moa ng app, mapapansin moa ng crossfade animation na nangyayari habang ang image ay ipinapakita. Sadyang mayroon ng ganito ang Glide, subalit maaari mo naman itong tanggalin sa pamamagitan ng pag gamit ng dontAnimate(),na magpapakita lamang ng image ng walang kahit na anong animation. Maaari mo ring i-customize ang crossfade animation sa pamamagitan ng paggamit ng crossFade(int duration), gawin ang duration sa milliseconds alin man sa pabilisin ito o pabagalin-300 milliseconds ang orihinal.

Animated na GiFs

Napakadali na ipakita ang animated na GIF sa iyong app gamit ang Glide. Kaparehas ito ng pagpakita ng ordinaryong image.

Kung inaasahan mo ang image na GIF, gawin ang asGif()-sinisiguro nito na ang Glide ay makakatanggapng GIF, at kung hindi, hindi gagana ang load at ipapakita ang Drawable ipapasa sa .error() na pamamaraan.

Playing Video

Sa kasamaang palad, hindi gumagana sa glide ang support video loading at display sa URL. Sa halip, maaari lamang  itong magload at magpakita ng videos na dati ng nakalagay sa telepono.Ipakita ang video sa pamamagitan ng pagpasa ng URI nito sa load() na pamamaraan.

Pagtatapos

Magaling! Sa pagtuturong ito, nakagawa ka ng kumpletong image gallery app sa Glide, at natutunan paano ang library gumagana at paano mo ito magagamit sa iyong sariling proyekto. Natutunan mo din kung paano ipakita ang parehong local at remote images, paano ipakita ang animated GIFs at videos, paano gawin ang image transformations katulad ng pagbabago ng sukat. At hindi lang yan, nakita mo din kung gaano kadaling alisin ang caching, error handling at custom request listeners.

Para mas matutunan ang Glide, maaari mong tingnan ang opisyal na dokumentasyon dito. Para mas mapag-aralan ang tungkol sa coding sa Android, tingnan ang iba pang kurso at pagtuturo dito sa Envato Tuts+!

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.