Autore Topic: Personalizzare la SeekBar  (Letto 4579 volte)

Offline bradipao

  • Moderatore globale
  • Utente storico
  • *****
  • Post: 4043
  • keep it simple
  • Respect: +567
    • Github
    • Google+
    • bradipao
    • Mostra profilo
  • Dispositivo Android:
    Nexus 5
  • Play Store ID:
    Bradipao
  • Sistema operativo:
    W7
Personalizzare la SeekBar
« il: 18 Marzo 2011, 10:27:38 CET »
+1
Gli esperimenti con la personalizzazione della ProgressBar mi hanno aperto un mondo, così si personalizza la SeekBar, incluso il Thumb.

Il main layout (il padding è basilare per non vedersi tagliato il thumb agli estremi):
Codice (XML): [Seleziona]
<SeekBar
  android:id="@+id/theseekbar"
  style="@style/PowerSeekBar"
  android:max="100"
  android:layout_weight="1"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_marginRight="10dip"
  android:layout_marginLeft="10dip"
  android:paddingLeft="20dip"
  android:paddingRight="20dip" />

Lo style in /values/styles.xml (notare che si personalizza separatamente la barra e il thumb):
Codice (XML): [Seleziona]
   <style name="PowerSeekBar" parent="android:Widget.SeekBar">
      <item name="android:progressDrawable">@drawable/sb_power</item>
      <item name="android:thumb">@drawable/sbt_power</item>
      <item name="android:thumbOffset">0dip</item>
   </style>

La barra personalizzata in /drawable/sb_power.xml :
Codice (XML): [Seleziona]
<?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>
         <corners
           android:radius="4dip" />
         <gradient
           android:startColor="#ff333333"
           android:centerColor="#ff666666"
           android:endColor="#ff333333"
           android:centerY="0.50"
           android:angle="270" />
      </shape>
   </item>
   <item
     android:id="@android:id/secondaryProgress">
      <clip>
         <shape>
            <corners
              android:radius="4dip" />
            <gradient
              android:startColor="#77339933"
              android:endColor="#7799ff99"
              android:angle="90" />
         </shape>
      </clip>
   </item>
   <item
     android:id="@android:id/progress">
      <clip>
         <shape>
            <corners
              android:radius="4dip" />
            <gradient
              android:startColor="#ff339933"
              android:endColor="#ff99ff99"
              android:angle="90" />
         </shape>
      </clip>
   </item>
</layer-list>

Il thumb personalizzato in /drawable/sbt_power.xml :
Codice (XML): [Seleziona]
<?xml version="1.0" encoding="UTF-8"?>
<selector
  xmlns:android="http://schemas.android.com/apk/res/android">
   <item
     android:state_pressed="true">
      <shape
        android:shape="rectangle">
         <size
           android:width="12dip"
           android:height="28dip" />
         <corners
           android:radius="4dip" />
         <gradient
           android:startColor="#ff0e75af"
           android:endColor="#ff1997e1"
           android:angle="270"
           android:type="linear" />
      </shape>
   </item>
   <item
     android:state_focused="true">
      <shape
        android:shape="rectangle">
         <size
           android:width="12dip"
           android:height="28dip" />
         <corners
           android:radius="4dip" />
         <gradient
           android:startColor="#ffed6100"
           android:endColor="#ffffc27e"
           android:angle="270"
           android:type="linear" />
      </shape>
   </item>
   <item
     android:state_selected="true">
      <shape
        android:shape="rectangle">
         <size
           android:width="12dip"
           android:height="28dip" />
         <corners
           android:radius="4dip" />
         <gradient
           android:startColor="#ffed6100"
           android:endColor="#ffffc27e"
           android:angle="270"
           android:type="linear" />
      </shape>
   </item>
   <item
     android:state_enabled="false">
      <shape
        android:shape="rectangle">
         <size
           android:width="12dip"
           android:height="28dip" />
         <corners
           android:radius="4dip" />
         <gradient
           android:startColor="#ff444444"
           android:endColor="#ff333333"
           android:angle="270"
           android:type="linear" />
      </shape>
   </item>
   <item>
      <shape
        android:shape="rectangle">
         <size
           android:width="12dip"
           android:height="28dip" />
         <corners
           android:radius="4dip" />
         <gradient
           android:startColor="#ffcdcdcd"
           android:endColor="#fff8f8f8"
           android:angle="270"
           android:type="linear" />
      </shape>
   </item>
</selector>
NON rispondo a domande nei messaggi privati
Bradipao @ Play Store

Offline gabric

  • Utente senior
  • ****
  • Post: 615
  • Respect: +18
    • Google+
    • Mostra profilo
    • Brancato's site
  • Dispositivo Android:
    Nexus 5 / Tablet mediacom s4
  • Play Store ID:
    Brancato's+app
  • Sistema operativo:
    window7. ubuntu
Re:Personalizzare la SeekBar
« Risposta #1 il: 23 Maggio 2013, 11:28:07 CEST »
0
Scusa se riuppo un topic vecchio.
ma se io volessi schiacciare la barra di scorrimento, senza ridimensionare il thumb?
edit:
dopo varie prove con il padding etc etc
ho risolto mettendo

Codice (XML): [Seleziona]
           android:minHeight="6dp"
            android:maxHeight="6dp"

in questo modo il thumb non viene ridimensionato e resta fuori
« Ultima modifica: 23 Maggio 2013, 11:58:44 CEST da gabric »