web-dev-qa-db-fra.com

Android: SeekBar avec dessinable personnalisé

J'ai SeekBar avec dessinable personnalisé. L'élément de progression n'est pas rendu exactement du côté gauche mais il est déplacé vers la droite. Comment puis-je éviter ça?

enter image description here

<SeekBar
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:layout_below="@Android:id/summary"
    Android:background="@null"

    Android:progressDrawable="@drawable/seekbar"
    Android:thumb="@drawable/seekbar_thumb"/>

seekbar.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/seekbar_background"/>
    <item Android:id="@Android:id/progress">
        <clip Android:drawable="@drawable/seekbar_progress" />
    </item>

</layer-list>

seekbar_background.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android" Android:shape="line">

    <stroke Android:width="2dp" Android:color="@color/colorNeutral" />

</shape>

seekbar_progress.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android" Android:shape="line">

    <stroke
        Android:width="4dp"
        Android:color="@color/colorAccentDark" />
</shape>

MODIFIER:

Comme mentionné dans les commentaires, s'il y aura les deux largeurs, le même problème disparaîtra. Mais j'ai besoin de le faire avec deux largeurs différentes grâce à l'étirage est-ce possible? Peut-être avec des formes différentes et pas seulement des lignes?

androidandroid-layoutandroid-seekbarandroid-custom-drawable
24
Michal

Je ne peux pas expliquer pourquoi c'est un problème lors du dessin de traits, je pense que cela a quelque chose à voir avec la largeur des traits, mais je n'ai pas encore trouvé la source à vérifier.

Fixation de la superposition

Pour supprimer le problème, vous pouvez simplement définir un inset sur votre gauche. Une valeur de 1dp ou 2dp le travail et la barre de recherche seront affichés correctement.

Remarque: En utilisant cette approche, il ne devrait y avoir aucun risque que l'arrière-plan soit trop court et invisible avec des valeurs de progression faibles, car le pouce le superposerait et le cacherait dans tous les cas.

<?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/seekbar_background"
        Android:left="2dp"><!-- or 1dp -->
    </item>
    <item Android:id="@Android:id/progress">
        <clip Android:drawable="@drawable/seekbar_progress"/>
    </item>
</layer-list>
15
David Medenjak

Observation

Lorsque vous créez une ligne à l'aide d'une forme dessinable, elle laisse le remplissage gauche et droit (de la vue dans laquelle ce dessin est utilisé.) Égal à la moitié de sa largeur de trait.

Solution

Vous devez envelopper votre progress_background avec un encart pouvant être dessiné, puis le définir comme arrière-plan de progression. L'encart peut être comme le suivant-

inset_seekbar_background.xml

<inset xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:drawable="@drawable/seekbar_progress"
    Android:insetLeft="2dp"
    Android:insetRight="2dp" />

et votre dernier barre de recherche.xml sera comme-

<?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/inset_seekbar_background"/>
    <item Android:id="@Android:id/progress">
        <clip Android:drawable="@drawable/seekbar_progress" />
    </item>

</layer-list>

Suppléants

1.Vous pouvez utiliser une image à 9 chemins pour la ligne comme cela se fait dans la conception de matériau par défaut -

<?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/abc_scrubber_primary_mtrl_alpha" />
    <item Android:id="@Android:id/secondaryProgress">
        <scale Android:scaleWidth="100%">
            <selector>
                <item Android:state_enabled="false">
                    <color Android:color="@Android:color/transparent" />
                </item>
                <item Android:drawable="@drawable/abc_scrubber_primary_mtrl_alpha" />
            </selector>
        </scale>
    </item>
    <item Android:id="@Android:id/progress">
        <scale Android:scaleWidth="100%">
            <selector>
                <item Android:state_enabled="true">
                    <color Android:color="@Android:color/transparent" />
                </item>
                <item Android:drawable="@drawable/abc_scrubber_primary_mtrl_alpha" />
            </selector>
        </scale>
    </item>
</layer-list><!-- From: file:/usr/local/google/buildbot/src/googleplex-Android/mnc-supportlib-release/frameworks/support/v7/appcompat/res/drawable/abc_seekbar_track_material.xml -->

enter image description hereenter image description hereenter image description hereenter image description here

2.Vous pouvez définir le thème à votre vue avec des couleurs différentes dans Android style as-

<style name="AppTheme.SeekBar">
        <item name="colorPrimary">@color/colorAccent</item>
        <item name="colorPrimaryDark">@color/colorPrimary</item>
        <item name="colorAccent">@color/colorPrimaryDark</item>
</style>

Ici, j'ai utilisé toutes les options pour Seekbars-

            <SeekBar 
                Android:layout_width="match_parent"
                Android:layout_height="wrap_content"
                Android:theme="@style/AppTheme.SeekBar" />

            <SeekBar
                Android:layout_width="match_parent"
                Android:layout_height="wrap_content" />

            <SeekBar
                Android:layerType="software"
                Android:layout_width="match_parent"
                Android:layout_height="wrap_content"
                Android:progressDrawable="@drawable/seekbar" />

Et voici la sortie- enter image description here

7
Sanjeet A

Essayez d'utiliser un dessin .9.png de 4dp de largeur (converti en px).

Gardez 1 dp en haut et en bas transparent.

Et ajoutez de la couleur au centre 2 dp de votre choix pour l'arrière-plan.

De cette façon, l'arrière-plan et la progression auront la même largeur, mais l'arrière-plan sera plus fin que la barre de progression.

3
Arnab Jain

Comme il semble que le problème soit en cours, je pense qu'ils devraient tous deux être de la même largeur

mais vous en cours faites largeur = 4 Android:width="4dp"

et la largeur de la barre de recherche = 2 Android:width="2dp"

il suffit de les faire correspondre à 2 ou 4 n'utilisez pas de valeurs différentes

3
Mina Fawzy

Essayez comme ceci en utilisant Android:layout_marginLeft="-3dp" ou -2dp

<SeekBar
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:layout_below="@Android:id/summary"
    Android:background="@null"
    Android:layout_marginLeft="-2dp"
    Android:progressDrawable="@drawable/seekbar"
    Android:thumb="@drawable/seekbar_thumb"/>`
2
SudheeR Bolla

Si vos choix de couleur ont une limite et sont prédéfinis. Vous pouvez essayer d'ajouter des fichiers XML avec Seekbars en utilisant différents thèmes.

Quelque chose comme ça:

themed_seekbar_one.xml

<?xml version="1.0" encoding="utf-8"?>
<SeekBar
    ...
    Android:theme="@style/first_theme">
</SeekBar>

themed_seekbar_two.xml

<?xml version="1.0" encoding="utf-8"?>
<SeekBar
    ...
    Android:theme="@style/second_theme">
</SeekBar>

Vous pouvez ensuite gonfler les vues par programme comme ceci:

SeekBar seekbar = (SeekBar)getLayoutInflater().inflate(R.layout.themed_seekbar_xxx, null);
2
user5156016