How to create and show stroke in between gridview layout rows and columns programmatically.

Showing border between grid view items separate the gridview items so each and every item looks individually. In this tutorial we are creating a custom string array and setting up that string array into grid view using array adapter class. Now we are dynamically creating textview for each string element and set that element inside gird view one by one. So here is the complete step by step tutorial for How to display divider/border between GridView items in Android.

How to display divider/border between GridView items in Android.

Code for MainActivity.java file.

 package com.gridviewwithborder_android_examples.com;

import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;

import android.app.Activity;
import android.content.Context;
import android.graphics.Color;
import android.os.Bundle;
import android.view.Gravity;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.GridView;
import android.widget.RelativeLayout;
import android.widget.RelativeLayout.LayoutParams;
import android.widget.TextView;

public class MainActivity extends Activity {

 GridView gridView;
 List<String> ItemsList;
 String[] itemsName = new String[]{
 "ONE",
 "TWO",
 "THREE",
 "FOUR",
 "FIVE",
 "SIX",
 "SEVEN",
 "EIGHT",
 "NINE",
 };
 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);
 
 gridView = (GridView)findViewById(R.id.gridView1);
 
 ItemsList = new ArrayList<String>(Arrays.asList(itemsName));
 
 gridView.setAdapter(new TextAdapter(this));
 
 }
 
 private class TextAdapter extends BaseAdapter
 {

 Context context;
 
 public TextAdapter(Context context) 
 {
 this.context = context;
 }
 
 @Override
 public int getCount() {
 
 return itemsName.length;
 }

 @Override
 public Object getItem(int position) {
 // TODO Auto-generated method stub
 
 return itemsName[position];
 }

 @Override
 public long getItemId(int position) {
 
 // TODO Auto-generated method stub
 
 return position;
 }

 @Override
 public View getView(int position, View convertView, ViewGroup parent) {
 // TODO Auto-generated method stub
 
 TextView text = new TextView(this.context);
 
 text.setText(itemsName[position]);
 
 text.setGravity(Gravity.CENTER);
 
 text.setBackgroundColor(Color.parseColor("#fbdcbb"));
 
 text.setLayoutParams(new GridView.LayoutParams(144, 144));
 
 text.setBackgroundResource(R.layout.grid_items_border);
 
 return text;
 
 }
 
 
 }
}

Code for activity_main.xml layout file.

<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.gridviewwithborder_android_examples.com.MainActivity" >

 <GridView
 android:id="@+id/gridView1"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:layout_alignParentTop="true"
 android:layout_centerHorizontal="true"
 android:numColumns="3" >
 </GridView>
 
 
</RelativeLayout>

Code for grid_items_border.xml file.

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

 <solid android:color="#fafbfb" />
 <stroke
 android:width="2dp"
 android:color="#fd0261" ></stroke>

</shape>

Screenshot:

Click here to download How to display divider/border between GridView items in Android project.