android - How do I get the OnClickListener working on a custom view with a RelativeLayout?

Question

Question

Hello,

i have built a custom view with a RelativeLayout to use it as custom image button. So far, selecting it works (PIC2) and even when I click it (using GoogleTV Remote), the view successfully changes it's state to PIC3 (thanks to android:duplicateParentState="true")

But unfortunately the onClickListener does not fire (doesn't matter if I click the View with the Remote "OK" Button or I use the touchpad..)

I really need the same behavior like a normal button. How to accomplish that? I already spent a few hours on searching Google and StackOverflow... (BTW. when setting android:clickable="false" for the RelativeLayout, the OnClickListener is working, but only when I use the mouse pointer (Touchpad) and afterwards the focus is lost and the state (pic 3) is not displayed)

Pictures

PIC1

PIC2

PIC3

Code

rounded_button.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:focusable="true"
android:focusableInTouchMode="false">

<TextView
    android:id="@+id/caption"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerVertical="true"
    android:layout_marginLeft="30dp"
    android:background="@drawable/btn_rounded_corners"
    android:paddingLeft="25dp"
    android:textSize="15sp" 
    android:duplicateParentState="true"/>

<ImageView
    android:id="@+id/icon"
    style="@style/Menu_Button"
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:layout_marginRight="-50dp"
    android:layout_toLeftOf="@id/caption"
    android:background="@drawable/btn_main_menu_back_shape"
    tools:ignore="ContentDescription"
    android:duplicateParentState="true" />

RoundedButton.java

public class RoundedButton extends RelativeLayout {
private String label;
private int icon;

/**
 * @param context
 */
public RoundedButton(Context context)
{
    super(context);
    initAttributes(context, null);
}

/**
 * @param context
 * @param attrs
 */
public RoundedButton(Context context, AttributeSet attrs)
{
    super(context, attrs);
    initAttributes(context, attrs);
}

/**
 * @param context
 * @param attrs
 * @param defStyle
 */
public RoundedButton(Context context, AttributeSet attrs, int defStyle)
{
    super(context, attrs, defStyle);
    initAttributes(context, attrs);
}

private void initAttributes(Context context, AttributeSet attrs)
{
    LayoutInflater.from(context).inflate(R.layout.rounded_button, this, true);

    TypedArray a = 
        context.obtainStyledAttributes(attrs, R.styleable.RoundedButton);

    final int N = a.getIndexCount();
    for (int i = 0; i < N; ++i)
    {
        int attr = a.getIndex(i);
        switch (attr)
        {
            case R.styleable.RoundedButton_text:
                setLabel(a.getString(attr));
                break;
            case R.styleable.RoundedButton_icon:
                setIcon(a.getResourceId(attr, 0));
                break;
        }
    }
    a.recycle();
}

public String getLabel()
{
    return this.label;
}

public void setLabel(final String label)
{
    this.label = label;
    ((TextView)findViewById(R.id.caption)).setText(this.label);
}

/**
 * @return the icon
 */
public int getIcon()
{
    return icon;
}

/**
 * @param icon the icon to set
 */
public void setIcon(int icon)
{
    this.icon = icon;
    ((ImageView)findViewById(R.id.icon)).setImageResource(this.icon);
}
}

Relevant part of activity_main.xml

<eu.test.custom_views.RoundedButton
    android:id="@+id/custombutton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    custom:icon="@drawable/hand_icon_green_left"
    custom:text="Normal state" />

Main Activity

public class MainActivity extends Activity implements OnClickListener {

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    ((RoundedButton) findViewById(R.id.custombutton)).setOnClickListener(this);
}

@Override
public void onClick(View arg0) {
    if(arg0.getId() == R.id.custombutton) { Toast.makeText(this, "Clicked", Toast.LENGTH_SHORT).show(); }
}
}

Answer 1

I got it now.. the solution is so simple, that it took some time ;-)

Solution

Override dispatchKeyEvent(KeyEvent event) in RoundedButton.java and implement your own OnClickListener. Then write a public setOnClickListener function...

private OnClickListener listener;

@Override
public boolean dispatchTouchEvent(MotionEvent event) {
    if(event.getAction() == MotionEvent.ACTION_UP) {
        if(listener != null) listener.onClick(this);
    }
    return super.dispatchTouchEvent(event);
}


@Override
public boolean dispatchKeyEvent(KeyEvent event) {
    if(event.getAction() == KeyEvent.ACTION_UP && (event.getKeyCode() == KeyEvent.KEYCODE_DPAD_CENTER || event.getKeyCode() == KeyEvent.KEYCODE_ENTER)) {
        if(listener != null) listener.onClick(this);
    }
    return super.dispatchKeyEvent(event);
}

public void setOnClickListener(OnClickListener listener) {
    this.listener = listener;
}

Working RoundedButton.java

public class RoundedButton extends RelativeLayout
{
private OnClickListener listener;
private String label;
private int icon;

@Override
public boolean dispatchTouchEvent(MotionEvent event) {
    if(event.getAction() == MotionEvent.ACTION_UP) {
        if(listener != null) listener.onClick(this);
    }
    return super.dispatchTouchEvent(event);
}


@Override
public boolean dispatchKeyEvent(KeyEvent event) {
    if(event.getAction() == KeyEvent.ACTION_UP && (event.getKeyCode() == KeyEvent.KEYCODE_DPAD_CENTER || event.getKeyCode() == KeyEvent.KEYCODE_ENTER)) {
        if(listener != null) listener.onClick(this);
    }
    return super.dispatchKeyEvent(event);
}

public void setOnClickListener(OnClickListener listener) {
    this.listener = listener;
}

/**
 * @param context
 */
public RoundedButton(Context context)
{
    super(context);
    initAttributes(context, null);
}

/**
 * @param context
 * @param attrs
 */
public RoundedButton(Context context, AttributeSet attrs)
{
    super(context, attrs);
    initAttributes(context, attrs);
}

/**
 * @param context
 * @param attrs
 * @param defStyle
 */
public RoundedButton(Context context, AttributeSet attrs, int defStyle)
{
    super(context, attrs, defStyle);
    this.setClickable(true);
    this.setEnabled(true);
    this.setFocusable(true);
    this.setFocusableInTouchMode(true);

    initAttributes(context, attrs);
}

private void initAttributes(Context context, AttributeSet attrs)
{
    LayoutInflater.from(context).inflate(R.layout.rounded_button,  this, true);

    TypedArray a = 
        context.obtainStyledAttributes(attrs, R.styleable.RoundedButton);

    final int N = a.getIndexCount();
    for (int i = 0; i < N; ++i)
    {
        int attr = a.getIndex(i);
        switch (attr)
        {
            case R.styleable.RoundedButton_text:
                setLabel(a.getString(attr));
                break;
            case R.styleable.RoundedButton_icon:
                setIcon(a.getResourceId(attr, 0));
                break;
        }
    }
    a.recycle();
}

public String getLabel()
{
    return this.label;
}

public void setLabel(final String label)
{
    this.label = label;
    ((TextView)findViewById(R.id.caption)).setText(this.label);
}

/**
 * @return the icon
 */
public int getIcon()
{
    return icon;
}

/**
 * @param icon the icon to set
 */
public void setIcon(int icon)
{
    this.icon = icon;
    ((ImageView)findViewById(R.id.icon)).setImageResource(this.icon);
}

}