How to attach OnClickListener to a button in a custom preference layout?

Question

I have a preference screen that is populated with items from a database. I have this working by creating my own PreferenceActivity. In the activity I create DialogPreference items and add them to my PreferenceCategory To style to preference item on the screen I use a custom layout and apply it using setLayoutResource(R.layout.custom_pref_row)

This basically adds an ImageButton to the view aligned to the right of the layout. This all works fine and my preference screen shows the custom view with the button. My question is how do I attach a click listener to the button in the custom view? I was not able to find a way to get at View for the row from the PreferenceActivity. If my items were not created dynamically I might be able to do this all from XML and then reference the id or the button, but I can do that because I am creating the list dynamically.

Any suggestions on how to get a handle on the ImageButton for each item? In the end I want to configure the button to launch a delete confirmation dialog.

R.layout.custom_pref_row:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:minHeight="?android:attr/listPreferredItemHeight"
android:gravity="center_vertical"
android:paddingRight="?android:attr/scrollbarSize">

<RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginLeft="15dip"
    android:layout_marginRight="6dip"
    android:layout_marginTop="6dip"
    android:layout_marginBottom="6dip"
    android:layout_weight="1">

    <TextView android:id="@+android:id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:singleLine="true"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:ellipsize="marquee"
        android:fadingEdge="horizontal" />

    <TextView android:id="@+android:id/summary"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@android:id/title"
        android:layout_alignLeft="@android:id/title"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:maxLines="2" />

    <ImageButton android:id="@+id/pref_delete_station" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_trash_can" android:layout_alignParentRight="true" android:background="@null"></ImageButton>

</RelativeLayout>

<!-- Preference should place its actual preference widget here. -->
<LinearLayout android:id="@+android:id/widget_frame"
    android:layout_width="wrap_content"
    android:layout_height="fill_parent"
    android:gravity="center_vertical"
    android:orientation="vertical" />


</LinearLayout>

Related part of my PreferenceActivity:

DialogPreference diaPref;
for (Station mStation : sList) {
        diaPref = new StationEditor(this.getPreferenceScreen().getContext(), null, this, mStation);
        diaPref.setLayoutResource(R.layout.custom_pref_row);
        diaPref.setTitle(mStation.getName());
        diaPref.setKey(STATION_PREFIX + mStation.getId());

        // add new preference
        stationTypesCategory.addPreference(diaPref);
}

score 1 · Answer 1 · edited May 23 '17 at 11:47

1

You can extend DialogPreference and override the onBindDialogView(View view). Inside this method you can do:

@Override
protected void onBindDialogView(View view) {

    ((ImageButton) view.findViewById(R.id.pref_delete_station)).setOnClickListener(new OnClickListener() {      
        @Override
        public void onClick(View v) {
            // TODO Auto-generated method stub

        }
    });

    super.onBindDialogView(view);
}

Your sublcass of DialogPreference can hold any state/value related to the item it represents.

Take a look at this question about general guidelines to extend DialogPreference.

Hope this helps!

edited May 23 '17 at 11:47

Community

1
1

answered May 01 '12 at 21:35

Chopin

1,442
17
24

As I already subclass DialogPreference this should be easy to implement. I'll give it a try. Thank you. – Scott Naef May 01 '12 at 23:55
This is not a viable solution. I am **not** looking to access a button on the `DialogPreference` view. I am trying to get the button that is part of the preference screen that launches the Dialog. – Scott Naef May 02 '12 at 00:07
Chopin, you got me thinking in the right direction. Right idea but wrong function. I needed to override `onCreateView` instead. There were a few gotchas. I cant answer my own question for another 4 hours, but I will post the complete solution when I can. – Scott Naef May 02 '12 at 01:05
1

That is exactly what I was going to suggest! It had to exist some sort of event that you can override to catch the inflation process. I'm glad at least I've triggered your imagination :) – Chopin May 02 '12 at 01:20

score 1 · Accepted Answer · answered May 02 '12 at 07:15

OK, Chopin got me thinking in a different direction. I did not realize that the Preference object is also responsible for how its selector appears in a Preference screen.

The setLayoutResouce() function sets the resource for the Dialog itself not the row seen in a Preference screen. This was confusing and I was incorrectly trying to use this in the preference screen to adjust the selector layout there.

The solution is to override onCreateView and return a custom layout there. To me this is counterintuitive because that method usually controls the final view in most other situations.

I alraedy subclassed my Preference (DialogPreference) so all I had to do was add the following...

@Override
protected View onCreateView (ViewGroup parent) {
    LayoutInflater inflater = (LayoutInflater)   getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    View customRow = inflater.inflate(R.layout.preferences_station_list_row, null);
    ((ImageButton) customRow.findViewById(R.id.pref_delete_station)).setOnClickListener(new OnClickListener() {      
        @Override
        public void onClick(View v) {
           Log.i("c","clicked");
        }
    });

    customRow.setOnClickListener(new OnClickListener() {
        @Override
        public void onClick(View v) {
            showDialog(null);
        }
    });
    customRow.setClickable(true);
    return customRow;
}

One problem I ran into was that at first the row itself was no longer clickable but the button was. I had to add a listener on the whole view and manually call ShowDialog(). The only thing missing now is that when clicked from the Preference screen the item no longer shows a highlight. Any idea what styles I should apply so the list shows the highlight like it normally does?

How to attach OnClickListener to a button in a custom preference layout?

2 Answers2