Botón Mágico

Magic Button, es un botón animado para android bajo licencia del MIT desarrollado por Bloder (Brasil), el proyecto esta disponible en GitHub.

Proyecto Magic Button en GitHub

A continuación, implementaremos este Magic Button en un proyecto de Android Studio.

Partimos de un proyecto vacío con las siguientes características:

Nombre proyecto: Botón Mágico
Domain: org.example.botonmagico
Plantilla: Empty Activity
Activity Name: MainActivity
Layout Name: activity_main

Paso 1. Gradle

Abrimos el archivo build.gradle (Module: App) y agregamos :

compile ‘com.github.bloder:magic:1.1’

a la sección de dependencias, es decir:

Paso 2. Layout

El código XML del botón mágico es el siguiente:

<br.com.bloder.magic.view.MagicButton
        android:id="@+id/magic_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:magic_button_size="50dp"
        app:button_icon="@drawable/your_icon"
        app:button_icon_width="25dp"
        app:button_icon_height="25dp"
        app:hide_text="Hi Mom!"
        app:hide_text_size="15dp"
        app:hide_text_color="@android:color/black"
        app:icon_button_color="button_icon_color"
        app:expandable_area_color="that_expandable_button_part_color"/>

Este código lo agregamos en el layout donde queramos mostrar el botón, para nuestro ejemplo:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="org.example.botonmagico.MainActivity">

    <br.com.bloder.magic.view.MagicButton
        android:id="@+id/magic_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:magic_button_size="50dp"
        app:button_icon="@drawable/ic_launcher"
        app:button_icon_width="25dp"
        app:button_icon_height="25dp"
        app:hide_text="Hola Mundo!"
        app:hide_text_size="8dp"
        app:hide_text_color="@android:color/white"
        app:icon_button_color="#ff0000"
        app:expandable_area_color="#9c0000"/>

</RelativeLayout>

Modificamos los valores a nuestro gusto, usaremos tambien el icono por defecto de android ic_launcher

Paso 3: Código

De nada nos sirve un botón si no podemos ejecutar una acción al presionarlo, para ello, modificamos nuestro clase MainActivity de la siguiente manera:

package org.example.botonmagico;

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

public class MainActivity extends AppCompatActivity {

    private br.com.bloder.magic.view.MagicButton magicButton;

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

        magicButton = (br.com.bloder.magic.view.MagicButton) findViewById(R.id.magic_button);

        magicButton.setMagicButtonClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //Codigo a ejecutar
            }
        });

    }
}