Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

How to put a vector over a gradient?

Tags:

android

android-layout

xml

I have the following activity xml:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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"
    android:background="@drawable/app_gradient_bg"
    tools:context="com.hlsystems.ericsonwillians.saltodepirapora.MainActivity">

    ...

</android.support.design.widget.CoordinatorLayout>

That drawable gradient is:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item>
        <shape>
            <gradient
                android:angle="90"
                android:startColor="#007786"
                android:endColor="#00292e"
                android:type="linear" />
        </shape>
    </item>
</selector>

This gradient is the background of all my activities. I also want to use a vector over the background, which can be achieved by adding an ImageView:

<ImageView
        android:id="@+id/hlSystemsLogo"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:srcCompat="@drawable/hl_systems_logo"
        android:alpha="0.2"
        tools:layout_editor_absoluteY="61dp"/>

Since adding the ImageView together with other UI components can get quite clumsy pretty fast, and that that gradient is the background of everything, I want to combine them, something like this:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item>
        <shape>
            <gradient
                android:angle="90"
                android:startColor="#007786"
                android:endColor="#00292e"
                android:type="linear" />
        </shape>
    </item>
    <item>
        <ImageView
            android:id="@+id/hlSystemsLogo"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:srcCompat="@drawable/hl_systems_logo"
            android:alpha="0.2"
            tools:layout_editor_absoluteY="61dp"/>
    </item>
</selector>

But that even crashes my application.

E/AndroidRuntime: FATAL EXCEPTION: main
                  Process: com.hlsystems.ericsonwillians.saltodepirapora, PID: 25296
                  java.lang.RuntimeException: Unable to start activity ComponentInfo{com.hlsystems.ericsonwillians.saltodepirapora/com.hlsystems.ericsonwillians.saltodepirapora.MainActivity}: android.view.InflateException: Binary XML file line #0: Error inflating class android.support.design.widget.CoordinatorLayout
                      at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2318)
                      at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2396)
                      at android.app.ActivityThread.access$800(ActivityThread.java:139)
                      at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1293)
                      at android.os.Handler.dispatchMessage(Handler.java:102)
                      at android.os.Looper.loop(Looper.java:149)
                      at android.app.ActivityThread.main(ActivityThread.java:5257)
                      at java.lang.reflect.Method.invokeNative(Native Method)
                      at java.lang.reflect.Method.invoke(Method.java:515)
                      at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:793)
                      at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:609)
                      at dalvik.system.NativeStart.main(Native Method)
                   Caused by: android.view.InflateException: Binary XML file line #0: Error inflating class android.support.design.widget.CoordinatorLayout
                      at android.view.LayoutInflater.createView(LayoutInflater.java:620)
                      at android.view.LayoutInflater.createViewFromTag(LayoutInflater.java:696)
                      at android.view.LayoutInflater.inflate(LayoutInflater.java:469)
                      at android.view.LayoutInflater.inflate(LayoutInflater.java:397)
                      at android.view.LayoutInflater.inflate(LayoutInflater.java:353)
                      at android.support.v7.app.AppCompatDelegateImplV9.setContentView(AppCompatDelegateImplV9.java:286)
                      at android.support.v7.app.AppCompatActivity.setContentView(AppCompatActivity.java:140)
                      at com.hlsystems.ericsonwillians.saltodepirapora.MainActivity.onCreate(MainActivity.java:20)
                      at android.app.Activity.performCreate(Activity.java:5411)
                      at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1087)
                      at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2270)
                      at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2396) 
                      at android.app.ActivityThread.access$800(ActivityThread.java:139) 
                      at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1293) 
                      at android.os.Handler.dispatchMessage(Handler.java:102) 
                      at android.os.Looper.loop(Looper.java:149) 
                      at android.app.ActivityThread.main(ActivityThread.java:5257) 
                      at java.lang.reflect.Method.invokeNative(Native Method) 
                      at java.lang.reflect.Method.invoke(Method.java:515) 
                      at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:793) 
                      at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:609) 
                      at dalvik.system.NativeStart.main(Native Method) 
                   Caused by: java.lang.reflect.InvocationTargetException
                      at java.lang.reflect.Constructor.constructNative(Native Method)
                      at java.lang.reflect.Constructor.newInstance(Constructor.java:423)
                      at android.view.LayoutInflater.createView(LayoutInflater.java:594)
                      at android.view.LayoutInflater.createViewFromTag(LayoutInflater.java:696) 
                      at android.view.LayoutInflater.inflate(LayoutInflater.java:469) 
                      at android.view.LayoutInflater.inflate(LayoutInflater.java:397) 
                      at android.view.LayoutInflater.inflate(LayoutInflater.java:353) 
                      at android.support.v7.app.AppCompatDelegateImplV9.setContentView(AppCompatDelegateImplV9.java:286) 
                      at android.support.v7.app.AppCompatActivity.setContentView(AppCompatActivity.java:140) 
                      at com.hlsystems.ericsonwillians.saltodepirapora.MainActivity.onCreate(MainActivity.java:20) 
                      at android.app.Activity.performCreate(Activity.java:5411) 
                      at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1087) 
                      at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2270) 
                      at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2396) 
                      at android.app.ActivityThread.access$800(ActivityThread.java:139) 
                      at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1293) 
                      at android.os.Handler.dispatchMessage(Handler.java:102) 
                      at android.os.Looper.loop(Looper.java:149) 
                      at android.app.ActivityThread.main(ActivityThread.java:5257) 
                      at java.lang.reflect.Method.invokeNative(Native Method) 
                      at java.lang.reflect.Method.invoke(Method.java:515) 
                      at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:793) 
                      at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:609) 
                      at dalvik.system.NativeStart.main(Native Method) 
                   Caused by: android.content.res.Resources$NotFoundException: File res/drawable/app_gradient_bg.xml from drawable resource ID #0x7f07005a
                      at android.content.res.Resources.loadDrawable(Resources.java:2156)
                      at android.content.res.Resources.loadDrawable(Resources.java:2075)
                      at android.content.res.TypedArray.getDrawable(TypedArray.java:602)
                      at android.view.View.<init>(View.java:3577)
                      at android.view.ViewGroup.<init>(ViewGroup.java:470)
                      at android.support.design.widget.CoordinatorLayout.<init>(CoordinatorLayout.java:202)
                      at android.support.design.widget.CoordinatorLayout.<init>(CoordinatorLayout.java:198)
                      at java.lang.reflect.Constructor.constructNative(Native Method) 
                      at java.lang.reflect.Constructor.newInstance(Constructor.java:423) 
                      at android.view.LayoutInflater.createView(LayoutInflater.java:594) 
                      at android.view.LayoutInflater.createViewFromTag(LayoutInflater.java:696) 
                      at android.view.LayoutInflater.inflate(LayoutInflater.java:469) 
                      at android.view.LayoutInflater.inflate(LayoutInflater.java:397) 
                      at android.view.LayoutInflater.inflate(LayoutInflater.java:353) 
                      at android.support.v7.app.AppCompatDelegateImplV9.setContentView(AppCompatDelegateImplV9.java:286) 
                      at android.support.v7.app.AppCompatActivity.setContentView(AppCompatActivity.java:140) 
                      at com.hlsystems.ericsonwillians.saltodepirapora.MainActivity.onCreate(MainActivity.java:20) 
                      at android.app.Activity.performCreate(Activity.java:5411) 
                      at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1087) 
                      at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2270) 
                      at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2396) 
                      at android.app.ActivityThread.access$800(ActivityThread.java:139) 
                      at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1293) 
                      at android.os.Handler.dispatchMessage(Handler.java:102) 
                      at android.os.Looper.loop(Looper.java:149) 
                      at android.app.ActivityThread.main(ActivityThread.java:5257) 
                      at java.lang.reflect.Method.invokeNative(Native Method) 
                      at java.lang.reflect.Method.invoke(Method.java:515) 
                      at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:793) 
                      at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:609) 
                      at dalvik.system.NativeStart.main(Native Method) 
                   Caused by: org.xmlpull.v1.XmlPullParserException: Binary XML file line #0: invalid drawable tag ImageView
                      at android.graphics.drawable.Drawable.createFromXmlInner(Drawable.java:933)
                      at android.graphics.drawable.StateListDrawable.inflate(StateListDrawable.java:186)
                      at android.graphics.drawable.Drawable.createFromXmlInner(Drawable.java:937)
                      at android.graphics.drawable.Drawable.createFromXml(Drawable.java:877)
                      at android.content.res.Resources.loadDrawable(Resources.java:2152)
                      at android.content.res.Resources.loadDrawable(Resources.java:2075) 
                      at android.content.res.TypedArray.getDrawable(TypedArray.java:602) 
                      at android.view.View.<init>(View.java:3577) 
                      at android.view.ViewGroup.<init>(ViewGroup.java:470) 
                      at android.support.design.widget.CoordinatorLayout.<init>(CoordinatorLayout.java:202) 
                      at android.support.design.widget.CoordinatorLayout.<init>(CoordinatorLayout.java:198) 
                      at java.lang.reflect.Constructor.constructNative(Native Method) 
                      at java.lang.reflect.Constructor.newInstance(Constructor.java:423) 
                      at android.view.LayoutInflater.createView(LayoutInflater.java:594) 
                      at android.view.LayoutInflater.createViewFromTag(LayoutInflater.java:696) 
                      at android.view.LayoutInflater.inflate(LayoutInflater.java:469) 
                      at android.view.LayoutInflater.inflate(LayoutInflater.java:397) 
                      at android.view.LayoutInflater.inflate(LayoutInflater.java:353) 
                      at android.support.v7.app.AppCompatDelegateImplV9.setContentView(AppCompatDelegateImplV9.java:286) 
                      at android.support.v7.app.AppCompatActivity.setContentView(AppCompatActivity.java:140) 
                      at com.hlsystems.ericsonwillians.saltodepirapora.MainActivity.onCreate(MainActivity.java:20) 
                      at android.app.Activity.performCreate(Activity.java:5411) 
                      at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1087) 
                      at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:2270) 
                      at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:2396) 
                      at android.app.ActivityThread.access$800(ActivityThread.java:139) 
                      at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1293) 
                      at android.os.Handler.dispatchMessage(Handler.java:102) 
                      at android.os.Looper.loop(Looper.java:149) 
                      at android.app.ActivityThread.main(ActivityThread.java:5257) 
                      at java.lang.reflect.Method.invokeNative(Native Method) 
                      at java.lang.reflect.Method.invoke(Method.java:515) 
                      at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:793) 
                      at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:609) 
                      at dalvik.system.NativeStart.main(Native Method) 

How can I combine that vector and gradient in a same drawable so that I can use it in all my activities?

like image 432
Ericson Willians Avatar asked Oct 27 '25 04:10

Ericson Willians

1 Answers

Try making separate files for 1. Gradient , 2. VectorImage 3. Combined

1> your_gradient_file.xml:

<?xml version="1.0" encoding="utf-8"?>
 <shape>
   <gradient
      android:angle="90"
      android:startColor="#007786"
      android:endColor="#00292e"
      android:type="linear" />
 </shape>

2> your_vector_image.xml:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:height="24dp"
    android:width="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24">
    <path android:fillColor="#FFF" android:pathData="M10,19H13V22H10V19M12,2C17.35,2.22 19.68,7.62 16.5,11.67C15.67,12.67 14.33,13.33 13.67,14.17C13,15 13,16 13,17H10C10,15.33 10,13.92 10.67,12.92C11.33,11.92 12.67,11.33 13.5,10.67C15.92,8.43 15.32,5.26 12,5A3,3 0 0,0 9,8H6A6,6 0 0,1 12,2Z" />
</vector>

3> Combine both of them: shape_vector_gradient.xml // Set paddings as per your need

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:bottom="@dimen/_5sdp"
        android:drawable="@drawable/your_gradient_file"
        android:left="@dimen/_5sdp"
        android:right="@dimen/_5sdp"
        android:top="@dimen/_5sdp" />
    <item
        android:bottom="@dimen/_5sdp"
        android:drawable="@drawable/your_vector_image"
        android:left="@dimen/_5sdp"
        android:right="@dimen/_5sdp"
        android:top="@dimen/_5sdp" />
</layer-list>
like image 97
Deep Patel Avatar answered Oct 30 '25 08:10

Deep Patel
Sign in to Comment

Related questions

How to get parameters values from a URL
Android: How to stop/clear cached background processes of my Android widget application?
ZXing versus Google Play Services Vision
Sending extras to BroadcastReceiver
Google map camera position on multiple markers
android - Adjust resize and scrollview not working with edittext
BottomSheet is jumping on button clicks
Why does Android Studio's logcat not fully output logs?
Brazil strings not showing in file directory in Android?
Android - Loading an external .js file into a webview then accessing it's functions?

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!