web-dev-qa-db-ja.com

Android LinearLayout:LinearLayoutの周囲に影付きの境界線を追加する

例として、このLinearLayoutと同じ枠線を作成します。

enter image description here

この例では、境界が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>
125
wawanopoulos

これを試して..

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

それがCardViewが存在する理由です。 CardView | Android開発者
これは、Lollipopよりも前のデバイスの高度をサポートする、ちょうど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.+'
70
Ray Suhyun Lee

私は9パッチのグラフィックを使用することで最もよく見える結果を得ます。

次のエディタを使用して、9個のパッチグラフィックを簡単に作成できます。 http://inloop.github.io/shadow4Android/

例:

9パッチのグラフィック:

The 9 patch graphic:

結果:

enter image description here

起源:

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

さて、私はこれが遅すぎることを知っています。しかし、私は同じ要件がありました。私はこのように解決しました

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.now(例: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">

そしてそれは私のために働いた。

33
user3619170

これはとても簡単です。

このようなグラデーションで描画可能ファイルを作成します。

ビューの下の影の場合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>

左右の影については、グラデーションの角度を変更するだけです。

18
Morteza Rastgoo

別の方法として、レイアウトの背景として9パッチ画像を使用して、より「自然な」影を作り出すことができます。

enter image description here

結果:

enter image description here

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

ちなみに、これはAPI 19 sdk resourcesフォルダーにある既存のリソースの変更(最小二乗サイズに縮小)されています。
draw9patchツールに示されているように、それらは有害ではないと思われるので、私は赤いマーカーを残しました。

[編集]

あなたがそれらとは何の関係もない場合のために、約9個のパッチ。

ビューの背景として追加するだけです。

黒い印のついた部分(左と上)が伸びます(縦、横)。
黒くマークされたエリア(右、下)は「コンテンツエリア」を定義します(テキストまたはビューを追加することが可能な場所 - 必要に応じて、マークされていない領域を「パディング」と呼びます)。

チュートリアル: http://radleymarx.com/blog/simple-guide-to-9-patch/

17
Fantômas

Drop_shadow.xmlという名前でdrawableにファイル.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"/>
9
Anh Duy

この単一行を使用すると、うまく行けば最高の結果が得られます。

use:Android:elevation="3dp"必要に応じてサイズを調整します。これがボタンや他のデフォルトのAndroidシャドウのような影を付けるための最善かつ最も簡単な方法です。それがうまくいったかどうか私に知らせて!

1
Tamim

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. あなたは、レイアウト上の無地の長方形の背景を設定する必要があります。

  2. このコードを使用してください - ViewCompat.setElevation(view , value)

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

1
Sarthak Gandhi

あなたは9パッチグラフィックでそれを行うことができますが、あなたはPNGファイルを使用する必要があるため、それは間違った方法です。私はあなたがxmlファイル(ドロアブルファイル)を使うべきだと思います。このコードを使ってみてください

activity_main.xml

<LinearLayout
xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:layout_width="match_parent"
Android:layout_height="match_parent"
Android:padding="10dp"
Android:orientation="vertical">
<LinearLayout
    Android:layout_width="match_parent"
    Android:layout_height="3dp"
    Android:layout_marginLeft="3dp"
    Android:layout_marginRight="3dp"
    Android:background="@drawable/gradient_top"/>
<LinearLayout
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:orientation="horizontal">
    <LinearLayout
        Android:layout_width="3dp"
        Android:layout_height="match_parent"
        Android:layout_marginBottom="3dp"
        Android:background="@drawable/gradient_left"/>
        <LinearLayout
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            Android:layout_marginRight="3dp"
            Android:layout_marginBottom="3dp"
            Android:background="@color/md_white_1000"
            Android:orientation="vertical">

        </LinearLayout>

    <LinearLayout
        Android:layout_width="3dp"
        Android:layout_height="match_parent"
        Android:layout_marginLeft="-4dp"
        Android:layout_marginBottom="3dp"
        Android:background="@drawable/gradient_right"/>
</LinearLayout>
<LinearLayout
    Android:layout_width="match_parent"
    Android:layout_height="3dp"
    Android:layout_marginTop="-4dp"
    Android:layout_marginLeft="3dp"
    Android:layout_marginRight="3dp"
    Android:background="@drawable/gradient_bottom"/>

gradient_top.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:shape="rectangle">
<gradient
    Android:startColor="#dadada"
    Android:endColor="#f2f2f2"
    Android:angle="90"/>
</shape>

gradient_left.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:shape="rectangle">
<gradient
    Android:startColor="#dadada"
    Android:endColor="#f2f2f2"
    Android:angle="180"/>
</shape>

gradient_right.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:shape="rectangle">
<gradient
    Android:startColor="#dadada"
    Android:endColor="#f2f2f2"
    Android:angle="0"/>
</shape>

gradient_bottom.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:shape="rectangle">
<gradient
    Android:startColor="#dadada"
    Android:endColor="#f2f2f2"
    Android:angle="270"/>
</shape>

enter image description here

0

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

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

あなたはこのサイトで影をつけることができます: http://inloop.github.io/shadow4Android/ 。パラメータを設定し、9-patch.pngファイルをダウンロードしてください。

0
CoolMind