Как установить цвет возвышения под видом в 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

Вы можете сделать это, используя 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 в папке drawable с именем rounded_corners.Затем добавьте этот код:

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

Попробуйте это

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

Вы можете просмотреть эту статью для достижения своей цели.

Резюме:

Создание пользовательского макета:

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;

    }
}

Вы можете просмотреть эту статью для деталей.

Answer 4

решение!Вы можете использовать рисованную фигуру в качестве фона

Как выглядит код ниже

drawable / shape_ounded_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

Согласно этому ответу Система рельефа Lollipop не поддерживает цветные тени.

Но этого можно добиться с помощью Углерод .Это реализация Material Design для Android 4.0 и новее.Это не точная копия API и функций Lollipop, а скорее.Пользовательская реализация.Попробуйте.

Пример из приведенного выше ответа:

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