Thêm bóng cho hình dạng tùy chỉnh trên Android

130

Có thể thêm bóng thả vào hình dạng tùy chỉnh trong Android không? Sau khi xem qua tài liệu, tôi chỉ thấy một cách để áp dụng bóng văn bản.

Tôi đã thử điều này không có may mắn:

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

android android-layout

— mdunkle
nguồn

165

Sau rất nhiều tìm kiếm cuối cùng tôi đã nhận được

nhập mô tả hình ảnh ở đây

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

— Chirag Patel
nguồn

5

Bạn đã cấu hình ở đâu Tôi không thấy bất kỳ 2mã nào trong mã của bạn ... ???

— Choletski

74

Đây là cách tôi làm điều đó:

Nút gốc Android có bóng

Mã dưới đây cho một nút NHÀ NƯỚC:

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

Sau đó, bạn nên có một bộ chọn với các phiên bản khác nhau của nút, đại loại như:

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

hy vọng điều này có thể giúp bạn..chúc may mắn

— João Machete
nguồn

47

Đây là phiên bản của tôi của một bóng thả. Tôi đã tìm kiếm một cái bóng mờ xung quanh hình dạng và sử dụng câu trả lời này của Joakim Lundborg làm điểm khởi đầu của tôi. Những gì tôi đã thay đổi là thêm các góc cho tất cả các mục bóng và để tăng bán kính của góc cho mỗi mục bóng tiếp theo. Vì vậy, đây là 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>

— BruceHill
nguồn

Làm việc tốt .. Cảm ơn (y)

— Faldu Jaldeep

31

Cách sau đây hiệu quả với tôi: Chỉ cần lưu dưới dạng custom_shape.xml.

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

— Siklab.ph
nguồn

28

Tôi nghĩ rằng phương pháp này tạo ra kết quả rất tốt:

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

— Joakim Lundborg
nguồn

8

Câu hỏi cũ, nhưng Độ cao, có sẵn với Thiết kế Vật liệu hiện cung cấp bóng cho bất kỳ chế độ xem nào.

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

Xem các tài liệu tại https://developer.android.com/training/m vật liệu / shadows-clipping.html

— wainy
nguồn

Điều gì sẽ xảy ra nếu bạn có một số widget UI sẽ xuất hiện hợp nhất với một bóng xung quanh hình dạng ngoài cùng? Tôi đã cố gắng thêm độ cao cho cái bên ngoài nhưng cái bên trong sau đó bị ẩn đằng sau cái bên ngoài. Vì vậy, tôi đã cố gắng thêm độ cao cho cả hai nhưng sau đó nó trông giống như cái bên trong có một cái bóng trên đỉnh của cái bên ngoài giống như một kim tự tháp Inca.

— Michael Osofsky

Tôi đã kết thúc việc xử lý sự hợp nhất bằng cách sử dụng singe ImageButtonthay vì ImageButton ImageViewcộng với Button' because it allows a cho phép cả hai android:backgroundvà một android:src. Do đó, tôi đã có thể chỉ định android:elevationmột lần và tránh "hiệu ứng kim tự tháp Inca" mà tôi đã mô tả trong bình luận cuối cùng của mình.

— Michael Osofsky

8

Tôi sẽ đề xuất một cải tiến nhỏ cho giải pháp của Bruce, đó là ngăn chặn quá nhiều hình dạng giống nhau và chỉ đơn giản là sử dụng đột quỵ thay vì rắn. Nó sẽ trông như thế này:

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

Cuối cùng tôi muốn chỉ ra cho những người muốn có bóng theo một hướng cụ thể mà tất cả những gì bạn phải làm là đặt đỉnh, đáy, trái hoặc phải thành 0dp (đối với đường liền nét) hoặc -1dp (không có gì)

— Francois Dermu
nguồn

7

Nếu bạn không ngại thực hiện một số bản vẽ tùy chỉnh với API Canvas, hãy xem câu trả lời này về bóng đổ . Đây là một câu hỏi tiếp theo cho câu hỏi khắc phục sự cố trong bản gốc.

— Josh
nguồn

2

nhập mô tả hình ảnh ở đây

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

— NBApps
nguồn

1

Tôi nghĩ rằng giá trị bóng đổ này là tốt cho hầu hết các trường hợp:

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

— người dùng1238561
nguồn

1

Câu hỏi này có thể cũ, nhưng đối với bất kỳ ai trong tương lai muốn có một cách đơn giản để đạt được các hiệu ứng bóng phức tạp, hãy xem thư viện của tôi tại đây https://github.com/BluRe-CN/ComplexView

Sử dụng thư viện, bạn có thể thay đổi màu bóng, điều chỉnh các cạnh và nhiều hơn nữa. Đây là một ví dụ để đạt được những gì bạn tìm kiếm.

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

Để thay đổi màu bóng, sử dụng ứng dụng: ShadowColor = "mã màu của bạn".

— BluRe.CN
nguồn

1

9 bản vá để giải cứu, bóng đẹp có thể dễ dàng đạt được đặc biệt là với công cụ tuyệt vời này -

Trình tạo bóng Android 9 bản vá

Tái bút: nếu dự án không thể biên dịch, bạn sẽ cần di chuyển các dòng màu đen trong trình chỉnh sửa studio android một chút

— Penzzz
nguồn

0

nếu bạn cần một bóng thẳng (như ở dưới cùng của thanh công cụ), bạn cũng có thể sử dụng gradient xml:

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

hy vọng điều này sẽ giúp một số

— Saeed Arianmanesh
nguồn