Пользовательская панель поиска (размер большого пальца, цвет и фон)

Я хотел бы иметь этот поиск в моем проекте Android: введите описание изображения здесь

Это мой поиск:

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

Это мой 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>

Это мой 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>

Это мой seekbar.png(фон):

введите описание изображения здесь

И это результат: введите описание изображения здесь

Без тени и без округлых границ в баре...

Я действительно не понимаю, как я могу это сделать.

Ответ 1

  • Во-первых, используйте android:splitTrack="false" для проблемы прозрачности большого пальца.

  • Для seekbar.png вы должны использовать 9 патчей. Это было бы хорошо для закругленной границы и тени вашего изображения.

Ответ 2

Все сделано в XML (без .png изображений). Умный бит border_shadow.xml.
Снимок экрана:
searchbar
Это ваш SeekBar (res/layout/):

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

Рез/рисуем/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>

Рез/рисуем/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>

Рез/рисуем/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>

Рез/рисуем/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>

Ответ 3

Отсутствие тени и отсутствие закругленных границ в панели

Вы используете изображение, поэтому самым простым решением является строка вашей лодки с потоком,

Вы не можете дать высоту вручную, да, вы можете, но убедитесь, что у вас достаточно места, чтобы показать ваше полное изображение.

  • Самый простой способ - использовать android:layout_height="wrap_content" для SeekBar
  • Чтобы получить более четкие округленные границы, вы можете легко использовать одно и то же изображение, которое вы использовали с другим цветом.

Мне не нравится Photoshop, но мне удалось отредактировать фоновый для теста

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 совпадает с вашим

Наконец android:splitTrack="false" удалит ненужное пустое место в вашем большом пальце

Посмотрим на результат:

введите описание изображения здесь

Ответ 4

Сначала любезность отправляется в @Charuka.

DO

Вы можете использовать android:progressDrawable="@drawable/seekbar" вместо android:background="@drawable/seekbar".

progressDrawable, используемый для режима прогресса.

Вам следует попробовать

android:minHeight

Определяет минимальную высоту представления. Не гарантируется вид сможет достичь этой минимальной высоты (например, если ее родительский макет ограничивает его доступной высотой).

android:minWidth

Определяет минимальную ширину представления. Не гарантируется вид сможет достичь этой минимальной ширины (например, если ее родительская макет ограничивает его доступной шириной)

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

FYI:

Использование android: minHeight and android: maxHeight не является хорошим решением. Нужно исправить свой Custom Seekbar (от уровня класса).

Ответ 5

Android Custom SeekBar - пользовательский трек или прогресс, форма, размер, фон и большой палец, а также другие настройки для поиска. http://www.zoftino.com/android-seekbar-and-custom-seekbar-examples p >

Пользовательский отслеживаемый трафик

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

Выделенный пользовательский палец

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

Выход

введите описание изображения здесь

Ответ 6

Вы можете попробовать индикатор выполнения вместо строки поиска

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

Ответ 7

Использовать оттенки;)

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

используйте цвет, который вам нужен в thumbTint и progressTint. Это намного быстрее!:)

Редактирование можно использовать в комбинации с android:progressDrawable="@drawable/seekbar"