如何显示阴影周围的线性布局在 Android？

如何显示我的线性布局阴影。我想白色的圆形背景与阴影周围的线性布局。到目前为止我都这么做了。

<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:background="@xml/rounded_rect_shape"
android:orientation="vertical"
android:padding="10dp">
<-- My buttons, textviews, Imageviews go here -->
</LinearLayout>

以及 xml 目录下的 round _ rect _ shape.xml

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


<solid android:color="#ffffff" />


<corners
android:bottomLeftRadius="3dp"
android:bottomRightRadius="3dp"
android:topLeftRadius="3dp"
android:topRightRadius="3dp" />
</shape>
185582 次浏览
小开

将这个 xml 可绘制文件设置为您的背景; ——-

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


<!-- Bottom 2dp Shadow -->
<item>
<shape android:shape="rectangle" >
<solid android:color="#d8d8d8" />-->Your shadow color<--


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


<!-- White Top color -->
<item android:bottom="3px" android:left="3px" android:right="3px" android:top="3px">-->here you can customize the shadow size<---
<shape android:shape="rectangle" >
<solid android:color="#FFFFFF" />


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


</layer-list>
小开
最佳答案

在 Android 中没有这样的属性，显示阴影，但可能的方法是:

  1. 添加一个灰色的简单线性布局，在其上添加您的实际布局，在底部和右边距等于1或2 dp

  2. 有一个9-补丁图像与阴影，并设置为背景，以您的线性布局

小开

还有另一个解决方案，它实现了一个层列表，作为 LinearLayout 的背景。

将 back _ with _ shadow. xml 文件添加到 res/drawable，其中包含:

<?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="@android:color/darker_gray" />
<corners android:radius="5dp"/>
</shape>
</item>
<item android:right="1dp" android:left="1dp" android:bottom="2dp">
<shape
android:shape="rectangle">
<solid android:color="@android:color/white"/>
<corners android:radius="5dp"/>
</shape>
</item>
</layer-list>

然后在 LinearLayout 中添加层列表作为背景。

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/background_with_shadow"/>
小开

对于棒棒糖及以上，您可以使用 海拔。

对于旧版本:

下面是来自: Http://odedhb.blogspot.com/2013/05/android-layout-shadow-without-9-patch.html

(吐司框架在 KitKat 上不起作用，阴影从吐司中移除)

使用:

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

或:

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

作为背景

例子:

<TextView
android:layout_width="fill_parent"
android:text="I am a simple textview with a shadow"
android:layout_height="wrap_content"
android:textSize="18sp"
android:padding="16dp"
android:textColor="#fff"
android:background="@android:drawable/toast_frame"
/>

颜色不同:

<LinearLayout
android:layout_height="64dp"
android:layout_width="fill_parent"
android:gravity="center"
android:background="@android:drawable/toast_frame"
android:padding="4dp"
>
<Button
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="Button shadow"
android:background="#33b5e5"
android:textSize="24sp"
android:textStyle="bold"
android:textColor="#fff"
android:layout_gravity="center|bottom"
/>


</LinearLayout>
小开

这很容易做到。

只要构建一个从黑色到透明颜色的 GradientDrawable，然后使用父关系将你的形状放置在你想要有阴影的视图附近，然后你只需要给高度或宽度任何值。

下面是一个例子，这个文件必须在 res/drawable中创建，我把它命名为 shadow.xml:

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


<gradient
android:startColor="#9444"
android:endColor="#0000"
android:type="linear"
android:angle="90"> <!-- Change this value to have the correct shadow angle, must be multiple from 45 -->
</gradient>


</shape>

将下面的代码从 LinearLayout放置在上面，例如，将 android:layout_width和 android:layout_height设置为 fill_parent和 2.3dp，您将在您的 LinearLayout上有一个很好的阴影效果。

<View
android:id="@+id/shadow"
android:layout_width="fill_parent"
android:layout_height="2.3dp"
android:layout_above="@+id/id_from_your_LinearLayout"
android:background="@drawable/shadow">
</View>

注1: 如果你增加 android:layout_height会显示更多的阴影。

注意2: 如果将此代码放在 RelativeLayout 中，请使用 android:layout_above="@+id/id_from_your_LinearLayout"属性，否则忽略它。

希望能帮到别人。

小开

一个可能的解决方案是使用像这样的九个补丁图像 http://developer.android.com/guide/topics/graphics/2d-graphics.html#nine-patch

或者

我用以下方法做到了这一点。这是我的主要布局，其中 round _ corber.xml 和 drop _ Shadow.xml 用作后台资源。Round _ corner _ two 与 round _ corner. xml 相同，只是颜色属性不同。将 round _ config.xml、 drop _ Shadow.xml 和 round _ conere _ two.xml 复制到可绘制的文件夹中。

<RelativeLayout
android:id="@+id/facebook_id"
android:layout_width="250dp"
android:layout_height="52dp"
android:layout_centerHorizontal="true"
android:layout_marginTop="28dp"
android:background="@drawable/round_corner" >


<LinearLayout
android:id="@+id/shadow_id"
android:layout_width="match_parent"
android:layout_height="48dp"
android:layout_margin="1dp"
android:background="@drawable/drop_shadow" >


<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_marginBottom="2dp"
android:background="@drawable/round_corner_two"
android:gravity="center"
android:text="@string/fb_butn_text"
android:textColor="@color/white" >
</TextView>
</LinearLayout>
</RelativeLayout>

Round _ corner. xml:

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


<!-- view background color -->
<solid
android:color="#ffffff" >
</solid>


<!-- view border color and width -->
<stroke
android:width="0dp"
android:color="#3b5998" >
</stroke>


<!-- If you want to add some padding -->
<padding
android:left="1dp"
android:top="1dp"
android:right="1dp"
android:bottom="1dp"    >
</padding>


<!-- Here is the corner radius -->
<corners
android:radius="10dp"   >
</corners>


</shape>

Drop _ 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="@android:color/darker_gray" />
<corners android:radius="12dp"/>
</shape>
</item>
<item android:right="1dp" android:left="1dp" android:bottom="5dp">
<shape
android:shape="rectangle">
<solid android:color="@android:color/white"/>
<corners android:radius="5dp"/>
</shape>
</item>
</layer-list>
小开

通过 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="@color/middle_grey"/>
</shape>
</item>


<item android:left="2dp"
android:right="2dp"
android:bottom="2dp">
<shape android:shape="rectangle">
<solid android:color="@color/white"/>
</shape>
</item>


</layer-list>

在 LinearLayout 或另一个要创建阴影的 Widget 中创建 XML 之后，使用 BACKGROound 属性查看效果。比如:

<LinearLayout
android:orientation="horizontal"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:paddingRight="@dimen/margin_med"
android:background="@drawable/shadow"
android:minHeight="?attr/actionBarSize"
android:gravity="center_vertical">
小开

事实上，我同意@odedbreiner，但是我把对话框放在第一层里面，把黑色背景隐藏在白色图层下面。

    <?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="@android:drawable/dialog_frame"
android:right="2dp" android:left="2dp" android:bottom="2dp" android:top="5dp" >
<shape android:shape="rectangle">
<corners android:radius="5dp"/>
</shape>
</item>
<item>
<shape
android:shape="rectangle">
<solid android:color="@android:color/white"/>
<corners android:radius="5dp"/>
</shape>
</item>
</layer-list>
小开
  1. 保存这个9.png (更改名称为 9.png)

enter image description here

2. 保存在 drawable中。

3. 设置为你的布局。

4. 设置填充物。

例如:

<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="@drawable/shadow"
android:paddingBottom="6dp"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:paddingTop="6dp"
>


.
.
.
</LinearLayout>
小开

试试这个. . lay_ 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="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>

像这样应用到你的布局中

 android:background="@drawable/layout_shadow"
小开

我知道这太迟了，但我也有同样的要求，我就这样解决了

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

您需要添加依赖项:

compile 'com.android.support:cardview-v7:25.0.1'
小开

可以对 xml 标记使用以下类:

import android.annotation.SuppressLint;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Bitmap;
import android.graphics.BlurMaskFilter;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.PorterDuff;
import android.graphics.Rect;
import android.os.Build;
import android.support.annotation.FloatRange;
import android.util.AttributeSet;
import android.view.ViewGroup;
import android.view.ViewTreeObserver;
import android.widget.FrameLayout;


import com.webappmate.weeassure.R;


/**
* Created by GIGAMOLE on 13.04.2016.
*/
public class ShadowLayout extends FrameLayout {


// Default shadow values
private final static float DEFAULT_SHADOW_RADIUS = 30.0F;
private final static float DEFAULT_SHADOW_DISTANCE = 15.0F;
private final static float DEFAULT_SHADOW_ANGLE = 45.0F;
private final static int DEFAULT_SHADOW_COLOR = Color.DKGRAY;


// Shadow bounds values
private final static int MAX_ALPHA = 255;
private final static float MAX_ANGLE = 360.0F;
private final static float MIN_RADIUS = 0.1F;
private final static float MIN_ANGLE = 0.0F;
// Shadow paint
private final Paint mPaint = new Paint(Paint.ANTI_ALIAS_FLAG) {
{
setDither(true);
setFilterBitmap(true);
}
};
// Shadow bitmap and canvas
private Bitmap mBitmap;
private final Canvas mCanvas = new Canvas();
// View bounds
private final Rect mBounds = new Rect();
// Check whether need to redraw shadow
private boolean mInvalidateShadow = true;


// Detect if shadow is visible
private boolean mIsShadowed;


// Shadow variables
private int mShadowColor;
private int mShadowAlpha;
private float mShadowRadius;
private float mShadowDistance;
private float mShadowAngle;
private float mShadowDx;
private float mShadowDy;


public ShadowLayout(final Context context) {
this(context, null);
}


public ShadowLayout(final Context context, final AttributeSet attrs) {
this(context, attrs, 0);
}


public ShadowLayout(final Context context, final AttributeSet attrs, final int defStyleAttr) {
super(context, attrs, defStyleAttr);


setWillNotDraw(false);
setLayerType(LAYER_TYPE_HARDWARE, mPaint);


// Retrieve attributes from xml
final TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.ShadowLayout);


try {
setIsShadowed(typedArray.getBoolean(R.styleable.ShadowLayout_sl_shadowed, true));
setShadowRadius(
typedArray.getDimension(
R.styleable.ShadowLayout_sl_shadow_radius, DEFAULT_SHADOW_RADIUS
)
);
setShadowDistance(
typedArray.getDimension(
R.styleable.ShadowLayout_sl_shadow_distance, DEFAULT_SHADOW_DISTANCE
)
);
setShadowAngle(
typedArray.getInteger(
R.styleable.ShadowLayout_sl_shadow_angle, (int) DEFAULT_SHADOW_ANGLE
)
);
setShadowColor(
typedArray.getColor(
R.styleable.ShadowLayout_sl_shadow_color, DEFAULT_SHADOW_COLOR
)
);
} finally {
typedArray.recycle();
}
}


@Override
protected void onDetachedFromWindow() {
super.onDetachedFromWindow();
// Clear shadow bitmap
if (mBitmap != null) {
mBitmap.recycle();
mBitmap = null;
}
}


public boolean isShadowed() {
return mIsShadowed;
}


public void setIsShadowed(final boolean isShadowed) {
mIsShadowed = isShadowed;
postInvalidate();
}


public float getShadowDistance() {
return mShadowDistance;
}


public void setShadowDistance(final float shadowDistance) {
mShadowDistance = shadowDistance;
resetShadow();
}


public float getShadowAngle() {
return mShadowAngle;
}


@SuppressLint("SupportAnnotationUsage")
@FloatRange
public void setShadowAngle(@FloatRange(from = MIN_ANGLE, to = MAX_ANGLE) final float shadowAngle) {
mShadowAngle = Math.max(MIN_ANGLE, Math.min(shadowAngle, MAX_ANGLE));
resetShadow();
}


public float getShadowRadius() {
return mShadowRadius;
}


public void setShadowRadius(final float shadowRadius) {
mShadowRadius = Math.max(MIN_RADIUS, shadowRadius);


if (isInEditMode()) return;
// Set blur filter to paint
mPaint.setMaskFilter(new BlurMaskFilter(mShadowRadius, BlurMaskFilter.Blur.NORMAL));
resetShadow();
}


public int getShadowColor() {
return mShadowColor;
}


public void setShadowColor(final int shadowColor) {
mShadowColor = shadowColor;
mShadowAlpha = Color.alpha(shadowColor);


resetShadow();
}


public float getShadowDx() {
return mShadowDx;
}


public float getShadowDy() {
return mShadowDy;
}


// Reset shadow layer
private void resetShadow() {
// Detect shadow axis offset
mShadowDx = (float) ((mShadowDistance) * Math.cos(mShadowAngle / 180.0F * Math.PI));
mShadowDy = (float) ((mShadowDistance) * Math.sin(mShadowAngle / 180.0F * Math.PI));


// Set padding for shadow bitmap
final int padding = (int) (mShadowDistance + mShadowRadius);
setPadding(padding, padding, padding, padding);
requestLayout();
}


private int adjustShadowAlpha(final boolean adjust) {
return Color.argb(
adjust ? MAX_ALPHA : mShadowAlpha,
Color.red(mShadowColor),
Color.green(mShadowColor),
Color.blue(mShadowColor)
);
}


@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);


// Set ShadowLayout bounds
mBounds.set(
0, 0, MeasureSpec.getSize(widthMeasureSpec), MeasureSpec.getSize(heightMeasureSpec)
);
}


@Override
public void requestLayout() {
// Redraw shadow
mInvalidateShadow = true;
super.requestLayout();
}


@Override
protected void dispatchDraw(final Canvas canvas) {
// If is not shadowed, skip
if (mIsShadowed) {
// If need to redraw shadow
if (mInvalidateShadow) {
// If bounds is zero
if (mBounds.width() != 0 && mBounds.height() != 0) {
// Reset bitmap to bounds
mBitmap = Bitmap.createBitmap(
mBounds.width(), mBounds.height(), Bitmap.Config.ARGB_8888
);
// Canvas reset
mCanvas.setBitmap(mBitmap);


// We just redraw
mInvalidateShadow = false;
// Main feature of this lib. We create the local copy of all content, so now
// we can draw bitmap as a bottom layer of natural canvas.
// We draw shadow like blur effect on bitmap, cause of setShadowLayer() method of
// paint does`t draw shadow, it draw another copy of bitmap
super.dispatchDraw(mCanvas);


// Get the alpha bounds of bitmap
final Bitmap extractedAlpha = mBitmap.extractAlpha();
// Clear past content content to draw shadow
mCanvas.drawColor(0, PorterDuff.Mode.CLEAR);


// Draw extracted alpha bounds of our local canvas
mPaint.setColor(adjustShadowAlpha(false));
mCanvas.drawBitmap(extractedAlpha, mShadowDx, mShadowDy, mPaint);


// Recycle and clear extracted alpha
extractedAlpha.recycle();
} else {
// Create placeholder bitmap when size is zero and wait until new size coming up
mBitmap = Bitmap.createBitmap(1, 1, Bitmap.Config.RGB_565);
}
}


// Reset alpha to draw child with full alpha
mPaint.setColor(adjustShadowAlpha(true));
// Draw shadow bitmap
if (mCanvas != null && mBitmap != null && !mBitmap.isRecycled())
canvas.drawBitmap(mBitmap, 0.0F, 0.0F, mPaint);
}


// Draw child`s
super.dispatchDraw(canvas);
}




}

在 xml 中像这样使用 Tag:

<yourpackagename.ShadowLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_gravity="center_horizontal"
app:sl_shadow_color="#9e000000"
app:sl_shadow_radius="4dp">
<child views>
</yourpackagename.ShadowLayout>

更新

将下面的代码放在 resource > > value 中的 attrs.xml 中

  <declare-styleable name="ShadowLayout">
<attr name="sl_shadowed" format="boolean"/>
<attr name="sl_shadow_distance" format="dimension"/>
<attr name="sl_shadow_angle" format="integer"/>
<attr name="sl_shadow_radius" format="dimension"/>
<attr name="sl_shadow_color" format="color"/>
</declare-styleable>
小开

我知道这很老套，但大多数答案都需要大量的额外代码。

如果你有一个浅色的背景，你可以简单地使用:

android:elevation="25dp"

提交答案