web-dev-qa-db-fra.com

Barre de recherche personnalisée (taille du pouce, couleur et arrière-plan)

J'aimerais avoir cette barre de recherche dans mon projet Android: enter image description here

C'est ma barre de recherche:

<SeekBar
        Android:id="@+id/seekBar_luminosite"
        Android:layout_width="@dimen/seekbar_width"
        Android:layout_height="@dimen/seekbar_height"
        Android:minHeight="15dp"
        Android:minWidth="15dp"
        Android:maxHeight="15dp"
        Android:maxWidth="15dp"
        Android:progress="@integer/luminosite_defaut"
        Android:progressDrawable="@drawable/custom_seekbar"
        Android:thumb="@drawable/custom_thumb" />

Voici mon custom_thumb.xml:

<shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:shape="oval" >

    <gradient
        Android:angle="270"
        Android:endColor="@color/colorDekraOrange"
        Android:startColor="@color/colorDekraOrange" />

    <size
        Android:height="35dp"
        Android:width="35dp" />

</shape>

Voici mon custom_seekbar.xml:

<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android" >

    <item
        Android:id="@Android:id/background"
        Android:drawable="@drawable/seekbar"/>
    <item Android:id="@Android:id/progress">
        <clip Android:drawable="@color/colorDekraYellow" />
    </item>

</layer-list>

Ceci est mon seekbar.png (fond):

enter image description here

Et voici le résultat: enter image description here

Pas d'ombre et pas de frontières arrondies dans le bar ...

Je ne comprends vraiment pas comment je peux faire.

androidseekbar
46
user6299584

  • Tout d’abord, utilisez Android:splitTrack="false" pour le problème de transparence de votre pouce.

  • Pour le seekbar.png, vous devez utiliser un 9 patch. Ce serait bon pour la bordure arrondie et l'ombre de votre image.

46
Jéwôm'

Tout est fait en XML (pas de _.png_ images). Le bit intelligent est border_shadow.xml.

Tout sur la vectors ces jours-ci ...

Capture d'écran:

seekbar
Ceci est votre SeekBar (_res/layout/???.xml_):

Barre de recherche

_<SeekBar
    Android:id="@+id/seekBar_luminosite"
    Android:layout_width="300dp"
    Android:layout_height="wrap_content"        
    Android:progress="@integer/luminosite_defaut"
    Android:progressDrawable="@drawable/seekbar_style"
    Android:thumb="@drawable/custom_thumb"/>
_

Rendons-le élégant (pour pouvoir le personnaliser facilement par la suite):

style

_res/drawable/seekbar_style.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/border_shadow" >
    </item>

    <item 
        Android:id="@Android:id/progress" > 
        <clip 
            Android:drawable="@drawable/seekbar_progress" />
    </item>
</layer-list>
_

pouce

res/drawable/custom_thumb.xml:

_<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item>
        <shape Android:shape="oval">
            <solid Android:color="@color/colorDekraOrange"/>
            <size
                Android:width="35dp"
                Android:height="35dp"/>
        </shape>
    </item>   
</layer-list>
_

le progrès

_res/drawable/seekbar_progress.xml_:

_<?xml version="1.0" encoding="utf-8"?>
<layer-list 
    xmlns:Android="http://schemas.Android.com/apk/res/Android" >
    <item 
        Android:id="@+id/progressshape" >
        <clip>
            <shape 
                Android:shape="rectangle" >
                <size Android:height="5dp"/>
                <corners 
                    Android:radius="5dp" />
                <solid Android:color="@color/colorDekraYellow"/>        
            </shape>
        </clip>
    </item>
</layer-list>
_

ombre

_res/drawable/border_shadow.xml_:

_<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android">       
    <item>      
        <shape> 
            <corners 
                Android:radius="5dp" />
            <gradient
                Android:angle="270"
                Android:startColor="#33000000"
                Android:centerColor="#11000000"
                Android:endColor="#11000000"
                Android:centerY="0.2"
                Android:type="linear"
            />          
        </shape> 
    </item>
</layer-list>
_
83
Jon Goodwin

Pas d'ombre et pas de bordures arrondies dans le bar

Vous utilisez une image, la solution la plus simple consiste donc à aligner votre bateau avec le flux,

Vous ne pouvez pas donner manuellement des hauteurs, oui, mais assurez-vous qu'il dispose de suffisamment d'espace pour y afficher votre image complète.

  • le moyen le plus simple est d'utiliser Android:layout_height="wrap_content" pour SeekBar
  • Pour obtenir des bordures arrondies plus claires, vous pouvez facilement utiliser la même image que vous avez utilisée avec une autre couleur.

Je ne suis pas bon avec Photoshop mais j'ai réussi à éditer un fond pour un test

seekbar_brown seekbar_brown_to_show_progress.png

<SeekBar
    Android:splitTrack="false"   // for unwanted white space in thumb
    Android:id="@+id/seekBar_luminosite"
    Android:layout_width="250dp"   // use your own size
    Android:layout_height="wrap_content"
    Android:minHeight="10dp"
    Android:minWidth="15dp"
    Android:maxHeight="15dp"
    Android:maxWidth="15dp"
    Android:progress="50"
    Android:progressDrawable="@drawable/custom_seekbar_progress"
    Android:thumb="@drawable/custom_thumb" />

custom_seekbar_progress.xml 

<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item
        Android:id="@Android:id/background"
        Android:drawable="@drawable/seekbar" />
    <item Android:id="@Android:id/progress">
        <clip Android:drawable="@drawable/seekbar_brown_to_show_progress" />
    </item>
</layer-list>

custom_thumb.xml est identique au vôtre.

Enfin, Android:splitTrack="false" supprimera les espaces blancs indésirables de votre pouce.

Regardons le résultat:

enter image description here

11
Charuක

Au début, la courtoisie va à @ Charuka .

FAIRE

Vous pouvez utiliser Android:progressDrawable="@drawable/seekbar" au lieu de Android:background="@drawable/seekbar".

progressDrawable utilisé pour le mode de progression.

Tu devrais essayer avec

Android: minHeight

Définit la hauteur minimale de la vue. Il n’est pas garanti que la vue puisse atteindre cette hauteur minimale (par exemple, si la disposition parent la contraint à une hauteur disponible inférieure).

Android: minWidth

Définit la largeur minimale de la vue. Il n'est pas garanti que la vue puisse atteindre cette largeur minimale (par exemple, si la disposition parente la contraint avec une largeur moins disponible).

_    Android:minHeight="25p"
    Android:maxHeight="25dp" 
_

À titre d'information:

Utiliser Android: minHeight et Android: maxHeight n’est pas une bonne solution .Nécessité de rectifier votre barre de recherche personnalisée (à partir du niveau de la classe) ) .

7
IntelliJ Amiya

SeekBar personnalisé Android - suivi ou progression personnalisés, forme, taille, arrière-plan et pouce, ainsi que pour toute autre personnalisation de la barre de recherche, voir http://www.zoftino.com/Android-seekbar-and-custom-seekbar-examples

Track personnalisé dessinable 

<?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:gravity="center_vertical|fill_horizontal">
        <shape Android:shape="rectangle"
            Android:tint="#ffd600">
            <corners Android:radius="8dp"/>
            <size Android:height="30dp" />
            <solid Android:color="#ffd600" />
        </shape>
    </item>
    <item Android:id="@Android:id/progress"
        Android:gravity="center_vertical|fill_horizontal">
        <scale Android:scaleWidth="100%">
            <selector>
                <item Android:state_enabled="false"
                    Android:drawable="@Android:color/transparent" />
                <item>
                    <shape Android:shape="rectangle"
                        Android:tint="#f50057">
                        <corners Android:radius="8dp"/>
                        <size Android:height="30dp" />
                        <solid Android:color="#f50057" />
                    </shape>
                </item>
            </selector>
        </scale>
    </item>
</layer-list>

Pouce personnalisée pouvant être dessinée 

?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:shape="rectangle"
    Android:thickness="4dp"
    Android:useLevel="false"
    Android:tint="#ad1457">
    <solid
        Android:color="#ad1457" />
    <size
        Android:width="32dp"
        Android:height="32dp" />
</shape>

Sortie

enter image description here

7
Arnav Rao

Utilisez des teintes;)

<SeekBar
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:minHeight="15dp"
        Android:minWidth="15dp"
        Android:maxHeight="15dp"
        Android:maxWidth="15dp"
        Android:progress="20"
        Android:thumbTint="@color/colorPrimaryDark"
        Android:progressTint="@color/colorPrimary"/>

utilisez la couleur dont vous avez besoin dans thumbTint et progressTint. C'est beaucoup plus rapide! :)

Vous pouvez l’utiliser avec Android:progressDrawable="@drawable/seekbar"

2
Raphau

Android: minHeight Android: maxHeight est important pour cela.

<SeekBar
    Android:id="@+id/pb"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:maxHeight="2dp"
    Android:minHeight="2dp"
    Android:progressDrawable="@drawable/seekbar_bg"
    Android:thumb="@drawable/seekbar_thumb"
    Android:max="100"
    Android:progress="50"/>

seekbar_bg.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">
        <shape>
            <corners Android:radius="3dp" />
            <solid Android:color="#ECF0F1" />
        </shape>
    </item>
    <item Android:id="@Android:id/secondaryProgress">
        <clip>
            <shape>
                <corners Android:radius="3dp" />
                <solid Android:color="#C6CACE" />
            </shape>
        </clip>
    </item>
    <item Android:id="@Android:id/progress">
        <clip>
            <shape>
                <corners Android:radius="3dp" />
                <solid Android:color="#16BC5C" />
            </shape>
        </clip>
    </item>
</layer-list>

seekbar_thumb.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:shape="oval">
    <solid Android:color="#16BC5C" />
    <stroke
        Android:width="1dp"
        Android:color="#16BC5C" />
    <size
        Android:height="20dp"
        Android:width="20dp" />
</shape>
1
lingyfh

Vous pouvez essayer la barre de progression au lieu de la barre de recherche

<ProgressBar
    Android:id="@+id/progressBar"
    style="?android:attr/progressBarStyleHorizontal"
    Android:layout_width="fill_parent"
    Android:layout_height="50dp"
    Android:layout_marginBottom="35dp"
    />
0
emme