Aprende Java Aprende Php Aprende C++ Aprende HTML 5 Aprende JavaScript Aprende JSON Aprende MySQL Aprende SQLServer Aprende Visual Basic 6 Aprende PostgreSQL Aprende SQLite Aprende Redis Aprende Kotlin Aprende XML Aprende Linux VSC Aprende Wordpress Aprende Laravel Aprende VueJS Aprende JQuery Aprende Bootstrap Aprende Netbeans Aprende Android
Sigueme en Facebook Sigueme en Twitter Sigueme en Instagram Sigueme en Youtube Sigueme en TikTok Sigueme en Whatsapp
Home / Android / Botón Mágico

Botón Mágico

Por jc mouse miércoles, diciembre 27, 2017

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:

gradle bolivia

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
            }
        });

    }
}

Y nuestro resultado

boton magico

Magic Button Brazil

Tags

Artículos similares

Dibujar primitivas 2d en html5

HTML5 junto a javascript permite dibujar figuras llamadas shapes sobre un lienzo que recibe el nombre de «canvas» su uso[...]

Introducción a PHP con Netbeans

NetBeans es un entorno de desarrollo integrado libre, hecho principalmente para el lenguaje de programación Java. Sin em[...]

WhatsApp: Aprende a usar la nueva función ‘Estado’

A continuación te mostramos una guía sobre la nueva nueva función ‘estado‘ de WhatsApp.  Primero que nada, a[...]

UML Java: easyUML plugins para Netbeans

easyUML es una herramienta para crear diagramas UML para NetBeans de forma visual. Adecuado para el aprendizaje de este[...]

Cifrado por desplazamiento o código de César

El cifrado César, también conocido como cifrado por desplazamiento o código de César, es una de las técnicas de cifrado[...]

Conexion Access con PHP

Para poder conectar PHP con una base de datos de microsoft Access debemos seguir los siguientes pasos: 1. Crea una base[...]