Android में परिपत्र ढाल

Question

मैं एक ढाल बनाने की कोशिश कर रहा हूं जो स्क्रीन के मध्य से सफेद में निकलता है, और स्क्रीन के किनारों की ओर बढ़ने के साथ काला हो जाता है।

जैसे-जैसे मैं "सामान्य" ढाल बनाता हूं, मैं विभिन्न आकृतियों के साथ प्रयोग करता रहा हूं:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient android:startColor="#E9E9E9" android:endColor="#D4D4D4"
        android:angle="270"/>
</shape>

"ओवल" -शाप का उपयोग करते समय मुझे कम से कम एक गोल आकार मिला, लेकिन कोई ढाल प्रभाव नहीं था। इसे कैसे प्राप्त किया जा सकता है?'

Answer 1

आप एक परिपत्र ढाल का उपयोग कर प्राप्त कर सकते हैं android:type="radial":

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient android:type="radial" android:gradientRadius="250dp"
        android:startColor="#E9E9E9" android:endColor="#D4D4D4" />
</shape>

Comments

न केवल यह काम किया, बल्कि इसने विश्व भुखमरी को भी हल कर दिया! धन्यवाद!

— pgsandstrom

साइड नोट: रंग में पारदर्शिता-बाइट का उपयोग करना भी संभव है। # ff00ff00 से # 7f0000ff पूरी तरह से अपारदर्शी लाल रंग से अर्ध-पारदर्शी नीले रंग में फीका हो जाएगा।

— साइमन फोर्सबर्ग

Android: gradientRadius = "250" को अनदेखा किया जाएगा। आपको एक px या dp मान के साथ एक डिमेन संसाधन की ओर संकेत करना चाहिए, जैसे: android: gradientRadius = "@ dimen / gradient_radius"

— बोलिंग

धन्यवाद बोलिंग, आप सही कह रहे हैं कि Android: gradientRadius = "250" बिल्कुल काम नहीं करता है, मुझे लगता है कि यह पुराने एंड्रॉइड संस्करणों पर अलग तरह से व्यवहार करता है।

— जस्टिन

Answer 2

मैं हमेशा नई अवधारणा सीखते समय छवियों को उपयोगी पाता हूं, इसलिए यह एक पूरक उत्तर है।

%pसाधन माता पिता का एक प्रतिशत, यह है कि, सबसे संकीर्ण आयाम जो कुछ के देखने हम पर हमारे drawable सेट का एक प्रतिशत। gradientRadiusइस कोड में परिवर्तन करके उपरोक्त चित्र तैयार किए गए थे

my_gradient_drawable

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:type="radial"
        android:gradientRadius="10%p"
        android:startColor="#f6ee19"
        android:endColor="#115ede" />
</shape>

जिसे backgroundइस तरह एक दृश्य की विशेषता पर सेट किया जा सकता है

<View
    android:layout_width="200dp"
    android:layout_height="100dp"
    android:background="@drawable/my_gradient_drawable"/>

केंद्र

आप त्रिज्या के केंद्र को बदल सकते हैं

android:centerX="0.2"
android:centerY="0.7"

जहां दशमलव क्रमशः xऔर yक्रमशः चौड़ाई और ऊंचाई के अंश हैं।

प्रलेखन

यहाँ प्रलेखन से कुछ नोट्स हैं जो चीजों को थोड़ा और समझाते हैं।

android:gradientRadius

ग्रेडिएंट का त्रिज्या, केवल रेडियल ग्रेडिएंट के साथ उपयोग किया जाता है। आकार के न्यूनतम आयाम के सापेक्ष एक स्पष्ट आयाम या एक आंशिक मूल्य हो सकता है।

एक अस्थायी बिंदु मान हो सकता है, जैसे "1.2"।

एक आयाम मान हो सकता है, जो एक अस्थायी बिंदु संख्या है जो "14.5sp" जैसी इकाई के साथ जोड़ा जाता है। उपलब्ध इकाइयाँ हैं: px (पिक्सेल), dp (डेंसिटी-इंडिपेंडेंट पिक्सल), sp (स्केल्ड पिक्सल पसंदीदा फ़ॉन्ट आकार पर आधारित), (इंच) और मिमी (मिलीमीटर) में।

एक आंशिक मूल्य हो सकता है, जो कि "14.5%" जैसे% या% p के साथ जोड़ा गया एक अस्थायी बिंदु संख्या है। % प्रत्यय का अर्थ हमेशा आधार आकार का एक प्रतिशत होता है; वैकल्पिक% p प्रत्यय कुछ मूल कंटेनर के सापेक्ष एक आकार प्रदान करता है।

Comments

जब आप किटकैट के लिए ग्रेडिएंट रेडियस से% p निकालते हैं तो kikat टाइप रेडियल में काम आएगा: gradientRadius = "10"

— mehmoodnisar125

@ mehmoodnisar125, मैंने दस्तावेज़ीकरण से एक नोट जोड़ा, जिसमें यह शामिल है %या नहीं , के बीच का अंतर बताया गया है ।

— 15

Answer 3

आप इसे कोड में भी कर सकते हैं यदि आपको अधिक नियंत्रण की आवश्यकता है, उदाहरण के लिए कई रंग और स्थिति। यहाँ एक आकर्षक रेडियल ढाल बनाने के लिए मेरा कोटलिन स्निपेट है:

object ShaderUtils {
    private class RadialShaderFactory(private val colors: IntArray, val positionX: Float,
                                      val positionY: Float, val size: Float): ShapeDrawable.ShaderFactory() {

        override fun resize(width: Int, height: Int): Shader {
            return RadialGradient(
                    width * positionX,
                    height * positionY,
                    minOf(width, height) * size,
                    colors,
                    null,
                    Shader.TileMode.CLAMP)
        }
    }

    fun radialGradientBackground(vararg colors: Int, positionX: Float = 0.5f, positionY: Float = 0.5f,
                                 size: Float = 1.0f): PaintDrawable {
        val radialGradientBackground = PaintDrawable()
        radialGradientBackground.shape = RectShape()
        radialGradientBackground.shaderFactory = RadialShaderFactory(colors, positionX, positionY, size)
        return radialGradientBackground
    }
}

बुनियादी उपयोग (लेकिन अतिरिक्त पैरामेट्स के साथ समायोजित करने के लिए स्वतंत्र महसूस करें):

view.background = ShaderUtils.radialGradientBackground(Color.TRANSPARENT, BLACK)

Answer 4

मुझे लगता है कि आपको android: centerColor जोड़ना चाहिए

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
  android:startColor="#FFFFFF"
  android:centerColor="#000000"
  android:endColor="#FFFFFF"
  android:angle="0" />
</shape>

यह उदाहरण सफेद से काले से सफेद तक एक क्षैतिज ढाल प्रदर्शित करता है।

Comments

इस उत्तर को समाधान के रूप में चिह्नित किया जाना चाहिए। कोई फर्क नहीं पड़ता कि आप एक रेडियल ढाल बनाना चाहते हैं, एक क्षैतिज एक करो!

— इरेडमिस्टर

Answer 5

<gradient
    android:centerColor="#c1c1c1"
    android:endColor="#4f4f4f"
    android:gradientRadius="400"
    android:startColor="#c1c1c1"
    android:type="radial" >
</gradient>

Answer 6

यहां ग्रेडिएंट, स्टोक एंड सर्कुलर शेप के साथ पूरा xml है।

<?xml version="1.0" encoding="utf-8"?>

<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval" >

    <!-- You can use gradient with below attributes-->
    <gradient
        android:angle="90"
        android:centerColor="#555994"
        android:endColor="#b5b6d2"
        android:startColor="#555994"
        android:type="linear" />

    <!-- You can omit below tag if you don't need stroke -->
   <stroke android:color="#3b91d7" android:width="5dp"/>

    <!-- Set the same value for both width and height to get a circular shape -->
    <size android:width="200dp" android:height="200dp"/>


    <!--if you need only a single color filled shape-->
    <solid android:color="#e42828"/>


</shape>

Comments

अच्छा उदाहरण। धन्यवाद।

— सिनान सीलन

Answer 7

<!-- Drop Shadow Stack -->
<item>
    <shape android:shape="oval">
        <padding
            android:bottom="1dp"
            android:left="1dp"
            android:right="1dp"
            android:top="1dp" />

        <solid android:color="#00CCCCCC" />

        <corners android:radius="3dp" />
    </shape>
</item>
<item>
    <shape android:shape="oval">
        <padding
            android:bottom="1dp"
            android:left="1dp"
            android:right="1dp"
            android:top="1dp" />

        <solid android:color="#10CCCCCC" />

        <corners android:radius="3dp" />
    </shape>
</item>
<item>
    <shape android:shape="oval">
        <padding
            android:bottom="1dp"
            android:left="1dp"
            android:right="1dp"
            android:top="1dp" />

        <solid android:color="#20CCCCCC" />

        <corners android:radius="3dp" />
    </shape>
</item>
<item>
    <shape android:shape="oval">
        <padding
            android:bottom="1dp"
            android:left="1dp"
            android:right="1dp"
            android:top="1dp" />

        <solid android:color="#30CCCCCC" />

        <corners android:radius="3dp" />
    </shape>
</item>
<item>
    <shape android:shape="oval">
        <padding
            android:bottom="1dp"
            android:left="1dp"
            android:right="1dp"
            android:top="1dp" />

        <solid android:color="#50CCCCCC" />

        <corners android:radius="3dp" />
    </shape>
</item>

<!-- Background -->
<item>
    <shape android:shape="oval">
        <gradient
            android:startColor="@color/colorAccent_1"
            android:centerColor="@color/colorAccent_2"
            android:endColor="@color/colorAccent_3"
            android:angle="45"
            />
        <corners android:radius="3dp" />
    </shape>
</item>

<color name="colorAccent_1">#6f64d6</color>
<color name="colorAccent_2">#7668F8</color>
<color name="colorAccent_3">#6F63FF</color>