Индикатор выполнения Android с отступом

Я хочу, чтобы мой индикатор выполнения выглядел примерно так:

введите здесь описание изображения

Я не хочу использовать изображения, поэтому я попытался сделать это с помощью фигур:

<item android:id="@android:id/background">
    <shape>
        <corners android:radius="50dp" />

        <gradient
            android:angle="270"
            android:centerColor="#2a2723"
            android:centerY="0.75"
            android:endColor="#2a2723"
            android:startColor="#2a2723" />
    </shape>
</item>
<item android:id="@android:id/secondaryProgress">
    <clip>
        <shape>
            <corners android:radius="50dp" />

            <gradient
                android:angle="270"
                android:centerColor="#16e61c"
                android:centerY="0.75"
                android:endColor="#9dfd6e"
                android:startColor="#16e61c" />
        </shape>
    </clip>
</item>
<item android:id="@android:id/progress">
    <clip>
        <shape>
            <corners android:radius="50dp" />

            <gradient
                android:angle="270"
                android:endColor="#9dfd6e"
                android:startColor="#16e61c" />
        </shape>
    </clip>
</item>

But I cant set padding for the green line (Ive tried to set its everywhere where it was possible), and also I can't make such round corners (looks like corners android:radius isn't working). Please help me


android android-progressbar
person pleerock    schedule 20.01.2012    source источник

Ответы (4)


arrow_upward
8
arrow_downward 

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/background">
        <shape>
            <solid android:color="#222" />
            <corners android:radius="10dp" />
        </shape>
    </item>
    <item android:id="@android:id/progress">
        <clip>
            <layer-list>
                <item>
                    <color android:color="#00000000" />
                </item>
                <item
                    android:left="5dp"
                    android:top="5dp"
                    android:right="5dp"
                    android:bottom="5dp">
                    <shape>
                        <solid android:color="#00FF00" />
                        <corners android:radius="10dp" />
                    </shape>
                </item>
            </layer-list>
        </clip>
    </item>
</layer-list>

см. мой блог

person stedi    schedule 08.09.2014
comment
Потрясающий..!! Это должен был быть принятый ответ. Большое спасибо!! Ты сэкономил мое время - person Sudhasri; 07.02.2017

arrow_upward
7
arrow_downward

Простой обходной путь — включить индикатор выполнения в макет, который имеет округлую форму и тот же цвет фона, что и индикатор выполнения.

Образец индикатора выполнения (drawable/progress_bar.xml):

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/background">
        <shape>
            <corners android:radius="50dip" />
            <solid android:color="@color/white"/>
            <padding android:bottom="3dip" android:left="3dip" android:right="3dip" android:top="3dip" />
        </shape>
    </item>

    <item android:id="@android:id/progress">
        <bitmap android:src="@drawable/test_progress_bar_progress" android:tileMode="repeat"/>
    </item>
</layer-list>

Стиль индикатора выполнения:

<resources>
    <style name="ProgressBarStyle" parent="@android:style/Widget.ProgressBar.Horizontal">
        <item name="android:layout_width">fill_parent</item>
        <item name="android:layout_height">10dip</item>
        <item name="android:max">100</item>
        <item name="android:progressDrawable">@drawable/progress_bar</item>
    </style>
</resources>

Форма макета (drawable/rounded_shape.xml):

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <padding android:top="2dip" android:left="2dip" android:right="2dip" android:bottom="2dip"/>
    <corners android:bottomRightRadius="7dp" android:bottomLeftRadius="7dp" android:topLeftRadius="7dp" android:topRightRadius="7dp"/>
    <solid android:color="@color/white"/>
</shape>

Схема деятельности:

<!-- ... -->
      <LinearLayout                     
                  android:layout_width="fill_parent"
                  android:layout_height="wrap_content"
                  android:background="@drawable/rounded_shape"
                  android:layout_marginLeft="30dip"
                  android:layout_marginRight="30dip">
            <ProgressBar
                    android:id="@+id/testSummaryProgressBar"
                    android:progress="10"
                    style="@style/ProgressBarStyle"/>
        </LinearLayout>
<!-- ... -->

Эффект:

введите здесь описание изображения

Чтобы увеличить отступ индикатора выполнения, вы должны увеличить отступ в файле rounded_shape.

person Nykakin    schedule 31.08.2012
comment
Потрясающий! Вы спасли мой день! +1 - person Adnan; 10.08.2016

arrow_upward
1
arrow_downward

Да, это возможно, не используя изображение, как предложил @Nykakin. Чтобы иметь заполнение и закругленный угол для прогресса, нужно использовать список-слой для прогресса элемента.

<item android:id="@android:id/progress">
<clip>
  <layer-list>
       <-- transparent background  -->
   <item>
       <color android:color="#00000000" />
   </item>
   <-- padding -->
   <item  
      android:left="2dp"
      android:top="2dp"
      android:right="2dp"
      android:bottom="2dp">
    <shape>
        <corners android:radius="50dp" />

        <gradient
            android:angle="270"
            android:endColor="#9dfd6e"
            android:startColor="#16e61c" />
     </shape>
   </item>
  </layer-list>
</clip>

person M'hamed    schedule 02.03.2015

arrow_upward
0
arrow_downward

К сожалению, решения своей проблемы я не нашел. Единственный способ, которым я мог сделать скругленные углы, — это использовать закругленное изображение с шагом 9 шагов.

Для этого есть хорошее руководство: http://blog.mediarain.com/2011/04/android-custom-progressbar-with-rounded-corners/

person pleerock    schedule 21.02.2012