Thanh tiến trình với các góc tròn?

Question

Tôi cố gắng để đạt được điều này thiết kế thanh tiến trình:

Mã hiện tại mà tôi có sản xuất này:

Đây là mã:

<item android:id="@android:id/background"> 
    <shape> 
     <corners android:radius="8dp"/> 
     <solid android:color="@color/dirtyWhite"/> 
    </shape> 
</item> 

<item android:id="@android:id/progress"> 
    <clip> 
     <shape> 
      <corners android:radius="8dp"/> 
      <solid android:color="@color/colorPrimaryDark"/> 
     </shape> 
    </clip> 
</item> 

Thanh tiến trình của tôi:

<ProgressBar 
      android:id="@+id/activeProgress" 
      style="?android:attr/progressBarStyleHorizontal" 
      android:layout_width="300dp" 
      android:layout_height="wrap_content" 
      android:layout_weight="1" 
      android:progress="10" 
      android:progressDrawable="@drawable/rounded_corners_progress_bar"/> 

Tôi đã thử thêm thuộc tính <size> trên <shape> trong <clip để làm cho hình dạng tiến trình nhỏ hơn một chút nhưng không hoạt động. Ngoài ra, thanh tiến trình bằng phẳng và tôi muốn bị cong theo thiết kế. Những gì tôi cần phải thay đổi để đạt được thiết kế?

Answer 1

Cách tạo hình dạng tiến trình nhỏ hơn một chút?

Bạn cần phải cung cấp cho các mục tiến bộ một chút đệm, như vậy:

<item android:id="@android:id/progress" 
    android:top="2dp" 
    android:bottom="2dp" 
    android:left="2dp" 
    android:right="2dp"> 

Làm thế nào để làm cho các thanh tiến trình để được uốn cong theo thiết kế?

Thay thế phần tử <clip></clip>, bằng <scale android:scaleWidth="100%"></scale>. Điều đó sẽ làm cho hình dạng giữ hình dạng của nó khi nó phát triển - và không bị cắt đứt. Thật không may, nó sẽ có một chút hiệu ứng hình ảnh không mong muốn ngay từ đầu - vì các góc hình dạng không có đủ không gian để vẽ. Nhưng nó có thể đủ tốt cho hầu hết các trường hợp.

Full mã:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android"> 
<item android:id="@android:id/background"> 
    <shape> 
     <corners android:radius="8dp"/> 
     <solid android:color="@color/dirtyWhite"/> 
    </shape> 
</item> 

<item android:id="@android:id/progress" 
    android:top="1dp" 
    android:bottom="1dp" 
    android:left="1dp" 
    android:right="1dp"> 

    <scale android:scaleWidth="100%"> 
     <shape> 
      <corners android:radius="8dp"/> 
      <solid android:color="@color/colorPrimaryDark"/> 
     </shape> 
    </scale> 
</item> 
</layer-list>