- Give unique id to each element - like r1c1, r1c2, etc - Row 1 Col1 , Row 1 Col2 . This will help you later while trapping events and setting colors.
- Trap onClicked/onSelected/onTouched on each element of the grid.
You can do this using for loops for each row & col.
- Initially make nominal changes like draw border on left & right dialonally/straight - This gives the user identication of the selected items.
- And if the selected elements form a proper word, then change the backgound color of those elements.
But here you will ahve to take many things under consideration for element :
If the elements are selected in straight row or col, you can set the background of all grid elements directly. BUT if it is selected diagonally, then you will have to color accrdingly using Drawable. You can create a drawable programmatically of specified color and work out.
UPDATED :
In XML, just give the gridLayout.
In activity in onCreate(), you can work out like this to add contents :
grid = (GridLayout) findViewById(R.id.myGrid);
TextView tv = null;
ViewGroup tvLayParams = null;
for (row=0; row < totalRows; row++) {
for (cols = 0; cols < totalCols; col++) {
// Create View
tv = new TextView();
tv.setId("r" + row + "_c" + cols); // 1st row ids will be = r0_c0, r0_c1, r0_c2, r0_c3, etc
// Set properties like backgound color, etc of button
tvLayParams = (ViewGroup.LayoutParams) tv.getLayoutParams();
// SET LayoutParams for Button
tv.setLayoutParams(btnLayParams);
tv.setOnClickListener(this);
tv.setOnTouchListener(this);
grid.addView(tv);
}
}
@Override
public void onClick(View v) {
TextView tv = (TextView)v;
String id = tv.getId(); // From this you can get the Row & col of the item selected
int row = ; // For row, get digit(s) betweeen "r" and "_".
int col = Integer.parseInt(id.indexOf("c")+1); // For cols, get digit(s) from "c"
// Draw Borders/shade
//tv.setDrawable(...); // Generate drawable based on you need to draw dotted border or background and diagonally or straight.
// Figure out if the word is created
// If so, make another shade, else let it remain as currently selected & trying to make word
// Add your logic
}
This will give you a startup on your problem. Start and try out.
You can also add all the components in XML instead of adding it via code. But that will make your XML very long and messy too.
If you get stuck up, feel free. For improvements, you cna create a method to create the button view and just call teh method in inner for loop. But go for this once you are succeded in generating what you want.
But don't forget to start and try out first.