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

Ich möchte diese Suchleiste in meinem Android-Projekt haben:

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):

Und das ist das Ergebnis:

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

Ich verstehe wirklich nicht, wie ich es machen kann.

• 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.

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

Alles über vectorsdiese Tage ...

Bildschirmfoto:

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>

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_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:

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

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

Es erfordert die Version 1.2.0 der Bibliothek.

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 .

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"

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>

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.

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