Question

I want to define letters in a grid and then highlight it on selected and if it a valid word.
i can define the letters and show in a grid view.But how to highlight the word as in the figure on selection??
i am developing similar app.Please help.

i copied the image from Word Search App on Android Market.

Answer 1

• 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.