1
votes

Comment définir la couleur d'élévation sous la vue dans Android?

Je crée la conception ci-dessous dans Android Studio. Mais je suis resté dans la façon dont je peux ajouter de la couleur en élévation comme le montre l'image ci-dessous. Une couleur verdâtre est affichée sous chaque bouton. Je ne sais pas comment je peux y parvenir.

J'ai même défini le

android: contourSpotShadowColor

et aussi ceci

android: contourAmbientShadowColor

Mais encore, je n'ai pas réussi ce que j'essayais de réaliser.

Voici mon XML pour la mise en page au cas où vous en auriez besoin.

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

android xml user-interface android-layout

0 commentaires

5 Réponses :

1
votes

Selon cette réponse Le système d'élévation de Lollipop ne prend pas en charge les ombres colorées.

Mais cela peut être réalisé en utilisant Carbon . Il s'agit d'une implémentation de Material Design pour Android 4.0 et plus récent. Ce n'est pas la copie exacte de l'API et des fonctionnalités de Lollipop, c'est plutôt un fichier. implémentation personnalisée. Essayez-le.

Un exemple de la réponse ci-dessus:

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

2 commentaires

Merci pour votre réponse. Mais j'évite les bibliothèques tierces de faire cela pour moi. Avez-vous une autre façon de le faire.

@MuhammadHashimShafiq jetez un œil à ce stackoverflow.com/questions/51001921/…

0
votes

Vous pouvez consulter cet article pour atteindre votre objectif.

Résumé:

Créer une mise en page personnalisée:

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;

    }
}

Ensuite, utilisez ceci:

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));
    }
}

Vous pouvez voir cet article pour plus de détails.

0 commentaires

1
votes

Solution! Vous pouvez utiliser une forme dessinable comme arrière-plan

À quoi ressemble le résultat du code ci-dessous

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

0 commentaires

2
votes

Essayez ceci

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

dessinable / test

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

OUTPUT

0 commentaires

2
votes

Vous pouvez le faire en utilisant cardview . Vous devez créer un dessinable supplémentaire. Voici le code.

Votre listview row :

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

Créez maintenant un fichier de ressources Drawable dans le dossier drawable nommé round_corners . Ajoutez ensuite ce code:

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

il devrait ressembler à ceci:

0 commentaires