Android SuperSLiM set header to keep the whole width

Question

I've successfully implemented a GridSLM view using SuperSLiM to show items in grid format with a Sticky header. The major problem I'm facing is I'm unable to set the header to take the whole width of the screen. And result looks something like this.

From the screenshot you can see the header is reacting as a normal GridSLM item located at position 0 but not taking the whole width.

onViewCreated() for Main Fragment

public void onViewCreated(View view, Bundle savedInstanceState) {
    super.onViewCreated(view, savedInstanceState);

    if (savedInstanceState != null) {
        mHeaderDisplay = savedInstanceState
                .getInt(KEY_HEADER_POSITIONING,
                        getResources().getInteger(R.integer.default_header_display));
        mAreMarginsFixed = savedInstanceState
                .getBoolean(KEY_MARGINS_FIXED,
                        getResources().getBoolean(R.bool.default_margins_fixed));
    } else {
        mHeaderDisplay = getResources().getInteger(R.integer.default_header_display);
        mAreMarginsFixed = getResources().getBoolean(R.bool.default_margins_fixed);
    }

    mViews = new ViewHolder(view);
    mViews.initViews(new LayoutManager(getActivity()));
    serviceListDatums = serviceList.getServicesList();
    mAdapter = new MyAdapter(getActivity(), mHeaderDisplay, serviceListDatums);
    mAdapter.setMarginsFixed(mAreMarginsFixed);
    mAdapter.setHeaderDisplay(mHeaderDisplay);
    mViews.setAdapter(mAdapter);
}

MyAdapter

 public MyAdapter(Context context, int headerMode, List<ServicesList> items) {
        mContext = context;
        mHeaderDisplay = headerMode;
        mItems = new ArrayList<>();
        Items = items;

        //Insert headers into list of items.
        int sectionManager = -1;
        int sectionFirstPosition = 0;

        for (int i = 0; i < Items.size(); i++) {
            ServicesList m = Items.get(i);
            if (i == 0) {
                String header = "New Releases";
                mItems.add(new LineItem(header, "", true, sectionManager, sectionFirstPosition));
            }
            mItems.add(new LineItem(m.getServiceName(), m.getIcon(), false, sectionManager, sectionFirstPosition));
        }
    }

    @Override
    public CountryViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view;
        if (viewType == VIEW_TYPE_HEADER) {
            view = LayoutInflater.from(parent.getContext())
                    .inflate(R.layout.header_item, parent, false);
        } else {
            view = LayoutInflater.from(parent.getContext())
                    .inflate(R.layout.text_line_item, parent, false);
        }
        return new CountryViewHolder(view);
    }

    @Override
    public void onBindViewHolder(CountryViewHolder holder, int position) {
        final LineItem item = mItems.get(position);
        final View itemView = holder.itemView;

        holder.bindItem(item.text);
        if (!item.isHeader) {
            holder.bindImage(mContext, item.path);
        }

        final GridSLM.LayoutParams lp = GridSLM.LayoutParams.from(itemView.getLayoutParams());
        // Overrides xml attrs, could use different layouts too.
        if (item.isHeader) {
            lp.headerDisplay = mHeaderDisplay;
            if (lp.isHeaderInline() || (mMarginsFixed && !lp.isHeaderOverlay())) {
                lp.width = ViewGroup.LayoutParams.MATCH_PARENT;
            } else {
                lp.width = ViewGroup.LayoutParams.WRAP_CONTENT;
            }

            lp.headerEndMarginIsAuto = !mMarginsFixed;
            lp.headerStartMarginIsAuto = !mMarginsFixed;
        }
        lp.setSlm(item.sectionManager == LINEAR ? LinearSLM.ID : GridSLM.ID);

        lp.setColumnWidth(mContext.getResources().getDimensionPixelSize(R.dimen.grid_column_width));
        lp.setFirstPosition(item.sectionFirstPosition);
        itemView.setLayoutParams(lp);
    }

    public void setHeaderDisplay(int headerDisplay) {
        mHeaderDisplay = headerDisplay;
        notifyHeaderChanges();
    }

    public void setMarginsFixed(boolean marginsFixed) {
        mMarginsFixed = marginsFixed;
        notifyHeaderChanges();
    }

Any kind of help would be greatly appreciated.

I'm using the example application of SuperSLiM .

Answer 1

The example isn't very good because it was written as a visual tester for library development and merely made available as an example where there was none otherwise available.

Anyway, you can throw the configurable header margins and header display mode and it should makes things a lot easier to understand.

public MyAdapter(Context context, List<ServicesList> items) {
    mContext = context;
    mItems = new ArrayList<>();
    Items = items;

    //Insert headers into list of items.
    int sectionManager = -1;
    int sectionFirstPosition = 0;

    for (int i = 0; i < Items.size(); i++) {
        ServicesList m = Items.get(i);
        if (i == 0) {
            String header = "New Releases";
            mItems.add(new LineItem(header, "", true, sectionManager, sectionFirstPosition));
        }
        mItems.add(new LineItem(m.getServiceName(), m.getIcon(), false, sectionManager, sectionFirstPosition));
    }
}

@Override
public CountryViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
    View view;
    if (viewType == VIEW_TYPE_HEADER) {
        view = LayoutInflater.from(parent.getContext())
                .inflate(R.layout.header_item, parent, false);
    } else {
        view = LayoutInflater.from(parent.getContext())
                .inflate(R.layout.text_line_item, parent, false);
    }
    return new CountryViewHolder(view);
}

@Override
public void onBindViewHolder(CountryViewHolder holder, int position) {
    final LineItem item = mItems.get(position);
    final View itemView = holder.itemView;

    holder.bindItem(item.text);

    final GridSLM.LayoutParams lp = GridSLM.LayoutParams.from(itemView.getLayoutParams());
    if (!item.isHeader) {
        holder.bindImage(mContext, item.path);
    }
    lp.setSlm(GridSLM.ID);
lp.setColumnWidth(mContext.getResources().getDimensionPixelSize(R.dimen.grid_column_width));
    lp.setFirstPosition(item.sectionFirstPosition);
    itemView.setLayoutParams(lp);
}

As you can see I've removed most of the extra configuration of the layout parameters in the adapter. Instead, you should just configure things how you like in your xml layouts for your items and headers.

Your header layout will look something like this:

<?xml version="1.0" encoding="utf-8"?>
<TextView
    android:id="@+id/text"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:slm_headerDisplay="inline|sticky"
    app:slm_isHeader="true"
    />