I am using IconButton in code. I used drawable with different color. When I run the code it shows black think. So what is wrong in here?
IconButton(
onClick = { }
) {
Icon(
painter = painterResource(R.drawable.ic_menu),
contentDescription = null,
)
}
Actual Output
Expected Output
I am sharing my drawable file here
ic_menu.xml
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="20dp"
android:height="4dp"
android:viewportWidth="20"
android:viewportHeight="4">
<path
android:fillColor="#color/aqua"
android:fillType="evenOdd"
android:pathData="M2,2m-2,0a2,2 0,1 1,4 0a2,2 0,1 1,-4 0" />
<path
android:fillColor="#color/aqua"
android:fillType="evenOdd"
android:pathData="M10,2m-2,0a2,2 0,1 1,4 0a2,2 0,1 1,-4 0" />
<path
android:fillColor="#color/aqua"
android:fillType="evenOdd"
android:pathData="M18,2m-2,0a2,2 0,1 1,4 0a2,2 0,1 1,-4 0" />
</vector>
You need to pass tint = Color.Unspecified in Icon If you want to use the original icon color without any default tint.
Example:
Icon(
painter = painterResource(R.drawable.ic_menu),
tint = Color.Unspecified,
contentDescription = null
)
Based on the official docs, Icon uses the default black tint for all resources when you are not providing any tint.
As you can see it uses LocalContentColor Which is black by default.
Related
I want to implement a Sign In With Google button in Jetpack Compose. I downloaded this SVG and added a white background in Inkscape so it would be usable in both the recommended styles (white or blue button background), then imported it into resources.
This is how it looks in the text editor:
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24"
android:viewportHeight="24">
<path
android:fillColor="#ffffff"
android:pathData="M0,0h24v24h-24z"
android:strokeWidth="0"
android:strokeColor="#00000000"/>
<path
android:fillColor="#4285f4"
android:pathData="m22.766,12.248c0,-0.724 -0.064,-1.412 -0.174,-2.081l-10.358,0l0,4.134l5.931,0c-0.266,1.357 -1.045,2.503 -2.2,3.282l0,2.75l3.538,0c2.072,-1.916 3.263,-4.739 3.263,-8.085z"
/>
<path
android:fillColor="#34a853"
android:pathData="m12.234,23c2.97,0 5.454,-0.99 7.269,-2.668l-3.538,-2.75c-0.99,0.66 -2.246,1.063 -3.731,1.063 -2.869,0 -5.298,-1.934 -6.169,-4.547l-3.648,0l0,2.832c1.806,3.593 5.518,6.068 9.818,6.068z"
/>
<path
android:fillColor="#fbbc05"
android:pathData="m6.065,14.099c-0.229,-0.66 -0.348,-1.366 -0.348,-2.099 0,-0.733 0.128,-1.439 0.348,-2.099l0,-2.832l-3.648,0c-0.752,1.485 -1.183,3.153 -1.183,4.932 0,1.778 0.431,3.447 1.183,4.932z"
/>
<path
android:fillColor="#ea4335"
android:pathData="m12.234,5.354c1.623,0 3.071,0.559 4.217,1.65l3.135,-3.135c-1.898,-1.778 -4.382,-2.869 -7.352,-2.869 -4.299,0 -8.012,2.475 -9.818,6.068l3.648,2.832c0.871,-2.612 3.3,-4.547 6.169,-4.547z"
/>
</vector>
I used it in a Button like this:
Button(onClick = { /*TODO*/ },) {
Icon(painter = painterResource(id = R.drawable.ic_google_logo_filled),
"Google logo")
Text("Sign In With Google",
modifier = Modifier.padding(start = 8.dp))
}
It renders in colour in Android Studio, but in previews and the emulator it ignores all the fillColor and strokeColor attributes and renders it white. If I remove the background from the XML I can see the G shape, as long as the button doesn't have a white background. If I restore the background but change its fillColor to something else it stays white.
The Icon applies the default tint LocalContentColor.current.copy(alpha = LocalContentAlpha.current)
Use tint= Color.Unspecified to avoid it:
Icon(
painter = painterResource(id = R.drawable.xxxx),
"Google logo",
tint= Color.Unspecified
)
I'm unable to set the Android Material TextInputLayout startIcon to a VectorDrawable with multiple paths.
Here's the VectorDrawable's XML
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24"
android:viewportHeight="24">
<path
android:fillColor="#FFF"
android:pathData="M12,12m-10,0a10,10 0,1 1,20 0a10,10 0,1 1,-20 0" />
<path
android:fillColor="#000"
android:pathData="M11,13H13V15H11M11,9H13V11H11M11,17H13A2,2 0 0,0 15,15V13.5A1.5,1.5 0 0,0 13.5,12A1.5,1.5 0 0,0 15,10.5V9A2,2 0 0,0 13,7H11A2,2 0 0,0 9,9V10.5A1.5,1.5 0 0,0 10.5,12A1.5,1.5 0 0,0 9,13.5V15A2,2 0 0,0 11,17M12,1C5.92,1 1,5.92 1,12C1,18.08 5.92,23 12,23C18.08,23 23,18.08 23,12C23,5.92 18.08,1 12,1M12,19A7,7 0 0,1 5,12A7,7 0 0,1 12,5A7,7 0 0,1 19,12A7,7 0 0,1 12,19Z" />
</vector>
It looks like an 8-ball in the Android Studio preview, but when it loads it's just a gray circle.
I've tried making a LayerList with two separate VectorDrawables, loading the images programmatically and through XML, but none of that worked. The image loads fine into an ImageView. Thanks for any help I can get.
You can solve this by setting it programmatically using the resource identifier of the start icon drawable of the TextInputLayout which is text_input_start_icon.
To get the resource integer ID use: getIdentifer() of the Resources class.
val startIconViewId = resources.getIdentifier(
"text_input_start_icon", "id",
packageName
)
val textInputLayout = findViewById<TextInputLayout>(R.id.my_text_input_layout)
val startIconDrawable: CheckableImageButton = textInputLayout.findViewById(startIconViewId)
val view = View(this)
view.setBackgroundResource(R.drawable.my_vector_drawable)
startIconDrawable.setBackground(view.background)
But you also must keep app:startIconDrawable set in the xml layout.
Do you know how to change the size? Changing the XML height and width isn't working. Also, having the startIconDrawable set in XML is causing both icons to appear on my device.
You can change the height & width of the CheckableImageButton itself.
val layoutParams = startIconDrawable.layoutParams
layoutParams.height = 100
layoutParams.width = 100
startIconDrawable.setBackground(view.background)
Result:
Android studio 3.6
Here VectorDrawable (res/drawable/ic_phone_bw.xml)
<vector android:height="24dp" android:viewportHeight="294.8"
android:viewportWidth="294.8" android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
<path android:fillColor="#FFFFFF" android:pathData="M147.4,147.4m-141.73,0a141.73,141.73 0,1 1,283.46 0a141.73,141.73 0,1 1,-283.46 0"/>
<path android:fillColor="#FF000000" android:pathData="M147.4,147.4m-131.99,0a131.99,131.99 0,1 1,263.98 0a131.99,131.99 0,1 1,-263.98 0"/>
<path android:fillColor="#FFFFFF" android:pathData="M200.62,248.9H94.19c-1.39,0 -2.52,-1.13 -2.52,-2.52V49.48c0,-1.39 1.13,-2.52 2.52,-2.52h106.43c1.39,0 2.52,1.13 2.52,2.52v196.9C203.13,247.77 202.01,248.9 200.62,248.9z"/>
<path android:fillColor="#FF000000" android:pathData="M102.7,75.7h89.39v149.58h-89.39z"/>
</vector>
I want to use it in Preference like this:
But here result:
Why icon show not correct (black dot)?
For reference, here is a SVG equivalent of your VectorDrawable.
<svg width="240px" height="240px" viewBox="0 0 294.8 294.8">
<path fill="#FFFFFF" d="M147.4,147.4m-141.73,0a141.73,141.73 0,1 1,283.46 0a141.73,141.73 0,1 1,-283.46 0"/>
<path fill="#000000" d="M147.4,147.4m-131.99,0a131.99,131.99 0,1 1,263.98 0a131.99,131.99 0,1 1,-263.98 0"/>
<path fill="#FFFFFF" d="M200.62,248.9H94.19c-1.39,0 -2.52,-1.13 -2.52,-2.52V49.48c0,-1.39 1.13,-2.52 2.52,-2.52h106.43c1.39,0 2.52,1.13 2.52,2.52v196.9C203.13,247.77 202.01,248.9 200.62,248.9z"/>
<path fill="#000000" d="M102.7,75.7h89.39v149.58h-89.39z"/>
</svg>
Note that there are two black and two white paths in this icon.
There could be several things happening here:
There is something in the white third path that Android doesn't like (doesn't parse correctly), causing that path to not be drawn properly. This is unlikely.
I notice that the icons in your screenshots have a tint to them. They are grey rather than black. My guess is that you are tinting or setting the colour of the icon in a way that is setting all the paths to grey - including the white ones.
Assuming #2 is correct, thereare a couple of solutions:
Change the way you are recolouring the icons
Redraw this icon so that it consists of just one or two black paths. The parts that are white now, should instead just be holes in the black parts. Then you colour the icon, there will no longer be any white parts that get recoloured.
is there an easy way to generate Vector Drawable that is a circle with the icon inside from the existing vector drawable?
Example:
I would suggest something like this:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:gravity="fill"
android:drawable="#drawable/ic_brightness_1_black_24dp"
/>
<item
android:gravity="center"
android:drawable="#drawable/ic_call_black_24dp"
android:top="20dp"
android:bottom="20dp"
android:left="20dp"
android:right="20dp"
/>
</layer-list>
The resources with ids ic_brightness_1_black_24dp and ic_call_black_24dp are imported vector drawables.
ic_brightness_1_black_24dp:
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24.0"
android:viewportHeight="24.0">
<path
android:fillColor="#303F9F"
android:pathData="M12,12m-10,0a10,10 0,1 1,20 0a10,10 0,1 1,-20 0"/>
</vector>
and ic_call_black_24dp:
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24.0"
android:viewportHeight="24.0">
<path
android:fillColor="#FFFFFF"
android:pathData="M6.62,10.79c1.44,2.83 3.76,5.14 6.59,6.59l2.2,-2.2c0.27,-0.27 0.67,-0.36 1.02,-0.24 1.12,0.37 2.33,0.57 3.57,0.57 0.55,0 1,0.45 1,1V20c0,0.55 -0.45,1 -1,1 -9.39,0 -17,-7.61 -17,-17 0,-0.55 0.45,-1 1,-1h3.5c0.55,0 1,0.45 1,1 0,1.25 0.2,2.45 0.57,3.57 0.11,0.35 0.03,0.74 -0.25,1.02l-2.2,2.2z"/>
</vector>
Actually it's quite simple, you just need to include both paths in a single vector, so with your paths it will look like the following:
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24.0"
android:viewportHeight="24.0">
<path
android:fillColor="#303F9F"
android:pathData="M12,12m-10,0a10,10 0,1 1,20 0a10,10 0,1 1,-20 0"/>
<path
android:fillColor="#FFFFFF"
android:pathData="M6.62,10.79c1.44,2.83 3.76,5.14 6.59,6.59l2.2,-2.2c0.27,-0.27 0.67,-0.36 1.02,-0.24 1.12,0.37 2.33,0.57 3.57,0.57 0.55,0 1,0.45 1,1V20c0,0.55 -0.45,1 -1,1 -9.39,0 -17,-7.61 -17,-17 0,-0.55 0.45,-1 1,-1h3.5c0.55,0 1,0.45 1,1 0,1.25 0.2,2.45 0.57,3.57 0.11,0.35 0.03,0.74 -0.25,1.02l-2.2,2.2z"/>
</vector>
The result will obviously depend on sizes of paths in relation to each other, and since scaling them without a graphical tool is a pain, DimDim's solution with a layer-list is easier to implement.
Since nobody has mentioned how to do this using vector drawing as the question says here is the way to do it.
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="144dp"
android:height="144dp"
android:viewportWidth="144"
android:viewportHeight="144">
<path
android:pathData="M72,72m-50,0a50,50 0,1 1,100 0a50,50 0,1 1,-100 0"
android:strokeWidth="9"
android:fillColor="#00000000"
android:strokeColor="#fff"/>
</vector>
M72,72m -> circle's center coordinates
50` -> the circle's radius
100` -> circle's diameter
strokeWidth -> the ring's thickness
To make it into a disc instead of a ring change the fillColor
To make your circle half the size change all occurrences of 50 to 25 and all occurrences of 100 to 50. Change accordingly for other sizes.
To move the circle around inside the viewport change the circle's coordinates (the 72 numbers)
These numbers obviously are related to the viewport size. 72 is the center for 144 which is the defined viewport size in this case. To center it in a 200 viewport size you would need to use 100
Use this way,
I tried in my own and it's working fine. It looks like this.
for button_round:
I try to change default icon for Close Button in Chrome custom tabs (CustomTabsIntent.Builder)
Simple code for testing:
Bitmap closeIcon = BitmapFactory.decodeResource(getResources(), R.mipmap.ic_launcher);
intentBuilder.setCloseButtonIcon(closeIcon);
But nothing happens. Why? (Nexus 7, Marshmallow)
Typically this is caused by using a bitmap that has the 'wrong' dimensions. The correct dimensions are documented here: https://developer.android.com/reference/android/support/customtabs/CustomTabsIntent.html#KEY_ICON
The close icon needs to be 24dp x 24dp. Something like this:
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24"
android:viewportHeight="24"
android:tint="?attr/colorControlNormal">
<path
android:fillColor="#android:color/white"
android:pathData="M7.2,14.4m-3.2,0a3.2,3.2 0,1 1,6.4 0a3.2,3.2 0,1 1,-6.4 0"/>
<path
android:fillColor="#android:color/white"
android:pathData="M14.8,18m-2,0a2,2 0,1 1,4 0a2,2 0,1 1,-4 0"/>
<path
android:fillColor="#android:color/white"
android:pathData="M15.2,8.8m-4.8,0a4.8,4.8 0,1 1,9.6 0a4.8,4.8 0,1 1,-9.6 0"/>
</vector>
In Kotlin, you can retrieve this drawable and add it to your builder like this:
AppCompatResources.getDrawable(main, R.drawable.close_icon)?.let {
DrawableCompat.setTint(it, Color.WHITE)
builder.setCloseButtonIcon(it.toBitmap())
}
This answer has some more details.