Android, ajuste el color de fondo del botón pierde el efecto de la ondulación

Después de la adición de color a un android botón, pierde su efecto dominó que hace que el usuario se sienta como no es una respuesta clic. ¿Cómo puedo solucionar este problema? He buscado a través de muchas soluciones, pero no pude encontrar un indudable que no era ambigua.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:tools="http://schemas.android.com/tools"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                tools:context=".ClockInOutFragment">


    <AnalogClock
        android:id="@+id/clock"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:layout_toRightOf="@+id/date_and_time"/>


    <RelativeLayout
        android:id="@+id/date_and_time"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dp">

        <TextView
            android:id="@+id/time_digits"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="12:10"
            android:textSize="45sp"/>

        <TextView
            android:id="@+id/am_pm"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignBaseline="@+id/time_digits"
            android:layout_toRightOf="@+id/time_digits"
            android:paddingLeft="3dp"
            android:text="PM"
            android:textSize="20sp"/>

        <TextView
            android:id="@+id/date"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/time_digits"
            android:text="Mon, July 11"
            android:textSize="22sp"/>
    </RelativeLayout>

    <!--Clock in and out buttons-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:orientation="horizontal">

        <Button
            android:id="@+id/textView3"
            android:layout_width="0dp"
            android:layout_height="56dp"
            android:layout_weight="1"
            android:background="#4CAF50"
            android:gravity="center"
            android:text="Clock In"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:textColor="#FFFFFF"/>

        <!--Divider between the clock in and out button-->
        <View
            android:layout_width="1dp"
            android:layout_height="match_parent"
            android:background="#B6B6B6"/>

        <Button
            android:id="@+id/textView4"
            android:layout_width="0dp"
            android:layout_height="56dp"
            android:layout_weight="1"
            android:background="#FF5252"
            android:gravity="center"
            android:text="Clock Out"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:textColor="#FFFFFF"/>
    </LinearLayout>


</RelativeLayout>

6 Kommentare

  1. 31

    Puede agregar el efecto de la ondulación & color de fondo con un adicional de ondulación de la imagen:

    su diseño :

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="vertical" android:layout_width="match_parent"
        android:layout_height="match_parent">
    
        <Button
            android:id="@+id/button_connect"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dip"
            android:fontFamily="sans-serif"
            android:text="Connect"
            android:background="@drawable/ripple"
            android:textColor="#FFFFFF"
            android:textSize="18sp" />
    
    </LinearLayout>

    ripple.xml (aquí es donde usted puede agregar color de fondo además del efecto dominó) :

    <?xml version="1.0" encoding="utf-8"?>
    <!-- in drawable folder-->
    <ripple
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:color="?android:colorControlHighlight">
    
        <item android:id="@android:id/mask">
            <shape android:shape="rectangle">
                <solid android:color="?android:colorAccent" />
            </shape>
        </item>
    
        <item>
            <shape android:shape="rectangle">
                <!-- put your background color here-->
                <solid android:color="@color/default_color" />
            </shape>
        </item>
    
    </ripple>
    • cómo android que diferencia a los cuales uno es el de la máscara y de los cuales uno es el color por defecto?
    • Por id. Por ejemplo – android:id=»@android:id/máscara»
  2. 29

    Una muy simple y sencilla de hacer esto es establecer ?attr/selectableItemBackground a android:foreground atributo de su botón. Siguiente xml es perfectamente válido y funciona

    <Button
        android:id="@+id/btn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/white"
        android:foreground="?attr/selectableItemBackground"/>
    • Esta es la mejor respuesta aqui, gracias
    • De niza. Sin embargo, la compatibilidad no es compatible con la versión 23.
    • Cómo cambiar el color del efecto?
  3. 14

    No cambiar el fondo de Botón. Cambiar el tema.

    <style name="ButtonGray">
        <item name="colorButtonNormal">@color/gray</item>
    </style>

    y en el archivo xml

    <Button
         android:id="@+id/accept_button"
         android:layout_height="wrap_content"
         android:layout_width="0dp"
         android:layout_weight="1"
         android:text="@string/button_accept_group"
         android:theme="@style/ButtonGray"/>

    O se pueden agregar en su aplicación principal tema

    <style name="AppTheme"
               parent="Theme.AppCompat.Light.NoActionBar">
            <item name="colorButtonNormal">@color/primary_color</item>
    </style>

    Y no necesita cambiar de fondo del botón.

    Si quieres totalmente de fondo personalizada que usted necesita crear su selector. Y se puede establecer que hay efecto dominó.

  4. 6

    Sólo tiene que utilizar :

    android:backgroundTint="#4CAF50"

    Lugar de:

    android:background="#4CAF50"

    No se olvide de cambiar su Button a android.support.v7.widget.AppCompatButton

  5. 0

    De hecho, usted puede utilizar <layer-list> de dibujables combinar el efecto de la ondulación con cualquier otra imagen. Esta es una solución universal también para pre-lolipop: lo he probado en muchas configuraciones.

    El único problema es que la pre-lolipop se bloquea cuando ?selectableItemBackground aparece en el interior de <layer-list>, así que tenemos que crear LayerDrawable mediante programación.

    Muy rápida, sencilla solución parece:

    Especificar para la Vista

    android:background="?selectableItemBackground"

    A continuación, en cualquier lugar en el código de crear mySpecialDrawable y hacer el truco:

    Drawable[] layers = {mySpecialDrawable, getBackground()};
    setBackgroundDrawable(new LayerDrawable(layers).mutate()); 

    Por favor, tenga en cuenta que .mutate() para LayeredDrawable es esencial aquí!

    Más complejo, la solución podría ser útil cuando usted ya tiene su Vista personalizada y prefieren, en lugar de ampliar su funcionalidad y compatibilidad de añadir vacío FrameLayout como un padre.

    Dentro de attrs.xml puesto:

    <resources>
        <declare-styleable name="MyView">
            <attr name="selectableBackground" format="reference"/>
            <attr name="backgroundDrawable" format="reference"/>
        </declare-styleable>
    </resources>

    a continuación, en el interior de su Vista-descendiente de la clase:

    private Drawable selectableBackground;
    private Drawable backgroundDrawable;
    
    public MyView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    
        try {
            TypedArray attributeArray;
            attributeArray = context.obtainStyledAttributes(attrs, R.styleable.MyView);
    
            int id = attributeArray.getResourceId(R.styleable.MyView_selectableBackground, -1);
            if (id != -1) {
                selectableBackground = ResourcesCompat.getDrawable(getResources(), id, context.getTheme());
            }
            id = attributeArray.getResourceId(R.styleable.MyView_backgroundDrawable, -1);
            if (id != -1) {
                backgroundDrawable = ResourcesCompat.getDrawable(getResources(), id, context.getTheme());
            }
    
            constructBackground();
            attributeArray.recycle();
        } catch (Exception e) {
            Log.e(this.toString(), "Attributes initialization error", e);
            throw e;
        }
    }
    
    void setSelectableBackground(Drawable drawable) {
        selectableBackground = drawable;
        constructBackground();
    }
    
    void setDrawable(Drawable drawable) {
        backgroundDrawable = drawable;
        constructBackground();
    }
    
    private void constructBackground() {
        if (selectableBackground != null) {
            if (backgroundDrawable != null) {
                Drawable[] layers = {backgroundDrawable, selectableBackground};
                setBackgroundDrawable(new LayerDrawable(layers).mutate());      //Both, using layers
            } else setBackgroundDrawable(selectableBackground);                 //Selectable only
        } else setBackgroundDrawable(backgroundDrawable);                       //Background only or null
    }

    Prefiero este enfoque debido a que no tiene problemas como android:foreground atributo que es de 23+ o sobrecarga adicional de encerrar puede hacer clic vistas dentro de FrameLayout.

  6. -1

    Usted debe utilizar los estilos

    <style parent="Theme.AppCompat.Light" name="RaisedButtonGreen">
        <item name="colorButtonNormal">@color/green</item>
        <item name="colorControlHighlight">@color/greenLight</item>
        <item name="android:textColor">@android:color/white</item>
    </style>

    esta es la solución óptima

    <Button
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="Button with ripple for style"
        android:theme="@style/RaisedButtonGreen"/>

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea