Як показати тінь навколо лінійної розкладки в Android?


79

Як я можу показати тінь для мого лінійного макета. Я хочу білий кольоровий закруглений фон з тінню навколо лінійного макета. Я зробив це дотепер.

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

І rounded_rect_shape.xml в каталозі 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>

Відповіді:


28

В Android немає такого атрибута, щоб показати тінь. Але можливі способи зробити це:

  1. Додайте звичайний LinearLayout із сірим кольором, над яким додайте ваш фактичний макет, з полем внизу та праворуч, рівним 1 або 2 dp

  2. Майте 9-патч-зображення із тінню та встановіть його як фон для вашого лінійного макета


9-патч - найкращий спосіб це зробити!
Андранік,

Чи є спосіб використовувати 9 латок із користувацькими полігонами? Я спробував цей інструмент inloop.github.io/shadow4android, але він просто створює тіні для овальних / прямокутних форм
rimes

144

Існує також інше рішення проблеми шляхом реалізації списку шарів, який буде виконувати роль фону для 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"/>

Ого! Я зробив щось із цього, і виглядає не так чудово. Якщо ви шукаєте голо-стандарт, це виглядає ідеально. Дякую, чувак.
jfcogato

Приємний ефект, дякую !! Але є одна незначна проблема - непомітна - у мене є: тінь насправді не поруч із білим макетом, але поділяє відцентрований простір. Якщо те, що я кажу, недостатньо зрозуміле, просто спробуйте той самий код із 100dp замість 1dp. Я знаю, це невидимо в більшості випадків, але якщо хтось може запропонувати мені рішення, це буде ідеально!
Путратор,

1
@Poutrathor, цікаво, що ви помітили цю проблему. На жаль, на даний момент я не можу запропонувати іншого рішення. Що ви намагаєтесь досягти? Можливо, хтось може допомогти вам у вирішенні вашої проблеми.
muthee

"Що ви намагаєтесь досягти?" Досконалість, звичайно! Жартую, я це помічаю, тому повідомляю про це. ваше рішення дійсно добре для модної дуже короткої тіні, і я зараз із задоволенням його використовую. Я хотів би дати вам більше голосів :)
Путратор

3
Додамо, що верхня фігура - це тінь (!), А нижня - основна більша частина.
салона

30

Ну, цього легко досягти.

Просто побудуйте, 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. Використовуйте android:layout_above="@+id/id_from_your_LinearLayout"атрибут, якщо ви розміщуєте цей код всередині RelativeLayout, інакше ігноруйте його.

Сподіваюся, це комусь допоможе.


привіт ... я знаю, що це старе ... але ти хочеш сказати, що єдиний спосіб отримати ефект тіні навколо прямокутної структури подання - створити іншу прямокутну структуру, а потім відповідно їх вибудувати ??? ... дякую ... Я новачок в android ...
dsdsdsdsd

Привіт @dsdsdsdsds. Я не впевнений, що це єдиний спосіб отримати ефект тіні, оскільки матеріальний дизайн ввів багато дизайнерських ресурсів, я подивлюсь, повернувшись додому, і буду коментувати тут, якщо щось знайду.
Мурільо Феррейра

18

Для льодяника і вище можна використовувати висоту .

Для старих версій:

Ось ледачий хак із: 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>

також android:background="@android:drawable/alert_light_frame"для білих
аббасалім

12

Спробуйте це .. 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"

7

Я знаю, що це старе, але для більшості цих відповідей потрібна маса додаткового коду.

Якщо у вас світлий фон, ви можете просто використовувати це:

android:elevation="25dp"

Мова не йде про те, щоб мати кілька рядків коду, але ваш код повинен працювати на всіх пристроях. Висота, яку ви запропонували, працюватиме лише в API 21 і вище
musooff

6

Насправді я погоджуюсь з @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>

2
  1. зберегти це 9.png. (змініть назву на 9.png)

введіть тут опис зображення

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>

2

Створіть новий XML на прикладі "shadow.xml" у 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="@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>

Після створення XML у LinearLayout або іншому віджеті, для якого потрібно створити тінь, ви використовуєте властивість 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">

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 так:

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

ОНОВЛЕННЯ

помістіть нижченаведений код у attrs.xml у ресурси >> values

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

Це забезпечить тінь будь-якому погляду, сподіваюся, це спрацює для вас
Шашват Гупта

@CoolMind я оновив код для R.styleable.ShadowLayout. Будь ласка, перевірте мою оновлену відповідь
Шашват Гупта,

Дякуємо за оновлення. Я спробував протестувати його на емуляторі API 19 <TextView>, він відцентрував TextView, але не додав тіні.
CoolMind

Це працює. Я думаю, що sl_shadowed = "true" потрібно, радіус відступає, тобто ширина тіні, відстань та кут робить dx, dy зміщується. Я думаю, що слід додати щось подібне // Встановити відступ для тіньового растрового зображення val padding = (shadowDistance + shadowRadius) .toInt () setPadding (if (shadowLeft) padding else 0, if (shadowTop) padding else 0, if (shadowRight ) padding else 0, if (shadowBottom) padding else 0) Тоді ви можете умовно увімкнути тінь на бажаних краях макета
Michał Ziobro

0

Одним із можливих рішень є використання дев’яти зображень патчів, як це http://developer.android.com/guide/topics/graphics/2d-graphics.html#nine-patch

АБО

Я зробив це наступним чином. Це мій основний макет, в якому round_corner.xml та drop_shadow.xml використовуються як фоновий ресурс. round_corner_two - це те саме, що round_corner.xml, лише атрибут кольору відрізняється. скопіюйте round_corner.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>

0

я знаю, що це занадто пізно. але у мене була та сама вимога. я вирішив так

<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

встановіть цей xml drwable як тло; ---

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

Це надає тінь тексту, а не макету.
Абхінав Манчанда

3
Ні, це не покаже тіні. Не могли б ви надати більш детальну відповідь, як це працює?
Yi H.
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.