Day 1 - Android Staggered Grid

1
apply plugin: 'com.android.application'
2
...
3

4
dependencies {
5
    compile 'com.etsy.android.grid:library:1.0.5'
6
    compile 'com.squareup.picasso:picasso:2.3.2'
7
    ...
8
}

1
<com.etsy.android.grid.StaggeredGridView
2
    xmlns:android="http://schemas.android.com/apk/res/android"
3
    xmlns:app="http://schemas.android.com/apk/res-auto"
4
    android:id="@+id/grid_view"
5
    android:layout_width="match_parent"
6
    android:layout_height="match_parent"
7
    app:item_margin="8dp"
8
    app:column_count="3" />

1
<?xml version="1.0" encoding="utf-8"?>
2
<FrameLayout
3
    xmlns:android="http://schemas.android.com/apk/res/android"
4
    android:orientation="horizontal"
5
    android:id="@+id/panel_content"
6
    android:layout_width="match_parent"
7
    android:layout_height="wrap_content"
8
    android:descendantFocusability="blocksDescendants">
9

10
    <com.etsy.android.grid.util.DynamicHeightImageView
11
        android:id="@+id/image"
12
        android:layout_width="match_parent"
13
        android:layout_height="wrap_content"
14
        android:gravity="center"/>
15

16
</FrameLayout>

1
import android.os.Bundle;
2
import android.support.v7.app.ActionBarActivity;
3
import com.devahoy.learn30androidlibraries.R;
4
import com.etsy.android.grid.StaggeredGridView;
5

6
import java.util.ArrayList;
7

8
public class MainActivity extends ActionBarActivity {
9

10
    private StaggeredGridView mGridView;
11
    private CustomAdapter mAdapter;
12
    private ArrayList<String> mDataset;
13

14
    @Override
15
    protected void onCreate(Bundle savedInstanceState) {
16
        super.onCreate(savedInstanceState);
17
        setContentView(R.layout.day1_activity_main);
18

19
        mGridView = (StaggeredGridView) findViewById(R.id.grid_view);
20
        mAdapter = new CustomAdapter(this, R.id.image);
21
    }
22

23
}

1
@Override
2
protected void onCreate(Bundle savedInstanceState) {
3

4
    ...
5

6
    mDataset = generateSampleData();
7
    for (String data : mDataset) {
8
        mAdapter.add(data);
9
    }
10

11
    mGridView.setAdapter(mAdapter);
12

13
}
14

15
private ArrayList<String> generateSampleData() {
16
    final ArrayList<String> data = new ArrayList<String>();
17

18
    data.add("https://d13yacurqjgara.cloudfront.net/users/283599/screenshots/1635215/never_quit.jpg");
19
    data.add("https://d13yacurqjgara.cloudfront.net/users/46938/screenshots/1635213/datastory-gis-map-icon-set_1x.jpg");
20
    data.add("https://d13yacurqjgara.cloudfront.net/users/46938/screenshots/1635210/appointment-used-eye-doctor-optometrist-icon-set_1x.jpg");
21
    data.add("https://d13yacurqjgara.cloudfront.net/users/565942/screenshots/1635208/megacourse-checkout_1x.png");
22
    data.add("https://d13yacurqjgara.cloudfront.net/users/111758/screenshots/1635207/qwilt_cutting_room_floor_1x.gif");
23
    data.add("https://d13yacurqjgara.cloudfront.net/users/99875/screenshots/1635187/lonely-goalie_teaser.gif");
24
    data.add("https://d13yacurqjgara.cloudfront.net/users/46938/screenshots/1635206/unused-eye-doctor-optometrist-icon-set_1x.jpg");
25
    data.add("https://d13yacurqjgara.cloudfront.net/users/340376/screenshots/1635184/momentum_progress3-02_teaser.jpg");
26
    data.add("https://d13yacurqjgara.cloudfront.net/users/248947/screenshots/1635205/screen_shot_2014-07-09_at_9.39.23_am_teaser.png");
27
    data.add("https://d13yacurqjgara.cloudfront.net/users/197415/screenshots/1635204/round-bold-soft-icons_v2short_teaser.jpg");
28
    data.add("https://d13yacurqjgara.cloudfront.net/users/73845/screenshots/1635203/icons_1x.gif");
29
    data.add("https://d13yacurqjgara.cloudfront.net/users/46938/screenshots/1635201/bli-custiom-business-learning-icons-set_1x.jpg");
30
    data.add("https://d13yacurqjgara.cloudfront.net/users/11431/screenshots/1635200/youngblood_01_905_1x.jpg");
31
    data.add("https://d13yacurqjgara.cloudfront.net/users/406256/screenshots/1635199/micro_1x.jpg");
32
    data.add("https://d13yacurqjgara.cloudfront.net/users/568675/screenshots/1635198/productshot_teaser.png");
33
    data.add("https://d13yacurqjgara.cloudfront.net/users/111758/screenshots/1635197/qwilt_comp_1x.jpg");
34
    data.add("https://d13yacurqjgara.cloudfront.net/users/607527/screenshots/1635195/khal-drogo_x1000_1x.jpg");
35
    data.add("https://d13yacurqjgara.cloudfront.net/users/607527/screenshots/1635188/dragonfruit_paper_x1000_teaser.jpg");
36

37
    return data;
38
}

1
package com.devahoy.learn30androidlibraries.day1;
2

3
import android.content.Context;
4
import android.util.SparseArray;
5
import android.view.LayoutInflater;
6
import android.view.View;
7
import android.view.ViewGroup;
8
import android.widget.ArrayAdapter;
9

10
import com.devahoy.learn30androidlibraries.R;
11
import com.etsy.android.grid.util.DynamicHeightImageView;
12
import com.squareup.picasso.Picasso;
13

14
import java.util.Random;
15

16
public class CustomAdapter extends ArrayAdapter<String> {
17

18
    private LayoutInflater mInflater;
19
    private Context mContext;
20

21
    private static final SparseArray<Double> sPositionHeightRatios =
22
            new SparseArray<Double>();
23
    private final Random mRandom;
24

25
    static class ViewHolder {
26
        DynamicHeightImageView imageView;
27
    }
28

29
    public CustomAdapter(final Context context, final int staggeredId) {
30
        super(context, staggeredId);
31
        mContext = context;
32
        mInflater = LayoutInflater.from(context);
33
        mRandom = new Random();
34
    }
35

36
    @Override
37
    public View getView(int position, View convertView, ViewGroup parent) {
38
        ViewHolder viewHolder;
39

40
        if (convertView == null) {
41
            convertView = mInflater.inflate(R.layout.day1_list_item_simple, parent, false);
42
            viewHolder = new ViewHolder();
43
            viewHolder.imageView =
44
                    (DynamicHeightImageView) convertView.findViewById(R.id.image_view);
45

46
            convertView.setTag(viewHolder);
47
        }
48
        else {
49
            viewHolder = (ViewHolder) convertView.getTag();
50
        }
51

52
        double positionHeight = getPositionRatio(position);
53

54
        viewHolder.imageView.setHeightRatio(positionHeight);
55

56
        String path = getItem(position);
57
        Picasso.with(mContext)
58
                .load(path)
59
                .error(R.drawable.ic_launcher)
60
                .placeholder(R.drawable.ic_launcher)
61
                .into(viewHolder.imageView);
62

63

64
        return convertView;
65
    }
66

67
    private double getPositionRatio(final int position) {
68
        double ratio = sPositionHeightRatios.get(position, 0.0);
69
        // if not yet done generate and stash the columns height
70
        // in our real world scenario this will be determined by
71
        // some match based on the known height and width of the image
72
        // and maybe a helpful way to get the column height!
73
        if (ratio == 0) {
74
            ratio = getRandomHeightRatio();
75
            sPositionHeightRatios.append(position, ratio);
76
        }
77
        return ratio;
78
    }
79

80
    private double getRandomHeightRatio() {
81
        return (mRandom.nextDouble() / 2.0) + 1.0; // height will be 1.0 - 1.5 the width
82
    }
83
}