How to implement coverflow layout from existing gridview images

Question

i am using eclipse. Basically what i am trying to implement is that , that i have a gridView which is fetching images from mysql database dynamically using JSON. Now , instead of gridview i want to show them as coverflow view.

I have searched through the internet , but was not able to find any library or example for dynamic images , i only found for static images stored in the app itself and not on external database.

My code are as follows:-

MainActivity.java:-

public class MainActivity extends Activity implements OnClickListener {
// Log tag
private static final String TAG = MainActivity.class.getSimpleName();

// Movies json url
private static final String url = "http://eventassociate.com/wedding/photomania";
private ProgressDialog pDialog;
private List<Movie> movieList = new ArrayList<Movie>();
private PullToRefreshGridView mPullRefreshGridView;
private GridView gridView;
private CustomListAdapter adapter;
ImageButton blackcapture;
private static int RESULT_LOAD_IMAGE = 1;
String picturePath;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);


    getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
        WindowManager.LayoutParams.FLAG_FULLSCREEN);

    setContentView(R.layout.gallary_activity_main);

    overridePendingTransition(R.anim.push_down_in, R.anim.push_down_out);




    mPullRefreshGridView = (PullToRefreshGridView) findViewById(R.id.list);
    gridView = mPullRefreshGridView.getRefreshableView();


    mPullRefreshGridView.setOnRefreshListener(new OnRefreshListener2<GridView>() {

        @Override
        public void onPullDownToRefresh(PullToRefreshBase<GridView> refreshView) {


            adapter.notifyDataSetChanged();
            gridView.setAdapter(adapter);
            gridView.invalidateViews();

            mPullRefreshGridView.onRefreshComplete();

        }










    adapter = new CustomListAdapter(this, movieList);
    gridView.setAdapter(adapter);




    gridView.setOnItemClickListener(new OnItemClickListener() {
        @Override
        public void onItemClick(AdapterView<?> parent, View v,
                int position, long id) {

            Movie m5 = movieList.get(position);

            Intent i = new Intent(getApplicationContext(),
                    FullImageActivity.class);

            i.putExtra("movieobject", m5);
            startActivity(i);


        }
    });

Adapter Class:-

public class CustomListAdapter extends BaseAdapter  {
private Activity activity;


private LayoutInflater inflater;
List<Movie> movieItems;
ImageLoader imageLoader = AppController.getInstance().getImageLoader();

public CustomListAdapter(Activity activity, List<Movie> movieItems) {
    this.activity = activity;
    this.movieItems = movieItems;
}







@Override
public int getCount() {
    return movieItems.size();
}

@Override
public Object getItem(int location) {
    return movieItems.get(location);
}

@Override
public long getItemId(int position) {
    return position;
}

@Override
public View getView(int position, View convertView, ViewGroup parent) {




    if (inflater == null)
        inflater = (LayoutInflater) activity
                .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    if (convertView == null)
        convertView = inflater.inflate(R.layout.gallary_list_row, null);

    if (imageLoader == null)
        imageLoader = AppController.getInstance().getImageLoader();
    NetworkImageView thumbNail = (NetworkImageView) convertView
            .findViewById(R.id.thumbnail);








    // ...............................................

    TextView title = (TextView) convertView.findViewById(R.id.title);

    // getting movie data for the row
    Movie m = movieItems.get(position);

    // thumbnail image
    thumbNail.setImageUrl(m.getThumbnailUrl(), imageLoader);

    // title
    title.setText(m.getTitle());







    return convertView;

}

Movie.java:-

public class Movie implements Parcelable{
private String title,thumbnailUrl;



public Movie() {
    // TODO Auto-generated constructor stub
}

public Movie(String name, String thumbnailUrl
        ) {
    this.title = name;
    this.thumbnailUrl = thumbnailUrl;

}



public String getTitle() {
    return title;
}

public void setTitle(String name) {
    this.title = name;
}

public String getThumbnailUrl() {
    return thumbnailUrl;
}

public void setThumbnailUrl(String thumbnailUrl) {
    this.thumbnailUrl = "http://eventassociate.com/wedding/"+thumbnailUrl;
}

 // Parcelling part
public Movie(Parcel in){
    String[] data = new String[2];

    in.readStringArray(data);
    this.title = data[0];
    this.thumbnailUrl = data[1];

}








@Override
public int describeContents() {
    // TODO Auto-generated method stub
    return 0;
}

@Override
public void writeToParcel(Parcel dest, int flags) {
    dest.writeStringArray(new String[] {this.title,
                                        this.thumbnailUrl,
                                        });
}


 public static final Parcelable.Creator CREATOR = new Parcelable.Creator() {
     public Movie createFromParcel(Parcel in) {
         return new Movie(in); 
     }

     public Movie[] newArray(int size) {
         return new Movie[size];
     }
 };

}

I successfully implemented this as GridView , but i am facing trouble in implementing this as coverflow design or something like that. I searched on the net and i find this code , but only for static images:-

public class SimpleExample extends Activity {

// =============================================================================
// Child views
// =============================================================================

private FancyCoverFlow fancyCoverFlow;

// =============================================================================
// Supertype overrides
// =============================================================================

/**
 * Called when the activity is first created.
 */
@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);

    this.fancyCoverFlow = (FancyCoverFlow) this.findViewById(R.id.fancyCoverFlow);

    this.fancyCoverFlow.setAdapter(new FancyCoverFlowSampleAdapter());
    this.fancyCoverFlow.setUnselectedAlpha(1.0f);
    this.fancyCoverFlow.setUnselectedSaturation(0.0f);
    this.fancyCoverFlow.setUnselectedScale(0.5f);
    this.fancyCoverFlow.setSpacing(50);
    this.fancyCoverFlow.setMaxRotation(0);
    this.fancyCoverFlow.setScaleDownGravity(0.2f);
    this.fancyCoverFlow.setActionDistance(FancyCoverFlow.ACTION_DISTANCE_AUTO);

}

// =============================================================================
// Private classes
// =============================================================================

}

Adapter.java:-

public class FancyCoverFlowSampleAdapter extends FancyCoverFlowAdapter {

// =============================================================================
// Private members
// =============================================================================

private int[] images = {R.drawable.image1, R.drawable.image2, R.drawable.image3, R.drawable.image4, R.drawable.image5, R.drawable.image6,};

// =============================================================================
// Supertype overrides
// =============================================================================

@Override
public int getCount() {
    return images.length;
}

@Override
public Integer getItem(int i) {
    return images[i];
}

@Override
public long getItemId(int i) {
    return i;
}

@Override
public View getCoverFlowItem(int i, View reuseableView, ViewGroup viewGroup) {
    ImageView imageView = null;

    if (reuseableView != null) {
        imageView = (ImageView) reuseableView;
    } else {
        imageView = new ImageView(viewGroup.getContext());
        imageView.setScaleType(ImageView.ScaleType.CENTER_INSIDE);
        imageView.setLayoutParams(new FancyCoverFlow.LayoutParams(300, 400));

    }

    imageView.setImageResource(this.getItem(i));
    return imageView;
}

}

Can someone help me , in solving my problem. Thanks.

My final code with coverflow:-

MainActivity:-

public class MainActivity extends Activity implements OnClickListener {
// Log tag
private static final String TAG = album.MainActivity.class.getSimpleName();

// Movies json url
private static final String url = "http://eventassociate.com/wedding/androidadminimages";
private ProgressDialog pDialog;
private List<Moviealbum> movieList = new ArrayList<Moviealbum>();

private FancyCoverFlow fancyCoverFlow;


private CustomListAdapter adapter;


@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);



    getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
        WindowManager.LayoutParams.FLAG_FULLSCREEN);



    setContentView(R.layout.album_activity_main);

    overridePendingTransition(R.anim.push_down_in, R.anim.push_down_out);

    this.fancyCoverFlow = (FancyCoverFlow) this.findViewById(R.id.list);

    adapter = new CustomListAdapter(this, movieList);

    this.fancyCoverFlow.setAdapter(new CustomListAdapter(this, movieList));
    this.fancyCoverFlow.setUnselectedAlpha(1.0f);
    this.fancyCoverFlow.setUnselectedSaturation(0.0f);
    this.fancyCoverFlow.setUnselectedScale(0.5f);
    this.fancyCoverFlow.setSpacing(50);
    this.fancyCoverFlow.setMaxRotation(0);
    this.fancyCoverFlow.setScaleDownGravity(0.2f);
    this.fancyCoverFlow.setActionDistance(FancyCoverFlow.ACTION_DISTANCE_AUTO);














    fancyCoverFlow.setOnItemClickListener(new OnItemClickListener() {
        @Override
        public void onItemClick(AdapterView<?> parent, View v,
                int position, long id) {

            Moviealbum m5 = movieList.get(position);

            Intent i = new Intent(getApplicationContext(),album.
                    FullImageActivity.class);

            i.putExtra("movieobject", m5);
            startActivity(i);


        }
    });











    pDialog = new ProgressDialog(this);
    // Showing progress dialog before making http request
    pDialog.setMessage("Loading...");
    pDialog.show();

    // changing action bar color
    getActionBar().setBackgroundDrawable(
            new ColorDrawable(Color.parseColor("#1b1b1b")));

    // Creating volley request obj
    JsonArrayRequest movieReq = new JsonArrayRequest(url,
            new Response.Listener<JSONArray>() {
                @Override
                public void onResponse(JSONArray response) {
                    Log.d(TAG, response.toString());
                    hidePDialog();

                    // Parsing json
                    for (int i = 0; i < response.length(); i++) {
                        try {

                            JSONObject obj = response.getJSONObject(i);
                            Moviealbum movie = new Moviealbum();
                            movie.setTitle(obj.getString("no"));
                            movie.setThumbnailUrl(obj.getString("alinks"));

                            // adding movie to movies array
                            movieList.add(movie);

                        } catch (JSONException e) {
                            e.printStackTrace();
                        }

                    }

                    // notifying list adapter about data changes
                    // so that it renders the list view with updated data
                    adapter.notifyDataSetChanged();
                }
            }, new Response.ErrorListener() {
                @Override
                public void onErrorResponse(VolleyError error) {
                    VolleyLog.d(TAG, "Error: " + error.getMessage());
                    hidePDialog();

                }
            });

    // Adding request to request queue...................................
    AppController.getInstance().addToRequestQueue(movieReq);
}

@Override
public void onDestroy() {
    super.onDestroy();
    hidePDialog();
}

private void hidePDialog() {
    if (pDialog != null) {
        pDialog.dismiss();
        pDialog = null;
    }
}

AdapterClass :-

public class CustomListAdapter extends  FancyCoverFlowAdapter  {
private Activity activity;


private LayoutInflater inflater;
List<Moviealbum> movieItems;
ImageLoader imageLoader = AppController.getInstance().getImageLoader();

public CustomListAdapter(Activity activity, List<Moviealbum> movieItems) {
    this.activity = activity;
    this.movieItems = movieItems;
}







@Override
public int getCount() {
    return movieItems.size();
}

@Override
public Object getItem(int location) {
    return movieItems.get(location);
}

@Override
public long getItemId(int position) {
    return position;
}

 @Override
    public View getCoverFlowItem(int position, View reuseableView, ViewGroup viewGroup) {




    if (inflater == null)
        inflater = (LayoutInflater) activity
                .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    if (reuseableView == null)
        reuseableView = inflater.inflate(R.layout.gallary_list_row, null);

    if (imageLoader == null)
        imageLoader = AppController.getInstance().getImageLoader();
    NetworkImageView thumbNail = (NetworkImageView) reuseableView
            .findViewById(R.id.thumbnail);











    // ...............................................

    TextView title = (TextView) reuseableView.findViewById(R.id.title);

    // getting movie data for the row
    Moviealbum m = movieItems.get(position);

    // thumbnail image
    thumbNail.setImageUrl(m.getThumbnailUrl(), imageLoader);

    // title
    title.setText(m.getTitle());







    return reuseableView;

}

The app runs fine , but after loading blank screen is shown with no images.

Logcat:-

enter image description here

Zack Matthews · Accepted Answer · 2015-07-10T13:38:52.030

1

Your issue isn't with the CoverFlow code, but rather where you're doing your network operation. On app load, begin your network request for your JSON payload, show a spinner to show the app is loading, and populate your Adapter once your images are loaded. I'm assuming you have network code already given your GridView implementation? Let me know if I've missed something. I hope that helps!

EDIT:

Once you've added images to your Adapter make sure you call notifyDataSetChanged() to tell your adapter to reload its views.

EDIT 2:

Look at this line here: this.fancyCoverFlow.setAdapter(new CustomListAdapter(this, movieList));

You're passing a new CustomListAdapter rather than passing in your adapter variable. Try fixing that and let me know if it works.

edited Jul 10 '15 at 13:38

answered Jul 10 '15 at 12:59

Zack Matthews

409
2
11

Yes , i have tried doing this...but there is a nullpointer exception on notifyDataSetChanged() line. When i remove it , the app shows a blank screen after loading dialog box. I can edit my code in the question if u want? – Nitish Chauhan Jul 10 '15 at 13:06
Where do you call notifyDatasetChanged() in the CoverFlow code? Have you gotten it to work with static images? We should be able to figure out what's going on once we can get it to work with something static. From there we just have to make sure we're doing our networking operations properly. – Zack Matthews Jul 10 '15 at 13:09
I have inserted my final code in the question , you can check.Thanks. – Nitish Chauhan Jul 10 '15 at 13:32
I updated my answer. Let me know if that fixes the issue. – Zack Matthews Jul 10 '15 at 13:39
I am getting classcast exception and the app crashes. java.lang.classcastexception android.view.view cannot be cast to android.view.viewgroup. – Nitish Chauhan Jul 10 '15 at 13:48
I have uploaded the logcat image in the question. – Nitish Chauhan Jul 10 '15 at 13:57
There should be a line in the logcat that tells you what line in your code the error is being thrown on. Could you find that? It should say either AdapterClass.java or MainActivity.java. Logcat is essentially the stack trace. Somewhere in there it's going to tell you which line you wrote that invoked the error. – Zack Matthews Jul 10 '15 at 14:12
sorry , but there is AndroidRunTime error and i am not able to find the class at which there is error , i have searched thoroughly , but i couldn't find. – Nitish Chauhan Jul 10 '15 at 14:39
i think the error is in the external library which i am using for this?? – Nitish Chauhan Jul 10 '15 at 14:45

How to implement coverflow layout from existing gridview images

1 Answers1