2011-03-16 31 views
14

Estoy usando un ImageButton. Pero no recibo lo más destacado cuando hago clic. Busqué en Google y muchos sugirieron utilizar el selector donde se muestra otra imagen. Hay alguna forma de evitar esto? usando solo una imagen y resaltándola o dándole un efecto de brillo. para que el usuario sepa que se ha hecho clic en ese botón.Android resaltar un botón imagen al hacer clic en

+0

¿Puede mostrar el código que está utilizando para crear el botón de imagen? – Cristian

Respuesta

29

Esto no es realmente muy difícil de hacer. Ni siquiera necesita crear 2 archivos .png separados o algo por el estilo. Por ejemplo, si usted quiere tener un botón que tiene una pendiente y, a continuación, cambiar cuando se pulsa el botón:

Paso 1: Crear gradiente botón predeterminado (estirable/default_button.xml):

<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="rectangle"> 
    <corners android:radius="3dp" /> 
    <gradient android:endColor="#8ba0bb" android:startColor="#43708f" android:angle="90" /> 
    <stroke android:width="1dp" android:color="#33364252" /> 
</shape> 

Paso 2: Crear botón predeterminado gradiente pulsado (dibujable/default_button_pressed.xml):

<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="rectangle"> 
    <corners android:radius="3dp" /> 
    <gradient android:endColor="#43708f" android:startColor="#8ba0bb" android:angle="90" /> 
    <stroke android:width="1dp" android:color="#33364252" /> 
</shape> 

Paso 3: Crear selector (dibujable/default_button_selector.xml):

<selector xmlns:android="http://schemas.android.com/apk/res/android" > 
    <item android:state_pressed="true" android:drawable="@drawable/default_button_pressed" /> 
    <item android:drawable="@drawable/default_button" /> 
</selector> 

Paso 4 (opcional): Crear estilo para el botón (valores/style.xml):

<resources> 
    <style name="DefaultButton"> 
     <item name="android:layout_width">wrap_content</item> 
     <item name="android:layout_height">wrap_content</item> 
     <item name="android:background">@drawable/default_button_selector</item> 
    </style> 
</resources> 

Paso 5: utilizar el botón (diseño/main.xml):

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="fill_parent" android:layout_height="fill_parent"> 

    <button style="@style/DefaultButton" /> 

</RelativeLayout> 

Como puede ver, no es particularmente difícil de hacer.

+19

lol @Zack 'Como puede ver, no es particularmente difícil de hacer. –

+2

Esto es bueno ya que puede agregar fácilmente un número de botones con este mismo estilo. –

+4

¿y si necesitamos botones con diferentes imágenes de fondo? – Kishore

2

Para no tener que configurar varios dibujables para cada botón, establezco el atributo de filtro de color del botón de imagen en un oyente táctil.

Ver código aquí en otro post:

https://stackoverflow.com/a/14278790/891479

+0

+1 para esta solución sólida. –

18

sin tener que crear múltiples imágenes (prensado, normal, etc) e incluso no tienen que crear selector. Utilice setOnTouchListener en lugar de setOnClickListener. El código siguiente le dará la superposición gris en el elemento cliqueado.

((ImageButton)findViewById(R.id.myImageBtn)).setOnTouchListener(new OnTouchListener() { 

     @Override 
     public boolean onTouch(View v, MotionEvent event) { 
      switch (event.getAction()) { 
      case MotionEvent.ACTION_DOWN: { 
       ImageButton view = (ImageButton) v; 
       view.getBackground().setColorFilter(0x77000000, PorterDuff.Mode.SRC_ATOP); 
       v.invalidate(); 
       break; 
      } 
      case MotionEvent.ACTION_UP: 

       // Your action here on button click 

      case MotionEvent.ACTION_CANCEL: { 
       ImageButton view = (ImageButton) v; 
       view.getBackground().clearColorFilter(); 
       view.invalidate(); 
       break; 
      } 
      } 
      return true; 
     } 
    }); 
+1

Esto funcionó para mí. Asegúrese de borrar el filtro de color en ACTION_UP también. –

+0

Mi ADT no sabía lo que era 'PorterDuff', así que sufijo con 'android.graphics' (android.graphics.PorterDuff.Mode.SRC_ATOP) para completar el código insinuado – 1owk3y

+0

Me ayudó mucho, ¡Gracias! –

2

¡Pude hacer esto! Primero declara buttonStyle.xml en la carpeta dibujable.

<?xml version="1.0" encoding="utf-8"?> 
<selector xmlns:android="http://schemas.android.com/apk/res/android"> 
    <item 
     android:state_focused="true" 
     android:state_pressed="true" 
     android:drawable="@drawable/button_pressed" /> 

    <item 
     android:state_focused="false" 
     android:state_pressed="true" 
     android:drawable="@drawable/button_pressed" /> 

    <item android:drawable="@drawable/button_normal" /> 
</selector> 

a continuación, crear button_pressed.xml en la carpeta estirable.

<?xml version="1.0" encoding="UTF-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
android:shape="rectangle" > 
    <solid android:color="@color/semiTransparentGnfrBlueColor" /> 
    <stroke android:width="10dp" android:color="@android:color/transparent" /> 
</shape> 

Después de eso, se crea button_normal.xml en la carpeta estirable.

<?xml version="1.0" encoding="UTF-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
     android:innerRadiusRatio="3" 
    android:shape="rectangle"> 
    <solid android:color="@color/gnfrBlueColor"/> 
    <stroke android:width="10dp" android:color="@android:color/transparent" /> 
</shape> 

Usted puede utilizar los colores por defecto, pero si quiere hacerlo como yo, es necesario tener un archivo llamado colores.xml en la carpeta de los valores y estos valores dentro:

<?xml version="1.0" encoding="utf-8"?> 
<resources> 
<item name="gnfrBlueColor" type="color">#2A3748</item> 
    <item name="semiTransparentGnfrBlueColor" type="color">#602A3748</item> 
<integer-array name="androidcolors"> 
<item>@color/gnfrBlueColor</item> 
    <item>@color/semiTransparentGnfrBlueColor</item> 
    </integer-array> 
</resources> 

Por último se establece este a su botón o lo que sea:

savedAccountLoginButton.SetBackgroundResource(Resource.Drawable.buttonStyle); 

AVISO QUE puse un derrame cerebral con color transparente porque cuando se establece backgroundresource tu botón se vuelve más grande y con este truco sigue siendo original.

Esta es la única forma en que pude archivar esto programáticamente.

Si quieres hacer esto por XML:

<Button 
      android:text="ENTRAR" 
      android:layout_width="match_parent" 
      android:layout_height="60dp" 
      android:background="@drawable/buttonstyle" 
      android:textColor="@color/white" 
      android:textSize="18sp" 
      android:id="@+id/button1" /> 
Cuestiones relacionadas