Question

I am an Android Newbie trying to use my VB experience (8yrs ago) and design a UI. I am trying to create a checkers board which in VB would be a form on which I add multiple resizable panel widgets contiguously as needed in multiple rows. Since these are panels I can either add a small image (coin) on it (with the panel as background) or even add another small panel with a color that I can make visible and invisible to represent the coins. I know describing a VB UI is bad but VB is meant to make form designs easy and it really does and that is the only language I can think in for UI.

I notice that android SDK does not nearly have enough widgets for me to use. The best I could think of is using a TableLayout with multiple rows. The thing I don’t get is what do I use to represent a square? Is there something analogous to a VB panel widget? I don’t want to use an image because I want the board to be auto adjust to the screen dimensions.

Could some one help me with some hints?

Answer 1

You could define the layout in XML using a horizontal LinearLayout and fill it with 8 ImageViews (or any other container that can show an image/color) and copy it 7 times in a vertical LinearLayout, similar to this:

<LinearLayout android:orientation="vertical"
              android:layout_width="fill_parent"
              android:layout_height="fill_parent" >
    <LinearLayout android:orientation="horizontal"
              android:layout_width="fill_parent"
              android:layout_height="fill_parent"
              android:layout_weight="1" >
        <ImageView android:id="@+id/square_1"
                   android:layout_weight="1"
                   android:layout_width="fill_parent"
                   android:layout_height="fill_parent"
                   <!-- Set image or background here --> />
        <!-- Repeat the ImageView 7 times and change the id for every ImageView
             you create -->
    </LinearLayout>
    <!-- Reapeat the LinearLayout 7 times too -->
</LinearLayout>

This will create 8 rows with 8 squares in each and all the squares will have the same size thanks to the weight property which indicates that they should all get equal space.

To use Java code to change image/background, you will have to use:

ImageView square_1 = (ImageView)findViewById(R.id.square_1);
square_1.setBackground(Color.yellow);

Read more in the Android SDK Reference here:

• ImageView: http://developer.android.com/reference/android/widget/ImageView.html
• LinearLayout: http://developer.android.com/reference/android/widget/LinearLayout.html

Hope this helps you along the way!