I have my brand logo as an svg drawable, and it consists of one text and a graphic at its right. The svg has only two colors, one solid for the text, the other solid color for the image at a side.
When dark mode is turned on in my app, I need to change the svg text part color, and I'm using the next line of Kotlin code:
drawableLogo?.colorFilter = BlendModeColorFilterCompat.createBlendModeColorFilterCompat(myColorInt, BlendModeCompat.SRC_ATOP)
But the whole svg is painted with the new color, when I need to replace only the text part color.
Any way to do so without converting the text part of my logo into a TextView with an image (what will obviously imply finding and setting the specific font)?
Edit 1: Tried to split the svg into two parts:
This is my svg xml:
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="812dp"
android:height="210dp"
android:viewportWidth="812"
android:viewportHeight="210">
<path
android:pathData="M783.66,3.83C782.56,5.03 782,7.42 782,10.83L782,16 796.5,16L811,16 811,11.22C811,8.52 810.33,5.48 809.44,4.22C807.99,2.15 807.13,2 796.6,2C786.93,2 785.07,2.26 783.66,3.83M782,72L782,122 796.5,122L811,122 811,72L811,22 796.5,22L782,22 782,72M782,128.62C782,128.96 783.61,131.88 785.57,135.12L789.15,141 796.33,141C802.1,141 803.73,140.65 804.59,139.25C805.18,138.29 806.91,135.36 808.43,132.75L811.19,128 796.59,128C788.57,128 782,128.28 782,128.62M792.15,146.06C795.79,152.52 796.51,152.69 799.42,147.72C800.84,145.3 802,143.03 802,142.66C802,142.3 799.27,142 795.94,142L789.87,142 792.15,146.06M789.5,179.8C780.09,185.8 778.8,196.3 786.57,203.63C791.38,208.17 796.76,208.91 802.7,205.85C812.68,200.71 813.82,187.27 804.82,180.68C800.95,177.84 793.27,177.4 789.5,179.8"
android:fillColor="#545454"
android:fillType="evenOdd"
android:strokeColor="#00000000"/>
<path
android:pathData="M251.81,1.47C231.41,7.09 220.94,22.92 221.04,48C221.14,70.89 230.15,88.26 252.31,108.28C273.03,127 278,132.26 281.3,138.95C284.34,145.13 284.5,146.04 284.5,156.98C284.5,170.09 283.23,173.78 277.73,176.66C273.26,179 263.39,178.93 259.34,176.54C254.36,173.6 252.76,169.03 252.22,156.25C251.96,150.06 251.4,145 250.98,145C249.48,145 229.43,147 225.11,147.58L220.72,148.16 221.27,160.83C222.2,182.05 227.43,193.19 240.05,200.78C247.78,205.43 253.97,207.08 266,207.68C294.38,209.11 312.82,195.9 316.17,171.72C317.83,159.79 316.79,139.66 314.12,132C309.09,117.6 302.11,109.19 269.32,78C256.08,65.41 253.74,60.85 253.67,47.5C253.6,34.45 257.54,29.5 268,29.5C278.02,29.5 281.76,33.84 282.73,46.56C283.2,52.88 283.56,54 285.11,54C287.57,54 306.69,52.07 310.88,51.4L314.26,50.86 313.57,42.34C311.73,19.57 301.83,6.52 282.5,1.36C276.23,-0.31 258.06,-0.25 251.81,1.47M2,17L2,32 18.5,32L35,32 35,119L35,206 51,206L67,206 67,119.03L67,32.05 83.25,31.77L99.5,31.5 99.78,16.75L100.05,2 51.03,2L2,2 2,17M118,104L118,206 162,206L206,206 206,191.5L206,177 178,177L150,177 150,147L150,117 172.5,117L195,117 195,102.5L195,88 172.5,88L150,88 150,59.5L150,31 178,31L206,31 206,16.5L206,2 162,2L118,2 118,104M321.22,16.75L321.5,31.5 337.75,31.77L354,32.05 354,119.03L354,206 370,206L386,206 386,119L386,32 402,32L418,32 418,17L418,2 369.47,2L320.95,2 321.22,16.75M488,103.98L488,206 502.99,206L517.99,206 518.24,136.28L518.5,66.56 531.01,121.53L543.52,176.5 553.09,176.78L562.66,177.07 569.46,147.28C573.2,130.9 578.87,106.25 582.06,92.5L587.87,67.5 587.93,136.75L588,206 604,206L620,206 620,104L620,2 598.62,2C577.24,2 577.23,2 576.79,4.25C576.55,5.49 571.23,30 564.97,58.72L553.58,110.94 549.29,91.72C544.64,70.92 544.32,69.46 541.07,54.5C539.87,49 536.76,35.05 534.17,23.5L529.44,2.5 508.72,2.23L488,1.96 488,103.98M652,104L652,206 696,206L740,206 740,191.5L740,177 712,177L684,177 684,147L684,117 706.5,117L729,117 729,102.5L729,88 706.5,88L684,88 684,59.5L684,31 712,31L740,31 740,16.5L740,2 696,2L652,2 652,104"
android:fillColor="#3092a8"
android:fillType="evenOdd"
android:strokeColor="#00000000"/>
</vector>
And I display it:
<layout xmlns:android="http://schemas.android.com/apk/res/android">
<data>
</data>
<LinearLayout
android:id="@+id/llvLogo_inner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center">
<ImageView
android:id="@+id/img_logo"
android:layout_gravity="center_horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="@string/app_name" />
</LinearLayout>
</layout>
I've tried to split the svg into two parts:
Text part:
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="812dp"
android:height="210dp"
android:viewportWidth="812"
android:viewportHeight="210">
<path
android:pathData="M251.81,1.47C231.41,7.09 220.94,22.92 221.04,48C221.14,70.89 230.15,88.26 252.31,108.28C273.03,127 278,132.26 281.3,138.95C284.34,145.13 284.5,146.04 284.5,156.98C284.5,170.09 283.23,173.78 277.73,176.66C273.26,179 263.39,178.93 259.34,176.54C254.36,173.6 252.76,169.03 252.22,156.25C251.96,150.06 251.4,145 250.98,145C249.48,145 229.43,147 225.11,147.58L220.72,148.16 221.27,160.83C222.2,182.05 227.43,193.19 240.05,200.78C247.78,205.43 253.97,207.08 266,207.68C294.38,209.11 312.82,195.9 316.17,171.72C317.83,159.79 316.79,139.66 314.12,132C309.09,117.6 302.11,109.19 269.32,78C256.08,65.41 253.74,60.85 253.67,47.5C253.6,34.45 257.54,29.5 268,29.5C278.02,29.5 281.76,33.84 282.73,46.56C283.2,52.88 283.56,54 285.11,54C287.57,54 306.69,52.07 310.88,51.4L314.26,50.86 313.57,42.34C311.73,19.57 301.83,6.52 282.5,1.36C276.23,-0.31 258.06,-0.25 251.81,1.47M2,17L2,32 18.5,32L35,32 35,119L35,206 51,206L67,206 67,119.03L67,32.05 83.25,31.77L99.5,31.5 99.78,16.75L100.05,2 51.03,2L2,2 2,17M118,104L118,206 162,206L206,206 206,191.5L206,177 178,177L150,177 150,147L150,117 172.5,117L195,117 195,102.5L195,88 172.5,88L150,88 150,59.5L150,31 178,31L206,31 206,16.5L206,2 162,2L118,2 118,104M321.22,16.75L321.5,31.5 337.75,31.77L354,32.05 354,119.03L354,206 370,206L386,206 386,119L386,32 402,32L418,32 418,17L418,2 369.47,2L320.95,2 321.22,16.75M488,103.98L488,206 502.99,206L517.99,206 518.24,136.28L518.5,66.56 531.01,121.53L543.52,176.5 553.09,176.78L562.66,177.07 569.46,147.28C573.2,130.9 578.87,106.25 582.06,92.5L587.87,67.5 587.93,136.75L588,206 604,206L620,206 620,104L620,2 598.62,2C577.24,2 577.23,2 576.79,4.25C576.55,5.49 571.23,30 564.97,58.72L553.58,110.94 549.29,91.72C544.64,70.92 544.32,69.46 541.07,54.5C539.87,49 536.76,35.05 534.17,23.5L529.44,2.5 508.72,2.23L488,1.96 488,103.98M652,104L652,206 696,206L740,206 740,191.5L740,177 712,177L684,177 684,147L684,117 706.5,117L729,117 729,102.5L729,88 706.5,88L684,88 684,59.5L684,31 712,31L740,31 740,16.5L740,2 696,2L652,2 652,104"
android:fillColor="#3092a8"
android:fillType="evenOdd"
android:strokeColor="#00000000"/>
</vector>
Image part:
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="812dp"
android:height="200dp"
android:viewportWidth="812"
android:viewportHeight="210">
<path
android:pathData="M783.66,3.83C782.56,5.03 782,7.42 782,10.83L782,16 796.5,16L811,16 811,11.22C811,8.52 810.33,5.48 809.44,4.22C807.99,2.15 807.13,2 796.6,2C786.93,2 785.07,2.26 783.66,3.83M782,72L782,122 796.5,122L811,122 811,72L811,22 796.5,22L782,22 782,72M782,128.62C782,128.96 783.61,131.88 785.57,135.12L789.15,141 796.33,141C802.1,141 803.73,140.65 804.59,139.25C805.18,138.29 806.91,135.36 808.43,132.75L811.19,128 796.59,128C788.57,128 782,128.28 782,128.62M792.15,146.06C795.79,152.52 796.51,152.69 799.42,147.72C800.84,145.3 802,143.03 802,142.66C802,142.3 799.27,142 795.94,142L789.87,142 792.15,146.06M789.5,179.8C780.09,185.8 778.8,196.3 786.57,203.63C791.38,208.17 796.76,208.91 802.7,205.85C812.68,200.71 813.82,187.27 804.82,180.68C800.95,177.84 793.27,177.4 789.5,179.8"
android:fillColor="#545454"
android:fillType="evenOdd"
android:strokeColor="#00000000"/>
</vector>
And
<layout xmlns:android="http://schemas.android.com/apk/res/android">
<data>
</data>
<LinearLayout
android:id="@+id/llvLogo_inner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center">
<ImageView
android:id="@+id/img_logo"
android:layout_gravity="center_horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="@string/app_name" />
<ImageView
android:id="@+id/img_logo_rest"
android:layout_gravity="center_horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/logo_rest"
android:contentDescription="@string/app_name" />
</LinearLayout>
</layout>
But this way what I get is smaller picture at a side of the logo, and I'm not being able to make the right picture to keep its original height and width.
Maybe there is a possibility to set one of the svg xml paths fillColor programmatically?
android:fillColor="#3092a8"