¿Cómo aumentar el área de impacto del botón de Android sin escalar el fondo?

Tengo un botón con un dibujo personalizado.

<Button
    android:layout_width="22dip"
    android:layout_height="23dip"
    android:background="@drawable/triangle" />

El dibujable es un triángulo con fondo transparente.

|\
| \
|__\

Encuentro este botón difícil de tocar. Primero, es relativamente pequeño. En segundo lugar, los píxeles transparentes no se pueden tocar. Me gustaría mantener el dibujable del mismo tamaño, pero hacer que el área de impacto tenga una forma cuadrada del doble del tamaño del triángulo.

_____________
|            |
|    |\      |
|    | \     |
|    |__\    |
|____________|

puede utilizar la API TouchDelegate.

final View parent = (View) button.getParent();  // button: the view you want to enlarge hit area
parent.post( new Runnable() {
    public void run() { 
        final Rect rect = new Rect(); 
        button.getHitRect(rect); 
        rect.top -= 100;    // increase top hit area
        rect.left -= 100;   // increase left hit area
        rect.bottom += 100; // increase bottom hit area           
        rect.right += 100;  // increase right hit area
        parent.setTouchDelegate( new TouchDelegate( rect , button)); 
    } 
}); 

Quieres "relleno" Colocará el espacio dentro de la vista. El margen colocará el espacio afuera, lo que no aumentará el área de impacto.

 <Button
    android:layout_width="22dip"
    android:layout_height="23dip"
    android:background="@drawable/triangle"
    android:padding="10dp" />

Debe utilizar a TouchDelegate, que se define en los documentos de la API como "Clase auxiliar para manejar situaciones en las que desea que una vista tenga un área táctil más grande que sus límites de vista reales".

http://developer.android.com/reference/android/view/TouchDelegate.html

Prefiero esta solución:

Simplemente agregue un relleno positivo y un margen negativo dentro del archivo de recursos de diseño:

<some.View
  ..
  android:padding="12dp"
  android:margin="-12dp"
  .. />

Este es un cambio muy pequeño en comparación con el uso de TouchDelegates. Tampoco quiero ejecutar un Runnable para agregar el área en la que se puede hacer clic dentro de mi código Java.

Una cosa que podría considerar si la vista debe ser perfecta en píxeles: el relleno no siempre puede ser igual al margen . El acolchado siempre debe estar exactamente como se especifica. El margen depende de las vistas circundantes y se compensará con los valores de margen de otras vistas.

Basado en la respuesta, creé una función de extensión kotlin para ayudar con eso.

/**
 * Increase the click area of this view
 */
fun View.increaseHitArea(dp: Float) {
    // increase the hit area
    val increasedArea = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp, Resources.getSystem().displayMetrics).toInt()
    val parent = parent as View
    parent.post {
        val rect = Rect()
        getHitRect(rect)
        rect.top -= increasedArea
        rect.left -= increasedArea
        rect.bottom += increasedArea
        rect.right += increasedArea
        parent.touchDelegate = TouchDelegate(rect, this)
    }
}

simplemente agregando relleno al botón

 <Button
android:layout_width="wrap_contant"
android:layout_height="wrap_contant"
android:background="@drawable/triangle"
android:padding="20dp" />

Entonces, al hacer esto ... su botón tomará la altura y el ancho de la imagen del triángulo y agregará el relleno de 20dp al botón sin estirar la imagen en sí. y si desea un ancho mínimo o una altura mínima, puede usar las etiquetas minWidthyminHeight

En caso de que esté utilizando Data Binding. Puede utilizar un adaptador de encuadernación.

@BindingAdapter("increaseTouch")
fun increaseTouch(view: View, value: Float) {
    val parent = view.parent
    (parent as View).post({
        val rect = Rect()
        view.getHitRect(rect)
        val intValue = value.toInt()
        rect.top -= intValue    // increase top hit area
        rect.left -= intValue   // increase left hit area
        rect.bottom += intValue // increase bottom hit area
        rect.right += intValue  // increase right hit area
        parent.setTouchDelegate(TouchDelegate(rect, view));
    });
}

y luego puede usar atributos en vistas como esta

increaseTouch="@{8dp}"

No sé a ciencia cierta qué quiere decir con "sin aumentar también el diseño de fondo". Si quiere decir que simplemente no quiere que su dibujable se estire, una opción que tiene es tomar su png de fondo y agregarle un borde de píxel transparente adicional. Eso aumentaría su zona de impacto pero no estiraría su imagen.

Sin embargo, si quiere decir que no desea cambiar ese elemento de diseño en absoluto, creo que su única opción es usar valores codificados más grandes para la altura y el ancho.

prueba con esto

  <Button
        android:id="@+id/btn_profile"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_alignParentLeft="true"
        android:background="@android:color/transparent"
        android:drawableBottom="@drawable/moreoptionicon"
        android:onClick="click"
        android:paddingBottom="15dp"
        android:visibility="visible" />

Consulte ¿Puedo aumentar un botón en el área de clic mediante programación? . Esta parece la forma más fácil para mí, seguro. Incluso incluye un poco sobre la animación solo del objeto real en el que se puede hacer clic mientras permite que el fondo reciba clics. Estaré aplicando esto a mi propio código pronto.

Esto funcionó para mí:

public void getHitRect(Rect outRect) {
    outRect.set(getLeft(), getTop(), getRight(), getBottom() + 30);
}

Aunque realmente deberías convertir el 30 en dip o hacer un porcentaje de la altura del botón.

Solo necesitaba lo mismo: un área en la que se puede hacer clic más grande que la imagen del botón. Lo envolví en FrameLayout de tamaño más grande que el fondo dibujable y cambié la etiqueta interna del botón a TextView. Luego, dirigí un controlador de clic para que funcionara con este FrameLayout, no con el TextView interno. ¡Todo funciona bien!

Puedes usar un botón transparente como este ...

<Button
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:background="@android:color/transparent" /> 

puede aumentar o disminuir el tamaño del botón según sus necesidades y usar un enter code hereImageView en el botón ....

<ImageView
    android:layout_width="22dip"
    android:layout_height="23dip"
    android:background="@drawable/triangle" />

Creé la función de nivel superior para esto en kotlin:

fun increaseTouchArea(view: View, increaseBy: Int) {
    val rect = Rect()
    view.getHitRect(rect)
    rect.top -= increaseBy    // increase top hit area
    rect.left -= increaseBy   // increase left hit area
    rect.bottom += increaseBy // increase bottom hit area
    rect.right += increaseBy  // increase right hit area
    view.touchDelegate = TouchDelegate(rect, view)
}

Para este propósito, estaba usando ImageButton. En defensa xml verá estos dos atributos:

• android: background : un elemento de diseño para usar como fondo.
• android: scr : establece un elemento de diseño como contenido de este ImageView.

Así que tenemos dos elementos de diseño: fondo uno y fuente. En su ejemplo, la fuente será triagle (dibujable / trianlge):

|\
| \
|__\

Y el fondo es cuadrado (dibujable / cuadrado):

_____________
|            |
|            |
|            |
|            |
|____________|

Aquí hay un ejemplo de ImageButton xml:

<ImageButton
   ...
   android:src="@drawable/triangle"
   android:background="@drawable/square">

Resultado:

_____________
|            |
|    |\      |
|    | \     |
|    |__\    |
|____________|

También se puede dibujar en forma cuadrada, podría tener varios estados diferentes (presionado, enfocado). Y podría expandir el tamaño de diseño de fondo usando acolchados.

Por si acaso, aquí hay un ejemplo de fondo que se puede dibujar desde la barra de acción de Android Compat:

<?xml version="1.0" encoding="utf-8"?>    
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- Even though these two point to the same resource, have two states so the drawable will invalidate itself when coming out of pressed state. -->
    <item android:state_focused="true" android:state_enabled="false" android:state_pressed="true" android:drawable="@drawable/abc_list_selector_disabled_holo_dark" />
    <item android:state_focused="true" android:state_enabled="false" android:drawable="@drawable/abc_list_selector_disabled_holo_dark" />
    <item android:state_focused="true" android:state_pressed="true" android:drawable="@drawable/abc_list_selector_background_transition_holo_dark" />
    <item android:state_focused="false" android:state_pressed="true" android:drawable="@drawable/abc_list_selector_background_transition_holo_dark" />
    <item android:state_focused="true" android:drawable="@drawable/abc_list_focused_holo" />
    <item android:drawable="@android:color/transparent" />
 </selector>

Puede configurar el relleno para la vista, es decir, su botón.

<Button
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:background="@android:color/transparent"
        android:padding="15dp" />

Espero que esto funcione para usted.

Entonces, la respuesta correcta, agregue relleno al área táctil, se haga más grande Y cambie su imagen de fondo a srcCompact .

<Button
    android:layout_width="22dip"
    android:layout_height="23dip"
    android:padding="6dp"
    app:srcCompat="@drawable/triangle"/>

Para usar la aplicación: scrCompat, debe agregar xmlns:app="http://schemas.android.com/apk/res-auto"a su elemento principal / padre en el xml.

ejemplo completo:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="@dimen/height_btn_bottom_touch_area"
android:background="@color/bg_white"
android:clipToPadding="false"
android:elevation="7dp">

<android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:stateListAnimator="@animator/selected_raise"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" >

    <ImageView
        android:id="@+id/bottom_button_bg"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:contentDescription=
            "@string/service_request_background_contentDescription"
        android:elevation="1dp"
        android:padding="6dp"
        app:srcCompat="@drawable/btn_round_blue"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" >
    </ImageView>

    <TextView
        android:id="@+id/bottom_button_text"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:elevation="1dp"
        android:gravity="center"
        android:text="@string/str_continue_save"
        android:textColor="@color/text_white"
        android:textSize="@dimen/size_text_title"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>

El solo hecho de agregar relleno estaba haciendo que mi casilla de verificación no estuviera centrada. Lo siguiente funcionó para mí, sin embargo, especifiqué un tamaño fijo para la casilla de verificación (según mi especificación de interfaz de usuario). La idea era agregar relleno a la izquierda y no a la derecha. También agregué relleno en la parte superior e inferior para hacer que el objetivo táctil sea más grande y mantener la casilla de verificación centrada.

<CheckBox
        android:id="@+id/checkbox"
        android:layout_width="30dp"
        android:layout_height="45dp"
        android:paddingLeft="15dp"
        android:paddingTop="15dp"
        android:paddingBottom="15dp"
        android:button="@drawable/checkbox"
        android:checked="false"
        android:gravity="center"
       />

Creo que la respuesta correcta debería ser usar ImageButton en lugar de Button. Establezca el triángulo dibujable como "src" del ImageButton, y establezca el tamaño (layout_width & layout_height) como desee para un toque más fácil y establezca ScaleType en el centro para retener el tamaño del triángulo.

Sinceramente, creo que la forma más fácil es la siguiente: -

Digamos que el tamaño de su imagen es 26dp * 26dp y desea un área de impacto de 30dp * 30dp, simplemente agregue un relleno de 2dp a su ImageButton / Button Y establezca la dimensión en 30dp * 30dp

Original

<ImageButton
    android:layout_width="26dp"
    android:layout_height="26dp"
    android:src="@drawable/icon"/>

Área de impacto más grande

<ImageButton
    android:layout_width="30dp"
    android:layout_height="30dp"
    android:padding="2dp"
    android:src="@drawable/icon_transcript"/>

La solución más simple sería aumentar el tamaño width and heightde su artículo (por ejemplo, imagen, botón, etc.) y agregar padding; Por lo tanto, el área en la que se puede hacer clic es más grande pero se ve en el tamaño original.

Ejemplo:

<Button
    android:layout_width="40dp"
    android:layout_height="40dp"
    android:padding="8dp"
    android:background="@drawable/triangle" />

¡Felicitaciones, logró el mismo tamaño de botón pero el doble del tamaño en el que se puede hacer clic!

_____________
|            |
|    |\      |
|    | \     |
|    |__\    |
|____________|

<Button
    android:layout_width="32dp"
    android:layout_height="36dp"
    android:layout_margin="5dp"
    android:background="@drawable/foo" 
/>

El tamaño del fondo sigue siendo 22x26dp. Solo agregue margen.