Shaping a LinearLayout with gradient

Navigation
1

I have the following code that generates a gradient: 

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
    <shape>
        <gradient
                android:angle="90"
                android:startColor="#2e3192"
                android:endColor="#00ffe9"
                android:type="linear" />
        </shape>
    </item>
</selector>

And this other xml of a layout that in a linerlayout takes that gradient and uses it in background color: 

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 
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=".ForgotPassword">

    <LinearLayout
        android:background="@color/azure"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">


        <android.support.v7.widget.CardView
            app:cardCornerRadius="10dp"
            android:layout_margin="16dp"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <LinearLayout
                android:orientation="vertical"
                android:layout_width="match_parent"
                android:layout_height="match_parent">


                <LinearLayout
                    android:background="@drawable/background_gradient_color"
                    android:layout_marginTop="40dp"
                    android:orientation="vertical"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent">


                </LinearLayout>

            </LinearLayout>

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

    </LinearLayout>
</android.support.constraint.ConstraintLayout>

My query is, how can I modify that xml or the linerlayout to achieve what I show in the image on the right (I currently have what is shown in the one on the left)

    
asked by Juan 02.10.2018 в 04:20
source

2 answers

2

You need a layer-list to add the figure with the gradient and apply a rotation or add another figure so that of the impression you want, this is your original image:

One option is to rotate the figure to obtain an effect similar to the one you want: 

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:top="200dp"
        android:bottom="-100dp"
        android:right="-400dp">
        <rotate
            android:fromDegrees="-10"
            android:pivotY="200%">
            <shape android:shape="rectangle">
                <gradient
                    android:angle="-45"
                    android:startColor="#2e3192"
                    android:endColor="#00ffe9"
                    android:type="linear" />
            </shape>
        </rotate>
    </item>
</layer-list>

in this way you would get:

But it seems to me that the ideal thing to preserve the gradient of the colors is to add a white triangle in addition to your gradient with an angle of 70 degrees , in this way you would obtain the effect that you show in your question, this would be the layer-list : 

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
   <item>
        <shape>
            <gradient
                android:angle="90"
                android:startColor="#2e3192"
                android:endColor="#00ffe9"
                android:type="linear" />
        </shape>
    </item>

    <item>
        <rotate
            android:fromDegrees="70"
            android:pivotX="100%"
            android:pivotY="0%"
            android:toDegrees="45">
            <shape android:shape="rectangle">
                <stroke
                    android:width="-60dp"
                    android:color="@android:color/transparent" />
                <solid android:color="#FFFFFF" />
            </shape>
        </rotate>
    </item>

</layer-list>

to get:

    
answered by 02.10.2018 / 19:53
source
1

One solution may be the following: 

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:top="300dp"
    android:bottom="-300dp"
    android:left="0dp"
    android:right="-300dp">
    <rotate
        android:fromDegrees="-20"
        android:pivotX="0%"
        android:pivotY="100%">
        <shape
            android:shape="rectangle">
            <gradient
                android:angle="45"
                android:startColor="#2e3192"
                android:endColor="#00ffe9"
                android:type="linear" />
        </shape>
    </rotate>
</item>
</layer-list>
    
answered by 02.10.2018 в 19:48
Send form array, php, mysql Date.UTC configure javascript time zone