Add alpha to color android

How to make a background 20% transparent on Android

How do I make the background of a Textview about 20% transparent (not fully transparent), where there is a color in the background (i.e. white)?

19 Answers 19

Use the below code for black:

Now if I want to use opacity then you can use the below code:

Hex Opacity Values

If you always to forget what code for transparency then you must have to see below link and no worry about to remember anything regarding transparent code :-

Make the color have 80% in the alpha channel. For example, for red use #CCFF0000 :

In the example, CC is the hexadecimal number for 255 * 0.8 = 204 . Note that the first two hexadecimal digits are for the alpha channel. The format is #AARRGGBB , where AA is the alpha channel, RR is the red channel, GG is the green channel and BB is the blue channel.

I’m assuming that 20% transparent means 80% opaque. If you meant the other way, instead of CC use 33 which is the hexadecimal for 255 * 0.2 = 51 .

In order to calculate the proper value for an alpha transparency value you can follow this procedure:

1. Given a transparency percentage, for example 20%, you know the opaque percentage value is 80% (this is 100-20=80 )
2. The range for the alpha channel is 8 bits ( 2^8=256 ), meaning the range goes from 0 to 255.
3. Project the opaque percentage into the alpha range, that is, multiply the range (255) by the percentage. In this example 255 * 0.8 = 204 . Round to the nearest integer if needed.
4. Convert the value obtained in 3., which is in base 10, to hexadecimal (base 16). You can use Google for this or any calculator. Using Google, type «204 to hexa» and it will give you the hexadecimal value. In this case it is 0xCC .
5. Prepend the value obtained in 4. to the desired color. For example, for red, which is FF0000 , you will have CCFF0000 .

Источник

Tek Eye

How does color work in Android? An Android color is a 32-bit integer value consisting of four eight bit parts (4×8=32). The four parts are tagged ARGB. This is the amount of Red, Green and Blue in the color, plus how opaque (see through) it is, called the Alpha value, the lower the alpha value the more transparent the color appears. (Note that in British English color is spelt colour.) This article shows how to set a color in Android and provides some demo code to try out.

(This Android color tutorial assumes that Android Studio is installed, a basic app can be created and run, and the code in this article can be correctly copied into Android Studio. The example code can be changed to meet your own requirements. When entering code in Studio add import statements when prompted by pressing Alt-Enter.)

Changing Colors in Android and Naming Them for Convenience

The alpha value is the highest (first) byte in the 32-bit value, followed by the red, then green and finally the blue byte. Hence it is referred to as an ARGB value with each letter representing the type and order of the byte. This format allows for easy representation as a hexadecimal number in Java. Add this code to the basic starting app at the bottom of the onCreate in the MainActivity.java (the TextView displaying Hello World! is given the ID of textView):

The three byes representing the color values provide over 16 million color possibilities in Android (256 x 256 x 256 = 16,777,216). A color depth better than the human eye (stated in the Wikipedia article). Plus all these colors can range from transparent (completely see through when alpha is 0), to opaque (completely solid when alpha is 255).

Named Color Resources in Android

To help with handling colors in Android they can be made into a resource for easy reuse. Either open an existing resource file or create a new one. In the Android Studio project there should be a colors.xml file in the res/values folder. In colors.xml add a definition for the required color, Lime is defined here as an example:

(Note: To add a new resource first select the app in the Project explorer file. Then use the File or context menu, usually right-click, then the New option and select Android resource file. A color resource does not need to be stored in colors.xml, other file names can be used.)

Use getColor() to read the color value from the resource:

If the color is solid (full alpha value) then the color resource can leave the alpha value out. Though for clarity and future maintenance it is wise to be explicit and always define all four parts of an Android color:

The use of a named color in a resource file is handy when dealing with common colors (such as the standard HTML named web colors, i.e. CSS colors, or X Window System and SVG color names). A resource file can be created to define the common colors for an app. Here is a resource file to use the HTML/CSS color names in Android code:

Then just use them as required:

Referencing Colors in Android XML Layouts

To reference an Android color resource in an XML layout simple use @color/name_of_color, the same way other resources are referenced, such as strings:

Accessing Android System Color Resources

Are there predefined colors in Android? Yes, there are existing color resources, but not many. Also Google does not recommend using certain system resources as they are not guaranteed to stay the same in future releases, or even be there. You can browse the Android color resources in an app project. Select Packages at the top of the Project explorer in Studio. Expand the Libraries and android, in the R.class view the items in class color. There are resources such as R.color.black and R.color.holo_purple. The full list is also available in the R.color developer documentation. To access these resources you need the package qualifier, as in @android:color/black. In code add android before the R:

Note that the Android color resources starting holo are not available on versions of Android prior to API level 14 (Ice Cream Sandwich).

The Android Color Class

There is a helper class in Android that has functions to ease the generation of color values from individual alpha, red, green and blue components, from strings and from Hue, Saturation and Value (HSV), and back again. The Color class defines a limited range of static colors, e.g. Color.YELLOW, see the Android developer documentation for full information on the Color class:

Android Color class static constants: BLACK, BLUE, CYAN, DKGRAY, GRAY, GREEN, LTGRAY, MAGENTA, RED, TRANSPARENT, WHITE, YELLOW

Color class methods: HSVToColor, RGBToHSV, alpha, argb, blue, colorToHSV, green, parseColor, red, rgb

Android Oreo Introduced ColorSpace

Android Oreo (API 26) introduce advanced color models that go beyond the previous RGB model, e.g. CMYK (the cyan, magenta, and yellow key format). For most apps the RGB colors are fine. However, for specialised applications the new models may be required. See the article Enhancing Graphics with Wide Color Content and the ColorSpace documentation on Android Developers.

For wide color support the Color class was expanded to provide 64 bit color values. Existing methods now come with support for long, and the new methods are: colorspace, convert, getColorSpace, getComponent, getComponentCount, getComponents, getMaxValue, getMinValue, getModel, isInColorSpace, isSrgb, isWideGamut, luminance, pack, toArgb

Changing Text Color in Android

Use the textColor attribute to modify the color of text when it is defined in an XML layout:

Android Color Codes Example Project

To see all the above Android color hexadecimal codes and named colors in action use the color test demo project. Here are examples of the above in action:

Download color-test.zip, extract it to a folder on your development PC and import it into Android Studio. This sample Android colors project is also available from the Tek Eye Android Example Projects page, where further details on importing a sample project into Studio is provided.

Adding a Color Picker to an App

If you need to add the ability to configure a color for a setting in an app it is easily done. The Android SeekBar can be used for a quick and easy color picker, drop four SeekBars onto a layout, one for each component of a color (only three are needed if you do not want to change the transparency). Use the methods from the Color class to combine the SeekBar outputs into the color value. Here’s one in action:

An article on building the above color picker is available in the Android Color Picker Tutorial. That tutorial also covers the color picker available in the original Android API Demos app. The API Demos project was in the pre-Androud Studio versions of the Android Software Development Kit (SDK). In API Demos the color picker is in ColorPickerDialog.java.

There are also plenty of other Android color pickers available, with full source, on GitHub, simply search for Android color picker.

And Finally.

What is the color of the Android Robot? Android green is 0xA4C639.

Summary

Storing ARGB color values in an Android resource files, e.g. #FFFF0000 , makes it easy to remember the color values for Views in Layouts. The names are easier to remember than hex strings. There is a Color helper class available to help with color conversion and value extraction. Several free color picker Views are available to add color selection functionality to apps.

See Also

• Download the code for this example, available in color-test.zip
• An Android Color Picker Tutorial with example source code and project.
• See Color State List Resource for information on changing colors in Views on different states.
• See the Android Studio example projects to learn Android app programming.
• For a full list of all the articles in Tek Eye see the full site Index.

Acknowledgements

Author: Daniel S. Fowler Published: 2013-04-15 Updated: 2017-11-26

Do you have a question or comment about this article?

(Alternatively, use the email address at the bottom of the web page.)

↓markdown↓ CMS is fast and simple. Build websites quickly and publish easily. For beginner to expert.

Free Android Projects and Samples:

Источник

Lesson 1.5: How to color part of the text and use alpha channel in TextView?

Let’s say that we want to have every word presented in TextView in different color. Any of solutions from previous lesson doesn’t address this issue, but we know how to do it. And there is one more thing related to colors – so called alpha channel that’s responsible for transparency.

Step 1. Make colorful TextView thanks to HTML tags

To color words or phrases inside TextView we need a trick – we would use Html class and its fromHtml() method. One of supported HTML tags is .

The syntax is a bit complicated – we have to deliver String with HTML tags to fromHtml() method. Then we give a result of HTML parsing to setText() method, which displays it in chosen TextView. Of course we have to find a view first, what was described in previous lessons.

This is an example changing color of one word.

That allows us to modify color of every single word. Look at this example.

You could use HTML tag to have many colors in one string (Android Virtual Device)

You could use String variable for fromHtml().

Unfortunately, that solutions doesn’t work directly in XML layout file. And there is no easy way to use it for string resources. Method fromHtml() requires String as argument, but when we use getString() on resources in strings.xml file it returns them without HTML tags.

There are two options:

Option 1. Hide HTML tags

Instead of using signs to mark tags, use

That’s exactly our previous text: This is blue .

And below the Java code to display it:

Option 2. Use CDATA format.

You have to embrace your HTML code with CDATA. CDATA states for Character Data and this is a part of code that isn’t parse (or we could say it’s ignored).

This is our example of strings.xml line using CDATA:

Step 2. What is the use of alpha channel option?

Alpha channel is not a color, but it’s related to colors presentation. And you define it together with color definition. It sets transparency – from opaque to fully transparent (so invisible). We would simulate it using background color.

We would add one more TextView element . First would have red background and second green one. In both we need some text – in the example we used sample text just to simulate the transparency.

This is a full code of activity_main.xml file:

In the preview we just see second text on the green background. Because it is opaque, the previous text is covered by it. Mind that this effect would be only possible if you use RelativeLayout, if you changed to LinearLayout both texts would be next to each other (we would write more about layout types in next lesson set ).

Let’s now add alpha channel setting to background color in the second TextView. Value FF means opaque so nothing would change, and 00 is invisible. We would try a value 88 that is semi-transparent. Add it before background color definition in the second TextView.

The transparency is slightly visible. Change it to 22.

Now there isn’t any doubts that transparency influence the look of colors and objects themselves.

The difference between those TextViews is only level of alpha channel – from left: FF, 88 and 22 (Android Studio)

You could set transparency not only to background, but also to text or a whole object. In the first case we just use #AARRGGBB color format for android:textColor attribute (exactly as we did for background color).

If we want to change alpha channel of whole element we should use android:alpha attribute. But it isn’t so obvious how to use it, because the value is not anymore hex value as in color definition. Instead you have to use a value between 0 and 1. So semi-transparent would be 0.5 (50% of opacity) and very transparent 0.3 (30% of opacity).

Источник