Image view over button in tablelayout

Question

I have setup a TableLayout and added a row to include a button and an ImageView. The ImageView is just a color dot. I have used the style in the past with RelativeLayout and position the ImageView above button image. The new app I am working on uses a TableLayout but when I try to setup button with ImageView it will not allow positioning. Is this option not available for TableLayout?

<TableLayout
    android:id="@+id/TB1"
    android:layout_width="250dp"
    android:layout_height="match_parent"
    android:layout_weight="1" >

    <TableRow
        android:id="@+id/tableRow1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1" >

        <Button
            android:id="@+id/Scene1"
            android:layout_width="100dp"
            android:layout_height="match_parent"
            android:layout_marginLeft="10dp"
            android:layout_marginTop="10dp"
            android:layout_weight="1"
            android:background="@drawable/custom_scene_buttons"
            android:text="Scene 1"
            android:textColor="@drawable/white"
            android:textSize="20sp" />

        <ImageView
            android:id="@+id/colordot1"
            android:layout_width="21dp"
            android:layout_height="21dp"
            android:background="@drawable/circle" />
    </TableRow>

This is the code to change color dot.

                Resources res = getResources();
        final Drawable drawable = res.getDrawable(R.drawable.circle);
        drawable.setColorFilter(Color.rgb(i, j, k), Mode.SRC_ATOP);
        ImageView img = (ImageView) findViewById(R.id.colordot1);
        img.setBackgroundDrawable(drawable);

Here is the linear layout option I tried

                <LinearLayout android:orientation="vertical" >

            <Button
                android:id="@+id/Scene1"
                android:layout_width="100dp"
                android:layout_height="match_parent"
                android:layout_marginLeft="10dp"
                android:layout_marginTop="10dp"
                android:layout_weight="1"
                android:background="@drawable/custom_scene_buttons"
                android:drawableRight="@drawable/circle"
                android:text="Scene 1"
                android:textColor="@drawable/white"
                android:textSize="20sp" />

            <ImageView
                android:id="@+id/colordot1"
                android:layout_width="21dp"
                android:layout_height="21dp"
                android:layout_marginLeft="10dp"
                android:layout_marginTop="10dp"
                android:background="@drawable/circle" />
        </LinearLayout>

Answer 1

EDIT: Including entire TableLayout. I've gotten this to work using drawableRight. You can change the circle programmatically, by grabbing the Button and changing its drawable. Here's a link describing this. Below is a screenshot of the TableLayout, which I've tested.

<TableLayout
    android:id="@+id/TB1"
    android:layout_width="250dp"
    android:layout_height="match_parent"
    android:layout_weight="1" >

<TableRow
    android:id="@+id/tableRow1" >

    <Button
        android:id="@+id/Scene1"
        android:layout_width="50dp"
        android:layout_height="100dp"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="10dp"
        android:layout_weight="1"
        android:background="@color/blue"
        android:drawableRight="@drawable/circle"
        android:text="Scene 1"
        android:textColor="@color/white"
        android:textSize="20sp" />

    <Button
        android:id="@+id/Scene2"
        android:layout_width="50dp"
        android:layout_height="100dp"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="10dp"
        android:layout_weight="1"
        android:background="@color/blue"
        android:drawableRight="@drawable/circle"
        android:text="Scene 2"
        android:textColor="@color/white"
        android:textSize="20sp" />

</TableRow>

<TableRow
    android:id="@+id/tableRow2" >

    <Button
        android:id="@+id/Scene3"
        android:layout_width="50dp"
        android:layout_height="100dp"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="10dp"
        android:layout_weight="1"
        android:background="@color/blue"
        android:drawableRight="@drawable/circle"
        android:text="Scene 3"
        android:textColor="@color/white"
        android:textSize="20sp" />

    <Button
        android:id="@+id/Scene4"
        android:layout_width="50dp"
        android:layout_height="100dp"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="10dp"
        android:layout_weight="1"
        android:background="@color/blue"
        android:drawableRight="@drawable/circle"
        android:text="Scene 4"
        android:textColor="@color/white"
        android:textSize="20sp" />

</TableRow>

</TableLayout>

---

The issue is when using a TableLayout, each TableRow's child is a column. So, your button and ImageView belong to different columns. Do you have other rows in this TableLayout? The width of a column is defined by the view with the greatest width in that column. So, if you have another TableRow and its second child view has a width of 100dp, that will affect the width of your second column, ie your circle ImageView.

Why not use drawableRight attribute instead. Modify the Button as follows and remove your ImageView. You can also modify your drawable padding.

<Button
        android:id="@+id/Scene1"
        android:layout_width="100dp"
        android:layout_height="match_parent"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="10dp"
        android:layout_weight="1"
        android:background="@drawable/custom_scene_buttons"
        android:text="Scene 1"
        android:textColor="@drawable/white"
        android:drawableRight="@drawable/circle"
        android:textSize="20sp" />