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

Actualizar JComboBox al cambiar valor de otro JComboBox

Actualizar JComboBox al cambiar valor de otro JComboBox

Cuando se trabaja con base de datos, estos datos son dinámicos, cambian con el tiempo y es necesario que esos cambios se...

Conexión MySQL y C#

Conexión MySQL y C#

En este post vamos a crear una aplicación sencilla para conectar C# con MySQL. Manos a la obra 🙂 Necesitamos – Con...

Curso gratuito de programación Python de Microsoft

Curso gratuito de programación Python de Microsoft

Microsoft el gigante de la tecnología está tratando de hacer que Python sea más fácil de comprender para aquellos intere...

Blog MVC – Iniciando el proyecto [p2]

Blog MVC – Iniciando el proyecto [p2]

Segunda parte del tutorial [Crea tu blog con el patrón MVC y php]. En esta 2da parte toca ver lo que es la creación del...

Sistema de gestión de stock – El Controlador (Parte 5)

Sistema de gestión de stock – El Controlador (Parte 5)

Para terminar el tutorial, debemos unir tanto la VISTA como el MODELO y para eso esta el CONTROLADOR. o.O El controlador...

Abre una aplicación swing java desde el navegador de forma segura

Abre una aplicación swing java desde el navegador de forma segura

Los mejores días del marco de java swing se han ido. Las aplicaciones de escritorio perdieron popularidad y todo está fo...

Comparte lo que sabes

Categorias

Últimas entradas

En muchas ocasiones es necesaria la personalización de componentes java para que estos se adecuen a nuestros requerimien...

En este post mostramos como personalizar el Header (encabezado) de un componente JTable en Java colocando iconos, centra...

El JTable de Java es un gran componente para mostrar datos en una tabla de una forma rápida y sencilla, sin embargo en v...

En este post veremos un ejemplo sencillo de como descargar desde Internet archivos de cualquier tipo (*.jpg, *.png, *.gi...

Herramientas

Generador de Enlaces a Whatsapp