Androidでlinearlayoutの周りに影を表示する方法は？
線形レイアウトの影を表示するにはどうすればよいですか。線形レイアウトの周りに影のある白い丸い背景が欲しい。私はこれまでこれをやった。私を助けてください。前もって感謝します。
<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ディレクトリの下のrounded_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>
Androidには、影を表示するような属性はありません。しかし、可能な方法は次のとおりです。
グレー色のプレーンなLinearLayoutを追加し、その上に実際のレイアウトを追加します。右下のマージンは1または2 dpです。
シャドウ付きの9パッチイメージを作成し、線形レイアウトの背景として設定します
LinearLayooutの背景として機能するレイヤーリストを実装することにより、問題に対する別のソリューションもあります。
Background_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"/>
まあ、これは簡単に達成できます。
親関係を使用して影を付けたいビューの近くに図形を配置するよりも、黒から来て透明色になる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"属性を使用し、そうでない場合は無視します。
それが誰かを助けることを願っています。
Lollipop以降では elevation を使用できます。
古いバージョンの場合：
ここからの怠zyなハックです： http://odedhb.blogspot.com/2013/05/Android-layout-shadow-without-9-patch.html
（toast_frameは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"
/>
異なるbg色で：
<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>
これを試してください。layout_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"
実際、@ odedbreinerに同意していますが、dialog_frameを最初のレイヤー内に配置し、白いレイヤーの下に黒い背景を隠しています。
<?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>
- この9.pngを保存します。 （名前を
9.pngに変更します）
2. drawableに保存します。
3.レイアウトに設定します。
4.set padding。
例えば ：
<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>
私はこれが古いことを知っていますが、これらの答えのほとんどは大量の追加コードが必要です。
明るい色の背景がある場合は、これを単純に使用できます。
Android:elevation="25dp"
次のコードを使用して、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またはシェードを作成する別のウィジェットでXMLを作成した後、Backgroundプロパティを使用して効果を確認します。次のようなものになります。
<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">
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>
UPDATE
resource >> valuesの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.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'
考えられる解決策の1つは、次のような9つのパッチイメージを使用することです http://developer.Android.com/guide/topics/graphics/2d-graphics.html#nine-patch
OR
これは次の方法で行いました。これは、round_corner.xmlとdrop_shadow.xmlがバックグラウンドリソースとして使用される私のメインレイアウトです。 round_corner_twoはround_corner.xmlと同じですが、色属性が異なります。 round_corner.xml、drop_shadow.xmlおよびround_conere_two.xmlをdrawableフォルダーにコピーします。
<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>
このxml drawableを背景として設定します; ---
<?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>