Gridview Expand code

Question

I am making an app in which I want to set images onto gridview and on itemclick I want to show the description of an image via textview. I have already done the setting of images onto gridview, but now I want to do the second part of it.

Following Images shows the visualization of The layout :

• Before :

• After :

Basically, I want to Add a new layout in between of 2 rows of gridview below the clicked image. I have done a lot of research and also seen many libraries and StackOverflow answers but can't figure out to do so. I need example code to do so for gridview or any other views. Thanks.

All the stackoverflow Answers and libraries that i have gone through :=

• Android expandable GridView like Google images
• Add view between 2 rows Gridview

• Dynamically adding a whole row in GridView, or splitting the View

• Libraries ->

• https://github.com/thewaychung/ExpandableGridView

• https://github.com/paolorotolo/ExpandableHeightListView

Answer 1

You can try the following approach for your reference : I am using text view instead of ImageView. But the concept remain same. It is displayed something like this.

Const.java : Class to keep constants.

public class Const {
public static final int DES_VIEW=0;
public static final int FOOD_VIEW=1;
public static final int FAKE_VIEW=2;
public static final int COLUMN_NUMBER = 2;
}

RowData.java : An Interface which will be used by the adapter class to get view type of each element.

public interface RowData {
int getViewType();
}

FoodItem.java : Just a plain pojo class which implements RowData ( The parent item FoodItem item 0 is populated )

public class FoodItem implements RowData{
public int getViewType() {
    return viewType;
}

public void setViewType(int viewType) {
    this.viewType = viewType;
}

private int viewType;
public boolean isExpanded() {
    return isExpanded;
}

public void setExpanded(boolean expanded) {
    isExpanded = expanded;
}

private boolean isExpanded;

public String getFoodName() {
    return foodName;
}

public void setFoodName(String foodName) {
    this.foodName = foodName;
}

private String foodName;

public String getDescription() {
    return description == null ? "DEFAULT" : description;
}

public void setDescription(String description) {
    this.description = description;
}

private String description;

}

FakeData.java : Pojo class to populate empty views.

public class FakeData implements RowData {
@Override
public int getViewType() {
    return Const.FAKE_VIEW;
}
}

FoodAdapter.java : Adapter class.

public class FoodAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {

public void setFoodItems(List<RowData> foodItems) {
    this.foodItems = foodItems;
   // addBlankViews();
}



private List<RowData> foodItems;

@Override
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
    View view;

    switch (viewType) {
        case Const.FOOD_VIEW:
            view = LayoutInflater.from(parent.getContext()).inflate(R.layout.layout, parent, false);
            return new VH(view);
        case Const.DES_VIEW:
            view = LayoutInflater.from(parent.getContext()).inflate(R.layout.des, parent, false);
            return new DesView(view);

        case Const.FAKE_VIEW:
            Log.e("CALLED", " ---> " + viewType);
            view = LayoutInflater.from(parent.getContext()).inflate(R.layout.layout, parent, false);
            return new FakeView(view);
            default:
                return null;
    }
}

@Override
public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
    int view = getItemViewType(position);

    switch (view) {
        case Const.FAKE_VIEW: {
            FakeView fakeView = (FakeView) holder;
            Log.e("CALLED", position + " " + view);
        }
        break;

        case Const.DES_VIEW: {
            DesView desView = (DesView) holder;
            desView.setData((FoodItem) getFoodItem(position));
        }
        break;
        case Const.FOOD_VIEW: {
            VH foodView = (VH) holder;
            foodView.setData((FoodItem) getFoodItem(position));

        }
        break;

    }

}

RowData getFoodItem(int position) {
    if (foodItems != null) {
        return foodItems.get(position);
    }
    return null;
}

@Override
public int getItemViewType(int position) {
    RowData foodItem = getFoodItem(position);
    if (foodItem != null) {
        return foodItem.getViewType();

    }
    return -1;
}

@Override
public int getItemCount() {
    if (foodItems == null) {
        return 0;
    } else {
        return foodItems.size();
    }

}


class VH extends RecyclerView.ViewHolder {
    TextView foodItemName;


    public VH(View itemView) {
        super(itemView);
        foodItemName = itemView.findViewById(R.id.food_item);
        foodItemName.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                FoodAdapter.this.onClick(getAdapterPosition());

            }
        });
    }


    void setData(FoodItem data) {
        foodItemName.setText(data.getFoodName());
    }
}

class DesView extends RecyclerView.ViewHolder {
    TextView foodDesView;


    public DesView(View itemView) {
        super(itemView);
        foodDesView = itemView.findViewById(R.id.des_item);
        foodDesView.setTextColor(Color.BLUE);
    }


    void setData(FoodItem data) {
        foodDesView.setText(data.getDescription());
    }
}

class FakeView extends RecyclerView.ViewHolder {

    public FakeView(View itemView) {
        super(itemView);

    }
}

private int currentExpandedIndex = -1;

private void onClick(int position) {
 //  calculation to show and hide the child view (with magenta background ).
    if (currentExpandedIndex != -1) {
        foodItems.remove(currentExpandedIndex);
        currentExpandedIndex = -1;
        notifyDataSetChanged();
        return;
    }
    int startIndex = position % Const.COLUMN_NUMBER;
    if (startIndex == 0) {
        startIndex = position;
    } else {
        startIndex = position - startIndex;
    }
    startIndex = startIndex + Const.COLUMN_NUMBER;

    if (currentExpandedIndex == -1) {
        FoodItem des = new FoodItem();
        des.setViewType(Const.DES_VIEW);
        FoodItem foodItem = (FoodItem) getFoodItem(position);
        des.setDescription(foodItem.getDescription());
        foodItems.add(startIndex, des);
        currentExpandedIndex = startIndex;
    }
    notifyDataSetChanged();
}
}

MainActivity.java : Activity class.

 public class MainActivity extends AppCompatActivity {
private FoodAdapter foodAdapter;


@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    RecyclerView recyclerView = findViewById(R.id.reycleView);
    ((SimpleItemAnimator) recyclerView.getItemAnimator()).setSupportsChangeAnimations(false);

    foodAdapter = new FoodAdapter();
    foodAdapter.setFoodItems(getFoodItems());
    GridLayoutManager mLayoutManager = new GridLayoutManager(this,Const.COLUMN_NUMBER);
    mLayoutManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
        @Override
        public int getSpanSize(int position) {
            switch (foodAdapter.getItemViewType(position)) {
                case Const.DES_VIEW:
                    return Const.COLUMN_NUMBER;
                default:
                    return 1;
            }


        }
    });
    recyclerView.setLayoutManager(mLayoutManager);
    recyclerView.setHasFixedSize(true);
    recyclerView.setAdapter(foodAdapter);


}

private List<RowData> foodItems;

private List<RowData> getFoodItems() {
    foodItems = new ArrayList<>();
    for (int i = 0; i < 18; i++) {
        FoodItem foodItem = new FoodItem();
        foodItem.setFoodName(" FoodItem item " + i);
        foodItem.setExpanded(false);
        foodItem.setDescription("Fake des of " + i);
        foodItem.setViewType(Const.FOOD_VIEW);
        foodItems.add(foodItem);
    }
    // calculation to add empty view.
    // these view will be added when, there is shortage of parent views to   fill row completely  

    int size = foodItems.size();
    int blankView = size % Const.COLUMN_NUMBER;
    if (blankView != 0) {
        blankView = Const.COLUMN_NUMBER - blankView;
        for (int i = 0; i < blankView; i++) {
            foodItems.add(new FakeData());
        }
    }

    return foodItems;

}


}

activity_main.xml

 <?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="check.service.com.genericrecylerview.MainActivity">
<android.support.v7.widget.RecyclerView
android:id="@+id/reycleView"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>

</LinearLayout>

des.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:orientation="vertical"
android:background="@color/colorAccent"
android:layout_height="wrap_content">
 <TextView
android:id="@+id/des_item"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />

</LinearLayout>

layout.xml

 <?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:orientation="vertical"
android:layout_height="wrap_content">
<TextView
android:id="@+id/food_item"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />

</LinearLayout>