GridLayoutManager with full border

Question

Having one RecyclerView with GridLayoutManager. each row responsible for displaying three item. Expected view is, allong with each item, should be covered with full border without extra bold(4 side equal width). code for recycler view. Whatever the approach which I have tried and corresponding UI of screen also attaching.

    mHomeRecyclerView = findViewById(R.id.home_screen_recycler_view);
    mHomeAdapter = new HomeScreenAdapter(this, mHomeScreenItem);

    // to provide scrolling functionality to parent
    mHomeRecyclerView.setNestedScrollingEnabled(false);
    mHomeRecyclerView.setHasFixedSize(true);
    GridLayoutManager layoutManager = new GridLayoutManager(this,3);
    mHomeRecyclerView.setLayoutManager(layoutManager);
    mHomeRecyclerView.setAdapter(mHomeAdapter);

onCreateViewHolder() of adapter class

override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): 
RecyclerView.ViewHolder {
    mLayoutInflater = LayoutInflater.from(mContext)
    return HomeItemViewHolder(mLayoutInflater.inflate
    (R.layout.layout_home_child_item, parent, false))
}

layout_home_child_item.xml code is below

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/child_item_parent"
    android:layout_width="match_parent"
    android:layout_height="@dimen/one_not_seven_dp"
    android:padding="@dimen/image_select_tag_layout_padding"
    android:background="@drawable/shape_sub_category"
    android:clickable="true"
    android:gravity="center"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/child_item_image"
        android:layout_width="@dimen/each_item_dimen"
        android:layout_height="@dimen/each_item_dimen" />

    <TextView
        android:id="@+id/child_item_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/image_icon_in_margin"
        android:textSize="@dimen/small_text_size"
        android:textColor="@color/result_received_icon_color"
        android:maxLines="1"
        android:ellipsize="end"
        android:gravity="center" />

</LinearLayout>

shape_sub_category.xml as given below

<item android:id="@android:id/mask">
    <shape android:shape="rectangle">
        <solid android:color="@color/colorPrimaryDark" />
        <corners android:radius="@dimen/search_card_margin" />
    </shape>
</item>

<item android:id="@android:id/background">
    <shape android:shape="rectangle">
        <stroke
            android:width="@dimen/item_background_border_width"
            android:color="@color/grid_border_clr" />
        <solid android:color="@android:color/transparent" />
    </shape>
</item>

But the expected UI is like below(full covered border with same thickness)

Thanks in advance

Answer 1

Requirement was to provide set of content with grid, border of each content should be same thickness as expected screenshot attached above.

I come up with different approach(kind of other logical way) in order to fix this issue with RecyclerView. Here I am describing how I achieved the same.

1. Create full outer border for RecyclerView, below the layout for the RecyclerView and corresponding border drawable.

   <android.support.v7.widget.RecyclerView
       android:id="@+id/home_screen_recycler_view"
       android:background="@drawable/recycler_border"
       android:layout_marginTop="@dimen/send_cmd_round_rect"
       android:layout_marginLeft="@dimen/send_cmd_round_rect"
       android:layout_marginRight="@dimen/send_cmd_round_rect"
       android:layout_marginBottom="@dimen/send_cmd_round_rect"
       android:clipToPadding="false"
       android:layout_width="match_parent"
       android:layout_height="wrap_content">
   </android.support.v7.widget.RecyclerView>
   

recycler_border.xml is like below

<shape android:shape="rectangle" xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke
        android:width="@dimen/item_background_border_width"
        android:color="@color/grid_border_clr" />
    <solid android:color="@android:color/transparent" />
</shape>

With above code changes, we can observe outer border for the RecyclerView layout.

2. In-order to provide border for child items, we are going to use GridDividerItemDecoration class. This item decoration class expecting vertical and horizontal drawable and the number of columns in the grid of the RecyclerView.

Drawable horizontalDivider = ContextCompat.getDrawable(this, R.drawable.line_divider); Drawable verticalDivider = ContextCompat.getDrawable(this, R.drawable.line_divider); mHomeRecyclerView.addItemDecoration(new GridDividerItemDecoration(horizontalDivider, verticalDivider, 3));

line_divider is a custom drawable used to provide line specifications as given below.

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<size
    android:width="@dimen/item_background_border_width"
    android:height="@dimen/item_background_border_width" />
<solid android:color="@color/grid_border_clr" /></shape>

3. In order to access GridDividerItemDecoration, we need to add dependency in app's build.gradle.

   compile 'com.bignerdranch.android:simple-item-decoration:1.0.0'

   The output screenshot is attaching below(width is 0.3 dp)