ListView item link click state of row with button inside list item

Question

How can I link the "clicks" on the list item row shot#1 with clicks on radiobutton within the row shot#2.

At the moment it is: Clicking on the row will show the "focus" hilight but will not trigger the radiobutton selection, clicking on the RB will "check" radiobutton but will not give "hilight" effect.

But I would like to have it working as one: "Clicking on row will show focus and do selection on RB and clicking on RB will check radiobutton and hilight row".

Is there a way to achieve this? With this setup, I think I could just change the row so it is a radiobutton not contains radiobutton.

I have a custom ArrayAdapter to handle radiobutton clicks (and handling "groups" of radiobuttons).

shot#1

shot#2

list view xml

<ListView
    android:id="@+id/lv_radiolist"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:divider="@null"
    android:dividerHeight="0dp"
    tools:listitem="@layout/radiobutton_list_item" >
</ListView>

row xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:paddingLeft="@dimen/filterlist_sub_header_pad_left"
android:paddingRight="@dimen/filterlist_sub_header_pad_right" >

<RadioButton
    android:id="@+id/rb_option"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentRight="true"
    android:checked="true"
    android:focusable="false"
    android:text="Not marked favourite" />
</RelativeLayout>

What I did temporarily is: I set the RadioButton's clickable to false. In ArrayAdapter, instead on RB I set clickListener on the row view (based on view type).

Answer 1

The best way to accomplish this is to use CheckedTextView in your row.xml. By default android provides the behavior you asking in layout android.R.layout.simple_list_item_single_choice. But the radio button will be right aligned. If you want the radio button to be left aligned you will have to customize simple_list_item_single_choice i.e

<?xml version="1.0" encoding="utf-8"?>
<!-- Copyright (C) 2008 The Android Open Source Project

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at

      http://www.apache.org/licenses/LICENSE-2.0

 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.-->

<CheckedTextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/text1"
    android:layout_width="match_parent"
    android:layout_height="?android:attr/listPreferredItemHeight"
    android:textAppearance="?android:attr/textAppearanceLarge"
    android:gravity="center_vertical"
    android:checkMark="?android:attr/listChoiceIndicatorSingle"
    android:paddingLeft="6dip"
    android:paddingRight="6dip"
/>

to this

<?xml version="1.0" encoding="utf-8"?>
<!-- Copyright (C) 2008 The Android Open Source Project

     Licensed under the Apache License, Version 2.0 (the "License");
     you may not use this file except in compliance with the License.
     You may obtain a copy of the License at

          http://www.apache.org/licenses/LICENSE-2.0

     Unless required by applicable law or agreed to in writing, software
     distributed under the License is distributed on an "AS IS" BASIS,
     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
     See the License for the specific language governing permissions and
     limitations under the License.
-->
<CheckedTextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/text1"
    android:layout_width="match_parent"
    android:layout_height="?android:attr/listPreferredItemHeight"
    android:drawableLeft="?android:attr/listChoiceIndicatorSingle"
    android:gravity="center_vertical"
    android:paddingLeft="6dip"
    android:paddingRight="6dip"
    android:textAppearance="?android:attr/textAppearanceLarge" />

you need to just reposition the listChoiceIndicator to the left by making drawing it on the left side instead of the default right. Similarly you can adapt the multiple Choice item for same behavior.

Answer 2

Why not simply programmatically check the RadioButton in the OnItemClicklistener of the ListView and vice versa?

So for example,

listView.setOnItemClickListener(new OnItemClickListener() {

    public void onItemClick(AdapterView<?> parent, View view,int position, long id) {

              // set the RadioButton of the corresponding
             // view that was clicked by invoking setChecked(true) 
            // on that RadioButton;

        }
});

Then, similarly call setSelected(true) on your View that contains the RadioButton within the OnCheckedChangeListener in your onCheckedChanged implementation of the RadioGroup.

Answer 3

You should use a row as a radio button, rather than creating a custom radio element yourself. Then the events will be directly passed to radio button.

Refer for details : http://rudisss.blogspot.in/2012/10/listview-with-radio-buttons-and.html

Answer 4

As of your current design we can simply implement this requirement with a RadioButton . For achieving this simply remove the RelativeLayout outside the Radiobutton in row layout and make RadioButon as the parent of row layout. And write a customized selector for the RadioButton. It will solve your problem.