Sigueme en Facebook Sigueme en Twitter Sigueme en Instagram Sigueme en Youtube
JC Mouse Bolivia
Index / Android / Fragmentos dinamicos y eventos de usuario

Fragmentos dinamicos y eventos de usuario

Autor jc mouse martes, mayo 2, 2017

Continuando con los tutoriales sobre fragmentos en android, en esta oportunidad veremos como añadir Fragments dinámicamente a una aplicación android y también como implementar eventos en cada fragmento.

Si te perdiste el primer tutorial sobre fragmentos, te invito a visitar [Introducción a Fragments] .

El ejemplo que desarrollaremos a continuación, contara con 2 fragments fijos y uno que agregaremos dinamicamente que ademas contara con botones para realizar X o Y acción. Sin más, comencemos el proyecto en Android Studio.

Paso 1: El Proyecto

Creamos un proyecto android que llamamos «Ejemplo Fragmento 2«.

A continuación agregamos:

  • 3 clases «FragmentoA», «FragmentoB» y «FragmentoC».
  • 3 layout «fragment_fragmentoa.xml», «fragment_fragmentob.xml» y «fragment_fragmentoc.xml».
  • 3 drawables «bgblue.xml» , «bgred.xml» y «bggreen.xml».

Debemos tener algo como esto:

fragments android

Paso 2: Drawables

Estos archivos nos permitirán colocar borde y fondo a cada uno de los fragmentos.  Su código es el siguiente:

bgblue.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <solid android:color="#1900ff" />
    <stroke android:width="3dp" android:color="#FFFFFF" />
</shape>

bggreen.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <solid android:color="#00c234" />
    <stroke android:width="3dp" android:color="#FFFFFF" />
</shape>

bgred.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <solid android:color="#ff0d05" />
    <stroke android:width="3dp" android:color="#FFFFFF" />
</shape>

Paso 3: Fragments XML

Como vimos en la primera parte de este tutorial, Android Studio nos da la posibilidad de agregar Fragments directamente tanto el archivo XML como su clase java, pero para entender mejor su funcionamiento lo haremos escribiendo por separado el código XML y java.

Los Fragments B y C son sencillos y su código se reduce a un fondo y un textview para poder identificarlos en la interfaz.

fragment_fragmentob.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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:padding="20dp"
    android:background="@drawable/bggreen"
    tools:context="net.jc_mouse.ejemplofragmento2.FragmentoB">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:textColor="#FFFFFF"
        android:text="Hola. Soy el Fragment B" />

</FrameLayout>

fragment_fragmentoc.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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:padding="20dp"
    android:background="@drawable/bgblue"
    tools:context="net.jc_mouse.ejemplofragmento2.FragmentoC">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:textColor="#FFFFFF"
        android:text="Hola. Soy el Fragment C" />

</FrameLayout>

El fragmento A, contara ademas de un textview, con dos botones (Button) a los cuales les agregaremos eventos más adelante:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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:padding="20dp"
    android:background="@drawable/bgred"
    tools:context="net.jc_mouse.ejemplofragmento2.FragmentoA">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="#FFFFFF"
        android:layout_gravity="center_horizontal|top"
        android:text="Hola. Soy el Fragment A" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="presioname"
        android:layout_gravity="center|center_horizontal"
        android:id="@+id/button1"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="presioname"
        android:layout_gravity="bottom|center_horizontal"
        android:id="@+id/button2"/>
</FrameLayout>

Importante:

Podemos notar que a cada Fragment le agregamos un drawable que creamos en el paso 2 en la propiedad android:background

Debemos relacionar también cada Fragment XML con un archivo java, esto se hace  indicando los paquetes correspondientes en la propiedad context, en mi caso tenemos:

tools:context=»net.jc_mouse.ejemplofragmento2.FragmentoA»

Si usas paquetes o clases con nombres distintos, debes usar esos paquetes o clases, no esta por demás advertirlo 🙂

Paso 4. Fragments Java

Al igual que sus pares en XML, los fragmentos B y C tienen el código mínimo para funcionar, estos son:

FragmentoB.java

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class FragmentoB extends Fragment{

    public static FragmentoB newInstance() {
        return new FragmentoB();
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_fragmentob, container, false);
    }

}

FragmentoC.java

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class FragmentoC extends Fragment{

    public static FragmentoC newInstance() {
        return new FragmentoC();
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_fragmentoc, container, false);
    }

}

FragmentoA.java

El fragmento A interactuara directamente con el usuario, por lo que implementaremos un listener el cual asignaremos a cada uno de los botones de la interfaz. Cuando se presionen los botones, el fragment cambiara de color y aparecerá un mensaje notificando que botón se presiono.

import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.Toast;

public class FragmentoA extends Fragment implements View.OnClickListener{

    private Button button1;
    private Button button2;
    private View view;

    public static FragmentoA newInstance() {
        return new FragmentoA();
    }
    
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        view = inflater.inflate(R.layout.fragment_fragmentoa, container, false);
        //botones
        button1 = (Button) view.findViewById(R.id.button1);
        button1.setOnClickListener(this);
        button2 = (Button) view.findViewById(R.id.button2);
        button2.setOnClickListener(this);
        //retorna view
        return view;
    }

    @Override
    public void onClick(View v){
        switch (v.getId()) {
            case R.id.button1:
                Toast.makeText(getActivity(), "Presionaste el boton del centro", Toast.LENGTH_SHORT).show();
                view.setBackgroundColor(Color.parseColor("#FFC622BB"));//violeta
                break;
            case R.id.button2:
                Toast.makeText(getActivity(), "Presionaste el boton inferior", Toast.LENGTH_SHORT).show();
                view.setBackgroundColor(Color.parseColor("#FFDDE238"));//amarillo oscuro
                break;
        }
    }

}

Paso 5. Layout principal

Abrimos el archivo activity_main.xml y reemplazamos por el siguiente código:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
    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="net.jc_mouse.ejemplofragmento2.MainActivity">

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Fragment A"
            android:id="@+id/buttonA" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Fragment B"
            android:id="@+id/buttonB" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Fragment C"
            android:id="@+id/buttonC" />
    </LinearLayout>


    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <fragment
            android:name="net.jc_mouse.ejemplofragmento2.FragmentoA"
            android:id="@+id/fragment"
            android:layout_weight="1"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>

        <LinearLayout
            android:orientation="vertical"
            android:layout_weight="1"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <fragment
                android:name="net.jc_mouse.ejemplofragmento2.FragmentoB"
                android:id="@+id/fragment2"
                android:layout_weight="1"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"/>

            <FrameLayout
                android:id="@+id/framelayout"
                android:layout_weight="1"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"></FrameLayout>

        </LinearLayout>

    </LinearLayout>

</LinearLayout>

Importante modificar el tools:context con tu propia estructura de paquetes.

Podemos observar como en los 2 fragments indicamos las clases java de los fragmentos que se cargaran en la interfaz en la propiedad android:name, pero el fragment dinámico se cargara en un FrameLayout. Nuestro activity cargado desde la vista diseño se ve de la siguiente forma:

android studio fragmentos

Paso 6. MainActivity

Ya para terminar, abrimos el archivo MainActivity, en este archivo implementaremos los botones y eventos que estos realizan cuando son presionados.

import android.app.FragmentTransaction;
import android.support.v4.app.Fragment;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {

    private Button buttonA;
    private Button buttonB;
    private Button buttonC;

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

        buttonA = (Button) findViewById(R.id.buttonA);
        buttonB = (Button) findViewById(R.id.buttonB);
        buttonC = (Button) findViewById(R.id.buttonC);

        //carga fragment dinamico
        getSupportFragmentManager()
                .beginTransaction()
                .replace(R.id.framelayout, new FragmentoA())
                .disallowAddToBackStack()
                .commit();

        //boton A
        buttonA.setOnClickListener(
                new View.OnClickListener() {
                    public void onClick(View view) {
                        Fragment fragmentoA = new FragmentoA();
                        getSupportFragmentManager()
                                .beginTransaction()
                                .replace(R.id.framelayout, fragmentoA)
                                .disallowAddToBackStack()
                                .commit();
                    }
                });
        //boton B
        buttonB.setOnClickListener(
                new View.OnClickListener() {
                    public void onClick(View view) {
                        Fragment fragmentoB = new FragmentoB();
                        getSupportFragmentManager()
                                .beginTransaction()
                                .replace(R.id.framelayout, fragmentoB)
                                .disallowAddToBackStack()
                                .commit();
                    }
                });
        //boton C
        buttonC.setOnClickListener(
                new View.OnClickListener() {
                    public void onClick(View view) {
                        Fragment fragmentoC = new FragmentoC();
                        getSupportFragmentManager()
                                .beginTransaction()
                                .replace(R.id.framelayout, fragmentoC)
                                .disallowAddToBackStack()
                                .commit();
                    }
                });
    }
}

No utilizamos ningún permiso o librerías externa, si no tenemos ningún error hasta este punto, solo nos falta ejecutar la aplicación:

dinamic fragments

en el siguiente video podemos ver la aplicación en acción:

enjoy!!!

Tags

Si te ha gustado podrías compartirlo o dejar un comentario. ¡Muchas gracias!
Autor: JC Mouse

Yo soy yo :) JC Mouse, Soy orgullosamente boliviano soy fundador y CEO de la web jc-Mouse.net uno de las pocas web en emprendimiento y tecnología en Bolivia.

Toda la información que encuentres en este sitio es y sera completamente gratis siempre, puedes copiar, descargar y re-publicar si así lo deseas en otros blogs o sitios web, solo te pido a cambio que dejes una referencia a esta web. Esto nos ayuda a crecer y seguir aportando. Bye

Enjoy! :)

También Te Podría Interesar

Generar clases desde Esquemas XSD

Generar clases desde Esquemas XSD

XJC es una herramienta de linea de comandos del compilador de esquemas de JAXB que se puede utilizar para convertir un e...

5 apps gratuitas para aprender idiomas

5 apps gratuitas para aprender idiomas

El confinamiento causado por el covid-19, son una gran oportunidad para realizar varias actividades en casa y desde casa...

SOAP .:. Cliente android

SOAP .:. Cliente android

En esta oportunidad construiremos una aplicación android que nos permitirá consumir  un servicio web utilizando la libre...

JTable con JCheckBox y celdas NULL

JTable con JCheckBox y celdas NULL

Me llego la siguiente duda por facebook que me pareció interesante: «Se quiere desarrollar una tabla en java que haga us...

Obtener Metadatos de una base de datos

Obtener Metadatos de una base de datos

La clase de java DatabaseMetaData nos permite obtener información exhaustiva sobre una base de datos, para ser más exact...

Login estilo Google

Login estilo Google

Google tiene entre su formulario de autenticación de usuario para sus diferentes servicios (gmail, blogger, youtube, g+)...

Comparte lo que sabes

Categorias

Últimas entradas

Por lo general se usan transacciones a nivel base de datos y posteriormente se llaman estos a través de procedimientos a...

En este post, aprenderemos como conectar Visual Basic 6 con SQL Server, abrir una tabla, leer su contenido y mostrar est...

Lo que veremos en este post es la configuración del driver para PHP de SQL Server que ha creado Microsoft el cual permit...

Google Bard la inteligencia artificial de Google se actualiza con una mejora que entra a competir con el resto de IAs y...

Herramientas

Generador de Enlaces a Whatsapp