Android View shadow

102

주변을 수색했지만 적절한 방법을 찾지 못했습니다. 내 뷰에 다음과 같은 그림자 효과를 적용하고 싶습니다. 여기에 이미지 설명 입력

여기에 이미지 설명 입력

솔직히이 두 번째는 그림자 효과를 적용한 것인지 모르겠습니다. 어떤 아이디어?

android  shadow  dropshadow 
— 롱 워커
소스
1
이건가요? stackoverflow.com/questions/4406524/... (가장 높은 투표 대답하지 표시된 답 확인)
— 누가 복음 Vo에
1
@DatVM, 감사합니다. 이것은 트릭을 수행하는 것처럼 보이지만 Android sdk에 도구가 내장되어 있다고 생각했습니다. 예를 들어, 코드 몇 줄을 추가하여 선형 레이아웃에 그림자를 추가합니다. P
— longwalker
비슷한 질문 - stackoverflow.com/q/52954743/9640177 - 벡터 당김에 그림자 추가
— mayank1513을

답변:

158

이 질문에 이미 대답했습니다 알고하지만 난 당신이 내가 발견 알고 싶어요 drawable에 Android Studio그건 당신이 질문에 가지고있는 사진과 매우 유사합니다 : 이것 좀 봐 :

android:background="@drawable/abc_menu_dropdown_panel_holo_light"

다음과 같이 보입니다.

여기에 이미지 설명 입력

도움이 되길 바랍니다

편집하다

위의 옵션은의 이전 버전 용 Android Studio이므로 찾지 못할 수 있습니다. 최신 버전 :

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

또한 나만의 모양을 만들고 싶다면 같은 그리기 소프트웨어를 사용하여 그리는 것이 좋습니다 Photoshop.

여기에 이미지 설명 입력

로 저장하는 것을 잊지 마세요 .9.png파일 (예 : my_background.9.png)

문서 읽기 : Draw 9-patch

편집 2

더 좋고 덜 열심히 일하는 솔루션은 보기가 테두리와 겹치지 않도록 CardView및 설정 app:cardPreventCornerOverlap="false"을 사용하는 것입니다 .

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

또한 최신 버전을 포함 시켰해야합니다 build.gradle, 전류를

compile 'com.android.support:cardview-v7:26.0.0'
— 약간 뒤틀리게 하다
소스
감사합니다. 사실 매우 비슷해 보입니다. 나는 또한 안드로이드 용 "구글 카드 레이아웃"을 발견했고, 그들은 꽤 멋지다!
— longwalker 2014 년
6
대박. 향후 시청자를위한 참고 자료입니다 /<sdk-path>/extras/android/support.
— theblang 2014-08-20
2
무엇 사용에 대한cardView
— 알렉스 Chengalan
100

Android Studio 0.8.6을 사용하고 있는데 다음을 찾을 수 없습니다.

android:background="@drawable/abc_menu_dropdown_panel_holo_light"

그래서 대신 이것을 찾았습니다.

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

그리고 다음과 같이 보입니다 :

여기에 이미지 설명 입력

— Repo
소스
1
하지만 코너 반경을 추가 할 수 없나요?!
— Fay007
40

배경을 넣는 것은 @android:drawable/dialog_holo_light_frame그림자를 제공하지만 배경색이나 테두리 스타일을 변경할 수 없으므로 레이어 목록을 통해 배경을 넣을 수 있지만 그림자를 활용하는 것이 좋습니다.

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

아래의 drawable 폴더에 저장하십시오. shadow.xml

뷰에 할당하려면 xml 레이아웃 파일에서 배경을 설정하십시오. 

android:background="@drawable/shadow"
— 모하메드 셀림
소스
작동하는지 확인 했습니까? 두 번째 <item>은 아무것도하지 않습니다. 투명하거나 둥근 모서리로 변경할 수 없습니다.
— zeeshan
2
내가 시도한 모든 것 중에서 이것이 작동하는 유일한 것입니다. 감사합니다.
— Shyam Sunder
1
환상적인 솔루션
— user1974368 dec.
34

res / drawable 폴더에 다음 코드를 사용하여 card_background.xml을 만듭니다.

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

그런 다음 카드 레이아웃을 원하는 요소에 다음 코드를 추가하십시오.

android:background="@drawable/card_background"

다음 줄은 카드의 그림자 색상을 정의합니다. 

<solid android:color="#BDBDBD"/>
— 비벡 바르 마
소스
10
이것은 실제로 그림자가 아닙니다. 왜냐하면 그것은 퇴색하지 않기 때문입니다. 양면의 테두리와 비슷합니다.
— 금지 - 지구 공학
그되지 그림자
— ShadeToD
24

CardView 는 Android 5 이상에서 진정한 그림자를 제공 하며 지원 라이브러리가 있습니다. 보기를 감싸면 끝입니다.

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

다음 종속성이 필요합니다.

dependencies {
    ...
    compile 'com.android.support:cardview-v7:21.0.+'
}
— 일리아 가즈 만
소스
1
이것이 유일한 정답 CardView입니다. compat 모드에서 서로 다른 고도에 대해 다양한 그림자 수준이 있기 때문 입니다.
— Jarett Millard
더 명확하고 더 많은 기능이 있으므로 MaterialCardView를 권장합니다.
— H. Farid
12

이것은 늦었을지 모르지만 여전히 이것에 대한 답을 찾고있는 사람들을 위해 git hub에서 프로젝트를 찾았으며 이것이 실제로 내 요구에 맞는 유일한 프로젝트입니다. android-materialshadowninepatch

build.gradle 종속성에이 줄을 추가하면됩니다.

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

건배. 제작자에게 좋아요! 행복한 코딩

— 랄프 가브
소스
안녕하세요 @ralphgabb, 이것이 여전히 당신에게 좋은 일입니까, 아니면 사전 롤리팝 장치에 대한 더 나은 솔루션이 있습니까?
— Swapnil
@Swapnil은 AndroidX가 현재 이것을 지원하는지 확실하지 않지만 더 이상 Marshmallow 이전 장치를 지원하지 않습니다.
— ralphgabb
5

나는 이것이 어리석은 짓이라는 것을 알고
있지만 v21에서 지원하고 싶다면 여기에 내 성과가 있습니다.

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

결과는 다음과 같습니다.

v21 미만 (xml로 만든 것) 여기에 이미지 설명 입력

v21 이상 (실제 고도 렌더링) 여기에 이미지 설명 입력

  • 한 가지 중요한 차이점은보기에서 내부 공간을 차지하므로 실제 콘텐츠 영역이 > = 롤리팝 장치 보다 작을 수 있다는 것 입니다.
— Wonsuc
소스
3

섀도우를 제대로 적용하려면 다음을 수행해야합니다.

배경 드로어 블로 정의 된 다음 뷰를 고려하십시오.

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

배경 드로어 블은 모서리가 둥근 직사각형으로 정의됩니다.

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

이것은 그림자를 적용하는 권장 방법입니다. https://developer.android.com/training/material/shadows-clipping.html#Shadows를 확인 하십시오.

— Shangeeth Sivan
소스
2

그림자 효과에 고도 속성을 사용합니다.

<YourView
    ...
    android:elevation="3dp"/>
— Ofek Ashery
소스
Elevation을 사용하려면 기기에서 Lollipop을 실행해야합니다.
— Shane Rowatt
2

둥근 그림자를 표시하려면 이와 같이 배경 드로어 블을 만듭니다.

<?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>
— 가라 브 아이크 랜스
소스
제공 한 코드에 대한 설명도 추가하십시오.
— Mangaldeep Pannu
아주 좋은 XML 유일한 솔루션
— 브루노 Bieri
2

이 질문은 오래되었을 수 있지만 복잡한 그림자 효과를 얻는 간단한 방법을 원하는 사람은 여기 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>

그림자 색상을 변경하려면 app : shadowColor = "your color code"를 사용하십시오.

— BluRe.CN
소스
1

이 모양을 배경으로 사용 : 

<?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>
— Hosseini 씨
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.