Cannot overlap gradient with a solid color in Android Studio

Question

I am a beginner in creating applications in Android Studio and I am trying to recreate a background which has been made in Figma.

Background in Figma:

Properties:

Rotation: 179.7°
Fill: Linear Gradient
#23152C @ 0.0
#828F8893 @ 0.49
#00FFFFFF @ 1.0
Fill: Solid
#120A16
Effect: Drop Shadow
Radius: 4dp
Offset: 0dp, 4dp
#40000000

After trying multiple times to recreate the background in Android Studio, I figured out that the issue is that the colors do not overlap, the transparent white #00FFFFFF should be replaced by the solid color #120A16.

background.xml from drawables folder

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/solid_grad"/>
    <gradient
        android:startColor="@color/gradientStart"
        android:centerColor="@color/gradientCenter"
        android:endColor="@color/solid_grad"
        android:type="linear"
        android:angle="90" >

    </gradient>

</shape>

colors.xml from values folder

<resources>
    <color name="gradientStart">#23152C</color>
    <color name="gradientCenter">#828F8893</color>
    <color name="gradientEnd">#00FFFFFF</color>
    <color name="solid_grad">#120A16</color>
</resources>

And the result:

Does anyone have any idea on how to overlap gradient with the solid color?

PS: I don't want to export the background from Figma and import it to Android due to the high variety of screen sizes and due to performance.

I was able to recreate the Figma gradient in https://angrytools.com/gradient/ — Zun, Nov 12 '19 at 12:47
Hey guys, thank you for checking my question, @Skizo-ozᴉʞS , I have added the colors.xml file, the drawable code is already in up there. — JohnnyOnPc, Nov 12 '19 at 12:54
@Zun, could you please provide the Android code for it? I am not familiar with the tool unfortunately. — JohnnyOnPc, Nov 12 '19 at 13:04

score 1 · Answer 1 · answered Nov 13 '19 at 00:18

This is my solution:

activity_main.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=".MainActivity"
    android:background="@drawable/gradient"
    >

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/gradient2">
</RelativeLayout>
</RelativeLayout>

gradient.xml from drawables folder

<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:endColor="#120A16"
        android:startColor="#120A16"
        android:angle="90" />

</shape>

gradient2.xml from drawables folder

<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:endColor="#00FFFFFF"
        android:centerColor="#828F8893"
        android:startColor="#23152C"
        android:angle="90"/>
</shape>

I know that it can be done better in a different way but this is similar the way I would do in css with 2 DIV's Please, if you have a better way of doing this let me know. I also need this for my project.

Cannot overlap gradient with a solid color in Android Studio

1 Answers1