programacion - Android: SeekBar con dibujo personalizable

manual de android en pdf

Question

Tengo SeekBar con dibujo personalizable. El elemento de progreso no se representa exactamente desde el lado izquierdo pero se mueve hacia la derecha. ¿Cómo puedo evitar esto?

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

EDITAR:

Como se mencionó en los comentarios, si hay ambos anchos, desaparecerá el mismo problema. Pero necesito hacerlo con dos anchos diferentes a través de dibujable, ¿es posible? Tal vez con diferentes formas no solo líneas?

Answer 1

Como parece ser el problema en progreso, creo que ambos deben ser del mismo ancho.

pero en progreso haces ancho = 4 android:width="4dp"

y ancho de la barra de búsqueda = 2 android:width="2dp"

simplemente hazlos coincidir para que sean 2 o 4, no uses valores diferentes

Answer 2

Intente usar un .9.png dibujable de ancho 4dp (convertido a px).

Mantenga 1 dp en la parte superior e inferior transparente.

Y añada color al centro 2 dp de su elección para el fondo.

De esta manera, tanto el fondo como el progreso tendrán el mismo ancho, pero el fondo se verá más delgado que la barra de progreso.

Answer 3

No puedo explicar por qué esto es un problema al dibujar trazos, creo que tiene algo que ver con el ancho de los trazos, pero aún no encontré la fuente para verificar.

Arreglando la Superposición

Para eliminar el problema en cuestión, simplemente puede colocar un inset en su lado izquierdo. Un valor de 2dp o 2dp funciona y la barra de búsqueda se dibujará correctamente.

Nota: Al utilizar este enfoque, no debe haber riesgo de que el fondo sea demasiado corto y no sea visible con valores de progreso bajos, ya que el pulgar se superpondría y ocultaría en cualquier caso.

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

Answer 4

Prueba esto usando android:layout_marginLeft="-3dp" o -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"/>`

Answer 5

Si su elección de color tiene un límite y está predefinida. Puedes intentar agregar archivos XML con Seekbars usando diferentes temas.

Algo como esto:

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>

Luego puedes inflar las vistas programáticamente de esta manera:

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

Answer 6

Observación

Cuando creas una línea usando la forma dibujable, deja el relleno izquierdo y derecho (desde la vista en la que se está utilizando este dibujo) igual a la mitad de su ancho de trazo.

Solución

Necesita envolver su progress_background con un inserta drawable y luego configurarlo como fondo de progreso. El recuadro puede ser como el siguiente:

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

y tu último seekbar.xml será como-

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

Suplentes

1.Usted puede usar una imagen de 9 rutas para la línea como se hace en el diseño de material predeterminado

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

2.Usted puede configurar el tema a su vista con diferentes colores en el estilo de Android-

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

Aquí he usado todas las opciones para 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" />

Y aquí está la salida.