Android ProgressBar interfaz de usuario de diseño personalizado

Question

Estoy tratando de personalizar una barra de estado por lo que se verá como esta imagen:

Sin embargo, después de un buen par de todo lo que tengo horas es una barra de estado con el fondo sólo necesito (imagen 2):

El código actual que tengo es: diseño xml:

<ProgressBar 
       android:id="@+id/pBarOverallStatus" 
       style="?android:attr/progressBarStyleHorizontal" 
       android:layout_width="0dip" 
       android:layout_height="fill_parent" 
       android:layout_marginLeft="10dip" 
       android:layout_marginRight="10dip" 
       android:layout_weight="94" 
       android:indeterminateOnly="false" 
       android:max="100" 
       android:progressDrawable="@drawable/progress_bar_states" > 
      </ProgressBar> 

El progress_bar_states.xml:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" > 

    <!-- <item android:id="@android:id/progress"> 
     <bitmap 
      android:gravity="center" 
      android:src="@drawable/progressbar_progressing" /> 

     <corners android:radius="10dp" /> 
    </item> 
    --> 

</layer-list> 

Extracción del comentario, donde proressbar_progressing parece entonces yo estoy teniendo algo un poco feo ya que no hay esquinas.

añado el fondo del código, algo así como:

overallStatus = (ProgressBar) findViewById(R.id.pBarOverallStatus); 
Resources res = getResources(); 
overallStatus.setBackgroundDrawable(res.getDrawable(R.drawable.progressbar_background)); 
overallStatus.setProgress(50); 

He intentado añadir esquinas de la imagen, pero sin suerte. ¿Alguien tiene alguna idea de lo que estoy haciendo mal aquí? ¿O qué me estoy perdiendo? Además, ¿tienes alguna idea de cómo podría agregar los anillos izquierdo y derecho? El recurso:

Answer 1

la solución (se siente raro contestando la suya): Primero, un problema m fue que el progreso dibujable tenía un tamaño diferente al de fondo (¡estúpido!). Además, para el progreso dibujable, se necesitó un clip xml. Algo así como progressbar_progress_clip.xml:

<?xml version="1.0" encoding="utf-8"?> 
<clip 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:drawable="@drawable/progressbar_progressing" 
    android:clipOrientation="horizontal" 
    android:gravity="left"/> 

A continuación, añadir la barra de progreso y de dos imágenes en una disposición relativa, por lo que las imágenes se pueden extraer después de la barra de estado. Algo como esto:

<RelativeLayout 
       android:id="@+id/relativeLayout1" 
       android:layout_width="0dip" 
       android:layout_height="fill_parent" 
       android:layout_marginLeft="10dip" 
       android:layout_marginRight="10dip" 
       android:layout_weight="94" > 

       <ProgressBar 
        android:id="@+id/pBarOverallStatus" 
        style="?android:attr/progressBarStyleHorizontal" 
        android:layout_width="fill_parent" 
        android:layout_height="fill_parent" 
        android:layout_marginBottom="2dp" 
        android:layout_marginTop="2dp" 
        android:indeterminateOnly="false" 
        android:max="100" 
        android:progressDrawable="@drawable/progressbar_progress_clip" > 
       </ProgressBar> 

       <ImageView 
        android:id="@+id/ringLeft" 
        android:layout_width="wrap_content" 
        android:layout_height="fill_parent" 
        android:layout_alignParentLeft="true" 
        android:layout_centerVertical="true" 
        android:layout_marginLeft="7dp" 
        android:contentDescription="@string/status_bar_ring" 
        android:src="@drawable/status_bar_ring" /> 

       <ImageView 
        android:id="@+id/ringRight" 
        android:layout_width="wrap_content" 
        android:layout_height="fill_parent" 
        android:layout_alignParentRight="true" 
        android:layout_centerVertical="true" 
        android:layout_marginRight="7dp" 
        android:contentDescription="@string/status_bar_ring" 
        android:src="@drawable/status_bar_ring" /> 
      </RelativeLayout> 

Gracias, muchachos!

Answer 2

En primer lugar crear un nuevo archivo XML dibujable:

<?xml version="1.0" encoding="UTF-8"?> 
<shape 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="rectangle"> 

    <corners 
     android:bottomRightRadius="7dp" 
     android:bottomLeftRadius="7dp" 
     android:topLeftRadius="7dp" 
     android:topRightRadius="7dp"/> 

</shape> 

Luego, en su diseño, añadir el siguiente atributo a la barra de progreso:

android:background="@drawable/the_file_you_previously_created"

Answer 3

Puede hacer un FrameLayout con un ImageView sosteniendo su dibujo y establecer su valor alfa a un valor bajo. Luego crea una ProgressBar con un ClipDrawable en el mismo FrameLayout. Y establezca el valor de ClipDrawable en su actualización de progreso.

Código:

<FrameLayout 
     android:layout_gravity="center" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content"> 

    <ProgressBar 
     android:max="100" 
     android:id="@+id/progress_bar" 
     android:layout_gravity="center" 
     style="?android:attr/progressBarStyleHorizontal" 
     android:layout_width="200dp" 
     android:layout_height="200dp" 
     android:progressDrawable="@drawable/custom_progress_image" 
     android:layout_marginRight="5dp" /> 

     <ImageView 
      android:alpha="0.4" 
      android:src="@drawable/app_logo" 
      android:layout_gravity="center" 
      android:layout_width="200dp" 
      android:layout_height="200dp" /> 
</FrameLayout>