如何在Android中设置视图下方的高程颜色？

Question

我正在 Android Studio 中创建以下设计。但我坚持如何在高程中添加颜色，如下图所示。每个按钮下方显示绿色。我不知道我怎么能做到这一点。

我什至设置了

android:outlineSpotShadowColor

还有这个

android:outlineAmbientShadowColor

但是，我仍然没有达到我想要达到的目标。

这是我用于布局的 XML，以备不时之需。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".views.CreateActivity">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:elevation="5dp"
        android:background="@drawable/white"
        android:id="@id/rel1">

        <ImageView
            android:layout_width="50dp"
            android:layout_height="40dp"
            android:layout_centerVertical="true"
            android:src="@drawable/ic_back"
            android:id="@+id/backBut"

            />

        <TextView
            android:id="@+id/textView4"

            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:fontFamily="@font/roboto_bold"
            android:text="CREATE"
            android:textColor="#000"
            android:textSize="20sp" />


    </RelativeLayout>


    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="130dp"
        android:layout_below="@id/rel1"
        android:layout_marginTop="20dp"
        android:layout_marginStart="30dp"
        android:layout_marginEnd="30dp"
        app:cardCornerRadius="15dp"
        app:cardElevation="5dp"
        android:id="@+id/createSingleDealBut"
        >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal"
            android:layout_margin="5dp"
            android:weightSum="1"
            >

            <RelativeLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="0.3"
                >
                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_centerInParent="true"
                    android:src="@drawable/hourglass"
                    android:scaleType="centerInside"
                    android:layout_margin="20dp"
                    />

            </RelativeLayout>
            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="0.6"
                android:orientation="vertical">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:fontFamily="@font/roboto_medium"
                    android:layout_marginTop="20dp"
                    android:text="Single Deal"
                    android:textColor="#000"
                    android:textSize="18sp"
                    />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:fontFamily="@font/roboto_medium"
                    android:textSize="12sp"
                    android:layout_marginTop="8dp"
                    android:text="Time sensitive exclusive deal expiring live within 24hrs or less"
                    />


            </LinearLayout>
            <RelativeLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="0.1"
                >
                <ImageView
                    android:layout_width="20dp"
                    android:layout_height="20dp"
                    android:layout_marginTop="20dp"
                    android:src="@drawable/arrow"
                    android:layout_centerHorizontal="true"

                    />

            </RelativeLayout>


        </LinearLayout>




    </android.support.v7.widget.CardView>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="OR"
        android:layout_below="@id/createSingleDealBut"
        android:layout_marginTop="30dp"
        android:layout_centerHorizontal="true"
        android:textColor="#000"
        android:textSize="20sp"
        android:fontFamily="@font/roboto_medium"
        android:id="@+id/or"
        />


    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="130dp"
        android:layout_below="@id/or"
        android:layout_marginTop="20dp"
        android:layout_marginStart="30dp"
        android:layout_marginEnd="30dp"
        app:cardCornerRadius="15dp"
        app:cardElevation="5dp"
        android:id="@+id/createOngoingDealBut"


        >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal"
            android:layout_margin="5dp"
            android:weightSum="1"
            >

            <RelativeLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="0.3"
                >
                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_centerInParent="true"
                    android:src="@drawable/clock"
                    android:scaleType="centerInside"
                    android:layout_margin="15dp"
                    />

            </RelativeLayout>
            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="0.6"
                android:orientation="vertical">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:fontFamily="@font/roboto_medium"
                    android:layout_marginTop="20dp"
                    android:text="Ongoing Deals List"
                    android:textColor="#000"
                    android:textSize="18sp"
                    />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:fontFamily="@font/roboto_medium"
                    android:textSize="12sp"
                    android:layout_marginTop="8dp"
                    android:text="Ongoing daily/weekly time specific deal specials offered to all customers. Create a Happy Hour deals  menu"
                    />


            </LinearLayout>
            <RelativeLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="0.1"
                >
                <ImageView
                    android:layout_width="20dp"
                    android:layout_height="20dp"
                    android:layout_marginTop="20dp"
                    android:src="@drawable/arrow"
                    android:layout_centerHorizontal="true"

                    />

            </RelativeLayout>


        </LinearLayout>




    </android.support.v7.widget.CardView>

    <include layout="@layout/bottom_navigation" android:id="@+id/navigation" />


</RelativeLayout>

上述 XML 的预览是

帮我在高程中添加绿色。任何帮助将不胜感激。 谢谢。

Answer 1

试试这个

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <RelativeLayout
        android:id="@+id/rel1"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:background="@android:color/white"
        android:elevation="5dp">

        <ImageView
            android:id="@+id/backBut"
            android:layout_width="50dp"
            android:layout_height="40dp"
            android:layout_centerVertical="true"
            android:src="@drawable/ic_close" />

        <TextView
            android:id="@+id/textView4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="CREATE"
            android:textColor="#000"
            android:textSize="20sp" />

    </RelativeLayout>

    <android.support.v7.widget.CardView
        android:id="@+id/createSingleDealBut"
        android:layout_width="match_parent"
        android:layout_height="130dp"
        android:layout_below="@id/rel1"
        android:layout_marginStart="30dp"
        android:layout_marginTop="20dp"
        android:layout_marginEnd="30dp"
        app:cardCornerRadius="30dp"
        app:cardElevation="5dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@drawable/test"
            android:orientation="horizontal"
            android:weightSum="1">

            <RelativeLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="0.3">

                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_centerInParent="true"
                    android:layout_margin="20dp"
                    android:scaleType="centerInside"
                    android:src="@drawable/dishu" />

            </RelativeLayout>

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="0.6"
                android:orientation="vertical">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="20dp"
                    android:text="Single Deal"
                    android:textColor="#000"
                    android:textSize="18sp" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="8dp"
                    android:text="Time sensitive exclusive deal expiring live within 24hrs or less"
                    android:textSize="12sp" />


            </LinearLayout>

            <RelativeLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="0.1">

                <ImageView
                    android:layout_width="20dp"
                    android:layout_height="20dp"
                    android:layout_centerHorizontal="true"
                    android:layout_marginTop="20dp"

                    />

            </RelativeLayout>


        </LinearLayout>


    </android.support.v7.widget.CardView>

    <TextView
        android:id="@+id/or"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/createSingleDealBut"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="30dp"
        android:text="OR"
        android:textColor="#000"
        android:textSize="20sp" />


    <android.support.v7.widget.CardView
        android:id="@+id/createOngoingDealBut"
        android:layout_width="match_parent"
        android:layout_height="130dp"
        android:layout_below="@id/or"
        android:layout_marginStart="30dp"
        android:layout_marginTop="20dp"
        android:layout_marginEnd="30dp"
        app:cardCornerRadius="30dp"
        app:cardElevation="5dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@drawable/test"
            android:orientation="horizontal"
            android:weightSum="1">

            <RelativeLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="0.3">

                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_centerInParent="true"
                    android:layout_margin="15dp"
                    android:scaleType="centerInside" />

            </RelativeLayout>

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="0.6"
                android:orientation="vertical">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="20dp"
                    android:text="Ongoing Deals List"
                    android:textColor="#000"
                    android:textSize="18sp" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="8dp"
                    android:text="Ongoing daily/weekly time specific deal specials offered to all customers. Create a Happy Hour deals  menu"
                    android:textSize="12sp" />

            </LinearLayout>

            <RelativeLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="0.1">

                <ImageView
                    android:layout_width="20dp"
                    android:layout_height="20dp"
                    android:layout_centerHorizontal="true"
                    android:layout_marginTop="20dp"
                    android:src="@drawable/ic_apk_box" />

            </RelativeLayout>

        </LinearLayout>

    </android.support.v7.widget.CardView>

</RelativeLayout>

可绘制/测试

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:left="-8dp"
        android:right="-8dp"
        android:top="-8dp">
        <shape>
            <corners
                android:bottomLeftRadius="35dp"
                android:bottomRightRadius="35dp" />
            <stroke
                android:width="4dp"
                android:color="#17E208" />
        </shape>
    </item>
</layer-list>

输出

Answer 2

您可以使用cardview 执行此操作。您需要创建一个额外的drawable。这是代码。

你的listview row：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:gravity="center">

    <android.support.v7.widget.CardView
        android:layout_margin="10dp"
        app:cardCornerRadius="8dp"
        app:cardPreventCornerOverlap="true"
        app:cardBackgroundColor="@color/first_circle"
        android:layout_width="match_parent"
        android:layout_height="150dp">
        <LinearLayout
            android:background="@drawable/rounded_corners"
            android:layout_marginBottom="2dp"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

        </LinearLayout>
    </android.support.v7.widget.CardView>

</LinearLayout>

现在在drawable 文件夹中创建一个名为rounded_corners 的Drawable 资源文件。然后添加这些代码：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/background">
        <shape>
            <corners android:bottomLeftRadius="8dp"
                android:topLeftRadius="5dp"
                android:bottomRightRadius="8dp"
                android:topRightRadius="5dp"/>
            <solid android:color="#ddd"/>
        </shape>
    </item>
</layer-list>

它应该看起来像这样：

Answer 3

根据this answer Lollipop 的海拔系统不支持彩色阴影。

但是可以使用Carbon 来实现。 它是适用于 Android 4.0 及更高版本的 Material Design 实现。这不是 Lollipop 的 API 和功能的精确副本，而是一个。自定义实现。试试看吧。

上述答案的一个例子：

<carbon.widget.LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">

<carbon.widget.Button
    android:layout_width="56dp"
    android:layout_height="56dp"
    android:layout_margin="@dimen/carbon_padding"
    android:background="#ffffff"
    app:carbon_cornerRadius="2dp"
    app:carbon_elevation="8dp"
    app:carbon_elevationShadowColor="@color/carbon_red_700"/>

Answer 4

解决方案！您可以使用可绘制形状作为背景

下面的代码结果如何

drawable/shape_rounded_background.xml

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


<item>
<shape android:shape="rectangle">
  <corners
    android:bottomLeftRadius="10dp"
    android:bottomRightRadius="10dp"
    android:topLeftRadius="10dp"
    android:topRightRadius="10dp" />
  <solid android:color="#17E208" />
</shape>
</item>
<item android:bottom="6dp">
<shape android:shape="rectangle">
  <corners
    android:bottomLeftRadius="6dp"
    android:bottomRightRadius="6dp"
    android:topLeftRadius="6dp"
    android:topRightRadius="6dp" />
  <solid android:color="@android:color/white" />
</shape>
</item>
</layer-list>

Answer 5

你可以看this的文章来实现你的目标。

总结：

创建自定义布局：

public class RoundLinerLayoutNormal extends LinearLayout {
    public RoundLinerLayoutNormal(Context context) {
        super(context);
        initBackground();
    }

    public RoundLinerLayoutNormal(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        initBackground();
    }

    public RoundLinerLayoutNormal(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initBackground();
    }

    private void initBackground() {
        setBackground(ViewUtils.generateBackgroundWithShadow(this,R.color.white,
                R.dimen.radius_corner,R.color.shadowColor,R.dimen.elevation, Gravity.BOTTOM));
    }
}

然后使用这个：

public class ViewUtils {

    public static Drawable generateBackgroundWithShadow(View view, @ColorRes int backgroundColor,
                                                        @DimenRes int cornerRadius,
                                                        @ColorRes int shadowColor,
                                                        @DimenRes int elevation,
                                                        int shadowGravity) {
        float cornerRadiusValue = view.getContext().getResources().getDimension(cornerRadius);
        int elevationValue = (int) view.getContext().getResources().getDimension(elevation);
        int shadowColorValue = ContextCompat.getColor(view.getContext(),shadowColor);
        int backgroundColorValue = ContextCompat.getColor(view.getContext(),backgroundColor);

        float[] outerRadius = {cornerRadiusValue, cornerRadiusValue, cornerRadiusValue,
                cornerRadiusValue, cornerRadiusValue, cornerRadiusValue, cornerRadiusValue,
                cornerRadiusValue};

        Paint backgroundPaint = new Paint();
        backgroundPaint.setStyle(Paint.Style.FILL);
        backgroundPaint.setShadowLayer(cornerRadiusValue, 0, 0, 0);

        Rect shapeDrawablePadding = new Rect();
        shapeDrawablePadding.left = elevationValue;
        shapeDrawablePadding.right = elevationValue;

        int DY;
        switch (shadowGravity) {
            case Gravity.CENTER:
                shapeDrawablePadding.top = elevationValue;
                shapeDrawablePadding.bottom = elevationValue;
                DY = 0;
                break;
            case Gravity.TOP:
                shapeDrawablePadding.top = elevationValue*2;
                shapeDrawablePadding.bottom = elevationValue;
                DY = -1*elevationValue/3;
                break;
            default:
            case Gravity.BOTTOM:
                shapeDrawablePadding.top = elevationValue;
                shapeDrawablePadding.bottom = elevationValue*2;
                DY = elevationValue/3;
                break;
        }

        ShapeDrawable shapeDrawable = new ShapeDrawable();
        shapeDrawable.setPadding(shapeDrawablePadding);

        shapeDrawable.getPaint().setColor(backgroundColorValue);
        shapeDrawable.getPaint().setShadowLayer(cornerRadiusValue/3, 0, DY, shadowColorValue);

        view.setLayerType(LAYER_TYPE_SOFTWARE, shapeDrawable.getPaint());

        shapeDrawable.setShape(new RoundRectShape(outerRadius, null, null));

        LayerDrawable drawable = new LayerDrawable(new Drawable[]{shapeDrawable});
        drawable.setLayerInset(0, elevationValue, elevationValue*2, elevationValue, elevationValue*2);

        return drawable;

    }
}

详情可以看this文章。