Use of the Android Open Source Framework Glide - Sample Applications

Load Network Picture

• Load Network Picture
• Load Local Pictures - Simple Gallery

Load Network Picture

Introduce corresponding Libraries

compile 'com.android.support:recyclerview-v7:25.0.0'
compile 'com.github.bumptech.glide:glide:3.7.0'

Create layout res/layout/fragment_list.xml for RecyclerView

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.RecyclerView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/recycler_view"></android.support.v7.widget.RecyclerView>

Layout to create each item of RecyclerView res/layout/list_item.xml

<?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:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:id="@+id/image"/>
</LinearLayout>

To create an adapter for RecyclerView, GankAdapter.java, the main code logic is as follows

@Override
public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
    View v = LayoutInflater.from(mContext).inflate(R.layout.list_item,parent,false);
    return new ViewHolder(v);
}

@Override
public void onBindViewHolder(ViewHolder holder, int position) {
    final String url = mItems.get(position);
    Log.e("tag","============onBindViewHolder url: "+url);
    Glide.with(mContext)
            .load(url)
            .placeholder(R.mipmap.ic_launcher)
            .diskCacheStrategy(DiskCacheStrategy.RESULT)
            .into(holder.image);
    holder.image.setOnClickListener(new View.OnClickListener(){
        @Override
        public void onClick(View v) {
            Intent intent = new Intent();
            intent.setClass(mContext,PreviewImageActivity.class);
            intent.putExtra("url",url);
            mContext.startActivity(intent);
        }
    });
}

@Override
public int getItemCount() {
    return mItems.size();
}

public class ViewHolder extends RecyclerView.ViewHolder{
     ImageView image;
    public ViewHolder(View itemView) {
        super(itemView);
        image = (ImageView)itemView.findViewById(R.id.image);
    }
}

Show RecyclerView, create a Fragment to display GankFragment.java
The main display logic is as follows:

@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
    View v = inflater.inflate(R.layout.fragment_list,container,false);
    mClient = new OkHttpClient();
    mReyclerView = (RecyclerView) v.findViewById(R.id.recycler_view);
    mReyclerView.setLayoutManager(new StaggeredGridLayoutManager(2,StaggeredGridLayoutManager.VERTICAL));
    mAdapter = new GankAdapter(getActivity(),mUrls);
    mReyclerView.setAdapter(mAdapter);
    loadApi(index);

    mReyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
        @Override
        public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
            super.onScrollStateChanged(recyclerView, newState);
        }

        @Override
        public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
            super.onScrolled(recyclerView, dx, dy);
            if(isScrollToEnd(mReyclerView)){
                Log.e("tag","============scroll to end");
                index += 1;
                loadApi(index);
            }
        }
    });

    return v;
}

A third-party library for OkHttpClient was introduced to load network pictures

compile 'com.squareup.okhttp3:okhttp:3.4.1'

Logic for loading pictures from the network

private void loadApi(int page){
  Request request = new Request.Builder().url("http://gank.io/api/data/%E7%A6%8F%E5%88%A9/10/"+page).build();
  mClient.newCall(request).enqueue(new Callback() {
      @Override
      public void onFailure(Call call, IOException e) {
          Log.e("tag","loading failure ");
          e.printStackTrace();
      }

      @Override
      public void onResponse(Call call, Response response) throws IOException {
          if(response.isSuccessful()){
              String result = response.body().string();
              try {
                  JSONObject json = new JSONObject(result);
                  JSONArray array = new JSONArray(json.getString("results"));
                  for(int i = 0;i<array.length();i++){
                      JSONObject ob = array.getJSONObject(i);
                      mUrls.add(ob.getString("url"));
                      Log.e("tag","========== url: "+ob.getString("url"));
                  }

                  mHandler.sendEmptyMessage(2);
              }catch (JSONException e){
                  e.printStackTrace();
              }

          }
      }
  });
}

Load local pictures

Load local pictures using Glide and network pictures using the same adapter's code GankAdapter.java
Display the logical code LocalAlbumFragment.java, which primarily loads data from the local image database

private void loadAlbum(){
  AsyncTask<Void, Void, Void> asyncTask = new AsyncTask<Void, Void, Void>() {
      @Override
      protected Void doInBackground(Void... params) {
          Cursor  c = getContext().getContentResolver().query(MediaStore.Images.Media.EXTERNAL_CONTENT_URI,
                  new String[]{MediaStore.Images.ImageColumns.DATA},null,null, MediaStore.Images.ImageColumns.DATE_TAKEN+" desc ");
          if(null != c && c.getCount() > 0 && c.moveToFirst()){
              while (c.moveToNext()){
                  mData.add(c.getString(c.getColumnIndex(MediaStore.Images.ImageColumns.DATA)));
              }
          }
          return null;
      }

      @Override
      protected void onPostExecute(Void aVoid) {
          mHandler.sendEmptyMessage(2);

      }
  };

  asyncTask.execute();

}

Add Image Transform

When using the Glide library, you can do some transformation on the image, such as round corners, blurring, etc., using the Glide's.bitmapTransform() method.
I need to write the corresponding transformation methods, but now there are good third-party libraries that have encapsulated some of the common transformations and can be used directly without repeating wheels
Introducing a third-party image transformation library: glide-transformations

compile 'jp.wasabeef:glide-transformations:2.0.1'

This library provides many transformations, such as crop-related, color-related, fuzzy-related, etc. See the source code for details
Try a circular effect

Glide.with(mContext)
              .load(url)
              .placeholder(R.mipmap.ic_launcher)
              .diskCacheStrategy(DiskCacheStrategy.RESULT)
              .bitmapTransform(new CropCircleTransformation(mContext)) //With a circular transformation, you can also use other transformations
              .into(holder.image);

Of course, if you are not satisfied with these effects, you can write the corresponding transformation effect yourself