Está en la página 1de 42

Insertar imagenes dos formas:

1. Copiar y pegar en drawable


O
2. Clic derecho en drawable. New >imagen
asset
3. Seguir los pasos
Ahora también es posible asignar un recurso string al texto del botón
desde XML y Java.
En caso de XML usa la notación de recurso @string o @android:string (strings
del sistema) de la siguiente forma:

En Java solo usa el operador punto para llegar al identificador perteneciente a


la clase R:
Cambiar Color de Fondo

• Modificar el fondo de un botón implica el cambio del


atributo android:background por un recurso de color o
drawable
• Invoca la referencia @color/colorPrimary de tu
archivo values/colors.xml
Tips forma redondeada
Sin embargo, hacer esto hace perder la reacción de superficie
que se tenía antes por el Material Design.
La forma redondeada tampoco se hace presente.
Solo queda la elevación al momento de tocar el botón.
Para conservar el efecto y cambiar el color del botón usa el
atributo app:backgrountTint de la siguiente forma:
Forma 2 bordes
Botón con Texto e Imagen

• Cambia el color de texto a blanco (@android:color/white),


usa un tinte de color rojo (#ef9a9a) y alinea a la izquierda el
siguiente drawable de pizza:
Imagen en boton
• android:drawableLeft para ubicar la imagen en la izquierda. Si
compruebas con las sugerencias de Android tendrás varias
posiciones: derecha, abajo y arriba.
La Clase ImageButton

ImageButton funciona exactamente cómo Button, solo que en lugar de traer


un texto en su background, viene una imagen para especificar la acción.
Para cambiar la imagen de un image button usa el
atributo android:src. Obviamente su valor es un drawable.
El contorno del background se conserva como lo hemos visto hasta ahora, la
diferencia está que en el centro se
ubicará la imagen elegida en src.
Si quieres que el background por defecto desaparezca, asigna un color
transparente o cambia el contenido con un list drawable (esto lo verás más
adelante).
Imagen button
Con texto

<ImageButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/button_icon"
    android:contentDescription="@string/button_icon_desc"
    ... />
Material Design
Material Design es una guía integral para el diseño visual,
de movimientos y de interacción en distintas plataformas y
dispositivos. Android ahora es compatible con las
aplicaciones de Material Design. usa los nuevos
componentes y funcionalidades disponibles en Android 5.0
(nivel de API 21) y versiones posteriores.
En Android, se proporcionan los siguientes elementos que te
permitirán crear aplicaciones en Material Design:
• un tema nuevo;
• nuevos widgets para vistas complejas;
• nuevas API (interfaces de programación de aplicaciones)
para sombras y animaciones personalizadas.
• Material desing
• Tipos de botones que están en el material
desing:
• Raised Buttons
• Flat Buttons
• Floating Action Buttons (FAB)
Raised Buttons
• Los Raised Buttons son los que hemos visto hasta ahora.
Tienen backgrounds rectangulares, se elevan ante el click del
usuario y su superficie reacciona con un efecto ripple.
• Se usan sobre layouts que tienen gran variedad de contenido
para delimitar las secciones o elementos. Además realzan la
importancia de realizar una acción relacionada.
Flat Button
• Flat Futton o botón sin bordes tiene reacción
de superficie pero no se eleva al ser
presionado. Se usan para acciones
en diálogos, toolbars y de forma persistente
en steppers
Floating action
• Floating action button tiene las mismas
interacciones de elevación y ripple que el
raised button, solo que este tiene forma
circular. Su objetivo es promover una acción
principal relacionada a una pieza de material.
En el xml

<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        app:srcCompat="@android:drawable/ic_dialog_email"
        android:contentDescription="@string/submit"
        android:layout_margin="16dp" />
• En el java

FloatingActionButton fab = findViewById(R.id.fab);


fab.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
       //CODIGO
  }
});
• Implementar en gradle buscar grade.script
implementation 'com.android.support:design:x.x.x'

Creamos el boton

<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:fabSize="normal"
android:layout_margin="16dp"
app:layout_anchorGravity="bottom|right|end"
android:src="@drawable/ofer"
app:layout_anchorGravity="bottom|right|end" />
Flat button

style="@style/Widget.AppCompat.Button.Borderless“

style="?android:attr/borderlessButtonStyle"
• Puede ser aplicable a cualquier botón el style
Flat button con el mismo color

Si deseas que el color del texto sea el mismo del acento,


entonces usa Widget.AppCompat.Button.Borderless.Colored.
Custom background
Si realmente desea redefinir la apariencia de su botón,
puede especificar un fondo personalizado. Sin embargo,
en lugar de proporcionar un mapa de bits o color simple,
su fondo debe ser un recurso de lista de estado que
cambie la apariencia según el estado actual del botón.
Puede definir la lista de estados en un archivo XML que
defina tres imágenes o colores diferentes para usar para
los diferentes estados de los botones.
Para crear una lista de estados dibujable para el fondo
de su botón:
1.Cree tres mapas de bits para el fondo del botón que representen los
estados de botón predeterminados, presionados y enfocados.
Para asegurarse de que sus imágenes se ajusten a botones de varios
tamaños, cree los mapas de bits como mapas de bits de nueve parches .
2.Coloque los mapas de bits en el directorio res/drawable/ de su
proyecto. Asegúrese de que cada mapa de bits tenga un nombre
adecuado para reflejar el estado del botón que representan,
comobutton_default.9.png , button_pressed.9.png y button_focused.9.p
ng .
3.Cree un nuevo archivo XML en el
directorio res/drawable/ ( button_custom.xml nombre algo así
como button_custom.xml ). Inserte el siguiente XML:
Esto define un único recurso dibujable, que cambiará su imagen en
función del estado actual del botón.

•El primer <item> define el mapa de bits para usar


cuando se presiona el botón (activado).
•El segundo <item> define el mapa de bits para
usar cuando el botón está enfocado (cuando el
botón se resalta con la bola de seguimiento o el
pad direccional).
•El tercer <item> define el mapa de bits para usar
cuando el botón está en el estado predeterminado
(no está presionado ni enfocado).
1.Este archivo XML ahora representa un único
recurso dibujable y cuando un Button referencia
a él para su fondo, la imagen que se muestra
cambiará en función de estos tres estados.
2.Luego, simplemente aplique el archivo XML
dibujable como fondo del botón:
El boton
Otros metodos
• Android
OnLongClickListener
• Se llama cuando el usuario selecciona un
elemento durante más de un segundo.
OnLongClickListener
• Lo implementamos OnLongClickListener
– Colocamos el metodo Public Boolean
onLongClick(View v)
• Es igual que el anterior funciona como un
hold
View.OnFocusChangeListener
• Se llama cuando el usuario navega dentro o
fuera de un elemento.

• onFocusChange(View v)
OnKeyListerner
• Lo implementamos OnKeyListener
Edittext.setOnKeyListener(this)
Se coloca el metodo
public boolean onKey(View v, int keyCode,
KeyEvent event){

return false;
}
OnKeyListerner en oncreate
• Se implementa
• En el metodo crear
Edittext.setOnKeyListener(new OnkeyListener(){
public boolean onKey(View v, int keyCode, KeyEvent event){

return false;
}

});
Dentro del onKey
• If(event.getAction()==MotionEvent.ACTION_DOWN){

• if(keyCode==KeyEvent.KEYCODE_MENU){

• obtxt.setText("presionado");
• }
• }
OnTouchListener
• Se implementa el OnTouchListener en la clase
• Se coloca para que escuche atreves de esa
interfaz setOnTouchListener
• onTouch(View v, MotionEvent event)
– If(event.getAction()==MotionEvent.ACTION_DOW
N)
– Return true
Saber donde me muevo en la pantalla
Dentro del metodo ontouch
final
Saber posición de la pantalla

También podría gustarte