Android ProgressBar UI benutzerdefiniertes Layout

Question

Ich versuche, eine Statusleiste anpassen, so dass es wie dieses Bild aussehen:

Doch nach einem guten paar Stunden alles was ich habe ist eine Statusleiste mit dem Hintergrund ich nur brauchen (Bild 2):

Der aktuelle Code, den ich habe, ist: xml Layout:

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

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

Entfernen der Kommentar, wo proressbar_progressing sieht aus wie dann ich etwas ein bisschen hässlich habe, da es keine Ecken sind.

Ich füge den Hintergrund von Code, so etwas wie:

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

Ich habe versucht, Ecken zum Bild hinzuzufügen, aber kein Glück. Hat jemand eine Idee, was ich hier falsch mache? Oder was vermisse ich? Haben Sie auch eine Idee, wie ich die linken und rechten Ringe hinzufügen könnte? Die Ressource:

Answer 1

Der Lösung (fühlt sich komisch an Ihre eigenen Antworten): Zuerst ein Problem Ich hatte den Vorteil, dass der Fortschrittsfaktor eine andere Größe hatte als der Hintergrund (dumm von mir!). Für den Fortschritt beim Zeichnen wurde auch ein Clip-XML benötigt. So etwas wie 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"/> 

Dann fügen Sie die Fortschrittsbalken und zwei Bilder in einem relativen Layout, so dass die Bilder können nach der Statusleiste gezogen werden. Etwas wie dieses:

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

Danke, Leute!

Answer 2

zunächst eine neue ziehbar XML-Datei erstellen:

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

Dann in Ihrem Layout, fügen Sie das folgende Attribut zu Ihrem Fortschrittsbalken:

android:background="@drawable/the_file_you_previously_created"

Answer 3

Sie können ein FrameLayout mit einem ImageView machen, das Ihr Zeichenobjekt enthält, und den Alpha-Wert auf einen niedrigen Wert setzen. Erstellen Sie dann eine ProgressBar mit einem ClipDrawable im selben FrameLayout. Und legen Sie den Wert von ClipDrawable in Ihrem Fortschrittsupdate fest.

Code:

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