2

Что хочу сделать:

такой вот SeekBar(икнонка громкости слева не в счет) введите сюда описание изображения

В этом SeekBar мне нужно, чтобы я мог задавать размер progress-полоски, размер thumb(круга синего) и их цвет.

Вопросы:

  1. Как грамотно делать кастомизацию SeekBar'y ? (Прогресс-полоска должна быть .9.png картинкой или это все нужно делать с помощью drawable shape ?)

Если делать с помощью png картинок - все нормально выходит.

Дизайнер делает картинки: background, progress6 sceondary progress, thumb и все ок.

Если делать с помощью shape все - то выходит так, что полоска прогресса всегда одного большого размера и я не могу его изменить. Код ниже:

layout.xml:

    <SeekBar
        android:layout_width="306dp"
        android:layout_height="wrap_content"
        android:progressDrawable="@drawable/seek_bar_progress"
        android:thumb="@drawable/seek_bar_thumb"/>

seek_bar_progress.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 android:shape="rectangle">
        <solid android:color="#FFFFFF" />
    </shape>
</item>
<item android:id="@android:id/secondaryProgress">
    <shape android:shape="rectangle">
        <solid android:color="#FFFFFF" />
    </shape>
</item>
<item android:id="@android:id/progress">
    <shape android:shape="rectangle">
        <solid android:color="#0000FF" />
    </shape>
</item>
</layer-list>

seek_bar_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="#0000FF"/>
            <size android:height="31dp" android:width="31dp"/>
        </shape>
    </item>
</layer-list>

1 ответ 1

1

Пример моего SeekBar:

Пример SeekBar

У меня известна высота бара: 10dp, соответственно код такой:

<SeekBar
        android:layout_height="wrap_content"
        android:id="@+id/progress"
        android:layout_alignParentTop="true"
        android:layout_toRightOf="@+id/play"
        android:layout_toEndOf="@+id/play"
        android:layout_width="match_parent"
        android:layout_above="@+id/time"
        android:thumb="@drawable/seekbar_tracker"
        android:progress="0"
        android:progressDrawable="@drawable/seekbar"
        android:maxHeight="10dp"
        android:minHeight="10dp"
        android:layout_marginLeft="12dp"
        android:layout_marginStart="12dp"
        tools:progress="10"
        android:padding="0dp"
        android:layout_centerVertical="true" />

Код seekbar_tracker.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <solid android:color="#5F77C1"/>
    <size android:height="10dp" android:width="3dp"/>
</shape>

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/seek_bar_background"/>
    <item android:id="@android:id/progress" android:drawable="@drawable/seek_bar_progress"/>
</layer-list>

seek_bar_background.xml:

<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:top="4dp" android:bottom="4dp">
        <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
            <solid android:color="#BCC2D3"/>
            <size android:height="2dp"/>
        </shape>
    </item>
</layer-list>

seek_bar_progress.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/seek_bar_background"/>
    <item android:id="@android:id/progress">
        <clip android:drawable="@drawable/seek_bar_progress_fill" />
    </item>
</layer-list>

seek_bar_progress_fill.xml:

<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:top="4dp" android:bottom="4dp">
        <shape xmlns:android="http://schemas.android.com/apk/res/android" >
            <solid android:color="#5F77C1"/>
            <size android:width="1dp" android:height="2dp"/>
        </shape>
    </item>
</layer-list>

Решение в добавлении атрибутов android:top="4dp" и android:bottom="4dp" в seekbar.xml. Суть в том, что т.к. требуемая высота полоски SeekBar 2dp, а высота всего SeekBar 10dp, мы задаём отступы сверху и снизу (10 - 2)/2 dp, таким образом центрируем полоску.

Важно Бэкграунд в данном решении не работает для API 17, API 22 (на других не тестировал), а вот на API 23 всё работает прекрасно. Видимо пока для бэкграунда правильнее использовать .9 изображения

3
  • 1
    Спасибо за ответ! Очень качественный ответ!
    – researcher
    21 окт 2016 в 15:19
  • Пожалуйста. Рад помочь) 21 окт 2016 в 15:25
  • К сожалению, при проверке на рабочем устройстве background так и продолжает растягиваться, хотя с прогрессом всё нормально. Боюсь, что для реализации узкого background нужно использовать всё же .9 изображения 24 окт 2016 в 9:28

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.