ANDROID TRANSPARENT COLORS

Android Transparent Colors

Usually when you create the design for an Android app we must add some transparency to different UI elements according to the requirements.

In order to have a transparent background, but not fully transparent, you should compute the hex number assigned to the desired percent of transparency in the alpha channel.

For example to make the red color have 20% in the alpha channel you should use this code #CCFF0000.

#CCFF0000

In the example, CC is the hex number for 255 * 0.8 = 204. Note that the first two hex 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 hex for 255 * 0.2 = 51.

Hex Opacity Values

• 100% — FF
• 95% — F2
• 90% — E6
• 85% — D9
• 80% — CC
• 75% — BF
• 70% — B3
• 65% — A6
• 60% — 99
• 55% — 8C
• 50% — 80
• 45% — 73
• 40% — 66
• 35% — 59
• 30% — 4D
• 25% — 40
• 20% — 33
• 15% — 26
• 10% — 1A
• 5% — 0D
• 0% — 00

You can take a look at the Android documentation for colors.

Example:

MainActivity.java

package com.example.android.androidcolors;

import android.graphics.Color;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;

public class MainActivity extends AppCompatActivity {

    private View color100, color90, color80, color70, color60, color50, color40, color30, color20, color10, color0;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        color100 = (View) findViewById(R.id.color100);
        color90 = (View) findViewById(R.id.color90);
        color80 = (View) findViewById(R.id.color80);
        color70 = (View) findViewById(R.id.color70);
        color60 = (View) findViewById(R.id.color60);
        color50 = (View) findViewById(R.id.color50);
        color40 = (View) findViewById(R.id.color40);
        color30 = (View) findViewById(R.id.color30);
        color20 = (View) findViewById(R.id.color20);
        color10 = (View) findViewById(R.id.color10);
        color0 = (View) findViewById(R.id.color0);

        color100.setBackgroundColor(Color.GREEN);
        color90.setBackgroundColor(getColorWithAlpha(Color.GREEN, 0.9f));
        color80.setBackgroundColor(getColorWithAlpha(Color.GREEN, 0.8f));
        color70.setBackgroundColor(getColorWithAlpha(Color.GREEN, 0.7f));
        color60.setBackgroundColor(getColorWithAlpha(Color.GREEN, 0.6f));
        color50.setBackgroundColor(getColorWithAlpha(Color.GREEN, 0.5f));
        color40.setBackgroundColor(getColorWithAlpha(Color.GREEN, 0.4f));
        color30.setBackgroundColor(getColorWithAlpha(Color.GREEN, 0.3f));
        color20.setBackgroundColor(getColorWithAlpha(Color.GREEN, 0.2f));
        color10.setBackgroundColor(getColorWithAlpha(Color.GREEN, 0.1f));
        color0.setBackgroundColor(getColorWithAlpha(Color.GREEN, 0.0f));
    }

    public static int getColorWithAlpha(int color, float ratio) {
        int newColor = 0;
        int alpha = Math.round(Color.alpha(color) * ratio);
        int r = Color.red(color);
        int g = Color.green(color);
        int b = Color.blue(color);
        newColor = Color.argb(alpha, r, g, b);
        return newColor;
    }
}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/black"
    android:fillViewport="true"
    android:gravity="center"
    android:orientation="vertical"
    android:padding="@dimen/activity_horizontal_margin"
    tools:context="com.example.android.androidcolors.MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <View
            android:id="@+id/color100"
            android:layout_width="match_parent"
            android:layout_height="70dip" />

        <View
            android:id="@+id/color90"
            android:layout_width="match_parent"
            android:layout_height="70dip"
            android:layout_marginTop="@dimen/activity_horizontal_margin" />

        <View
            android:id="@+id/color80"
            android:layout_width="match_parent"
            android:layout_height="70dip"
            android:layout_marginTop="@dimen/activity_horizontal_margin" />

        <View
            android:id="@+id/color70"
            android:layout_width="match_parent"
            android:layout_height="70dip"
            android:layout_marginTop="@dimen/activity_horizontal_margin" />

        <View
            android:id="@+id/color60"
            android:layout_width="match_parent"
            android:layout_height="70dip"
            android:layout_marginTop="@dimen/activity_horizontal_margin" />


        <View
            android:id="@+id/color50"
            android:layout_width="match_parent"
            android:layout_height="70dip"
            android:layout_marginTop="@dimen/activity_horizontal_margin" />


        <View
            android:id="@+id/color40"
            android:layout_width="match_parent"
            android:layout_height="70dip"
            android:layout_marginTop="@dimen/activity_horizontal_margin" />


        <View
            android:id="@+id/color30"
            android:layout_width="match_parent"
            android:layout_height="70dip"
            android:layout_marginTop="@dimen/activity_horizontal_margin" />


        <View
            android:id="@+id/color20"
            android:layout_width="match_parent"
            android:layout_height="70dip"
            android:layout_marginTop="@dimen/activity_horizontal_margin" />

        <View
            android:id="@+id/color10"
            android:layout_width="match_parent"
            android:layout_height="70dip"
            android:layout_marginTop="@dimen/activity_horizontal_margin" />

        <View
            android:id="@+id/color0"
            android:layout_width="match_parent"
            android:layout_height="70dip"
            android:layout_marginTop="@dimen/activity_horizontal_margin" />
    </LinearLayout>

</ScrollView>