角が丸いプログレスバー?


85

私はこのプログレスバーのデザインを達成しようとしています: ここに画像の説明を入力してください

私が持っている現在のコードはこれを生成します: ここに画像の説明を入力してください

これはコードです:

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

私のプログレスバー:

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

進行状況の形状を少し小さくするため<size>に、<shape>に属性を追加しようとしました<clipが、機能しませんでした。また、プログレスバーはフラットなので、デザイン通りにカーブさせたいです。デザインを実現するために何を変更する必要がありますか?


回答:


170

プログレスシェイプを少し小さくするにはどうすればよいですか?

次のように、進行状況アイテムに少しパディングを付ける必要があります。

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

プログレスバーをデザインどおりに湾曲させるにはどうすればよいですか?

を交換してください <clip></clip>要素を<scale android:scaleWidth="100%"></scale>。にます。これにより、形状は成長しても形を保ち、切り取られることはありません。残念ながら、シェイプのコーナーには描画するのに十分なスペースがないため、最初は少し望ましくない視覚効果があります。しかし、ほとんどの場合、それで十分かもしれません。

完全なコード:

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

4
@habibullahネイティブのProgressBarとLayer-Listの使用は非常に制限されています。ニーズに合わせてカスタムプログレスバーを簡単に実装できます。たとえば、背景が単色の場合は、前景の9パスを使用して、進行状況以外のすべてを非表示にします。新しいAndroidバージョンをターゲットにしている場合は、組み込みのマスクサポートを使用できます(古いバージョンではサポートされていません)。別のオプションはライブラリを使用することです。これはあなたにとって良いかもしれません:github.com/akexorcist/Android-RoundCornerProgressBar。それでも問題が解決しない場合は、新しい質問を投稿してください。乾杯。
Eyal Biran 2017年

1
@AkshayMahajan上記のコメントを参照
Eyal Biran

1
完全なコードを適用すると、進行状況が100%ではありませんが、進行状況バー全体がメインの色(colorPrimaryDark)で色付けされました。@ android:id / backgroundの下にクリップタグを追加しました。修正されましたが、背景がなくなりました。私の一時的な解決策は、背景アイテムを削除し、レイアウトに背景色を追加することです(角を丸くしないでください)。
OğuzhanKoşar

6
私の場合、scalewithandroid:scaleWidth="100%"は、角を丸くして表示するためにトリックを実行しました。多くの感謝
エジソンスペンサー

1
ありがとう。あなたは私の日を救った。
アエン・アイン・トゥアン

9

マテリアルコンポーネントライブラリでは、LinearProgressIndicatorapp:trackCornerRadius属性を使用できます。
何かのようなもの:

    <com.google.android.material.progressindicator.LinearProgressIndicator
        android:indeterminate="true"
        app:trackThickness="xxdp"
        app:trackCornerRadius="xdp"/>

ここに画像の説明を入力してください

また、進行状況インジケーターを削除しandroid:indeterminate="true"たり使用したりする場合にも機能します。android:indeterminate="false"

注:少なくともバージョンが必要1.3.0-alpha04です。


2
@Arunachalamk LinearProgressIndicator、現在最新のアルファバージョンである1.3.0-alpha04導入されました。
GabrieleMariotti20年

8

素敵な質問と画像を提供してくれたGeorgiKoemdzhievに感謝します。彼に似たものを作りたい人のために、以下をしてください。

1)の背景を作成しますProgressBar

progress_bar_background.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    >
    <corners android:radius="3dp" />
    <stroke android:color="@color/white" android:width="1dp" />
</shape>

2)のスケールを作成しますProgressBar

Curved_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="2dp" />
            <solid android:color="@color/transparent" />
        </shape>
    </item>

    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners android:radius="2dp" />
                <solid android:color="#ffff00" />
            </shape>
        </clip>
    </item>
</layer-list>

3)レイアウトファイルにProgressBar。を追加します。

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="6dp"
    android:layout_marginStart="20dp"
    android:layout_marginTop="10dp"
    android:layout_marginEnd="20dp"
    android:background="@drawable/progress_bar_background"
    >

    <ProgressBar
        android:id="@+id/progress_bar"
        style="@style/Widget.AppCompat.ProgressBar.Horizontal"
        android:layout_width="match_parent"
        android:layout_height="4dp"
        android:layout_margin="1dp"
        android:indeterminate="false"
        android:progressDrawable="@drawable/curved_progress_bar"
        />

</FrameLayout>

4

コードは次のプログレスバーを生成します
内側のプログレスカラー、ボーダーカラー、透明カラーの空のプログレスの両方でプログレスバーを実現できます。

<?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="15dip" />
        <stroke android:width="1dp" android:color="@color/black" />
    </shape>
</item>

<item android:id="@android:id/secondaryProgress">
    <clip>
        <shape>
            <corners android:radius="5dip" />
            <gradient
                android:startColor="@color/black"
                android:centerColor="@color/trans"
                android:centerY="0.75"
                android:endColor="@color/black"
                android:angle="270"

                />
        </shape>
    </clip>
 </item>


 <item
    android:id="@android:id/progress"
    >
    <clip>
        <shape>
            <corners
                android:radius="5dip" />
            <gradient
                android:startColor="@color/black"
                android:endColor="@color/black"
                android:angle="270" />
        </shape>
    </clip>
 </item>
 </layer-list>

こんにちはラビチャンドラ、あなたの答えをありがとう!あなたのコードが彼の質問に答える理由の説明を追加できますか?そうしないと、他のユーザーが使用するのが難しくなります。ありがとう!
NanderSpeerstra19年

このコードスニペットをありがとうございます。これは、限られた即時のヘルプを提供する可能性があります。適切な説明は、これが問題の良い解決策である理由を示すことによってその長期的な価値を大幅に改善し、他の同様の質問を持つ将来の読者にとってより役立つでしょう。あなたが行った仮定を含むいくつかの説明を追加するためにあなたの答えを編集してください。さらに、あなたの答えがこの質問にすでに与えられている他の答えよりも優れている理由を説明してみてください。
Qw3ry
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.