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.

Android Transparent Colors (1)

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


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>

android_magdamiu.gif

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s