Eu queria estilizar uma barra de procura que se parecesse com a da imagem abaixo.
Ao usar a barra de procura padrão, vou conseguir algo como isto:
Então o que eu preciso é apenas de mudar a cor. Eu não preciso de estilos extras. Existe alguma abordagem directa para fazer isto ou devo construir o meu desenho personalizado?
Eu tentei construir um personalizado, mas não consegui obter o exato como mostrado acima. Depois de usar o desenhável personalizado, o que eu recebo é como mostrado abaixo:
Se eu precisar de construir o personalizado, então por favor, sugira como reduzir a largura da linha de progresso e também a forma.
a minha implementação personalizada:
background_fill.xml:
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<gradient
android:angle="90"
android:centerColor="#FF555555"
android:endColor="#FF555555"
android:startColor="#FF555555" />
<corners android:radius="1dp" />
<stroke
android:width="1dp"
android:color="#50999999" />
<stroke
android:width="1dp"
android:color="#70555555" />
</shape>
progress_fill.xml
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<gradient
android:angle="90"
android:centerColor="#FFB80000"
android:endColor="#FFFF4400"
android:startColor="#FF470000" />
<corners android:radius="1dp" />
<stroke
android:width="1dp"
android:color="#50999999" />
<stroke
android:width="1dp"
android:color="#70555555" />
</shape>
progresso.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:id="@android:id/background"
android:drawable="@drawable/background_fill"/>
<item android:id="@android:id/progress">
<clip android:drawable="@drawable/progress_fill" />
</item>
</layer-list>
polegar.xml
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval" >
<gradient
android:angle="270"
android:endColor="#E5492A"
android:startColor="#E5492A" />
<size
android:height="20dp"
android:width="20dp" />
</shape>
procurar barra:
<SeekBar
android:id="@+id/seekBarDistance"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginTop="88dp"
android:progressDrawable="@drawable/progress"
android:thumb="@drawable/thumb" >
</SeekBar>
Eu extrairia os objectos desenhados e xml do código fonte do Android e mudaria a sua cor para vermelho. Aqui está um exemplo de como eu completei isto para os desenhos em mdpi:
Custom red_scrubber_control.xml
(add to res/drawable):
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/red_scrubber_control_disabled_holo" android:state_enabled="false"/>
<item android:drawable="@drawable/red_scrubber_control_pressed_holo" android:state_pressed="true"/>
<item android:drawable="@drawable/red_scrubber_control_focused_holo" android:state_selected="true"/>
<item android:drawable="@drawable/red_scrubber_control_normal_holo"/>
</selector>
Personalizado: red_scrubber_progress.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:id="@android:id/background"
android:drawable="@drawable/red_scrubber_track_holo_light"/>
<item android:id="@android:id/secondaryProgress">
<scale
android:drawable="@drawable/red_scrubber_secondary_holo"
android:scaleWidth="100%" />
</item>
<item android:id="@android:id/progress">
<scale
android:drawable="@drawable/red_scrubber_primary_holo"
android:scaleWidth="100%" />
</item>
</layer-list>
Em seguida, copie os Drawables necessários do código fonte Android, eu peguei deste link.
É bom copiar estes desenhos para cada hdpi, mdpi, xhdpi. Por exemplo, eu uso apenas mdpi:
Depois, usando o Photoshop, mude a cor de azul para vermelho:
red_scrubber_control_disabled_holo.png: d_scrubber_control_disabled_holo_disabled_holo.png:2
red_scrubber_control_focused_holo.png: d_scrubber_control_focused_holo_focused_holo.png:3
red_scrubber_control_normal_holo.png: d_scrubber_control_normal_holo.png:4
red_scrubber_control_pressed_holo.png:
red_scrubber_primary_holo.9.png: red_scrubber_primary_holo.9
red_scrubber_secondary_holo.9.png: red_scrubber_secondary_holo.9
red_scrubber_track_holo_light.9.png: red_scrubber_track_holo_light.9
Adicione o SeekBar ao layout:
<SeekBar
android:id="@+id/seekBar1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:progressDrawable="@drawable/red_scrubber_progress"
android:thumb="@drawable/red_scrubber_control" />
Resultado:
Se você quiser exatamente a mesma barra, mas em vermelho, você pode adicionar um filtro de cor PorterDuff programticamente. Você pode obter cada um dos sorteáveis que você quer colorir através dos métodos da classe base ProgressBar. Depois, defina um filtro de cor para ele.
mySeekBar.getProgressDrawable().setColorFilter(new PorterDuffColorFilter(srcColor, PorterDuff.Mode.MULTIPLY));
Se o ajuste de cor desejado pode't ser feito através de um filtro Porter Duff, você pode especificar seu próprio filtro de cor.
Se você olhar para os recursos do Android, a barra de busca realmente usa imagens.
Você tem que fazer um desenho que seja transparente em cima e em baixo para, digamos, 10px e a linha central de 5px é visível.
Consulte a imagem anexa. Você precisa convertê-la em um NinePatch.