Android LinearLayout : LinearLayout 주위에 그림자가있는 테두리 추가


147

이 LinearLayout의 테두리를 예제와 같이 만들고 싶습니다.

여기에 이미지 설명을 입력하십시오

이 예에서 linearLayout 주위의 경계가 모두 동일하지 않음을 알 수 있습니다. XML 드로어 블 파일을 사용하여 어떻게 만들 수 있습니까?

지금은 다음과 같이 LinearLayout 주위에 간단한 테두리 만 만들 수 있습니다.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
  <corners
      android:radius="1dp"
      android:topRightRadius="0dp"
      android:bottomRightRadius="0dp"
      android:bottomLeftRadius="0dp" />
  <stroke
      android:width="1dp"
      android:color="#E3E3E1" />

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

</shape>

1
당신이 사용할 수있는 background... 그것을 위해 재산을 그것을 위해 사각형, 색상, 그림자 효과 등의 모양으로 하나 개의 XML 파일을 생성하고 선형 레이아웃 배경으로 설정 ...
Pragnesh Ghodaシ에게

회색 테두리 및 패딩 효과에도 스트로크 사용
Pragnesh Ghoda シ

내가 생각하기에, 두 개의 레이아웃 XML 것으로, 하나는 선형 레이아웃과 상대 레이아웃 데 내부 패딩 말한다
Giru Bhai

@ Prag 's이 xml 파일을 만드는 데 도움을 주시겠습니까?
wawanopoulos

1
다른 방법은 9 패치 이미지를 레이아웃의 배경으로 사용하는 것입니다. 이것은 정말로 부드럽고 희미한 그림자를 허용합니다 (제 의견으로는 훨씬 현실적입니다).
Phantômaxx

답변:


257

이 시도..

<?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="#CABBBBBB"/>
            <corners android:radius="2dp" />
        </shape>
    </item>

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

@Hariharan 대단히 감사합니다! 나는 당신의 코드를 시도하고 괜찮아 보인다. 그러나 아직해야 할 일이 있습니다. linearlayout의 왼쪽과 오른쪽에 얇은 테두리 (1dp)를 어떻게 추가 할 수 있습니까? (예시)
wawanopoulos 2018 년

2
@wawanopoulos 그냥 교체 "0dp""1dp"하리 하란의 대답.
Phantômaxx 2016 년

#EAEAEA 색상을 부모 레이아웃에 추가하면 질문 이미지와 동일하게됩니다.
Samad

3
나는이 들어, 당신이 사용할 수있는 제안 <gradient><shape>테두리 효과를 향상하고, 그것은 당신의 UI가 대신 단색 국경의 필요 효과가 정말도합니다.
patrickjason91

match_parent가있는 내부 레이아웃이 있는지 확인한 다음 내부 레이아웃에 여백 1을 지정하십시오
Shaktisinh Jadeja

82

이것이 CardView가 존재하는 이유입니다. CardView | Android 개발자
롤리팝 이전 장치에서 고도를 지원하는 FrameLayout입니다.

<android.support.v7.widget.CardView
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:cardUseCompatPadding="true"
    app:cardElevation="4dp"
    app:cardCornerRadius="3dp" >

    <!-- put whatever you want -->

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

이것을 사용하려면 다음에 종속성을 추가해야합니다 build.gradle.

compile 'com.android.support:cardview-v7:23.+'

어떻게 그림자의 색상을 변경할 수 있습니다
Aditay Kaushal


1
4.4.4 이상의 장치에서 매우 이상한 동작 카드 마진에 큰 마진이 추가되어 UI가 매우 추악합니다.
Morteza Rastgoo

이것이 정답입니다. 하나의 작은 업데이트. androidx one-> androidx.cardview.widget.CardView
bogdan을

59

9 패치 그래픽을 사용하여 가장 좋은 결과를 얻습니다.

다음 편집기를 사용하여 개별 9 패치 그래픽을 간단히 만들 수 있습니다. http://inloop.github.io/shadow4android/

예:

9 패치 그래픽 :

9 패치 그래픽 :

결과:

여기에 이미지 설명을 입력하십시오

출처 :

<LinearLayout
android:layout_width="200dp"
android:layout_height="200dp"
android:orientation="vertical"
android:background="@drawable/my_nine_patch"

1
검은 선을 숨기려면 어떻게해야합니까? 도와주세요
Isaac Darlong

my_nine_patch.9.png와 이미지 저장 @Isaac (.9.png 9 배치 영상이다)

이게 최선이다!
Numanqmr

35

좋아, 나는 이것이 너무 늦다는 것을 안다. 그러나 나는 같은 요구 사항이있었습니다. 나는 이렇게 풀었다

1. 먼저 "drawable"폴더에 xml 파일 (예 : border_shadow.xml)을 만들고 아래 코드를 복사하십시오.

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

<item>
    <shape>
        <!-- set the shadow color here -->
        <stroke
            android:width="2dp"
            android:color="#7000" />

        <!-- setting the thickness of shadow (positive value will give shadow on that side) -->

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

        <corners android:radius="3dp" />
    </shape>
</item>

<!-- Background -->

<item>
    <shape>
        <solid android:color="#fff" />
        <corners android:radius="3dp" />
    </shape>
</item>

2. 현재 그림자를 원하는 레이아웃 (예 : LinearLayout)에서 android : background에 추가하십시오.

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_margin="8dip"
    android:background="@drawable/border_shadow"
    android:orientation="vertical">

그리고 그것은 나를 위해 일했습니다.


20

이것은 매우 간단합니다.

다음과 같이 그라디언트가있는 드로어 블 파일을 만듭니다.

보기 아래의 그림자 below_shadow.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">   
<gradient
    android:startColor="#20000000"
    android:endColor="@android:color/transparent"
    android:angle="270" >
</gradient>
</shape>

보기 위의 그림자 above_shadow.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">   
<gradient
    android:startColor="#20000000"
    android:endColor="@android:color/transparent"
    android:angle="90" >
</gradient>
</shape>

오른쪽 및 왼쪽 그림자의 경우 그래디언트의 각도를 변경하십시오. :)


내가 below_shadow를 부르는 곳? 보기의 배경?
Arthur Melo

1
이 뷰의 배경으로 레이아웃과 세트 below_shadow.xml에서 "보기"를 추가,보기에 다음 XML 파일 below_shadow 만들기
모르테 Rastgoo

나는 당신이 말한 것과 똑같이했지만, 그 뷰를 커스텀 뷰에 넣을 때 "above_shadow"는 투명하지 않습니다. 별도로 작동합니다. 어떻게해야합니까?
SoYoung

18

또는 9 패치 이미지를 레이아웃의 배경으로 사용하여보다 "자연적인"그림자를 만들 수 있습니다.

여기에 이미지 설명을 입력하십시오

결과:

여기에 이미지 설명을 입력하십시오

이미지를 /res/drawable폴더 에 넣습니다 .
파일 확장자가 .9.png아닌이어야합니다..png

그건 그렇고, 이것은 API 19 SDK 자원 폴더에있는 기존 자원의 수정 (최소 사각형 크기로 축소)입니다.
draw9patch 도구에서 볼 수 있듯이 빨간색 마커는 유해하지 않은 것 같습니다.

[편집하다]

패치와 관련이없는 경우 약 9 개의 패치.

보기의 배경으로 추가하기 만하면됩니다.

검은 색 표시 영역 (왼쪽 및 위쪽)이 (수직, 가로) 늘어납니다.
검은 색으로 표시된 영역 (오른쪽, 아래쪽)은 "컨텐츠 영역"을 정의합니다 (텍스트 또는 뷰를 추가 할 수있는 경우 표시되지 않은 영역을 "패딩"이라고 할 수 있음).

튜토리얼 : http://radleymarx.com/blog/simple-guide-to-9-patch/


1
보기의 배경으로 추가하기 만하면됩니다. 검은 색 표시 영역 (왼쪽 및 위쪽)이 (수직, 가로) 늘어납니다. 검은 색으로 표시된 영역 (오른쪽, 아래쪽)은 "컨텐츠 영역"을 정의합니다 (텍스트 또는 뷰를 추가 할 수있는 위치-원하는 경우 "패딩"이라고 함). 튜토리얼 : radleymarx.com/blog/simple-guide-to-9-patch
Phantômaxx

9

drop_shadow.xml이라는 이름으로 드로어 블에 .xml 파일을 만듭니다.

<?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="4dp" android:top="4dp">
                <shape>
                    <solid android:color="#35000000" />
                    <corners android:radius="2dp"/>
                </shape>
            </item>
            ...
        </layer-list>
    </item>-->
    <item>
        <layer-list>
            <!-- SHADOW LAYER -->
            <!--<item android:top="4dp" android:left="4dp">
                <shape>
                    <solid android:color="#35000000" />
                    <corners android:radius="2dp" />
                </shape>
            </item>-->
            <!-- SHADOW LAYER -->
            <item>
                <shape>
                    <solid android:color="#35000000" />
                    <corners android:radius="2dp" />
                </shape>
            </item>
            <!-- CONTENT LAYER -->
            <item android:bottom="3dp" android:left="1dp" android:right="3dp" android:top="1dp">
                <shape>
                    <solid android:color="#ffffff" />
                    <corners android:radius="1dp" />
                </shape>
            </item>
        </layer-list>
    </item>
</selector>

그때:

<LinearLayout
...
android:background="@drawable/drop_shadow"/>

3

이 한 줄을 사용하면 최상의 결과를 얻을 수 있기를 바랍니다.

사용 : android:elevation="3dp" 필요한만큼 크기를 조정하면 버튼과 같은 기본 안드로이드 그림자와 같은 그림자를 얻는 가장 쉽고 간단한 방법입니다. 작동하는지 알려주세요!


@ MichałZiobro 다른 레이아웃보다 작고 그림자를 표시하려는 경우와 같이 레이아웃과 함께 사용하십시오. 작동해야합니다. 텍스트와 버튼이 보이지 않게 될 수 있지만 앱을 실행하면 최고의 그림자가 표시됩니다. 나는 그것이 어떤 종류의 버그인지 확실하지 않지만 내 경우에는 해당 코드를 사용할 때 모든 미리보기가 AS 미리보기에서 보이지 않게되지만 장치에서 디버깅 / 시작하면 앱에서 가장 잘 작동합니다. 작동 여부를 알려주세요. 감사.
Tamim

3

모양의 테두리가 이미있는 경우 입면도를 추가하십시오.

<LinearLayout
    android:id="@+id/layout"
    ...
    android:elevation="2dp"
    android:background="@drawable/rectangle" />

2
API <21의 동작은 무엇입니까?
CoolMind

1
불행히도 롤리팝 이전에는 작동하지 않으므로이 질문의 다른 답변을 사용해야합니다. 그러나 최신 휴대 전화를 타겟팅하는 경우 잘 작동하는 매우 쉬운 방법입니다.
Krzynool

2

1. 먼저 "drawable"폴더에 xml 파일 이름 shadow.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="#CABBBBBB" />
                <corners android:radius="10dp" />
            </shape>
        </item>

        <item
            android:bottom="6dp"
            android:left="0dp"
            android:right="6dp"
            android:top="0dp">
            <shape android:shape="rectangle">
                <solid android:color="@android:color/white" />
                <corners android:radius="4dp" />
            </shape>
        </item>
    </layer-list>

그런 다음 레이어 목록을 LinearLayout에 배경으로 추가하십시오.

<LinearLayout
        android:id="@+id/header_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/shadow"
        android:orientation="vertical">

감사합니다. 코드가
정상인

1
@ Johndahat은 괜찮아요
Sudhir 싱

1

Ya Mahdi aj --- RelativeLayout 용

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <gradient
                android:startColor="#7d000000"
                android:endColor="@android:color/transparent"
                android:angle="90" >
            </gradient>
            <corners android:radius="2dp" />
        </shape>
    </item>

    <item
        android:left="0dp"
        android:right="3dp"
        android:top="0dp"
        android:bottom="3dp">
        <shape android:shape="rectangle">
            <padding
                android:bottom="40dp"
                android:top="40dp"
                android:right="10dp"
                android:left="10dp"
                >
            </padding>
            <solid android:color="@color/Whitetransparent"/>
            <corners android:radius="2dp" />
        </shape>
    </item>
</layer-list>

1

나는 이것이 늦다는 것을 알고 있지만 누군가를 도울 수 있습니다.

constraintLayout을 사용하고 xml에 다음 속성을 추가 할 수 있습니다.

        android:elevation="4dp"

0

이 문제를 해결하는 가장 좋은 방법을 찾았습니다.

  1. 레이아웃에서 단색 사각형 배경을 설정해야합니다.

  2. 이 코드를 사용하십시오- ViewCompat.setElevation(view , value)

  3. 부모 레이아웃 세트에서 android:clipToPadding="false"


2
모르는 경우 ViewCompat.setElevation()ViewCompat 클래스 의 현재 메소드 구현입니다 public void setElevation(View view, float elevation) {}. 보시다시피 구현되지 않았습니다. 정말 도움이 될지 의심
스럽고
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.