Android View bóng

Tôi đã tìm kiếm xung quanh, và tôi không thể tìm ra cách thích hợp để thực hiện việc này. Tôi muốn có các hiệu ứng đổ bóng sau trên chế độ xem của mình:

Thành thật mà nói, tôi không biết liệu cái thứ hai này có được thực hiện bằng cách áp dụng hiệu ứng đổ bóng hay không. Bất kỳ ý tưởng?

Tôi biết câu hỏi này đã được trả lời nhưng tôi muốn bạn biết rằng tôi đã tìm thấy một drawabletrên Android Studiorất giống với các bức ảnh bạn có trong câu hỏi: Hãy xem cái này:

android:background="@drawable/abc_menu_dropdown_panel_holo_light"

Nó trông như thế này:

Hy vọng nó sẽ hữu ích

Biên tập

Tùy chọn ở trên dành cho các phiên bản cũ hơn, Android Studiovì vậy bạn có thể không tìm thấy nó. Đối với các phiên bản mới hơn:

android:background="@android:drawable/dialog_holo_light_frame"

Hơn nữa, nếu bạn muốn có hình dạng tùy chỉnh của riêng mình, tôi khuyên bạn nên sử dụng một phần mềm vẽ như Photoshopvà vẽ nó.

Đừng quên lưu nó dưới dạng .9.pngtệp (ví dụ my_background.9.png:)

Đọc tài liệu: Vẽ 9 bản vá

Chỉnh sửa 2

Một giải pháp thậm chí còn tốt hơn và ít vất vả hơn là sử dụng một CardViewvà đặt app:cardPreventCornerOverlap="false"để ngăn các chế độ xem chồng lên các đường viền:

<android.support.v7.widget.CardView
    android:id="@+id/card_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardCornerRadius="2dp"
    app:cardElevation="2dp"
    app:cardPreventCornerOverlap="false"
    app:contentPadding="0dp">

    <!-- your layout stuff here -->

</android.support.v7.widget.CardView>

Ngoài ra hãy chắc chắn đã bao gồm phiên bản mới nhất trong build.gradle, là hiện tại

compile 'com.android.support:cardview-v7:26.0.0'

Tôi đang sử dụng Android Studio 0.8.6 và tôi không thể tìm thấy:

android:background="@drawable/abc_menu_dropdown_panel_holo_light"

vì vậy tôi đã tìm thấy điều này thay thế:

android:background="@android:drawable/dialog_holo_light_frame"

và nó trông như thế này:

đặt nền @android:drawable/dialog_holo_light_frame, tạo bóng nhưng bạn không thể thay đổi màu nền cũng như kiểu đường viền, vì vậy tốt hơn nên tận dụng bóng của nó, trong khi vẫn có thể đặt nền thông qua danh sách lớp

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!--the shadow comes from here-->
    <item
        android:bottom="0dp"
        android:drawable="@android:drawable/dialog_holo_light_frame"
        android:left="0dp"
        android:right="0dp"
        android:top="0dp">

    </item>

    <item
        android:bottom="0dp"
        android:left="0dp"
        android:right="0dp"
        android:top="0dp">
        <!--whatever you want in the background, here i preferred solid white -->
        <shape android:shape="rectangle">
            <solid android:color="@android:color/white" />

        </shape>
    </item>
</layer-list>

lưu nó trong thư mục có thể vẽ dưới nói shadow.xml

để gán nó cho một dạng xem, trong tệp bố cục xml, hãy đặt nền của nó

android:background="@drawable/shadow"

Tạo card_background.xml trong thư mục res / drawable với mã sau:

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

<item>
    <shape android:shape="rectangle">
        <solid android:color="#BDBDBD"/>
        <corners android:radius="5dp"/>
    </shape>
</item>

<item
    android:left="0dp"
    android:right="0dp"
    android:top="0dp"
    android:bottom="2dp">
    <shape android:shape="rectangle">
        <solid android:color="#ffffff"/>
        <corners android:radius="5dp"/>
    </shape>
</item>
</layer-list>

Sau đó, thêm mã sau vào phần tử mà bạn muốn bố cục thẻ

android:background="@drawable/card_background"

dòng sau xác định màu của bóng cho thẻ

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

CardView cung cấp cho bạn bóng tối thực sự trong android 5+ và nó có thư viện hỗ trợ. Chỉ cần bọc khung nhìn của bạn với nó và bạn đã hoàn tất.

<android.support.v7.widget.CardView>
     <MyLayout>
</android.support.v7.widget.CardView>

Nó yêu cầu sự phụ thuộc tiếp theo.

dependencies {
    ...
    compile 'com.android.support:cardview-v7:21.0.+'
}

Sử dụng thuộc tính độ cao để đạt được hiệu ứng đổ bóng:

<View ...
    android:elevation="2dp"/>

Điều này chỉ được sử dụng trước v21, hãy xem liên kết này: http://developer.android.com/training/material/shadows-clipping.html

Điều này có thể là muộn nhưng đối với những người vẫn đang tìm kiếm câu trả lời cho điều này, tôi đã tìm thấy một dự án trên git hub và đây là dự án duy nhất thực sự phù hợp với nhu cầu của tôi. android-materialhadowninepatch

Chỉ cần thêm dòng này vào sự phụ thuộc build.gradle của bạn

compile 'com.h6ah4i.android.materialshadowninepatch:materialshadowninepatch:0.6.3'

hoan hô. ủng hộ người sáng tạo! happycodings

Tôi biết đây là một hacky ngu ngốc,
nhưng nếu bạn muốn ủng hộ theo v21, đây là thành tích của tôi.

Chữ nhật_with_10dp_radius_white_bg_and_shadow.xml

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

    <!-- Shadow layers -->
    <item
        android:left="1dp"
        android:right="1dp"
        android:top="3dp">
        <shape>
            <corners android:radius="10dp" />
            <padding
                android:bottom="1.8dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />
            <solid android:color="@color/shadow_hack_level_1" />
        </shape>
    </item>
    <item
        android:left="1dp"
        android:right="1dp"
        android:top="3dp">
        <shape>
            <corners android:radius="10dp" />
            <padding
                android:bottom="1.8dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />
            <solid android:color="@color/shadow_hack_level_2" />
        </shape>
    </item>
    <item
        android:left="1dp"
        android:right="1dp"
        android:top="3dp">
        <shape>
            <corners android:radius="10dp" />
            <padding
                android:bottom="1.8dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />
            <solid android:color="@color/shadow_hack_level_3" />
        </shape>
    </item>
    <item
        android:left="1dp"
        android:right="1dp"
        android:top="3dp">
        <shape>
            <corners android:radius="10dp" />
            <padding
                android:bottom="1.8dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />
            <solid android:color="@color/shadow_hack_level_4" />
        </shape>
    </item>
    <item
        android:left="1dp"
        android:right="1dp"
        android:top="3dp">
        <shape>
            <corners android:radius="10dp" />
            <padding
                android:bottom="1.8dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />
            <solid android:color="@color/shadow_hack_level_5" />
        </shape>
    </item>
    <item
        android:left="1dp"
        android:right="1dp"
        android:top="3dp">
        <shape>
            <corners android:radius="10dp" />
            <padding
                android:bottom="1.8dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />
            <solid android:color="@color/shadow_hack_level_6" />
        </shape>
    </item>
    <item
        android:left="1dp"
        android:right="1dp"
        android:top="3dp">
        <shape>
            <corners android:radius="10dp" />
            <padding
                android:bottom="1.8dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />
            <solid android:color="@color/shadow_hack_level_7" />
        </shape>
    </item>
    <item
        android:left="1dp"
        android:right="1dp"
        android:top="3dp">
        <shape>
            <corners android:radius="10dp" />
            <padding
                android:bottom="1.8dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />
            <solid android:color="@color/shadow_hack_level_8" />
        </shape>
    </item>
    <item
        android:left="1dp"
        android:right="1dp"
        android:top="3dp">
        <shape>
            <corners android:radius="10dp" />
            <padding
                android:bottom="1.8dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />
            <solid android:color="@color/shadow_hack_level_9" />
        </shape>
    </item>
    <item
        android:left="1dp"
        android:right="1dp"
        android:top="3dp">
        <shape>
            <corners android:radius="10dp" />
            <padding
                android:bottom="1.8dp"
                android:left="1dp"
                android:right="1dp"
                android:top="1dp" />
            <solid android:color="@color/shadow_hack_level_10" />
        </shape>
    </item>

    <!-- Background layer -->
    <item>
        <shape>
            <solid android:color="@android:color/white" />
            <corners android:radius="10dp" />
        </shape>
    </item>

</layer-list>

rectangle_with_10dp_radius_white_bg_and_shadow.xml (v21)

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

view_incoming.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/rectangle_with_10dp_radius_white_bg_and_shadow"
    android:elevation="7dp"
    android:gravity="center"
    android:minWidth="240dp"
    android:minHeight="240dp"
    android:orientation="horizontal"
    android:padding="16dp"
    tools:targetApi="lollipop">

    <TextView
        android:id="@+id/text1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        tools:text="Hello World !" />

</LinearLayout>

Đây là kết quả:

Theo v21 (đây là cái mà bạn đã tạo với xml)

Trên v21 (hiển thị độ cao thực)

• Một sự khác biệt đáng kể là nó sẽ chiếm không gian bên trong từ chế độ xem nên khu vực nội dung thực tế của bạn có thể nhỏ hơn thiết bị > = lollipop .

Nếu bạn cần bóng đổ đúng cách thì bạn phải làm như sau.

Hãy xem xét chế độ xem này, được xác định với nền có thể vẽ được:

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

Nền có thể vẽ được định nghĩa là một hình chữ nhật với các góc tròn:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
    <solid android:color="#42000000" />
    <corners android:radius="5dp" />
</shape>

Đây là cách phủ bóng tối được khuyến khích, hãy kiểm tra điều này https://developer.android.com/training/material/shadows-clipping.html#Shadows

Sử dụng thuộc tính độ cao cho ảnh hưởng bóng tối:

<YourView
    ...
    android:elevation="3dp"/>

Tạo nền có thể vẽ như thế này để hiển thị bóng tròn.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Drop Shadow Stack -->
    <item>
        <shape>
            <corners android:radius="4dp" />
            <padding android:bottom="1dp" android:left="1dp"
                     android:right="1dp"  android:top="1dp" />
            <solid android:color="#00CCCCCC" />
        </shape>
    </item>
    <item>
        <shape>
            <corners android:radius="4dp" />
            <padding android:bottom="1dp" android:left="1dp"
                     android:right="1dp"  android:top="1dp" />
            <solid android:color="#10CCCCCC" />
        </shape>
    </item>
    <item>
        <shape>
            <corners android:radius="4dp" />
            <padding android:bottom="1dp" android:left="1dp"
                     android:right="1dp"  android:top="1dp" />
            <solid android:color="#20d5d5d5" />
        </shape>
    </item>
    <item>
        <shape>
            <corners android:radius="6dp" />
            <padding android:bottom="1dp" android:left="1dp"
                     android:right="1dp"  android:top="1dp" />
            <solid android:color="#30cbcbcb" />
        </shape>
    </item>
    <item>
        <shape>
            <corners android:radius="4dp" />
            <padding android:bottom="1dp" android:left="1dp"
                     android:right="1dp"  android:top="1dp" />
            <solid android:color="#50bababa" />
        </shape>
    </item>

    <!-- Background -->
    <item>
        <shape>
            <solid android:color="@color/gray_100" />
            <corners android:radius="4dp" />
        </shape>
    </item>
</layer-list>

Câu hỏi này có thể cũ, nhưng đối với bất kỳ ai trong tương lai muốn 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, chỉnh sửa các cạnh và hơn thế 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, hãy sử dụng app: shadowColor = "mã màu của bạn".

sử dụng hình dạng này làm nền:

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

    <item android:drawable="@android:drawable/dialog_holo_light_frame"/>

    <item>
        <shape android:shape="rectangle">
            <corners android:radius="1dp" />
            <solid android:color="@color/gray_200" />
        </shape>
    </item>

</layer-list>