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

[sourcecode language="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;
}
}
[/sourcecode]

activity_main.xml

[sourcecode language="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>
[/sourcecode]

android_magdamiu.gif

 

Original post is here.

Leave a Reply

Your email address will not be published. Required fields are marked *