2016-07-11 6 views
1

Ich versuche, einen transparenten Hintergrund mit Farbverlauf für eine Schaltfläche, um so etwas zu machen:Linear Gradient CenterX

(Die Startfarbe nicht grau ist aber transparent)

Desired gradient

Aber ich bin immer dies: (wo weiße Teil ist zu schmal)

enter image description here

Das ist mein gradient.xml:

<!-- Here centerX does not work --> 
<shape 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="rectangle"> 

    <gradient 
     android:centerX="30%" 
     android:startColor="@android:color/transparent" 
     android:endColor="@android:color/white"/> 

</shape> 

ich auch versucht haben, das Hinzufügen einer centerColor, aber dann der transparente Bereich wird grau!

<!-- Here the startColor turns greyish --> 
<shape 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="rectangle"> 

    <gradient 
     android:centerColor="@android:color/white" 
     android:centerX="30%" 
     android:endColor="@android:color/white" 
     android:startColor="@android:color/transparent" /> 

</shape> 

Vielen Dank im Voraus!

Antwort

1

Wenn das, was Sie brauchen, ist nur auf der linken Seite des ziehbar bewegt Gradienten, so etwas wie dies versuchen:

<?xml version="1.0" encoding="utf-8"?> 
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"> 
    <item android:left="100dp"> 
     <color android:color="@android:color/white"/> 
    </item> 
    <item android:width="100dp"> 
     <shape 
      xmlns:android="http://schemas.android.com/apk/res/android" 
      android:shape="rectangle"> 
     <gradient 
      android:centerX="30%" 
      android:endColor="@android:color/white" 
      android:startColor="@android:color/transparent"/> 
     </shape> 
    </item> 
</layer-list> 

Diese Schicht aus zwei Rechtecke bestehen:

  1. weißes Rechteck auf die bewegt rechts von 30DP
  2. Gradient Rechteck, dessen Breite 30DP
+0

Funktioniert nicht:/Was ich brauche ist, dass 75% des Hintergrunds der Schaltfläche weiß sind und der Rest nach und nach transparent wird – josemigallas

1

centerX funktioniert nur, wenn Sie einen centerColor Satz haben.

Aber wenn man in der Mitte Farbe @android:color/transparent die Steigung geht von undurchsichtigen weißen-transparent schwarz, nicht wissen gesetzt.

@android:color/transparent ist definiert als #00000000, das ist ein transparentes Schwarz und nicht weiß. Normalerweise ist es egal, weil die Farbe sowieso transparent ist, aber im Falle von Farbverläufen gibt es einen schwarzen Farbton.

So müssen Sie

<shape 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="rectangle"> 

    <gradient 
     android:startColor="#00ffffff" 
     android:centerColor="#00ffffff" 
     android:endColor="#ffffffff" 
     android:centerX="30%" /> 
</shape> 

In diesem Fall wird die Farbe gleich ist (#ffffff heißt weiß) über den Verlauf, aber Alpha ist von 00 zu ff variiert.