Space bug in my component

Question

I've nearly managed to build a chess board component with RecyclerView and GridLayoutManager, where the coordinates cells are half size than the cells ones. But I don't know why, there is a vertical gap between the left coordinates zone, and the first cells column (the "a" column).

The reason for that is to manage cells as ImageView so that I can work with a library like Glide.

MainActivity.java :

package com.loloof64.recycler_view_test;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

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

activity_main.xml layout :

<?xml version="1.0" encoding="utf-8"?>
<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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.loloof64.recycler_view_test.MainActivity">

    <com.loloof64.recycler_view_test.BoardComponent
        android:layout_centerInParent="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
</RelativeLayout>

BoardComponent.java :

package com.loloof64.recycler_view_test;

import android.content.Context;
import android.support.annotation.Nullable;
import android.support.v7.widget.GridLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.util.AttributeSet;

public class BoardComponent extends RecyclerView {

    public BoardComponent(Context context) {
        super(context);
        initialize(context);
    }

    public BoardComponent(Context context, @Nullable AttributeSet  attrs, int defStyle) {
        super(context, attrs, defStyle);
        initialize(context);
    }

    public BoardComponent(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        initialize(context);
    }

    private void initialize(Context context){
        setLayoutManager(new GridLayoutManager(context, BoardComponentAdapter.ITEMS_PER_ROW));
        setAdapter(new BoardComponentAdapter(context));
    }
}

BoardComponentAdapter.java :

package com.loloof64.recycler_view_test;

import android.content.Context;
import android.graphics.Color;
import android.support.v7.widget.RecyclerView;
import android.util.TypedValue;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.RelativeLayout;

public class BoardComponentAdapter extends    RecyclerView.Adapter<BoardComponentViewHolder> {

    public final static int ITEMS_PER_ROW = 10;
    public final static int TOTAL_ITEMS = ITEMS_PER_ROW * ITEMS_PER_ROW;
    private final static int CELL_SIZE_DP = 20;

    private int cellSizePx;

    public BoardComponentAdapter(Context context){
        cellSizePx = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, CELL_SIZE_DP,  context.getResources().getDisplayMetrics());
    }


    @Override
    public BoardComponentViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View itemView = LayoutInflater.from(parent.getContext()).inflate(R.layout.board_component, parent, false);
        return new BoardComponentViewHolder(itemView);
    }

    @Override
    public void onBindViewHolder(BoardComponentViewHolder holder, int  position) {
        int rowPosition = position / ITEMS_PER_ROW;
        int colPosition = position % ITEMS_PER_ROW;

        boolean isACellRow = rowPosition > 0 && rowPosition < (ITEMS_PER_ROW-1);
        boolean isACellCol = colPosition > 0 && colPosition < (ITEMS_PER_ROW-1);

        if (isACellCol && isACellRow){
            int color = (rowPosition+colPosition) % 2 == 0 ? Color.rgb(255,180, 35) : Color.rgb(128,41,21);
            holder.imageView.setBackgroundColor(color);
            RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(cellSizePx, cellSizePx);
            holder.imageView.setLayoutParams(layoutParams);
        }
        else {
            int cellWidth = isACellCol ? cellSizePx : cellSizePx/2;
            int cellHeight = isACellRow ? cellSizePx : cellSizePx/2;
              holder.imageView.setBackgroundColor(Color.rgb(191,96,123));
            RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(cellWidth, cellHeight);
            holder.imageView.setLayoutParams(layoutParams);
        }
    }

    @Override
    public int getItemCount() {
        return TOTAL_ITEMS;
    }
}

BoardComponentViewHolder.java

package com.loloof64.recycler_view_test;

import android.support.v7.widget.RecyclerView;
import android.view.View;
import android.widget.ImageView;

public class BoardComponentViewHolder extends RecyclerView.ViewHolder     {

    public ImageView imageView;

    public BoardComponentViewHolder(View itemView) {
        super(itemView);
        imageView = (ImageView) itemView.findViewById(R.id.cell_view);
    }
}

board_component.xml layout

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout   xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <ImageView
        android:id="@+id/cell_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</RelativeLayout>

Answer 1

Problem:

It was happening because for border your are taking half of the height and width as these parameters got half, The half place is there unfilled i.e. why you are seeing GAP.

Solution :

You can leave left margin equal to your cell width and the gap will be gone..!! But just for the first column as you are having problem in first column only..!!

Tried your code. Just made change in your BoardComponentAdapter.java and working fine for me. see the change below:

 @Override
public void onBindViewHolder(BoardComponentViewHolder holder, int  position) {
    int rowPosition = position / ITEMS_PER_ROW;
    int colPosition = position % ITEMS_PER_ROW;

    boolean isACellRow = rowPosition > 0 && rowPosition < (ITEMS_PER_ROW-1);
    boolean isACellCol = colPosition > 0 && colPosition < (ITEMS_PER_ROW-1);

    if (isACellCol && isACellRow){
        int color = (rowPosition+colPosition) % 2 == 0 ? Color.rgb(255,180, 35) : Color.rgb(128,41,21);
        holder.imageView.setBackgroundColor(color);
        RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(cellSizePx, cellSizePx);
        holder.imageView.setLayoutParams(layoutParams);
    }
    else
    {
        int cellWidth = isACellCol ? cellSizePx : cellSizePx / 2;
        int cellHeight = isACellRow ? cellSizePx : cellSizePx / 2;
        holder.imageView.setBackgroundColor(Color.rgb(191, 96, 123));
        RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(cellWidth, cellHeight);

        //Just Added three lines here..!!

        if(colPosition==0) {
            layoutParams.setMargins(cellWidth,0,0,0);
        }
        holder.imageView.setLayoutParams(layoutParams);
    }
}