I-code Ang image Gallery Android App Gamit Ang Glide

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.

2. Ideklara Ang Dependencies

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

repositories {
  mavenCentral() // jcenter() works as well because it pulls from Maven Central
}

dependencies {
    // Glide
    compile 'com.github.bumptech.glide:glide:3.7.0'
    
    // Recyclerview
    compile 'com.android.support:recyclerview-v7:25.1.1'
}

O kaya Maven:

<dependency>
  <groupId>com.github.bumptech.glide</groupId>
  <artifactId>glide</artifactId>
  <version>3.7.0</version>
</dependency>
<dependency>
  <groupId>com.google.android</groupId>
  <artifactId>support-v4</artifactId>
  <version>r7</version>
</dependency>

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

dependencies {

    compile 'com.github.bumptech.glide:glide:3.7.0'
    compile 'com.github.bumptech.glide:volley-integration:1.4.0@aar'
    compile 'com.mcxiaoke.volley:library:1.0.8'
}

OkHttp

dependencies {
      
    // okhttp 3
    compile 'com.github.bumptech.glide:okhttp3-integration:1.4.0@aar'
    compile 'com.squareup.okhttp3:okhttp:3.2.0'
    
    // okhttp 2
    compile 'com.github.bumptech.glide:okhttp-integration:1.4.0@aar'
    compile 'com.squareup.okhttp:okhttp:2.2.0'
}

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.

<uses-permission android:name="android.permission.INTERNET" />

4. Gumawa ng Layout

Magsimula tayo sa pamamagitan ng paggawa ng RecyclerView.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:id="@+id/activity_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    <android.support.v7.widget.RecyclerView
            android:id="@+id/rv_images"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>
</RelativeLayout>

Paggawa ng Custom Item Layout

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

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="wrap_content">
<ImageView
        android:id="@+id/iv_photo"
        android:adjustViewBounds="true"
        android:layout_height="200dp"
        android:scaleType="centerCrop"
        android:layout_margin="2dp"
        android:layout_width="match_parent"/>

</LinearLayout>

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.

import android.os.Parcel;
import android.os.Parcelable;

public class SpacePhoto implements Parcelable {

    private String mUrl;
    private String mTitle;

    public SpacePhoto(String url, String title) {
        mUrl = url;
        mTitle = title;
    }

    protected SpacePhoto(Parcel in) {
        mUrl = in.readString();
        mTitle = in.readString();
    }

    public static final Creator<SpacePhoto> CREATOR = new Creator<SpacePhoto>() {
        @Override
        public SpacePhoto createFromParcel(Parcel in) {
            return new SpacePhoto(in);
        }

        @Override
        public SpacePhoto[] newArray(int size) {
            return new SpacePhoto[size];
        }
    };

    public String getUrl() {
        return mUrl;
    }

    public void setUrl(String url) {
        mUrl = url;
    }

    public String getTitle() {
        return mTitle;
    }

    public void setTitle(String title) {
        mTitle = title;
    }

    public static  SpacePhoto[] getSpacePhotos() {

        return new SpacePhoto[]{
                new SpacePhoto("http://i.imgur.com/zuG2bGQ.jpg", "Galaxy"),
                new SpacePhoto("http://i.imgur.com/ovr0NAF.jpg", "Space Shuttle"),
                new SpacePhoto("http://i.imgur.com/n6RfJX2.jpg", "Galaxy Orion"),
                new SpacePhoto("http://i.imgur.com/qpr5LR2.jpg", "Earth"),
                new SpacePhoto("http://i.imgur.com/pSHXfu5.jpg", "Astronaut"),
                new SpacePhoto("http://i.imgur.com/3wQcZeY.jpg", "Satellite"),
        };
    }

    @Override
    public int describeContents() {
        return 0;
    }

    @Override
    public void writeToParcel(Parcel parcel, int i) {
        parcel.writeString(mUrl);
        parcel.writeString(mTitle);
    }
}

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.

public class MainActivity extends AppCompatActivity {
    // ... 
    private class ImageGalleryAdapter extends RecyclerView.Adapter<ImageGalleryAdapter.MyViewHolder>  {

        @Override
        public ImageGalleryAdapter.MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {

            Context context = parent.getContext();
            LayoutInflater inflater = LayoutInflater.from(context);
            View photoView = inflater.inflate(R.layout.item_photo, parent, false);
            ImageGalleryAdapter.MyViewHolder viewHolder = new ImageGalleryAdapter.MyViewHolder(photoView);
            return viewHolder;
        }

        @Override
        public void onBindViewHolder(ImageGalleryAdapter.MyViewHolder holder, int position) {

            SpacePhoto spacePhoto = mSpacePhotos[position];
            ImageView imageView = holder.mPhotoImageView;
        }

        @Override
        public int getItemCount() {
            return (mSpacePhotos.length);
        }

        public class MyViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener {

            public ImageView mPhotoImageView;

            public MyViewHolder(View itemView) {

                super(itemView);
                mPhotoImageView = (ImageView) itemView.findViewById(R.id.iv_photo);
                itemView.setOnClickListener(this);
            }

            @Override
            public void onClick(View view) {

                int position = getAdapterPosition();
                if(position != RecyclerView.NO_POSITION) {
                    SpacePhoto spacePhoto = mSpacePhotos[position];
                    Intent intent = new Intent(mContext, SpacePhotoActivity.class);
                    intent.putExtra(SpacePhotoActivity.EXTRA_SPACE_PHOTO, spacePhoto);
                    startActivity(intent);
                }
            }
        }

        private SpacePhoto[] mSpacePhotos;
        private Context mContext;

        public ImageGalleryAdapter(Context context, SpacePhoto[] spacePhotos) {
            mContext = context;
            mSpacePhotos = spacePhotos;
        }
    }
}

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.

// ...
@Override
public void onBindViewHolder(MyViewHolder holder, int position) {
    Photo photo = mPhotoList.get(position);
    ImageView imageView = holder.mPhotoImageView;

     Glide.with(mContext)
            .load(spacePhoto.getUrl())
            .placeholder(R.drawable.ic_cloud_off_red)
            .into(imageView);
}
// ...

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.

// ... 
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    RecyclerView.LayoutManager layoutManager = new GridLayoutManager(this, 2);
    RecyclerView recyclerView = (RecyclerView) findViewById(R.id.rv_images);
    recyclerView.setHasFixedSize(true);
    recyclerView.setLayoutManager(layoutManager);

    ImageGalleryAdapter adapter = new ImageGalleryAdapter(this, SpacePhoto.getSpacePhotos());
    recyclerView.setAdapter(adapter);

}
// ...

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.)

import android.graphics.Bitmap;
import android.graphics.Color;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.graphics.Palette;
import android.view.ViewGroup;
import android.widget.ImageView;
import com.bumptech.glide.Glide;
import com.bumptech.glide.request.RequestListener;
import com.bumptech.glide.request.target.Target;

public class SpacePhotoActivity extends AppCompatActivity {

    public static final String EXTRA_SPACE_PHOTO = "SpacePhotoActivity.SPACE_PHOTO";
    private ImageView mImageView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_photo_detail);

        mImageView = (ImageView) findViewById(R.id.image);
        SpacePhoto spacePhoto = getIntent().getParcelableExtra(EXTRA_SPACE_PHOTO);
        
        Glide.with(this)
                .load(spacePhoto.getUrl())
                .asBitmap()
                .error(R.drawable.ic_cloud_off_red)
                .diskCacheStrategy(DiskCacheStrategy.SOURCE)
                .into(mImageView);
    }
}

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.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

    <ScrollView
            android:layout_width="match_parent"
            android:layout_height="match_parent">

        <LinearLayout
                android:id="@+id/activity_character"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:layout_gravity="center_vertical">

            <ImageView
                    android:id="@+id/image"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:adjustViewBounds="true"
                    android:scaleType="fitCenter"/>
            
        </LinearLayout>
    </ScrollView>
</LinearLayout>

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:

Glide.with(this)
        .load(spacePhoto.getUrl())
        .asBitmap()
        .skipMemoryCache(true)
        .diskCacheStrategy(DiskCacheStrategy.NONE)
        .into(imageView);

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.

// ...
@Override
protected void onCreate(Bundle savedInstanceState) {
    // ...   
    Glide.with(this)
            .load(spacePhoto.getUrl())
            .asBitmap()
            .error(R.drawable.ic_cloud_off_red)
            .listener(new RequestListener<String, Bitmap>() {
    
                @Override
                public boolean onException(Exception e, String model, Target<Bitmap> target, boolean isFirstResource) {
                    return false;
                }
    
                @Override
                public boolean onResourceReady(Bitmap resource, String model, Target<Bitmap> target, boolean isFromMemoryCache, boolean isFirstResource) {
    
                    onPalette(Palette.from(resource).generate());
                    mImageView.setImageBitmap(resource);
    
                    return false;
                }
    
                public void onPalette(Palette palette) {
                    if (null != palette) {
                        ViewGroup parent = (ViewGroup) mImageView.getParent().getParent();
                        parent.setBackgroundColor(palette.getDarkVibrantColor(Color.GRAY));
                    }
                }
            })
            .diskCacheStrategy(DiskCacheStrategy.SOURCE)
            .into(mImageView);
}
// ...

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:

dependencies {
    // ...
    compile 'com.android.support:palette-v7:25.1.1'
}

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.

ImageView gifImageView = (ImageView) findViewById(R.id.iv_gif);

Glide.with(this)
        .load("http://i.imgur.com/Vth6CBz.gif")
        .asGif()
        .placeholder(R.drawable.ic_cloud_off_red)
        .error(R.drawable.ic_cloud_off_red)
        .into(gifImageView);

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.

Glide.with(context)
      .load(Uri.fromFile(new File("your/video/file/path"))
      .into(imageView)

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+!