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。.. ...そのためにプロパティをそれのために四角形、色と影の効果のような形状を持つ1つのXMLファイルを作成し、リニアレイアウトの背景として設定
Pragnesh Ghodaシ

灰色の境界線とパディング効果にもストロークを使用
Pragnesh Ghodaシジュン7'14

その2つのレイアウトxml、たとえば1つは線形レイアウトであり、内部はパディングを持つ相対レイアウトであると思います
Giru Bhai

@ Prag'sこのxmlファイルの作成を手伝ってくれませんか?
wawanopoulos 2014年

1
別の方法は、レイアウトの背景として9パッチ画像を使用することです。これにより、本当に滑らかなフェージングシャドウが可能になります(私の意見では、非常にリアルです)。
ファントマックス2014年

回答:


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>

@はりはらんありがとうございます!私はあなたのコードを試してみましたが、問題ないようです。しかし、まだやるべきことが1つあります。linearlayoutの左側と右側に細い境界線(1 dp)を追加するにはどうすればよいですか?(例として)
wawanopoulos 2014年

2
@wawanopoulos Hariharanの答えに置き換え"0dp"てください"1dp"
ファントマックス2014年

#EAEAEA色を親レイアウトに追加して、質問の画像のようにすることができます
Samad

3
これについてもお勧め<gradient>します。<shape>境界線効果を強化するためにを使用できます。また、それが本当に単色の境界線ではなく、UIに必要な効果である場合は、
patrickjason91 2017年

match_parentを使用して内部レイアウトがある場合は、内部レイアウトにマージン1を
指定してください

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 2017


1
4.4.4(または類似)を搭載したデバイスでの非常に奇妙な動作。大きなマージンがcardview inに追加され、UIが非常に見苦しくなります。
Morteza Rastgoo 2018年

これは受け入れられる答えになるはずです。1つの小さな更新。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
どうすれば黒い線を隠すことができますか?助けてください
アイザック・ダーロン2017年

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ファイルを作成し、ビューでレイアウトに「ビュー」を追加し、このビューの背景としてbelow_shadow.xmlを設定します
Morteza Rastgoo

私はあなたが言ったのと同じことをしましたが、そのビューをカスタムビューに配置すると、「above_shadow」が透明になりません。個別に問題なく動作します。私は何をすべきか?
SoYoung

18

別の方法として、レイアウトの背景として9パッチイメージを使用して、より「自然な」シャドウを作成できます。

ここに画像の説明を入力してください

結果:

ここに画像の説明を入力してください

画像を/res/drawableフォルダに入れます。
ファイル拡張子が.9.pngではなくであることを確認してください.png

ちなみに、これは、API 19 sdk resourcesフォルダーにある既存のリソースを変更した(最小の正方形サイズに縮小した)ものです。
赤いマーカーは、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

この1行を使用して、うまくいけば、最良の結果が得られます。

使用:android:elevation="3dp" サイズを必要なだけ調整します。 これは、ボタンのような影や他のデフォルトのAndroidの影を実現するための最良かつ最も簡単な方法です。うまくいったかどうか教えてください!


@MichałZiobroレイアウトを小さくして、影を表示したい場合などに、レイアウトで使用します。うまくいくはずです。テキストとボタンが見えなくなることがありますが、アプリを実行すると最高の影が表示されます。なんらかのバグかどうかはわかりませんが、私の場合、そのコードを使用すると、すべてのビューがASプレビューで非表示になりますが、デバイスでデバッグ/起動すると、アプリで最適に機能します。うまくいったかどうか教えてください。ありがとう。
Tamim 2018年

3

すでにシェイプからの境界線がある場合は、標高を追加するだけです。

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

2
21未満のAPIでの動作は何ですか?
CoolMind 2019

1
残念ながら、これはLollipopより前のバージョンでは機能しないため、この質問の他の回答のいくつかを使用する必要があります。しかし、もしあなたがより新しい電話をターゲットにしているなら、これはうまく機能することを行うためのかなり簡単な方法です。
Krzynool

2

1.まず、「drawable」フォルダーにshadow.xmlという名前の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>

次に、LayerLayoutの背景としてレイヤーリストを追加します。

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


0

私はこれに取り組む最善の方法を見つけました。

  1. レイアウトに無地の長方形の背景を設定する必要があります。

  2. このコードを使用- ViewCompat.setElevation(view , value)

  3. 親レイアウトセット android:clipToPadding="false"


2
ご存じない場合は、これがViewCompat.setElevation()ViewCompatクラスのメソッドの現在の実装ですpublic void setElevation(View view, float elevation) {}。ご覧のとおり、実装されていません。私はそれが何かの助けになることを本当に疑っています、そしてあなたが実際にあなた自身の答えを実際にテストしたかどうか、本当に疑問に思います、笑
mradzinski 2017
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.