Wie kann ich Schatten für mein lineares Layout anzeigen? Ich möchte einen weiß gerundeten Hintergrund mit Schatten um das lineare Layout. Ich habe das bisher gemacht.
<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>
Und round_rect_shape.xml im XML-Verzeichnis
<?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>
Antworten:
In Android gibt es kein solches Attribut, um einen Schatten anzuzeigen. Aber mögliche Wege, dies zu tun, sind:
Fügen Sie ein einfaches LinearLayout mit grauer Farbe hinzu, über dem Sie Ihr tatsächliches Layout hinzufügen. Der Rand unten und rechts entspricht 1 oder 2 dp
Erstellen Sie ein 9-Patch-Bild mit einem Schatten und legen Sie es als Hintergrund für Ihr lineares Layout fest
quelle
Es gibt auch eine andere Lösung für das Problem, indem eine Ebenenliste implementiert wird, die als Hintergrund für das LinearLayoout dient.
Fügen Sie die Datei background_with_shadow.xml hinzu
res/drawable
. Enthält:<?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>
Fügen Sie dann die Ebenenliste als Hintergrund in Ihr LinearLayout ein.
<LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/background_with_shadow"/>
quelle
Nun, das ist leicht zu erreichen.
Erstellen Sie einfach eine
GradientDrawable
, die aus Schwarz stammt und eine transparente Farbe annimmt. Verwenden Sie dann die übergeordnete Beziehung, um Ihre Form in der Nähe der Ansicht zu platzieren, für die Sie einen Schatten haben möchten. Dann müssen Sie nur noch Werte für Höhe oder Breite angeben.Hier ist ein Beispiel, diese Datei muss im Inneren erstellt werden
res/drawable
, ich nenne sieshadow.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>
Platzieren Sie den folgenden Code oben von a
LinearLayout
, setzen Sie beispielsweise dasandroid:layout_width
undandroid:layout_height
auffill_parent
und2.3dp
, Sie haben einen schönen Schatteneffekt auf IhremLinearLayout
.<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>
Hinweis 1: Wenn Sie
android:layout_height
mehr Schatten erhöhen , wird angezeigt.Hinweis 2: Verwenden Sie das
android:layout_above="@+id/id_from_your_LinearLayout"
Attribut, wenn Sie diesen Code in einem RelativeLayout platzieren, andernfalls ignorieren Sie ihn.Hoffe es hilft jemandem.
quelle
Für Lutscher und höher können Sie die Höhe verwenden .
Für ältere Versionen:
Hier ist ein fauler Hack von: http://odedhb.blogspot.com/2013/05/android-layout-shadow-without-9-patch.html
(toast_frame funktioniert nicht mit KitKat, Schatten wurde von Toast entfernt)
benutz einfach:
android:background="@android:drawable/toast_frame"
oder:
android:background="@android:drawable/dialog_frame"
als Hintergrund
Beispiele:
<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" />
und mit unterschiedlicher bg Farbe:
<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>
quelle
android:background="@android:drawable/alert_light_frame"
für weißVersuchen Sie dies .. 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>
So auf Ihr Layout anwenden
android:background="@drawable/layout_shadow"
quelle
Ich weiß, dass dies alt ist, aber die meisten dieser Antworten erfordern eine Menge zusätzlichen Code.
Wenn Sie einen hellen Hintergrund haben, können Sie dies einfach verwenden:
android:elevation="25dp"
quelle
Eigentlich stimme ich @odedbreiner zu, aber ich lege den dialog_frame in die erste Ebene und verstecke den schwarzen Hintergrund unter der weißen Ebene.
<?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>
quelle
9.png
)2. Speichern Sie es in Ihrem
drawable
.3. Stellen Sie es auf Ihr Layout ein.
4. Polsterung einstellen.
Zum Beispiel :
<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>
quelle
Erstellen Sie ein neues XML-Beispiel mit dem Namen "shadow.xml" bei DRAWABLE mit dem folgenden Code (Sie können es ändern oder ein anderes besseres finden):
<?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>
Nachdem Sie das XML im LinearLayout oder einem anderen Widget erstellt haben, das Sie als Schatten erstellen möchten, verwenden Sie die Eigenschaft BACKGROUND, um den Effekt anzuzeigen. Es wäre so etwas wie:
<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">
quelle
Sie können die folgende Klasse für das XML-Tag verwenden:
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); } }
Verwenden Sie Tag in XML wie folgt:
<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>
AKTUALISIEREN
Fügen Sie den folgenden Code in attrs.xml in die Ressourcenwerte >> ein
<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>
quelle
<TextView>
die Textansicht zentriert, aber keinen Schatten hinzugefügt.Eine mögliche Lösung ist die Verwendung von neun Patch-Images wie diesem: http://developer.android.com/guide/topics/graphics/2d-graphics.html#nine-patch
ODER
Ich habe dies folgendermaßen gemacht. Dies ist mein Hauptlayout, in dem round_corner.xml und drop_shadow.xml als Hintergrundressource verwendet werden. round_corner_two ist dasselbe wie round_corner.xml, nur das Farbattribut ist unterschiedlich. Kopieren Sie die Dateien round_corner.xml, drop_shadow.xml und round_conere_two.xml in einen zeichnbaren Ordner.
<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>
quelle
Ich weiß, das ist viel zu spät. aber ich hatte die gleiche Anforderung. Ich habe so gelöst
<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>
Sie müssen Abhängigkeit hinzufügen:
compile 'com.android.support:cardview-v7:25.0.1'
quelle
Setze diese XML Drwable als Hintergrund; ---
<?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>
quelle