गोल कोनों के साथ प्रगति पट्टी?

Question

मैं इस प्रगति बार डिजाइन को प्राप्त करने की कोशिश कर रहा हूं:

वर्तमान कोड जो मैंने इसे बनाया है:

यह कोड है:

<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प्रगति थोड़ा छोटे आकार बनाने के लिए, लेकिन यह काम नहीं किया। इसके अलावा, प्रगति पट्टी समतल है और मैं डिजाइन के अनुसार घुमावदार होना चाहता हूं। डिज़ाइन को प्राप्त करने के लिए मुझे क्या बदलने की आवश्यकता है?

Comments

github.com/akexorcist/Android-RoundCornerProgressBar

— राजेश कोशी

Answer 1

प्रगति का आकार थोड़ा छोटा कैसे करें?

आपको प्रगति आइटम को थोड़ा पैडिंग देने की आवश्यकता है, जैसे:

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

Comments

@habibullah देशी प्रोग्रेसबार और लेयर-लिस्ट का उपयोग करना बहुत सीमित है। आप आसानी से अपनी आवश्यकताओं को पूरा करने के लिए एक कस्टम प्रगति पट्टी को लागू कर सकते हैं। उदाहरण के लिए, यदि आपके पास एक ठोस रंग की पृष्ठभूमि है - बस सब कुछ छिपाने के लिए एक अग्रभूमि 9-पथ का उपयोग करें लेकिन प्रगति। यदि आप नए एंड्रॉइड संस्करणों को लक्षित कर रहे हैं तो आप केवल बिल्ट इन मास्क सपोर्ट (पुराने संस्करणों में समर्थित नहीं) का उपयोग कर सकते हैं। एक अन्य विकल्प एक पुस्तकालय का उपयोग करना है, यह आपके लिए अच्छा हो सकता है: github.com/akexorcist/Android-RoundCornerProgressBar । यदि आपको अभी भी समस्या हो रही है, तो कृपया एक नया प्रश्न पोस्ट करें। चीयर्स।

— इल बीरन

@AkshayMahajan ऊपर टिप्पणी को देख

— ईयाल Biran

जब मैंने आपका पूरा कोड लागू किया, तो पूरी प्रगति पट्टी मेरे मुख्य रंग (colorPrimaryDark) के साथ रंग गई, हालांकि प्रगति 100% नहीं थी। मैंने @android: id / background के तहत क्लिप टैग जोड़ा, यह तय हो गया, लेकिन पृष्ठभूमि चली गई है। मेरा अस्थायी समाधान बैकग्राउंड आइटम निकाल रहा है और बैकग्राउंड कलर को लेआउट (गोल कोनों के बिना) में जोड़ रहा है।

— Ouzuzhan Koşar

मेरे मामले में, scaleके साथ android:scaleWidth="100%"आदेश गोलाकार कोनों के साथ प्रदर्शित करने के लिए चाल किया था। बहुत धन्यवाद

— एडिसन स्पेंसर

धन्यवाद। आपने मेरा दिन बचाया।

— गुयेन अनह

Answer 2

सामग्री अवयव पुस्तकालय के साथ आप विशेषता LinearProgressIndicatorऔर app: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।

Comments

@Arunachalamk LinearProgressIndicator को 1.3.0- अल्फा 04 के साथ पेश किया गया था , जो वर्तमान में नवीनतम अल्फा संस्करण है।

— गैब्रिएल मैरीओटी

Answer 3

एक अच्छा सवाल और छवियों के लिए जॉर्जी Koemdzhiev के लिए धन्यवाद। जो उसके समान बनाना चाहते हैं, उनके लिए निम्न कार्य करें।

1) एक के लिए एक पृष्ठभूमि बनाएँ ProgressBar।

प्रगति_बार_बैकग्राउंड। 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>

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

Comments

हाय रविचंद्र, आपके उत्तर के लिए धन्यवाद! क्या आप स्पष्टीकरण जोड़ सकते हैं कि आपका कोड उसके प्रश्न का उत्तर क्यों देता है? अन्यथा, अन्य उपयोगकर्ताओं के लिए उपयोग करना मुश्किल होगा। धन्यवाद!

— नंदेर स्पैस्त्र शास्त्र

इस कोड स्निपेट के लिए धन्यवाद, जो कुछ सीमित, तत्काल सहायता प्रदान कर सकता है। एक उचित व्याख्या यह दर्शाती है कि यह समस्या का एक अच्छा समाधान क्यों है, यह दिखा कर इसके दीर्घकालिक मूल्य में बहुत सुधार होगा और यह भविष्य के पाठकों के लिए अन्य, समान प्रश्नों के साथ अधिक उपयोगी होगा। कृपया कुछ स्पष्टीकरण जोड़ने के लिए अपने उत्तर को संपादित करें, जिसमें आपके द्वारा की गई धारणाएँ शामिल हैं। इसके अलावा, यह समझाने की कोशिश करें कि आपका उत्तर इस प्रश्न के पहले दिए गए अन्य उत्तरों से बेहतर क्यों है।

— Qw3ry