Button에 그림자를 제공하는 방법


답변:


134

이 방법을 사용하여 원하는 모양을 얻으십시오.
button_selector.xml :

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <layer-list>
        <item android:right="5dp" android:top="5dp">
            <shape>
                <corners android:radius="3dp" />
                <solid android:color="#D6D6D6" />
            </shape>
        </item>
        <item android:bottom="2dp" android:left="2dp">
            <shape>
                <gradient android:angle="270" 
                    android:endColor="#E2E2E2" android:startColor="#BABABA" />
                <stroke android:width="1dp" android:color="#BABABA" />
                <corners android:radius="4dp" />
                <padding android:bottom="10dp" android:left="10dp" 
                    android:right="10dp" android:top="10dp" />
            </shape>
        </item>
    </layer-list>
</item>

</selector>

그리고 xml 레이아웃에서 :

<Button
   android:background="@drawable/button_selector"
   ...
   ..
/>

이것은 멋져 보이지만 내가 이것을 시도했을 때 intellij는 그것을 좋아하지 않았습니다. 내가 보았을 때 문서 에 대한 item그것은 말한다 android:drawable되어 필요합니다 .
JohnnyLambada

1
닫는 </ selector> 태그가 없습니다
myforums 2014

6
이 솔루션은 그라디언트 버튼 배경과 단색 그림자 색상을 반대로 만들기 때문에 질문자가 원하는 것은 아닙니다. 그리고 이것은 외부 그림자와는 매우 다른 것 같습니다

1
textColor 선택기가 위의 선택기에 구워 지도록 만들 수 있으므로 버튼을 정의 할 때마다 배경 textColor를 둘 다 설정할 필요는 없지만 배경 만 설정하면됩니까?
JohnyTex 2015 년

<selector>그리고 <item>필요하지 않습니다. @ user4702646이 말했듯이 이미지가 되돌립니다.
CoolMind

57

Android 버전 5.0 이상

다른 뷰를 보려면 Elevation 을 시도하십시오 .

android:elevation="10dp"

버튼의 경우

android:stateListAnimator="@anim/button_state_list_animator"

button_state_list_animator.xml - https: //android.googlesource.com/platform/frameworks/base/+/master/core/res/res/anim/button_state_list_anim_material.xml

5.0 이하 버전,

모든보기에 대해

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

내 출력 :

여기에 이미지 설명 입력


이 접근 방식을 사용하고 싶지만 내 버튼은 선언적으로가 아닌 그리드 컨트롤에서 동적으로 (즉 코드에서) 생성됩니다 (실제로는 Xamarin 무료 버전을 사용하므로 Mono lib를 사용하고 있습니다). 속성을 설정하는 간단한 방법이 아닌 것 같습니다.
jrichview

@jrichview이 답변을 참조하고 stackoverflow.com/a/24459128/3879847
Ranjith Kumar

버튼 모양을 드로어 블로 설정하면 어떻게 드로어 블로 사용할 수 있나요?
Egor Randomize

21

여기 폴더 cw_button_shadow.xml 안에 그림자가있는 버튼이 있습니다.drawable

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="false">
        <layer-list>
            <!-- SHADOW -->
            <item>
                <shape>
                    <solid android:color="@color/red_400"/>
                    <!-- alttan gölge -->
                    <corners android:radius="19dp"/>
                </shape>
            </item>
            <!-- BUTTON alttan gölge
              android:right="5px" to make it round-->
            <item
                android:bottom="5px"
                >
                <shape>
                    <padding android:bottom="5dp"/>
                    <gradient
                        android:startColor="#1c4985"
                        android:endColor="#163969"
                        android:angle="270" />
                    <corners
                        android:radius="19dp"/>
                    <padding
                        android:left="10dp"
                        android:top="10dp"
                        android:right="5dp"
                        android:bottom="10dp"/>
                </shape>
            </item>
        </layer-list>
    </item>

    <item android:state_pressed="true">
        <layer-list>
            <!-- SHADOW -->
            <item>
                <shape>
                    <solid android:color="#102746"/>
                    <corners android:radius="19dp"/>

                </shape>
            </item>
            <!-- BUTTON -->
            <item android:bottom="5px">
                <shape>
                    <padding android:bottom="5dp"/>
                    <gradient
                        android:startColor="#1c4985"
                        android:endColor="#163969"
                        android:angle="270" />
                    <corners
                        android:radius="19dp"/>
                    <padding
                        android:left="10dp"
                        android:top="10dp"
                        android:right="5dp"
                        android:bottom="10dp"/>
                </shape>
            </item>
        </layer-list>
    </item>
</selector>

사용하는 방법. Button xml에서 키와 몸무게의 크기를 조정할 수 있습니다.

<Button
                android:text="+ add friends"
                android:layout_width="120dp"
                android:layout_height="40dp"
               android:background="@drawable/cw_button_shadow" />

여기에 이미지 설명 입력


13

롤리팝 이전 장치를 대상으로하는 경우 쉽고 다양한 레이아웃에서 사용할 수있는 Shadow-Layout 을 사용할 수 있습니다.


Gradle 파일에 그림자 레이아웃 추가 :

dependencies {
    compile 'com.github.dmytrodanylyk.shadow-layout:library:1.0.1'
}


버튼이있는 xml 레이아웃 상단에 다음을 추가합니다 .

xmlns:app="http://schemas.android.com/apk/res-auto"

사용자 정의 속성을 사용할 수 있습니다.


그런 다음 Button 주위에 그림자 레이아웃을 배치합니다 .

<com.dd.ShadowLayout
        android:layout_marginTop="16dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:sl_shadowRadius="4dp"
        app:sl_shadowColor="#AA000000"
        app:sl_dx="0dp"
        app:sl_dy="0dp"
        app:sl_cornerRadius="56dp"> 

       <YourButton
          .... />

</com.dd.ShadowLayout>

그런 다음 app:필요한 그림자와 일치 하도록 설정을 조정할 수 있습니다 .

도움이 되었기를 바랍니다.


지원 중단 및 더 이상 지원되지 않는 가난한 lib. 게다가 밝은 그림자가 아닌 어두운 / 검은 그림자 만 허용하는 것 같습니다.
포스 버그

10

나는 위에서 코드를 시도하고 내가 달성하려는 것에 조금 더 가까운 내 그림자를 만들었습니다. 아마도 그것은 다른 사람들에게도 도움이 될 것입니다.

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <layer-list>
            <item android:left="5dp" android:top="5dp">
                <shape>
                    <corners android:radius="3dp" />
                    <gradient
                        android:angle="315"
                        android:endColor="@android:color/transparent"
                        android:startColor="@android:color/black"
                        android:type="radial"
                        android:centerX="0.55"
                        android:centerY="0"
                        android:gradientRadius="300"/>
                    <padding android:bottom="1dp" android:left="0dp" android:right="3dp" android:top="0dp" />
                </shape>
            </item>
            <item android:bottom="2dp" android:left="3dp">
                <shape>
                    <corners android:radius="1dp" />
                    <solid android:color="@color/colorPrimary" />


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

</selector>

1
스크린 샷을 첨부하세요.
CoolMind

3

이것이 당신을 위해 작동한다면 이것을 시도하십시오

여기에 이미지 설명 입력

android:background="@drawable/drop_shadow"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingLeft="3dp"
        android:paddingTop="3dp"
        android:paddingRight="4dp"
        android:paddingBottom="5dp"

1

그림자가있는 샘플 9 패치 이미지

많은 연구 끝에 나는 쉬운 방법을 찾았습니다.

9 패치 이미지를 만들고 단추 또는 다른보기의 배경으로 적용합니다.

웹 사이트를 사용하여 그림자가있는 9 패치 이미지를 만들 수 있습니다 .

드로어 블 디렉토리에 9 패치 이미지를 넣고 버튼의 배경으로 적용합니다.

mButton.setBackground(ContextCompat.getDrawable(mContext, R.drawable.your_9_patch_image);

0

이것을 시도 할 수 있습니다.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<layer-list>
        <item android:left="1dp" android:top="3dp">
            <shape>
                <solid android:color="#a5040d" />
                <corners android:radius="3dip"/>
            </shape>
        </item>
    </layer-list>
  </item>
<item>
    <layer-list>
        <item android:left="0dp" android:top="0dp">
            <shape>
                    <solid android:color="#99080d" />
                <corners android:radius="3dip"/>
            </shape>
        </item>
        <item android:bottom="3dp" android:right="2dp">
            <shape>
                <solid android:color="#a5040d" />
                <corners android:radius="3dip"/>
            </shape>
        </item>
    </layer-list>
</item>



당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.