অ্যান্ড্রয়েডে কাস্টম আকারে ছায়া যুক্ত করুন


130

অ্যান্ড্রয়েডে কাস্টম আকারে ড্রপ শেড যুক্ত করা কি সম্ভব? ডকুমেন্টেশনটি দেখার পরে আমি কেবল একটি পাঠ্য ছায়া প্রয়োগ করার উপায় দেখতে পাচ্ছি।

আমি ভাগ্য ছাড়াই এটি চেষ্টা করেছি:

<?xml version="1.0" encoding="UTF-8"?> 
   <shape xmlns:android="http://schemas.android.com/apk/res/android" 
   android:shape="rectangle"> 
     <solid android:color="#90ffffff"/>
       <corners android:radius="12dp" />
     <item name="android:shadowColor">#000000</item> 
     <item name="android:shadowRadius">5</item> 
     <item name="android:shadowDy">3</item> 
   </shape>

উত্তর:


165

প্রচুর সন্ধানের পরে অবশেষে আমি এটি পেয়েছি

এখানে চিত্র বর্ণনা লিখুন

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

<!-- Bottom 2dp Shadow -->
<item>
    <shape  android:shape="rectangle">

        <solid android:color="#d8d8d8" />
        <corners android:radius="7dp" />

    </shape>
</item>

<!-- White Top color -->
<item android:bottom="3px">

    <shape  android:shape="rectangle">

    <solid android:color="#FFFFFF" />
    <corners android:radius="7dp" />


    </shape>

</item>


</layer-list>

5
আপনি কোথায় কনফিগার করেছেন <!-- Bottom 2dp Shadow -->আমি 2আপনার কোডে কোনও দেখতে পাচ্ছি না ... ???
কোলেটস্কি

74

আমি এটি এইভাবে করি:

ছায়া সহ অ্যান্ড্রয়েড নেটিভ বোতাম

এক বোতামের জন্য কোড বেলন স্টেট:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <!-- "background shadow" -->
    <item>
        <shape android:shape="rectangle" >
            <solid android:color="#000000" />

            <corners android:radius="15dp" />
        </shape>
    </item>
    <!-- background color -->
    <item
        android:bottom="3px"
        android:left="3px"
        android:right="3px"
        android:top="3px">
        <shape android:shape="rectangle" >
            <solid android:color="#cc2b2b" />


            <corners android:radius="8dp" />
        </shape>
    </item>
    <!-- over left shadow -->
    <item>
        <shape android:shape="rectangle" >
            <gradient
                android:angle="180"
                android:centerColor="#00FF0000"
                android:centerX="0.9"
                android:endColor="#99000000"
                android:startColor="#00FF0000" />

            <corners android:radius="8dp" />
        </shape>
    </item>
    <!-- over right shadow -->
    <item>
        <shape android:shape="rectangle" >
            <gradient
                android:angle="360"
                android:centerColor="#00FF0000"
                android:centerX="0.9"
                android:endColor="#99000000"
                android:startColor="#00FF0000" />

            <corners android:radius="8dp" />
        </shape>
    </item>
    <!-- over top shadow -->
    <item>
        <shape android:shape="rectangle" >
            <gradient
                android:angle="-90"
                android:centerColor="#00FF0000"
                android:centerY="0.9"
                android:endColor="#00FF0000"
                android:startColor="#99000000"
                android:type="linear" />

            <corners android:radius="8dp" />
        </shape>
    </item>
    <!-- over bottom shadow -->
    <item>
        <shape android:shape="rectangle" >
            <gradient
                android:angle="90"
                android:centerColor="#00FF0000"
                android:centerY="0.9"
                android:endColor="#00FF0000"
                android:startColor="#99000000"
                android:type="linear" />

            <corners android:radius="8dp" />
        </shape>
    </item>
</layer-list>

তারপরে আপনার বাটনটির বিভিন্ন সংস্করণ সহ একটি নির্বাচক থাকা উচিত, এরকম কিছু:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/ic_button_red_pressed" android:state_pressed="true"/> <!-- pressed -->
    <item android:drawable="@drawable/ic_button_red_selected" android:state_focused="true"/> <!-- focused -->
    <item android:drawable="@drawable/ic_button_red_selected" android:state_selected="true"/> <!-- selected -->
    <item android:drawable="@drawable/ic_button_red_default"/> <!-- default -->

</selector>

আশা করি এটি আপনাকে সাহায্য করতে পারে .. শুভকামনা


47

এটি আমার ড্রপ শেডোর সংস্করণ। আমি একটি অস্পষ্ট আকৃতি প্রায় সব ছায়া এবং ব্যবহৃত যাচ্ছিলেন এই উত্তরটি দ্বারা Joakim Lundborg আমার আদ্যস্থল হিসাবে। আমি যা পরিবর্তন করেছি তা হ'ল সমস্ত ছায়া আইটেমগুলিতে কোণ যুক্ত করা এবং পরবর্তী প্রতিটি ছায়া আইটেমের জন্য কোণার ব্যাসার্ধ বাড়ানো। সুতরাং এখানে xml:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Drop Shadow Stack -->
    <item>
        <shape>
            <padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
            <solid android:color="#02000000" />
            <corners android:radius="8dp" />
        </shape>
    </item>
    <item>
        <shape>
            <padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
            <solid android:color="#05000000" />
            <corners android:radius="7dp" />
        </shape>
    </item>
    <item>
        <shape>
            <padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
            <solid android:color="#10000000" />
            <corners android:radius="6dp" />
        </shape>
    </item>
    <item>
        <shape>
            <padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
            <solid android:color="#15000000" />
            <corners android:radius="5dp" />
        </shape>
    </item>
    <item>
        <shape>
            <padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
            <solid android:color="#20000000" />
            <corners android:radius="4dp" />
        </shape>
    </item>
    <item>
        <shape>
            <padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
            <solid android:color="#25000000" />
            <corners android:radius="3dp" />
        </shape>
    </item>
    <item>
        <shape>
            <padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
            <solid android:color="#30000000" />
            <corners android:radius="3dp" />
        </shape>
    </item>

    <!-- Background -->
    <item>
    <shape>
            <solid android:color="#0099CC" />
        <corners android:radius="3dp" />
    </shape>
   </item>
</layer-list>

ভাল কাজ করছে .. ধন্যবাদ (y)
ফাল্দু জলদীপ

31

নিম্নলিখিতগুলি আমার জন্য কাজ করেছে: কেবল কাস্টম_শ্যাপ.এক্সএমএল হিসাবে সংরক্ষণ করুন।

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <!-- "shadow" -->
    <item>
        <shape android:shape="rectangle" >
           <solid android:color="#000000"/>
           <corners android:radius="12dp" />
        </shape>
    </item>


    <item android:bottom="3px">
        <shape android:shape="rectangle"> 
            <solid android:color="#90ffffff"/>
            <corners android:radius="12dp" />
         </shape>
    </item>

</layer-list>

28

আমি মনে করি এই পদ্ধতিটি খুব ভাল ফলাফল দেয়:

<!-- Drop Shadow Stack -->
<item>
    <shape>
        <padding
                android:top="1dp"
                android:right="1dp"
                android:bottom="1dp"
                android:left="1dp"/>
        <solid android:color="#00CCCCCC"/>
    </shape>
</item>
<item>
    <shape>
        <padding
                android:top="1dp"
                android:right="1dp"
                android:bottom="1dp"
                android:left="1dp"/>
        <solid android:color="#10CCCCCC"/>
    </shape>
</item>
<item>
    <shape>
        <padding
                android:top="1dp"
                android:right="1dp"
                android:bottom="1dp"
                android:left="1dp"/>
        <solid android:color="#20CCCCCC"/>
    </shape>
</item>
<item>
    <shape>
        <padding
                android:top="1dp"
                android:right="1dp"
                android:bottom="1dp"
                android:left="1dp"/>
        <solid android:color="#30CCCCCC"/>
    </shape>
</item>
<item>
    <shape>
        <padding
                android:top="1dp"
                android:right="1dp"
                android:bottom="1dp"
                android:left="1dp"/>
        <solid android:color="#50CCCCCC"/>
    </shape>
</item>

<item>

    <shape android:shape="rectangle">
        <stroke android:color="#CCC" android:width="1dp"/>
        <solid android:color="#FFF" />
        <corners android:radius="2dp" />

    </shape>

</item>

8

পুরানো প্রশ্ন, তবে এলিভেশন, মেটেরিয়াল ডিজাইনের সাথে উপলভ্য এখন যে কোনও দর্শনকে ছায়া সরবরাহ করে।

<TextView
android:id="@+id/myview"
...
android:elevation="2dp"
android:background="@drawable/myrect" />

Https://developer.android.com/training/matory/shadows-clipping.html এ ডক্স দেখুন


যদি আপনি বেশ কয়েকটি ইউআই উইজেট পেয়ে থাকেন যা বাইরেরতম আকারের চারপাশে একটি ছায়া দিয়ে মিশ্রিত হওয়া উচিত? আমি বাইরেরটির সাথে উচ্চতা যুক্ত করার চেষ্টা করেছি তবে অভ্যন্তরীণটি তখন বাইরেরটির পিছনে লুকিয়ে গেছে। তাই আমি উভয়কেই উচ্চতা যুক্ত করার চেষ্টা করেছি তবে তারপরে দেখে মনে হচ্ছে অভ্যন্তরের বাইরেরটির উপরে ছায়া রয়েছে ইনকা পিরামিডের মতো।
মাইকেল ওসোফস্কি

আমি একটি পুড়ান ব্যবহার করে Fusing সঙ্গে তার আচরণ শেষ পর্যন্ত ImageButtonএকটি পরিবর্তে ImageViewপ্লাস Button' because it allows a ImageButton` উভয় জন্য করতে পারবেন android:backgroundএবং android:src। অতএব আমি android:elevationকেবল একবার উল্লেখ করতে সক্ষম হয়েছি এবং আমার শেষ মন্তব্যে বর্ণিত "ইনকা পিরামিড প্রভাব" এড়িয়ে চলেছি।
মাইকেল ওসোফস্কি

8

ব্রুসের সমাধানে আমি একটি সামান্য উন্নতির পরামর্শ দেব যা একে অপরের উপরে একই আকৃতিটিকে ওভারড্রয়িং প্রতিরোধ এবং শক্তির পরিবর্তে স্ট্রোকটি কেবল ব্যবহার করা। এটি দেখতে এটি দেখতে হবে:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Drop Shadow Stack -->
    <item>
        <shape>
            <padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
            <stroke android:color="#02000000" android:width="1dp"  />
            <corners android:radius="8dp" />
        </shape>
    </item>
    <item>
        <shape>
            <padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
            <stroke android:color="#05000000" android:width="1dp" />
            <corners android:radius="7dp" />
        </shape>
    </item>
    <item>
        <shape>
            <padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
            <stroke android:color="#10000000" android:width="1dp" />
            <corners android:radius="6dp" />
        </shape>
    </item>
    <item>
        <shape>
            <padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
            <stroke android:color="#15000000" android:width="1dp" />
            <corners android:radius="5dp" />
        </shape>
    </item>
    <item>
        <shape>
            <padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
            <stroke android:color="#20000000" android:width="1dp" />
            <corners android:radius="4dp" />
        </shape>
    </item>
    <item>
        <shape>
            <padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
            <stroke android:color="#25000000" android:width="1dp" />
            <corners android:radius="3dp" />
        </shape>
    </item>
    <item>
        <shape>
            <padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
            <stroke android:color="#30000000" android:width="1dp" />
            <corners android:radius="3dp" />
        </shape>
    </item>

    <!-- Background -->
    <item>
        <shape>
            <solid android:color="#FFF" />
            <corners android:radius="3dp" />
        </shape>
    </item>
</layer-list>

ছায়া রেন্ডারিং এর স্ক্রিনশট শেষ অবধি আমি এমন লোকদের জন্য ইঙ্গিত করতে চেয়েছিলাম যারা একটি নির্দিষ্ট দিকে ছায়া চায় যা আপনাকে যা করতে হবে তা হ'ল শীর্ষ, নীচে, বাম বা ডানদিকে 0 ডিপি (একটি শক্ত রেখার জন্য) বা -1 ডিপি সেট করুন (কিছুই নয়)


7

আপনি যদি ক্যানভাস এপিআই দিয়ে কিছু কাস্টম অঙ্কন করতে আপত্তি করেন না, ড্রপ ছায়া সম্পর্কে এই উত্তরটি দেখুন । এখানে সেইটির একটি ফলো-আপ প্রশ্ন রয়েছে যা আসল সমস্যাটি সমাধান করে।


2

এখানে চিত্র বর্ণনা লিখুন

  <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android" >

        <solid android:color="@android:color/white" >
        </solid>

        <stroke
            android:width="1dp"
            android:color="@color/LightGrey" >
        </stroke>

        <padding
            android:bottom="5dp"
            android:left="2dp"
            android:right="2dp"
            android:top="5dp" >
        </padding>

        <corners
            android:bottomLeftRadius="20dp"
            android:bottomRightRadius="20dp"
            android:radius="12dp"
            android:topLeftRadius="20dp"
            android:topRightRadius="20dp" />

        <gradient
            android:angle="90"
            android:centerColor="@android:color/white"
            android:centerY="0.2"
            android:endColor="#99e0e0e0"
            android:startColor="@android:color/white"
            android:type="linear" />

    </shape>

1

আমি মনে করি এই ড্রপ শেডোর মান বেশিরভাগ ক্ষেত্রেই ভাল:

<solid android:color="#20000000" />

1

এই প্রশ্নটি পুরানো হতে পারে তবে ভবিষ্যতে যে কেউ জটিল ছায়ার প্রভাব অর্জনের জন্য সহজ উপায় চান আমার লাইব্রেরিটি এখানে দেখুন https://github.com/BluRe-CN/ComplexView

লাইব্রেরিটি ব্যবহার করে, আপনি ছায়ার রঙ পরিবর্তন করতে পারেন, প্রান্তগুলি ঝাঁকিয়ে দিতে পারেন এবং আরও অনেক কিছু। আপনি যা খুঁজছেন তা অর্জন করার জন্য এখানে একটি উদাহরণ দেওয়া আছে।

<com.blure.complexview.ComplexView
        android:layout_width="400dp"
        android:layout_height="600dp"
        app:radius="10dp"
        app:shadow="true"
        app:shadowSpread="2">

        <com.blure.complexview.ComplexView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:color="#fdfcfc"
            app:radius="10dp" />
    </com.blure.complexview.ComplexView>

ছায়ার রঙ পরিবর্তন করতে, অ্যাপ্লিকেশনটি ব্যবহার করুন: ছায়া রঙ = "আপনার রঙের কোড"।


1

উদ্ধার 9 প্যাচ, দুর্দান্ত ছায়া বিশেষত এই দুর্দান্ত সরঞ্জাম দিয়ে সহজেই অর্জন করা যেতে পারে -

অ্যান্ড্রয়েড 9-প্যাচ ছায়া জেনারেটর

PS: যদি প্রকল্পটি সংকলন করতে সক্ষম না হয় তবে আপনার অ্যান্ড্রয়েড স্টুডিও সম্পাদককে কালো রেখাগুলি কিছুটা সরানো দরকার


0

আপনার যদি কোনও সরল রেখার ছায়া দরকার হয় (যেমন সরঞ্জামদণ্ডের নীচে) আপনি গ্রেডিয়েন্ট এক্সএমএলও ব্যবহার করতে পারেন:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:type="linear"
        android:angle="-90"
        android:startColor="#19000000" <!-- black transparent -->
        android:endColor="#00000000" /> <!-- full transparent -->
</shape>

আশা করি এটি কোনও একজনকে সাহায্য করবে

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.