Android, Einstellung der Hintergrundfarbe der Schaltfläche verliert ripple-Effekt

Nach hinzufügen von Farbe zu einem android-Schaltfläche, verliert es seine Signalwirkung, die macht dem Benutzer das Gefühl wie es ist eine ansprechende auf. Wie kann ich dieses Problem beheben? Ich habe gesucht, durch viele Lösungen, aber ich konnte nicht finden, eine bestimmte eine, die nicht mehrdeutig.

<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>

InformationsquelleAutor Tommy Saechao | 2016-07-12

Können Sie den ripple-Effekt & hintergrund-Farbe mit einer zusätzlichen Kräuselung drawable:

Ihrem layout :

<?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 (dies ist, wo Sie hinzufügen können, Hintergrundfarbe zusätzlich zu der ripple-Effekt) :

<?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>

wie android unterscheidet, das ist die Maske, und welches ist die Standard-Farbe?

InformationsquelleAutor Bertrand Martel

25

Eine sehr einfache und unkomplizierte Möglichkeit, dies zu tun ist, um ?attr/selectableItemBackground zu android:foreground - Attribut der Schaltfläche. Folgende xml-durchaus gültig ist und funktioniert
```
<Button
    android:id="@+id/btn"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@android:color/white"
    android:foreground="?attr/selectableItemBackground"/>
```
- Sollte angenommen werden, beantworten!
- funktioniert einwandfrei. Sollten akzeptiert werden Antwort
- Dies ist die beste Antwort hier, danke
- Schön. Jedoch wird die Abwärtskompatibilität wird nicht unterstützt in der version 23.
- So ändern Sie die Farbe des Effekts?
InformationsquelleAutor Abhishek Bansal

Nicht ändern, die hintergrund-Schaltfläche. Ändern Sie das Thema.

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

und in Ihrer xml-Datei

<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"/>

Oder Sie können fügen Sie es in Ihre Haupt-app Thema

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

Sind und brauchen keine änderung " hintergrund.

Wenn Sie möchten komplett eigenen hintergrund, die Sie benötigen, erstellen Sie Ihre Auswahl. Und Sie können es ripple-Effekt.

InformationsquelleAutor thealeksandr

4

Verwenden Sie einfach :
```
android:backgroundTint="#4CAF50"
```
Statt:
```
android:background="#4CAF50"
```
Vergessen Sie nicht, ändern Sie Ihre Button zu android.support.v7.widget.AppCompatButton
- Habe ich ändern aber es funktioniert nicht
InformationsquelleAutor Gilad Shapira

Tatsächlich, Sie können <layer-list> von drawables zu kombinieren ripple-Effekt mit anderen drawable. Dies ist die Universelle Lösung auch für pre-lolipop: ich habe es getestet in vielen Konfigurationen.

Das problem ist nur, dass pre-lolipop stürzt ab, wenn ?selectableItemBackground im <layer-list>, so müssen wir LayerDrawable programmgesteuert.

Eine sehr schnelle und einfache Lösung sieht so aus:

Geben Sie für Ihre Ansicht

android:background="?selectableItemBackground"

Dann überall im code erstellen mySpecialDrawable und den trick tun:

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

Bitte beachten Sie, dass .mutate() für LayeredDrawable ist hier ein muss!

Einer komplexeren Lösung könnte nützlich sein, wenn Sie bereits Ihre benutzerdefinierte Ansicht und lieber etwas verlängern seine Funktionalität und Kompatibilität als zusätzliche leere FrameLayout als Elternteil.

Innen attrs.xml setzen:

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

dann innerhalb deines View-Nachkomme Klasse:

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
}

Ich bevorzuge diesen Ansatz, da hat es keine Probleme wie android:foreground Attribut, das 23+ oder zusätzlichen overhead des umschließenden anklickbar Blick in FrameLayout.

InformationsquelleAutor apc

-1

Sollten Sie Stile verwenden,

<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>

dies ist die optimale Lösung

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

InformationsquelleAutor OmarACY

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.