Clickable TableRow on Android

Question

I have a simple program i have made in java for android but am having difficulty in making the tablerow clickable. When the user clicks a row i wish for a certain picture to be displayed in the imageview below. Here is my xml code:

     <?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#FF909090"
    android:stretchColumns="1" >

    <TableRow>

        <TextView
            android:layout_margin="2dip"
            android:layout_marginRight="2dip"
            android:background="#0000ff"
            android:padding="3dip"
            android:text="I" />

        <TextView
            android:layout_margin="2dip"
            android:layout_marginLeft="1dip"
            android:background="#0000ff"
            android:gravity="center"
            android:padding="3dip"
            android:text="A"
            android:onClick="Achord" />
    </TableRow>

    <TableRow>

        <TextView
            android:layout_column="0"
            android:layout_margin="2dip"
            android:background="#0000ff"
            android:padding="3dip"
            android:text="II" />

        <TextView
            android:layout_margin="2dip"
            android:background="#0000ff"
            android:gravity="center"
            android:padding="3dip"
            android:text="Bm" />
    </TableRow>

    <TableRow>

        <TextView
            android:layout_column="0"
            android:layout_margin="2dip"
            android:background="#0000ff"
            android:padding="3dip"
            android:text="III" />

        <TextView
            android:layout_margin="2dip"
            android:background="#0000ff"
            android:gravity="center"
            android:padding="3dip"
            android:text="C#m" />
    </TableRow>

    <View
        android:layout_height="2dip"
        android:background="#FF909090" />

    <TableRow android:background="#0000ff" >
    </TableRow>

    <TableRow>

        <TextView
            android:layout_margin="2dip"
            android:background="#0000ff"
            android:padding="3dip"
            android:text="IV" />

        <TextView
            android:layout_margin="2dip"
            android:background="#0000ff"
            android:gravity="center"
            android:padding="3dip"
            android:text="D" />
    </TableRow>

    <View
        android:layout_height="2dip"
        android:background="#FF909090" />

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

    <TableRow>

        <TextView
            android:layout_margin="2dip"
            android:layout_marginRight="2dip"
            android:background="#0000ff"
            android:padding="3dip"
            android:text="V" />

        <TextView
            android:layout_margin="2dip"
            android:layout_marginLeft="1dip"
            android:background="#0000ff"
            android:gravity="center"
            android:padding="3dip"
            android:text="E" />
    </TableRow>

    <TableRow>

        <TextView
            android:layout_margin="2dip"
            android:layout_marginRight="2dip"
            android:background="#0000ff"
            android:padding="3dip"
            android:text="VI" />

        <TextView
            android:layout_margin="2dip"
            android:layout_marginLeft="1dip"
            android:background="#0000ff"
            android:gravity="center"
            android:padding="3dip"
            android:text="F#m" />
    </TableRow>

    <TableRow>

        <TextView
            android:layout_margin="2dip"
            android:layout_marginRight="2dip"
            android:background="#0000ff"
            android:padding="3dip"
            android:text="VII" />

        <TextView
            android:layout_margin="2dip"
            android:layout_marginLeft="1dip"
            android:background="#0000ff"
            android:gravity="center"
            android:padding="3dip"
            android:text="G#dim" />
    </TableRow>




    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="0.05"
        android:background="#000000"
        android:maxLines="10"
        android:text="The relative minor of the Major key of A is F#m. The 12 bar blues progression in A is: \n A | A | A | A | D | D | A | A | E | D | A | E" />


    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="0.03"
        android:src="@drawable/android_focused" />

and here is my java code:

package com.coreservlets.widgets;
import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.TableRow;
import com.welly.keychords.R;





 public class keya extends Activity {

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.keya);
}
}

what i want to happen is that imageview1 will display a different image depending on what row is clicked. Any help would be greatly appreciated

As sam suggested i have ammended my code to this:

public class keya extends Activity {

    ImageView imagev = (ImageView) findViewById(R.id.imageView1);

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.keya);
    }

    public void rowClick(View view) {
        switch(view.getId()) {
        case R.id.one:
            // Load image from Drawable folder
            imagev.setImageResource(R.drawable.android_normal); // example file for now
            break;
        }
    }
   }

but now i have a null pointer exception on running that class. all compiles fine though

Solution 1

Simply give each TableRow element a unique id and define an onClick method:

<TableRow
    android:id="@+id/one"
    android:onClick="rowClick">

Add a class variable imageView that references the ImageView in your layout. Then load the image:

public void rowClick(View view) {
    switch(view.getId()) {
    case R.id.one:
        // Load image from Drawable folder
        imageView.setImageResource(R.id.imageOne);
        break;
    }
}

Understand that any elements inside a TableRow with their own onClick method will call its own method. For instance the TextView with android:onClick="Achord" will call Achord() not rowClick().

---

Addition
You need to call findViewById() after declaring your layout with setContentView() in onCreate().

ImageView imagev;

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.keya);
    imagev = (ImageView) findViewById(R.id.imageView1);
}

Solution 2

Give each row an ID, then you can assign a listener to each one in your code:

TableRow row = (TableRow)findViewById( R.id.row1 );
row.setOnClickListener( new OnClickListener() {
    @Override
    public void onClick( View v ) {
        //Do Stuff
    }
} );