Benutzerdefinierte Suchleiste (Daumengröße, Farbe und Hintergrund)

70

Ich möchte diese Suchleiste in meinem Android-Projekt haben: Geben Sie hier die Bildbeschreibung ein

Das ist meine Suchleiste:

<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" />

Dies ist meine 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>

Dies ist meine 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>

Dies ist meine seekbar.png (Hintergrund):

Geben Sie hier die Bildbeschreibung ein

Und das ist das Ergebnis: Geben Sie hier die Bildbeschreibung ein

Kein Schatten und keine abgerundeten Ränder in der Leiste ...

Ich verstehe wirklich nicht, wie ich es machen kann.

android  seekbar  android-slider 
— Gabriele Mariotti
quelle
Was sind diese blauen Farblinien in Ihrem gewünschten Ausgabebild?
— Charu ක
3
Haben Sie versuchtandroid:minHeight android:maxHeight
— Charu ක
1
Verwenden Sieandroid:progressDrawable
— IntelliJ Amiya
das funktioniert nicht
1
Eine Randbemerkung: Wenn Sie die SeekBar der gesetzt android:minHeightund android:maxHeightauf den gleichen großen Wert, wird es den ‚Treffer‘ Bereich des Daumens zu erhöhen, ist es viel leichter zu greifen und zu verschieben (Set beiden Werte zu vermeiden Fehler auf Android 4.4) zu machen. Android 6/7 hat eine standardmäßige SeekBar-Höhe, die sehr klein ist, was das Klicken erschwert.
— Mr-IDE

Antworten:

64

  • Verwenden Sie zunächst android:splitTrack="false"für das Transparenzproblem Ihres Daumens.

  • Für die Datei seekbar.png müssen Sie einen 9-Patch verwenden . Es wäre gut für den abgerundeten Rand und den Schatten Ihres Bildes.

— Jéwôm '
quelle
2
Ich habe das erste Mal daran gearbeitet, als das Kopfgeld angeboten wurde (ohne Glück). Wenn ich nur 'splitTrack' hinzufüge, funktioniert meine. Gute Antwort.
— Gary99
118

Alles erledigt in XML(keine .pngBilder). Das Schlaue ist border_shadow.xml.

Alles über vectorsdiese Tage ...

Bildschirmfoto:

Suchleiste
Dies ist dein SeekBar( res/layout/???.xml):

Suchleiste

<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"/>

Machen wir es stilvoll (damit Sie es später einfach anpassen können):

Stil

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>

Daumen

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>

Fortschritt

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>

Schatten

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>
— Jon Goodwin
quelle
14
Diese Antwort muss nur android:splitTrack="false"zur Suchleiste hinzugefügt werden, damit der Daumen beim Bewegen keine weißen Ecken zeigt. Aber vielen Dank!
— Thechaoticpanda
@thechaoticpanda ja (android: splitTrack = "false"), aber Jéwôm '(akzeptiert) antwortete, ich klaue niemandem den Donner, hoffe nur, der Community etwas hinzuzufügen (hoffnungsvoll mit einer einzigartigen Perspektive, mit gutem Code / Rationalität) ... Vielleicht werde ich einen XMLKommentarbereich einfügen. Könnte interessant sein zu sehen, wie Android es macht (Schatten) ...
— Jon Goodwin
1
Wenn Sie damit anfangen, vergessen Sie nicht, android hinzuzufügen: minHeight = "11dp" android: maxHeight = "11dp", sonst werden Sie "Probleme mit der Suchleiste-Daumen-Zentrierung" haben
— Shyak Das
18

Kein Schatten und keine abgerundeten Ränder in der Leiste

Sie verwenden ein Bild, sodass die einfachste Lösung darin besteht, Ihr Boot mit dem Fluss zu rudern.

Sie können Höhen nicht manuell angeben, ja, Sie können jedoch sicherstellen, dass genügend Platz vorhanden ist, um Ihre vollständige Bildansicht dort anzuzeigen

  • Der einfachste Weg ist die Verwendung android:layout_height="wrap_content"fürSeekBar
  • Um klarere, abgerundete Ränder zu erhalten, können Sie problemlos dasselbe Bild verwenden, das Sie mit einer anderen Farbe verwendet haben.

Ich bin nicht gut mit Photoshop, aber ich habe es geschafft, einen Hintergrund für einen Test zu bearbeiten

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 ist dasselbe wie deins

Schließlich android:splitTrack="false"wird der unerwünschte Leerraum in Ihrem Daumen entfernt

Werfen wir einen Blick auf die Ausgabe:

Geben Sie hier die Bildbeschreibung ein

— Charu ක
quelle
14

Benutzerdefinierte SeekBar für Android - Benutzerdefinierte Verfolgung oder Fortschritt, Form, Größe, Hintergrund und Daumen. Weitere Anpassungen der Suchleiste finden Sie unter http://www.zoftino.com/android-seekbar-and-custom-seekbar-examples

Benutzerdefinierte Spur zeichnbar 

<?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>

Benutzerdefinierter Daumen zeichnbar

?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>

Ausgabe

Geben Sie hier die Bildbeschreibung ein

— Arnav Rao
quelle
1
Bitte erläutern Sie die Relevanz von, <Scale>da der Code ohne dieses Tag nicht ordnungsgemäß funktioniert. :)
— Daksh Gargas
8

Sie können den Beamten Sliderin der Materialkomponentenbibliothek verwenden.

Verwenden Sie den app:trackHeight="xxdp"(Standardwert ist 4dp), um die Höhe der Spurleiste zu ändern.

Verwenden Sie auch diese Attribute, um die Farben anzupassen:

  • app:activeTrackColor: die aktive Spurfarbe
  • app:inactiveTrackColor: die inaktive Spurfarbe
  • app:thumbColor: um den Daumen zu füllen

Etwas wie:

    <com.google.android.material.slider.Slider
        android:id="@+id/slider"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:activeTrackColor="#ffd400"
        app:inactiveTrackColor="#e7e7e7"
        app:thumbColor="#ffb300"
        app:trackHeight="12dp"
        .../>

Geben Sie hier die Bildbeschreibung ein

Es erfordert die Version 1.2.0 der Bibliothek.

— Gabriele Mariotti
quelle
Können Sie mir helfen, wie ich diese Materialbibliothek in mein Kotlin-Projekt einfügen kann?
— Anas Reza
@AnasReza Fügen Sie einfach die Abhängigkeit in Ihr build.gradle ein. Hier alle Infos
— Gabriele Mariotti
Ist es möglich, das Daumensymbol anzupassen?
— Kuvonchbek Yakubov
@ KuvonchbekYakubov Derzeit können Sie diese Attribute anpassen: github.com/material-components/material-components-android/blob/…
— Gabriele Mariotti
@ GabrieleMariotti Es wäre großartig, wenn Sie eine Anpassung für das Daumensymbol mit Daumenhöhe hinzufügen würden. Die SeekBar hat keine thumbElevation und der Slider hat kein benutzerdefiniertes Thum.
— Kuvonchbek Yakubov
7

Zuerst geht die Höflichkeit an @Charuka .

TUN

Sie können android:progressDrawable="@drawable/seekbar"anstelle von verwenden android:background="@drawable/seekbar".

progressDrawable wird für den Fortschrittsmodus verwendet.

Du solltest es versuchen mit

android: minHeight

Definiert die minimale Höhe der Ansicht. Es kann nicht garantiert werden, dass die Ansicht diese Mindesthöhe erreichen kann (z. B. wenn das übergeordnete Layout eine geringere verfügbare Höhe einschränkt).

android: minBreite

Definiert die minimale Breite der Ansicht. Es kann nicht garantiert werden, dass die Ansicht diese Mindestbreite erreichen kann (z. B. wenn das übergeordnete Layout eine geringere verfügbare Breite einschränkt).

    android:minHeight="25p"
    android:maxHeight="25dp"

Zu Ihrer Information:

Verwenden von android: minHeight und android: maxHeight sind keine guten Lösungen. Sie müssen Ihre benutzerdefinierte Suchleiste (ab Klassenstufe) korrigieren .

— IntelliJ Amiya
quelle
@ Jewom werfen Sie einen Blick hier android-examples.com/…
— IntelliJ Amiya
5

Verwenden Sie Farbtöne;)

<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"/>

Verwenden Sie die Farbe, die Sie in thumbTint und progressTint benötigen. Es ist viel schneller! :) :)

Bearbeiten Sie ofc, das Sie in Kombination mit verwenden können android:progressDrawable="@drawable/seekbar"

— Raphau
quelle
Danke, aber mit Tint ändert sich das Problem nicht. Und ich muss die Größe des Daumens ändern.
1
Dies erfordert
— mindestens
4

android: minHeight android: maxHeight ist dafür wichtig.

<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>
— lingyfh
quelle
2

Für zukünftige Leser!

Ab Material-Komponenten-Android 1.2.0-Alpha01 können Sie neue sliderKomponenten verwenden

Ex:

Ändern thumbSize, thumbColor, trackColorentsprechend.

<com.google.android.material.slider.Slider
        android:id="@+id/slider"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:valueFrom="20f"
        android:valueTo="70f"
        android:stepSize="10"
        app:thumbRadius="20dp"
        app:thumbColor="@color/colorAccent"
        app:trackColor="@android:color/darker_gray"
        />

Hinweis: Gleisecken sind nicht rund.

— user158
quelle
-2

Sie können die Fortschrittsanzeige anstelle der Suchleiste ausprobieren

<ProgressBar
    android:id="@+id/progressBar"
    style="?android:attr/progressBarStyleHorizontal"
    android:layout_width="fill_parent"
    android:layout_height="50dp"
    android:layout_marginBottom="35dp"
    />
— emme
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.