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

MAUS :- Simulador y Editor de exámenes para dispositivos móviles

MAUS :- Simulador y Editor de exámenes para dispositivos móviles

MAUS es una aplicación para dispositivos móviles con el Sistema Operativo Android que te permite realizar exámenes desde...

Tangram: El rompecabezas chino

Tangram: El rompecabezas chino

El Tangram es un juego chino muy antiguo, esta compuesto por 7 piezas: un paralelogramo (romboide), un cuadrado y 5 triá...

Transacciones con Java y MariaDB

Transacciones con Java y MariaDB

Se define como Transacción en base de datos a una “unidad lógica de trabajo” compuesta por un conjunto de op...

iReport: Reportes con imágenes de la base de datos

iReport: Reportes con imágenes de la base de datos

Este post esta dedicado a la creación de reportes con imágenes usando el programa iReport Designer. Cuando se desarrolla...

Crea una ventana de dialogo “Acerca de…” personalizado

Crea una ventana de dialogo “Acerca de…” personalizado

Cuando se crean aplicaciones android o cualquier otro tipo de software, es importante dejar información del o los desarr...

Crea una libreria TimeChooser – Selector de Tiempo

Crea una libreria TimeChooser – Selector de Tiempo

En este post crearemos un componente gráfico para java que nos permitirá seleccionar la hora del día de una manera senci...

Comparte lo que sabes

Categorias

Últimas entradas

Lorca Editor es una aplicación online creada por el desarrollador español Domingo Martin el cual tiene como objetivo el...

Eratóstenes era un matemático griego del siglo  III a.C. el cual ideó una manera rápida de obtener todos los números pri...

Las matemáticas son fundamentales para la vida y aparte de las actividades clásicas de enseñanza desarrolladas en el aul...

MVC es un patrón de arquitectura de software que separa una aplicación en tres componentes lógicos principales.  Estos s...

Herramientas

Generador de Enlaces a Whatsapp