How to create AsymmetricGridView with different image sizes in row

Question

I do lots of google and found many examples and also explore that but ~I want AsymmetricGridView different No of images and different images sizes in my grid.

Please find below attached images for my requirement of grid.!

Please help me for the this type of grid or suggest me library for the this type of asymmetric grid.

Thanks in advance.

Kindred

Hello @Arvind...did u get the solution of yours problem...please let me know..because i have also stucked in this problem..thanks – Furlani

Answer 1

You can use following library https://github.com/felipecsl/AsymmetricGridView

Caplin

I tried this but according to my question second and third row is not possible in this library. – Kindred

take a look at the screenshot of the library, isn't it the same as your image you posted – Caplin

No, Look my first row is identical to this above image but second row has one small and one large image and third row has only one image – Kindred

we are giving only idea not full fill your project requirement – Evanne

I have set setRequestedColumnCount(3);..If there is one image in the row it shows a green background of the row.I have not set green background anywhere.Why is that and how can i remove it? – Beckerman

Answer 2

You can use THIS LIBRARY to achieve your goal.Import this lib in your eclipse workspace or include in your gradle if you are using Android Studio

In your build.gradle file:

dependencies {
    compile 'com.felipecsl.asymmetricgridview:library:2.0.1'
}

In your layout xml:

<com.felipecsl.asymmetricgridview.library.widget.AsymmetricGridView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/listView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

In your activity class:

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    listView = (AsymmetricGridView) findViewById(R.id.listView);

    // Choose your own preferred column width
    listView.setRequestedColumnWidth(Utils.dpToPx(this, 120));
    final List<AsymmetricItem> items = new ArrayList<>();

    // initialize your items array
    adapter = new ListAdapter(this, listView, items);
    AsymmetricGridViewAdapter asymmetricAdapter =
        new AsymmetricGridViewAdapter<>(this, listView, adapter);
    listView.setAdapter(asymmetricAdapter);
}

Subjectify

I tried this but according to my question second and third row is not possible in this library.Can you please let me know this thing is possible according to my requirment – Kindred

I have seen this library on github and this is exactly what i required but I am not able to follow how to use his library for loading dynamic images.. In my project images are fetched from server.So i am getting url of images from server.I can store them in list but how to implement it with AsymmetricGridView.can u hep me wid this-#31793125 – Beckerman

@BhuvneshVarma.if you closely analyse the library and see AsymmetricGridViewAdapter has extended BaseAdapter.So it's like a normal GridView.Just fetch your data,pass it to your adapter and use an image loading library such as Picasso(square.github.io/picasso) to load your item in your image view. – Subjectify

@BhuvneshVarma well i haven't used this lib in particular.but can you post some image or something to clarify it? – Subjectify

try with select 2 Column that will show some BLANK cell :( – Oconner

I also try this library but it force close app with error after setting adaper.with error - Attempt to invoke interface method 'int com.felipecsl.asymmetricgridview.library.model.AsymmetricItem.getRowSpan()' on a null object reference. Any help please – Stubbed