0

Ich bin eine Suchleiste in Android anpassen, versuchen, nur innere und äußere Schatten (Unterseite) der gefüllten Abschnitt zu bekommen.Seekbar äußeren Schatten auf Fortschritt Teil

i ein Ergebnis wie dies möchte:

[1]: https://i.stack.imgur.com/Md9nY.jpg

Im Moment I erstellt:

  • die abgerundeten Ränder
  • der Gradient Effekt
  • der benutzerdefinierte Daumen
  • der innere Schatten (auf der Oberseite des Fortschritts, sehr klein
  • )

Ich bin nicht in der Lage die äußere Schatten (auf der Unterseite des Fortschritts) zu schaffen.

Dies ist mein Code:

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

    <item android:id="@android:id/background"> 
     <shape> 
      <size android:height="16dp"/> 
      <corners android:radius="20dp"/> 
      <solid android:color="@color/background_unselected_gray"/> 
     </shape> 
    </item> 

    <item android:id="@android:id/progress"> 
     <scale android:scaleWidth="100%"> 
      <layer-list> 
       <item> 
        <shape> 
         <corners 
          android:bottomLeftRadius="20dp" 
          android:topLeftRadius="20dp"/> 
         <gradient 
          android:endColor="@color/button_red_gradient_bottom" 
          android:startColor="@color/button_red_gradient_top"/> 
        </shape> 
       </item> 

       <item> 
        <shape> 
         <corners 
          android:bottomLeftRadius="18dp" 
          android:topLeftRadius="18dp"/> 
         <gradient 
          android:angle="270" 
          android:centerColor="@color/horizontal_seekbar_inner_shadow_center" 
          android:centerY="0.1" 
          android:endColor="@color/transparent" 
          android:startColor="@color/horizontal_seekbar_inner_shadow_top"/> 
        </shape> 
       </item> 
      </layer-list> 
     </scale> 
    </item> 
</layer-list> 

Antwort

0

I-Lösung selbst gefunden.

LÖSUNG:

ich gerade ein anderes Element in layer-list von id:progress Artikel mit hinzugefügt:

  • Gradienten von dunkelgrau bis transparent ein Schatten
  • eine Polsterung mit bottom Eigenschaft
  • zu simulieren

Dies ist der Code von hinzufügen ed item:

<item android:bottom="-3dp"> 
     <shape> 
      <corners 
       android:bottomLeftRadius="20dp" 
       android:topLeftRadius="20dp"/> 
        <gradient 
         android:angle="270" 
         android:centerColor="@color/horizontal_seekbar_outer_shadow_center" 
         android:centerY="0.75" 
         android:endColor="@color/transparent" 
         android:startColor="@color/horizontal_seekbar_outer_shadow_top"/> 
     </shape> 
</item> 

Ich habe eine Art negative Polsterung auf dieses Element angewendet, so dass es hinter Fortschrittsbalken ist.

Voll Code:

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

    <item android:id="@android:id/background"> 
     <shape> 
      <size android:height="16dp"/> 
      <corners android:radius="20dp"/> 
      <solid android:color="@color/background_unselected_gray"/> 
     </shape> 
    </item> 

    <item android:id="@android:id/progress"> 
     <scale android:scaleWidth="100%"> 
      <layer-list> 
       <item android:bottom="-3dp" 
         android:left="1dp"> 
        <shape> 
         <corners 
          android:bottomLeftRadius="20dp" 
          android:topLeftRadius="20dp"/> 
         <gradient 
          android:angle="270" 
          android:centerColor="@color/horizontal_seekbar_outer_shadow_center" 
          android:centerY="0.75" 
          android:endColor="@color/transparent" 
          android:startColor="@color/horizontal_seekbar_outer_shadow_top"/> 
        </shape> 
       </item> 

       <item> 
        <shape> 
         <corners 
          android:bottomLeftRadius="20dp" 
          android:topLeftRadius="20dp"/> 
         <gradient 
          android:endColor="@color/button_red_gradient_bottom" 
          android:startColor="@color/button_red_gradient_top"/> 
        </shape> 
       </item> 

       <item> 
        <shape> 
         <corners 
          android:bottomLeftRadius="18dp" 
          android:topLeftRadius="18dp"/> 
         <gradient 
          android:angle="270" 
          android:centerColor="@color/horizontal_seekbar_inner_shadow_center" 
          android:centerY="0.1" 
          android:endColor="@color/transparent" 
          android:startColor="@color/horizontal_seekbar_inner_shadow_top"/> 
        </shape> 
       </item> 
      </layer-list> 
     </scale> 
    </item> 
</layer-list> 
Verwandte Themen