studio - cambiar color de boton al hacer clic java

¿Cómo eliminar correctamente el relleno(o el margen) alrededor de los botones en Android?

Question

Actualmente, tengo el siguiente botón de inicio de sesión inferior.

Cuando no se presiona el botón

Cuando se presiona el botón

El XML se ve así

<LinearLayout
    android:background="?attr/welcomeBottomNavBarBackground"
    android:orientation="horizontal"
    android:id="@+id/sign_in_bottom_nav_bar"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true">
    <Button
        style="?android:attr/buttonBarButtonStyle"
        android:id="@+id/sign_in_button"
        android:layout_width="0dp"
        android:width="0dp"
        android:layout_weight="1.0"
        android:layout_height="48dp"
        android:gravity="center"
        android:layout_gravity="center"
        android:enabled="true"
        android:textAllCaps="true"
        android:text="@string/log_in" />
</LinearLayout>

Me gustaría eliminar el relleno (¿o debería llamarlo margen? Por favor, consulte la sección de p / s que se encuentra más abajo) alrededor del botón cuando se lo presiona.

Miro ¿Cómo eliminar el relleno alrededor de los botones en Android?

Había intentado

<Button
    ...
    ...
    android:minHeight="0dp"
    android:minWidth="0dp" />

No funciona y no tiene efecto.

Además intento

<Button
    ...
    ...
    android:background="@null"
    android:minHeight="0dp"
    android:minWidth="0dp" />

No más relleno cuando se presiona. Sin embargo, el material diseñado efecto visual presionado también se irá.

¿Puedo saber cuál es la mejor forma de eliminar el relleno de los botones durante la presión y, a la vez, conservar el material diseñado para el efecto visual presionado?

PD

Realmente no sé si debería llamarlo relleno o margen. Lo que deseo lograr es que, cuando presionamos en la región inferior, presionemos el cambio del efecto visual, que debamos cubrir toda la región de la barra inferior del 100% ( @+id/sign_in_bottom_nav_bar ), en lugar de la actual región de la barra inferior del 95%.

Answer 1

Realmente no sé si debería llamarlo relleno o margen.

El botón representa la elevación de la superficie para proporcionar retroalimentación visual en respuesta al tacto. Es uno de los dos comentarios utilizados para la reacción de la superficie ; El primero es el efecto de onda. Por ejemplo, un botón elevado tiene una elevación del estado de reposo de 2dp y una elevación del estado presionado de 8dp (Ver botón elevado debajo de Shadows ). El botón se encuentra con el dedo cuando toca la superficie.

¿Puedo saber cuál es la mejor forma de eliminar el relleno de los botones durante la presión y, a la vez, conservar el material diseñado para el efecto visual presionado?

Una vez que haya respondido la primera parte, no creo que tenga todo el diseño del material si desea eliminar el efecto de elevación de la superficie.

De todos modos, aquí es cómo quitar retroalimentación visual de elevación de superficie:

Agregue el archivo animador button_raise.xml al directorio del animador en el directorio res con el siguiente código:

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

    <item
        android:state_enabled="true"
        android:state_pressed="true">

        <objectAnimator
            android:duration="@android:integer/config_shortAnimTime"
            android:propertyName="translationZ"
            android:valueTo="0dp"
            android:valueType="floatType" />
    </item>
</selector>

Consulte el animador recién creado en el botón que usa la propiedad stateListAnimator :

<Button
    ...
    android:stateListAnimator="@animator/button_raise"
    ... />

Espero que esto ayude.

Answer 2

1.add un archivo de recursos dibujable llamado quizás button_background.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <shape>
            <solid android:color="#ff0000"/>
            <stroke android:width="5dp" android:color="#00ff00"/>
        </shape>
    </item>
    <item>
        <shape>
            <solid android:color="#00ff00"/>
        </shape>
    </item>
</selector>

2.Utilice el button_background.xml como fondo del botón, ¡listo!

github

blog

Answer 3

Como respuesta de @David Medenjak, puede leer el botón de diseño de Material de Google en su sitio para desarrolladores. Use el estilo de botón como lo explicó @David Medenjak en su respuesta. También puede hacerlo de la siguiente manera: No es un relleno o margen, pero en realidad es un efecto de fondo del botón. Si desea eliminar eso, entonces puede hacer lo siguiente.

Opción 1:

Paso 1: Ponga el siguiente código en styles.xml

<style name="myColoredButton">
        <item name="android:textColor">#FF3E96</item>
        <item name="android:padding">0dp</item>
        <item name="android:minWidth">88dp</item>
        <item name="android:minHeight">36dp</item>
        <item name="android:elevation">1dp</item>
        <item name="android:translationZ">1dp</item>
        <item name="android:background">#FF0000</item>
    </style>

Paso 2: crea un nuevo archivo XML en la carpeta de elementos dibujables y agrega el siguiente código: nombré mi archivo XML como button_prime.xml

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/colorPrimary">
    <item>
        <shape xmlns:android="http://schemas.android.com/apk/res/android">
            <corners android:radius="1dp" />
            <solid android:color="#8B8386" />
        </shape>
    </item>
</ripple>

Paso 3: Use el estilo y el dibujo en su Botón de la siguiente manera.

<Button
        style="@style/myColoredButton"
        android:layout_width="250dp"
        android:layout_height="50dp"
        android:text="Cancel"
        android:gravity="center"
        android:background="@drawable/button_prime"
        android:colorButtonNormal="#3578A9" />

Opcion 2:

Con la biblioteca de soporte v7, todos los estilos ya están definidos y listos para usar, para los botones estándar, todos estos estilos están disponibles. Por lo tanto, puede configurar el estilo de su botón de esta manera.

<Button
    style="@style/Widget.AppCompat.Button.Borderless"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:text="BUTTON"
    android:gravity="center"
    android:minHeight="0dp"
    android:minWidth="0dp"
    android:background="@color/colorAccent"/>

Para más detalles sobre el estilo del botón, por favor check esta respuesta

Creo que también verificará esta respuesta . Espero que obtengas tu solución.

Answer 4

Creo que la mejor solución para resolver es crear su propio Ripple Effect . El relleno al presionar el botón respeta el Ripple Effect de Ripple Effect predeterminado del componente.

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
        android:color="?attr/colorControlHighlight">
    <item android:drawable="?attr/colorPrimary"/>
</ripple>

O puedes intentar cambiar el estilo de tu botón a style="?android:textAppearanceSmall"

Recuerde: este efecto solo se muestra en Android Lollipop (API 21) o superior.

Answer 5

Después de probar muchas soluciones, finalmente llegué a la conclusión de que solo con la etiqueta no podemos lograr esto. para eliminar este espacio no deseado alrededor del botón, mi solución es la siguiente:

 <RelativeLayout
    android:id="@+id/myButtonUnderlay"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    android:visibility="visible">
<Button
    android:id="@+id/save_button"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:layout_marginTop="-5dp" 
    android:layout_marginBottom="-5dp"
    android:layout_above="@+id/content_scrollview"
    android:layout_gravity="bottom"
    android:background="@drawable/ripple_theme"
    android:enabled="true"
    android:text="SetUp Store"
    android:textColor="#fff"
    android:textSize="18sp"
    android:visibility="gone"
    tools:visibility="visible"
    style="@style/MediumFontTextView" />
</RelativeLayout>

Answer 6

El relleno y el margen pueden ser el resultado de los recursos originales utilizados en el botón.

Así que podrías intentar cambiar los recursos utilizados, usando un selector:

<selector
  xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:drawable="@drawable/btn_action_hover" />
    <item android:state_selected="true" android:drawable="@drawable/btn_action_hover" />
    <item android:state_focused="true" android:drawable="@drawable/btn_action_hover" />
    <item android:drawable="@drawable/btn_action_normal" />
</selector>

Eso cambiaría las imágenes / formas predeterminadas para sus botones, por lo que podría intentar usar los elementos dibujables y establecer cada elemento en un elemento dibujable. El dibujable puede ser un mapa de bits o un archivo .xml (archivo de estilo) que define el aspecto del botón en su estado actual. Supongo que todavía hay algunos estilos nativos incluidos, aunque usted mismo haya configurado el estilo de botón. Esto puede deberse a que no está utilizando un tema personalizado. Así que el problema también puede resolverse definiendo

theme="@style/myNewTheme"

donde myNewTheme es su tema, y ​​debe tener algún padre ( parent="" no debe definirse).

Tome cualquier tema dado (diseñado por Google / Android, por ejemplo, Theme.AppCompat. [Nombre]), también viene con un buttonStyle. Esta es una parte de Theme.Holo.Light:

    <!-- Button styles -->
    <item name="buttonStyle">@style/Widget.Holo.Light.Button</item>

    <item name="buttonStyleSmall">@style/Widget.Holo.Light.Button.Small</item>
    <item name="buttonStyleInset">@style/Widget.Holo.Light.Button.Inset</item>

    <item name="buttonStyleToggle">@style/Widget.Holo.Light.Button.Toggle</item>
    <item name="switchStyle">@style/Widget.Holo.Light.CompoundButton.Switch</item>
    <item name="mediaRouteButtonStyle">@style/Widget.Holo.Light.MediaRouteButton</item>

    <item name="selectableItemBackground">@drawable/item_background_holo_light</item>
    <item name="selectableItemBackgroundBorderless">?attr/selectableItemBackground</item>
    <item name="borderlessButtonStyle">@style/Widget.Holo.Light.Button.Borderless</item>
    <item name="homeAsUpIndicator">@drawable/ic_ab_back_holo_light</item>

Como puede ver, este tema define cómo se verán / funcionarán sus botones en las funciones básicas. Puede anular partes de él, pero no ha anulado las partes importantes (siendo buttonStyle y similares). Entonces, si crea un nuevo tema usted mismo y lo diseña a su gusto y configura el tema (usando theme = "nombre de archivo") y ese tema no hereda ningún tema, debe poder diseñar sus botones a su gusto sin tener que preocuparse. sobre los estilos por defecto en el tema

Básicamente:

llamando a padding / margin = "0dp" no ayudará. El dibujable predeterminado definido por el tema tiene esto en el botón dibujable, lo que significa que no puede cambiarlo. Así que tienes que cambiar el estilo del botón o cambiar el tema por completo. Asegúrese de que el tema no tenga padres, ya que muchos de ellos definen el estilo del botón. No desea que el estilo del botón definido por el tema.

Answer 7

En styles.xml

<style name="MyButtonStyle" parent="Base.Widget.AppCompat.Button">
    <item name="android:background">@drawable/selector</item>
    <item name="android:textColor">@android:color/black</item>
</style>

En values/drawable :

my_drawable.xml

<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle" xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="2dp" />
    <!-- specify your desired color here -->
    <solid android:color="#9e9b99" />
</shape>

selector.xml

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

En values/drawable-v21 :

my_drawable.xml

<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle"
       android:tint="?attr/colorButtonNormal"
       xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="2dp" />
    <solid android:color="@android:color/white" />
</shape>

selector.xml

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
        android:color="?attr/colorControlHighlight">
    <item android:id="@android:id/mask"
          android:drawable="@drawable/my_drawable" />
</ripple>

En el diseño:

<Button
    android:id="@+id/button"
    style="@style/MyButtonStyle"
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:text="Test"/>

Resultado en API 19:

Resultado en API 21:

Código fuente

Answer 8

Establecer el fondo del Button como android:background="?selectableItemBackground"

<LinearLayout
    android:background="?attr/welcomeBottomNavBarBackground"
    android:orientation="horizontal"
    android:id="@+id/sign_in_bottom_nav_bar"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true">

    <Button
        style="?android:attr/buttonBarButtonStyle"
        android:background="?selectableItemBackground"
        android:id="@+id/sign_in_button"
        android:layout_width="0dp"
        android:width="0dp"
        android:layout_weight="1.0"
        android:layout_height="48dp"
        android:gravity="center"
        android:layout_gravity="center"
        android:enabled="true"
        android:textAllCaps="true"
        android:text="@string/log_in" />

</LinearLayout>

Answer 9

He pasado por lo que está pasando. En pocas palabras, simplemente no puede hacerlo de forma limpia con una etiqueta <Button> sola, al tiempo que garantiza la compatibilidad hacia atrás.

El método más simple y más ampliamente practicado es usar una capa subyacente <RelativeLayout> , alrededor de un <Button> .

Código del botón:

        <RelativeLayout
            android:id="@+id/myButtonUnderlay"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/colorPrimary"
            android:visibility="visible">

            <Button
                android:id="@+id/myButton"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="?attr/selectableItemBackgroundBorderless"
                android:text="I am as cute as a Button"/>

        </RelativeLayout>

Donde sea que necesite usar un botón, use este código completo.

Aquí está el desglose:

1. Los eventos OnClick se engancharán a myButton .
2. Controla las dimensiones de tu botón, cambiando los atributos de myButtonUnderlay .
3. En myButton , android:background="?attr/selectableItemBackgroundBorderless" . Esto lo convertirá en un botón transparente con solo el texto, y con ondulaciones compatibles hacia atrás.
4. En myButtonUnderlay , realizará todas las demás aplicaciones de fondo, como configurar el color del botón, márgenes, rellenos, bordes, degradados y sombras, etc.
5. Si desea la manipulación de la visibilidad del botón (programática o no), hágalo en myButtonUnderlay .

Nota: para garantizar la compatibilidad con versiones anteriores, asegúrese de utilizar

android:background="?attr/selectableItemBackgroundBorderless" , y NOT

android:background="?android:attr/selectableItemBackgroundBorderless"

Answer 10

No se supone que se use un botón estándar en todo el ancho, por eso lo experimenta.

Fondo

Si observa el Diseño de materiales - Estilo de botón , verá que un botón tiene un área de clic de altura de 48dp, pero se mostrará como 36dp de altura por ... alguna razón.

Este es el contorno de fondo que ve, que no cubrirá toda el área del botón.
Tiene esquinas redondeadas y algo de relleno, y se supone que se puede hacer clic solo, envolver su contenido y no abarcar todo el ancho en la parte inferior de la pantalla.

Solución

Como se mencionó anteriormente, lo que quieres es un fondo diferente. No es un botón estándar, sino un fondo para un elemento seleccionable con este bonito efecto de onda.

Para este caso de uso, existe el atributo de tema ?selectableItemBackground que puede utilizar para sus fondos (especialmente en listas).
Agregará una ondulación estándar de la plataforma (o alguna lista de estados de color en <21) y usará los colores de su tema actual.

Para su caso de uso, puede usar lo siguiente:

<Button
    android:id="@+id/sign_in_button"
    style="?android:attr/buttonBarButtonStyle"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Login"
    android:background="?attr/selectableItemBackground" />
                   <!--  // that''s all -->

Tampoco es necesario agregar pesos de diseño si su vista es la única y abarca toda la pantalla

Si tiene alguna idea diferente sobre el aspecto que debe tener su fondo, debe crear un dibujo personalizable y administrar el color y el estado allí.

Answer 11

Te sugiero que eches un vistazo a this si acaso, antes de todo.

Luego, si no funciona, te sugiero que crees tu propio estilo (como lo sugiere azizbekian) utilizando los elementos dibujables xml de Android y los estados dibujables para diferenciar presionado / no presionado.

Creo que usar tu propio estilo puede ser la mejor respuesta, ya que te dará más control sobre cómo se muestra tu aplicación, pero el uso de temas y estilos predeterminados de Android también permite que el usuario tenga estilos personalizados, lo que es una buena idea. Sin embargo, no puede probar todos los estilos personalizados, por lo que no puede verificar que su aplicación se muestre correctamente en TODOS los estilos personalizados y, por lo tanto, puede tener problemas con algunos.