Pasek postępu z zaokrąglonymi narożnikami?

Question

staram się osiągnąć ten pasek postępu wzorem:

aktualny kod, który mam produkuje to:

Jest to kod:

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

Mój pasek postępu:

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

Próbowałem dodać atrybutu <size> na <shape> w <clip, aby nieco zmienić kształt postępu, ale nie zadziałało. Pasek postępu jest również płaski i chcę go wygiąć zgodnie z projektem. Co muszę zmienić, aby osiągnąć projekt?

Answer 1

Jak sprawić, aby kształt postępu był nieco mniejszy?

Trzeba dać artykuł postępu trochę wyściółkę, tak:

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

Jak zrobić pasek postępu być zakrzywiony jak za projekt?

Wymień element <clip></clip>, używając <scale android:scaleWidth="100%"></scale>. To sprawi, że kształt będzie zachowywał swój kształt, gdy będzie rósł - a nie odcinany. Niestety, na początku będzie to miało niewielki niepożądany efekt wizualny, ponieważ narożniki kształtów nie mają wystarczającej przestrzeni do narysowania. Ale w większości przypadków może być wystarczająco dobre.

Pełny kod:

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