Monday 5 March 2018

How to implement the section Expandable Grid Layout.

Creating New Project.
Open android studio and create a new project.


compile 'com.android.support:recyclerview-v7:23.0.1'
compile 'com.mcxiaoke.volley:library-aar:1.0.0'
compile 'com.squareup.picasso:picasso:2.5.2'
compile 'com.android.support:cardview-v7:23.0.1'
compile 'com.jakewharton:butterknife:5.1.1'
compile 'de.hdodenhof:circleimageview:2.2.0'


RESPONSE:::


{
    "status": true,
    "data": [
        {
            "cat_pid": "1",
            "cat_id": "4",
            "name": "T shirt",
            "products": [
                {
                    "id": "1",
                    "image": "uploads/prod_file/1-1519369722-1.jpg",
                    "product_name": "Distressed Crew-Neck T-shirt"
                },
                {
                    "id": "2",
                    "image": "uploads/prod_file/1-1519370258-1.jpg",
                    "product_name": "Typographic Print Slim Fit T-shirt"
                },
                {
                    "id": "3",
                    "image": "uploads/prod_file/admin-1519370808-1.jpg",
                    "product_name": "Striped Crew-Neck T-shirt"
                },
                {
                    "id": "6",
                    "image": "uploads/prod_file/1-1519372439-1.jpg",
                    "product_name": "Striped Polo T-shirt with Vented Hemline"
                }
            ]
        }
    ]
}

File => New => New Project => Configure your new project => Select the form factor yours app will run on => Add an Activity to Mobile => Customize the Activity => Finish.

First we need to add Library to our project.
Create Xml file in project.

Open => app => res => layout - activity_main.xml.

<RelativeLayout 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"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:background="#f3f4f9"
    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">

    <android.support.v7.widget.RecyclerView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#fff"
        android:id="@+id/recycler_view"/>
</RelativeLayout>


Create Xml file in project.
Open => app => res => layout - layout_item.xml.


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="@dimen/item_height"
    android:layout_margin="@dimen/item_margin"
    android:orientation="vertical"
    android:gravity="center|start"
  >

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center|start">

        <LinearLayout
            android:id="@+id/layImage"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center|start">

            <ImageView
                android:id="@+id/image"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:scaleType="centerCrop"
                android:src="@mipmap/ic_launcher" />
        </LinearLayout>
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/layImage"
            android:padding="4dp"
            android:background="#f3f4f9">
            <TextView
                android:id="@+id/text_item"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="Add"
                android:gravity="center"
                android:textSize="14dp"
                android:singleLine="true" />
        </LinearLayout>
    </RelativeLayout>
</LinearLayout>



Create Xml file in project.

Open => app => res => drawable- selector_section_toggle.xml.


<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/icon_minus" android:state_checked="true" />
    <item android:drawable="@drawable/icon_plus" />
</selector>



Create Xml file in project.

Open => app => res => layout - layout_section.xml.


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="1dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#f3f4f9"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/text_section"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="0.12"
            android:background="#f3f4f9"
            android:paddingBottom="@dimen/section_padding"
            android:paddingStart="@dimen/section_text_padding_left"
            android:paddingTop="@dimen/section_padding"
            android:singleLine="true"
            android:textColor="#000000"
            android:textSize="16dp" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight=".2"
            android:gravity="center|end">

            <ToggleButton
                android:id="@+id/toggle_button_section"
                android:layout_width="16dp"
                android:layout_height="16dp"
                android:layout_marginRight="12dp"
                android:background="@drawable/selector_section_toggle"
                android:contentDescription="@string/image_button_content_description"
                android:padding="@dimen/section_padding"
                android:textOff=""
                android:textOn="" />
        </LinearLayout>
    </LinearLayout>

</LinearLayout>


Create the Java file in project.
Open app => main => src = MainActivity.java


public class MainActivity extends AppCompatActivity implements ItemClickListener {

    RecyclerView mRecyclerView;
    SectionedExpandableLayoutHelper sectionedExpandableLayoutHelper;
    String mImage;
    int mId;
    String mName, mCateName;
    //random data


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //setting the recycler view
        mRecyclerView = (RecyclerView) findViewById(R.id.recycler_view);

        getData();

        sectionedExpandableLayoutHelper = new SectionedExpandableLayoutHelper(this, mRecyclerView, this, 3);

    }

    //Get the country data here...
    private void getData() {
        StringRequest stringRequest = new StringRequest(Request.Method.POST, "https://mukh.pixelsoftwares.com/seller_fifo/api/mall",
                new Response.Listener<String>() {
                    @Override
                    public void onResponse(String response) {
                        Log.i("Service List::", "Service List::>>" + response);
                        try {
                            JSONObject jsonObject = new JSONObject(response);
                            String mStatus = jsonObject.getString("status");
                            if (mStatus.equals("true")) {
                                JSONArray jsonArray = jsonObject.getJSONArray("data");
                                Log.i("jsonArray::", "jsonArray::" + jsonArray);
                                for (int i = 0; i < jsonArray.length(); i++) {
                                    JSONObject jsonobject = jsonArray.getJSONObject(i);
                                    mCateName = jsonobject.optString("name");
                                    String mCategoryId = jsonobject.optString("cat_id");
                                    ArrayList<Item> arrayList = new ArrayList<>();
                                    arrayList.clear();
                                    JSONArray imageJsonArray = jsonobject.getJSONArray("products");
                                    for (int j = 0; j < imageJsonArray.length(); j++) {
                                        JSONObject jsonobjectImage = imageJsonArray.getJSONObject(j);
                                        mImage = jsonobjectImage.optString("image");
                                        mId = jsonobjectImage.optInt("id");
                                        mName = jsonobjectImage.optString("product_name");
                                        Item item = new Item();
                                        item.setName(mName);
                                        item.setImage(mImage);
                                        item.setId(mId);
                                        arrayList.add(item);
                                    }
                                    sectionedExpandableLayoutHelper.addSection(mCateName, arrayList);
                                    sectionedExpandableLayoutHelper.notifyDataSetChanged();

                                }

                            } else {
                                Toast.makeText(MainActivity.this, "No Data Found", Toast.LENGTH_SHORT).show();
                            }
                        } catch (JSONException e) {
                            e.printStackTrace();
                        }
                    }

                },
                new Response.ErrorListener() {
                    @Override
                    public void onErrorResponse(VolleyError error) {

                    }
                }) {

            @Override
            public Map<String, String> getHeaders() throws AuthFailureError {
                HashMap<String, String> headers = new HashMap<String, String>();
                headers.put("token", "96a02d9459756c7fb552363c0b43ab8e");
                return headers;
            }

            @Override
            protected Map<String, String> getParams() throws AuthFailureError {
                Map<String, String> map = new HashMap<String, String>();
                map.put("mall", "1");
                map.put("cat_id", "x");
                map.put("tokenid", "218759");
                return map;
            }

        };
        RequestQueue requestQueue = Volley.newRequestQueue(MainActivity.this);
        requestQueue.add(stringRequest);
        stringRequest.setRetryPolicy(new DefaultRetryPolicy(500000,
                DefaultRetryPolicy.DEFAULT_MAX_RETRIES,
                DefaultRetryPolicy.DEFAULT_BACKOFF_MULT));
    }

    //**********END**

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }

    @Override
    public void itemClicked(Item item) {
        String mId = String.valueOf(item.getId());
    }

    @Override
    public void itemClicked(Section section) {
        //Toast.makeText(this, "Section: " + ection.getName() + " clicked", Toast.LENGTH_SHORT).show();

    }
}


Create the Java file in project.
Open app => main => src = ItemClickListener.java



public interface ItemClickListener {
    void itemClicked(Item item);
    void itemClicked(Section section);
}


Create the Java file in project.
Open app => main => src = Section.java


public class Section {

    private final String name;

    public boolean isExpanded;

    public Section(String name) {
        this.name = name;
        isExpanded = false;
    }

    public String getName() {
        return name;
    }
}


Create the Java file in project.
Open app => main => src = SectionedExpandableGridAdapter.java


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

    //data array
    private ArrayList<Object> mDataArrayList;

    //context
    private final Context mContext;

    //listeners
    private final ItemClickListener mItemClickListener;
    private final SectionStateChangeListener mSectionStateChangeListener;

    //view type
    private static final int VIEW_TYPE_SECTION = R.layout.layout_section;
    private static final int VIEW_TYPE_ITEM = R.layout.layout_item; //TODO : change this

    public SectionedExpandableGridAdapter(Context context, ArrayList<Object> dataArrayList,
                                          final GridLayoutManager gridLayoutManager, ItemClickListener itemClickListener,
                                          SectionStateChangeListener sectionStateChangeListener) {
        mContext = context;
        mItemClickListener = itemClickListener;
        mSectionStateChangeListener = sectionStateChangeListener;
        mDataArrayList = dataArrayList;

        gridLayoutManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
            @Override
            public int getSpanSize(int position) {
                return isSection(position)?gridLayoutManager.getSpanCount():1;
            }
        });
    }

    private boolean isSection(int position) {
        return mDataArrayList.get(position) instanceof Section;
    }

    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        return new ViewHolder(LayoutInflater.from(mContext).inflate(viewType, parent, false), viewType);
    }


    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        switch (holder.viewType) {
            case VIEW_TYPE_ITEM :
                final Item item = (Item) mDataArrayList.get(position);
                holder.itemTextView.setText(item.getName());
                String mImage=item.getImage();
                String mBaseImage = "http://mukh.pixelsoftwares.com/seller_fifo/" + mImage;
                Log.i("mBaseImage::-", "mBaseImage::-" + mBaseImage);
                Picasso.with(mContext).load(mBaseImage).resize(150, 150).into(holder.imageView);
                holder.view.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        mItemClickListener.itemClicked(item);
                    }
                });
                break;
            case VIEW_TYPE_SECTION :
                final Section section = (Section) mDataArrayList.get(position);
                holder.sectionTextView.setText(section.getName());
                holder.sectionTextView.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        mItemClickListener.itemClicked(section);
                    }
                });
                holder.sectionToggleButton.setChecked(section.isExpanded);
                holder.sectionToggleButton.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
                    @Override
                    public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
                        mSectionStateChangeListener.onSectionStateChanged(section, isChecked);
                    }
                });
                break;
        }
    }

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

    @Override
    public int getItemViewType(int position) {
        if (isSection(position))
            return VIEW_TYPE_SECTION;
        else return VIEW_TYPE_ITEM;
    }

    protected static class ViewHolder extends RecyclerView.ViewHolder {

        //common
        View view;
        int viewType;

        //for section
        TextView sectionTextView;
        ToggleButton sectionToggleButton;

        //for item
        TextView itemTextView;
        ImageView imageView;

        public ViewHolder(View view, int viewType) {
            super(view);
            this.viewType = viewType;
            this.view = view;
            if (viewType == VIEW_TYPE_ITEM) {
                imageView = (ImageView) view.findViewById(R.id.image);
                itemTextView = (TextView) view.findViewById(R.id.text_item);
            } else {
                sectionTextView = (TextView) view.findViewById(R.id.text_section);
                sectionToggleButton = (ToggleButton) view.findViewById(R.id.toggle_button_section);
            }
        }
    }
}


Create the Java file in project.
Open app => main => src = SectionedExpandableLayoutHelper.java


public class SectionedExpandableLayoutHelper implements SectionStateChangeListener {

    //data list
    private LinkedHashMap<Section, ArrayList<Item>> mSectionDataMap = new LinkedHashMap<Section, ArrayList<Item>>();
    private ArrayList<Object> mDataArrayList = new ArrayList<Object>();

    //section map
    //TODO : look for a way to avoid this
    private HashMap<String, Section> mSectionMap = new HashMap<String, Section>();

    //adapter
    private SectionedExpandableGridAdapter mSectionedExpandableGridAdapter;

    //recycler view
    RecyclerView mRecyclerView;

    public SectionedExpandableLayoutHelper(Context context, RecyclerView recyclerView, ItemClickListener itemClickListener,
                                           int gridSpanCount) {

        //setting the recycler view
        GridLayoutManager gridLayoutManager = new GridLayoutManager(context, gridSpanCount);
        recyclerView.setLayoutManager(gridLayoutManager);
        mSectionedExpandableGridAdapter = new SectionedExpandableGridAdapter(context, mDataArrayList,
                gridLayoutManager, itemClickListener, this);
        recyclerView.setAdapter(mSectionedExpandableGridAdapter);

        mRecyclerView = recyclerView;
    }

    public void notifyDataSetChanged() {
        //TODO : handle this condition such that these functions won't be called if the recycler view is on scroll
        generateDataList();
        mSectionedExpandableGridAdapter.notifyDataSetChanged();
    }

    public void addSection(String section, ArrayList<Item> items) {
        Section newSection;
        mSectionMap.put(section, (newSection = new Section(section)));
        mSectionDataMap.put(newSection, items);
    }

    public void addItem(String section, Item item) {
        mSectionDataMap.get(mSectionMap.get(section)).add(item);
    }

    public void removeItem(String section, Item item) {
        mSectionDataMap.get(mSectionMap.get(section)).remove(item);
    }

    public void removeSection(String section) {
        mSectionDataMap.remove(mSectionMap.get(section));
        mSectionMap.remove(section);
    }

    private void generateDataList () {
        mDataArrayList.clear();
        for (Map.Entry<Section, ArrayList<Item>> entry : mSectionDataMap.entrySet()) {
            Section key;
            mDataArrayList.add((key = entry.getKey()));
            if (key.isExpanded)
                mDataArrayList.addAll(entry.getValue());
        }
    }

    @Override
    public void onSectionStateChanged(Section section, boolean isOpen) {
        if (!mRecyclerView.isComputingLayout()) {
            section.isExpanded = isOpen;
            notifyDataSetChanged();
        }
    }
}



Create the Java file in project.
Open app => main => src = SectionStateChangeListener.java

public interface SectionStateChangeListener {
    void onSectionStateChanged(Section section, boolean isOpen);
}


Create the Java file in project.
Open app => main => src = Item.java

public class Item {

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

    String name;


    public String getImage() {
        return image;
    }

    public void setImage(String image) {
        this.image = image;
    }

    String image;

    public void setId(int id) {
        this.id = id;
    }

    int id;

    public Item() {
    }

    public Item(String name, int id) {
        this.name = name;
        this.id = id;
    }

    public int getId() {
        return id;
    }

    public String getName() {
        return name;
    }
}


May this code help you. Thanks!!!!!!


Screen Shot:-



No comments:

Post a Comment