Android ProgressBar UI bố trí tùy chỉnh

Question

Tôi cố gắng để tùy chỉnh một thanh trạng thái vì vậy nó sẽ trông giống như hình ảnh này:

Tuy nhiên, sau một vài tốt giờ tất cả tôi có là một thanh trạng thái với nền Tôi chỉ cần (hình 2):

mã hiện tại tôi có là: bố cục 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> 

Các 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> 

Xóa nhận xét, trong đó proressbar_progressing trông giống như thì tôi có thứ gì đó hơi xấu xí vì không có góc.

Tôi thêm nền từ mã, một cái gì đó như:

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

Tôi cố gắng thêm góc để hình ảnh nhưng không có may mắn. Có ai có bất kỳ ý tưởng những gì tôi đang làm sai ở đây? Hoặc tôi đang thiếu gì? Ngoài ra, bạn có bất kỳ ý tưởng làm thế nào tôi có thể thêm các vòng trái và phải không? Nguồn:

Answer 1

Các giải pháp (cảm thấy lạ khi trả lời cho chính bạn): Thứ nhất, một lần m là tiến trình có thể vẽ được có kích thước khác với nền (ngu ngốc tôi!). Ngoài ra, đối với tiến trình drawable một clip xml là cần thiết. Một cái gì đó như 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"/> 

Sau đó, thêm thanh tiến trình và hai ảnh trong bố cục tương đối để hình ảnh có thể được vẽ sau thanh trạng thái. Một cái gì đó như thế này:

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

Cảm ơn các bạn!

Answer 2

Đầu tiên tạo một file XML drawable mới:

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

Sau đó, trong cách bố trí của bạn, thêm thuộc tính sau để thanh tiến trình của bạn:

android:background="@drawable/the_file_you_previously_created"

Answer 3

Bạn có thể tạo FrameLayout bằng ImageView để giữ được đối tượng có thể vẽ và đặt giá trị alpha của nó thành giá trị thấp. Sau đó tạo một ProgressBar với một ClipDrawable trong cùng một FrameLayout. Và đặt giá trị của ClipDrawable trong bản cập nhật tiến trình của bạn.

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>