martes, 3 de marzo de 2015

Android: Layout y objetos con semi transparencia (alpha)

Buenos días!

Hoy mas que un tutorial traigo un pequeño truco muy sencillo para conseguir que nuestras layouts u objetos (pueden set Buttons, Edittext, etc) tengan aspecto de semi-transparencia o lo que es lo mismo, sean menos opacos.

Todo esto se hace des de el .xml sin mayor complejidad.


Para conseguir el efecto de transparencia simplemente hay que añadir dos caracteres delante del código de color Hexagesimal en el apartado background (en este caso).
android:background="#FFFFFF"  >---->->  android:background="#33FFFFFF"
Como vemos hemos añadido un 33 que pertenece a un 20% de opacidad.

Veamos un ejemplo más práctico creando cuatro Layouts:
<RelativeLayout 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"
    tools:context=".MyActivity"
    android:background="@drawable/fondo">

    <!-- EJEMPLO un LinearLayout 100% de opacidad  -->
    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:layout_height="70dp"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="126dp"
        android:id="@+id/linearLayout"
        android:background="#FFFFFFFF"></LinearLayout>
    <!-- EJEMPLO un LinearLayout 70% opacidad  -->
    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:layout_height="70dp"
        android:layout_below="@+id/linearLayout"
        android:layout_marginTop="10dp"
        android:layout_centerHorizontal="true"
        android:id="@+id/linearLayout2"
        android:background="#B3FFFFFF"></LinearLayout>
    <!-- EJEMPLO un LinearLayout 40% de opacidad  -->
    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:layout_height="70dp"
        android:layout_below="@+id/linearLayout2"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="10dp"
        android:id="@+id/linearLayout3"
        android:background="#66FFFFFF"></LinearLayout>
    <!-- EJEMPLO un LinearLayout 20% de opacidad  -->
    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:layout_height="70dp"
        android:layout_below="@+id/linearLayout3"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="10dp"
        android:background="#33FFFFFF"></LinearLayout>
</RelativeLayout>

Aquí una captura del resultado:


Y lo más importante, igual que hemos añadido un '33' para conseguir el 20% de oipacidad aquí os dejo la tabla completa para las demás opacidades:

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
Muchas gracias a todos!!
Espero vuestros comentarios!

1 comentario: