Fragments en nuestro BotttomBar

Clase 36 de 96 • Curso Definitivo de Android 2016

Clase anteriorSiguiente clase

Resumen

Veamos como integrar nuestros fragments

Andres Mauricio Rubiano Del Chiaro

student•

Para evitar el <<Boilerplate>> y hacer un refactor al código de Anahí, les dejo mi solución:

Creamos un método que se encargará de realizar la gestión de colocar el fragment en el contenedor. Por parámetro, vamos a recibir un fragment; que debemos tener en cuenta de agregar el paquete de soporte de Fragment, más no, el otro paquete (android.support.v4.app.Fragment;).
También validamos que el fragment que se envía por parámetro, no sea nulo.

private void addFragment(Fragment fragment){
if (null != fragment){
getSupportFragmentManager()
.beginTransaction()
.replace(R.id.container, fragment)
.setTransition(FragmentTransaction.TRANSIT_FRAGMENT_FADE)
.addToBackStack(null)
.commit();
}
}

En cambio, dentro del switch, vamos a llamar a éste método, y pasamos la instancia del Fragment. Se hace de esta manera ya que me baso en el ejemplo base, pero al usar fragments, como buena práctica, debemos de utilizar el patrón de diseño Singleton.
(Reemplazar todo el elemento del switch)

switch (tabId) {
case R.id.home:
addFragment(new HomeFragment());
break;

                case R.id.profile:
                        addFragment(new ProfileFragment());
                    break;

                case R.id.search:
                        addFragment(new SearchFragment());
                    break;
            }

Espero que les sea de ayuda.

Ann Code

teacher•

Gracias Andrés 😄

Jesús Rosas Ramírez

student•

Muy bueno tu aporte amigo (Y)

Jose Cormane

student•

Para simplificar el código de los Fragments y no tener que repetir en cada case, usar como instancia padre Fragment, ya que HomeFragment, ProfileFragment y SearchFragment heredan de Fragment.

private Fragment fragment; //Como variable global dentro de la clase

//Esto dentro de onTabReSelected
switch (tabId) {
       case R.id.tab_home:
              fragment = new HomeFragment();
              break;
       case R.id.tab_search:
              fragment = new SearchFragment();
              break;
       case R.id.tab_me:
              fragment = new ProfileFragment();
              break;
}
getSupportFragmentManager().beginTransaction()
.replace(R.id.container, fragment)
.setTransition(FragmentTransaction.TRANSIT_FRAGMENT_FADE)
.addToBackStack(null).commit();

Ann Code

teacher•

Muy buen aporte!
Excelente código José 😄

Henry Alejandro Palacios Lemus

student•

Muy util tu aporte.

Fernando Daniel Jaime

student•

Para los que usan el BottomNavigationView dejo el ContainerActivity.java

package com.freetime_software.platzigram.view;

import android.support.annotation.NonNull;
import android.support.design.widget.BottomNavigationView;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentTransaction;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.MenuItem;


import com.freetime_software.platzigram.R;
import com.freetime_software.platzigram.view.fragment.*;

public class ContainerActivity extends AppCompatActivity {

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

        final HomeFragment homeFragment = new HomeFragment();
        final ProfileFragment profileFragment  = new ProfileFragment();
        final SearchFragment searchFragment = new SearchFragment();

        //set HomeFragment as Default on first load (Login)
        if (savedInstanceState == null) {
            getSupportFragmentManager()
                    .beginTransaction()
                    .replace(R.id.container, homeFragment)
                    .commit();
        }

        BottomNavigationView bottombar =
                findViewById(R.id.bottomNavigationView);
        bottombar.setSelectedItemId(R.id.home);

        bottombar.setOnNavigationItemSelectedListener(
                new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {

                switch (item.getItemId()){
                    case R.id.home:
                        addFragment(homeFragment);
                        break;
                    case R.id.profile:
                        addFragment(profileFragment);
                        break;
                    case R.id.search:
                        addFragment(searchFragment);
                        break;
                }
                return true;
            }

            //Set fragment
            private void addFragment(Fragment fragment) {
                if (null != fragment) {
                    getSupportFragmentManager()
                            .beginTransaction()
                            .replace(R.id.container, fragment)
                            .setTransition(FragmentTransaction.TRANSIT_FRAGMENT_FADE)
                            .addToBackStack(null)
                            .commit();
                }
            }
        });

    }
}

Gustavo Jiménez Liévano

student•

Muchas gracias. =)

Camilo Acevedo Escalante

student•

Hola

Estuve probando tu codigo, pero en la parte del switch con el metodo addFragment el parametro que se pasa arroja un error

OSCAR ANDRES LOAIZA PABON

student•

Al probar la aplicación con el botón de retroceso se devuelve por todos los tabs en los que estuvimos, quien este interesado en que no suceda, puede usar el metodo disallowAddToBackStack() antes de realizar el commit()

José Tuzinkievicz

student•

No te puedo explicar lo que me ayudaste con ese método, encima ya lo había probado pero como no se me ocurrió comentar los saqué los “.addToBackStack(null)” me daba error jajjaa
Ademas de navegar hacia atrás por los fragments visitados, al llegar al primero me dejaba la pantalla en blanco, naturalmente, es el ContainerActivity antes de cargar el fragmento.
Muchas gracias!

Carlos Jesús Fernández Salazar

student•

Si quieres hacer que el botón back te mande a fragment home, puedes hacer lo siguiente:

Declara la siguiente variable:

private boolean viewIsAtHome;

Luego, antes del break; en cada case deberías agregar lo siguiente :

viewIsAtHome = false;

PERO en el case del home, esta variable será TRUE.
Por último, escribe un nuevo método onBackPressed fuera del onCreate():

    @Override
    public void onBackPressed() {
        if (!viewIsAtHome) { //Si la vista actual no es el fragment Home
            BottomNavigationView bottomNavigationView = (BottomNavigationView) findViewById(R.id.bottombar);
            bottomNavigationView.setSelectedItemId(R.id.home); //Selecciona el fragment Home
        } else {
            moveTaskToBack(true);  //Si presionas Back cuando ya muestras el fragment Home, sale de la app
        }
    }

JHON JAIRO ZAPATA GONZALEZ

student•

El curso se vuelve imposible de seguir debido a que ya se encuentra desactualizado y por otro lado posee errores de ediciòn, porque algunas pantallas mostradas en los videos no coinciden con lo desarrollado.
¿Serà posible que lo actualicen?

Julio Camacho

student•

lo noté amigo, pero los que nos ayudan mucho son los que estamos dentro de la comunidad android, es de apoyarnos con lo que suben

Alfonso Navarro

company_admin•

Caballero tengo una semana haciendo el curso y he podido seguirlo sin problema, q hay q apoyarse un poco con la documentación de Android, si, pero igual el curso sirve.

Aunq si lo actualizan mucho mejor jajajaja, se ahora uno tiempo investigando., ya q el tiempo es oro.

Pero reitero igual sirve.

Airam De La Paz Peña

student•

case R.id.home:
case R.id.profile:
case R.id.search:
Buenas el profile y el search me da error, y las opciones que me da para corregir dicho error es:
create in value resource profile
create field profile in id in R
Rename reference

alguna idea?

Francisco Lopez

student•

Intenta haciendo un Clean Project

Jhonn Sebastian Quiroz Pirazan

student•

a mi me persiste el error y ya hice Clean Project. Me pasa exactamente lo que dice kobinski. Alguien me puede ayudar? por favor

Jorge Rodríguez Castillo

student•

Me percaté que en el momento de la creación del BottomBar. Material design tiene unas métricas para el tamaño que es de 56dp, pero la profesora puso otra medida y no está usando las métricas que indica Material Design. :/

José Guillermo

student•

Lo que Material Design te ofrece son patrones de diseño como referencia, esto no significa que tengas que cumplir las metricas estrictamente, como Anahi decia en el video donde escogio los colores de la aplicacion (colorPrimary, colorPrimaryDark, etc), utilizo la paleta de colores como sugerencia, pero si tu querias irte uno o dos tonos mas arriba, no habia problema, en teoria hecha a volar tu imaginacion, el pensamiento divergente es lo que hace que la tecnologia sea hoy tecnologia.

Juan Luis Sánchez Cardoza

student•

Chicos, les dejo mi ejemplo usando **BottomNavigationView ** que viene siendo el widget oficial de Android. Todo lo demás funciona tal y como lo muestra la profesora.

Descargar

José Tuzinkievicz

student•

Gracias! El bottomBar no me simpatiza del todo.

Jorge de Jesús Espino

student•

Hola, no me muestra nada en el container activity

package com.descubramos.platzigram.View;

import android.support.annotation.NonNull;
import android.support.design.widget.BottomNavigationView;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentTransaction;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.MenuItem;

import com.descubramos.platzigram.R;
import com.descubramos.platzigram.View.Fragments.HoneFragment;
import com.descubramos.platzigram.View.Fragments.ProfileFragment;
import com.descubramos.platzigram.View.Fragments.Search_Fragment;

public class CintainerActivity extends AppCompatActivity {

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

       BottomNavigationView botombar = (BottomNavigationView) findViewById(R.id.bottom_bar);

      botombar.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
          @Override
          public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
              int itemId = menuItem.getItemId();
              switch (itemId) {
                  case R.id.inicio_btn_bb:
                      addFragment(new HoneFragment());
                      break;
                  case R.id.profile_btn_bb:
                      addFragment(new ProfileFragment());
                      break;

                  case R.id.search_btn_bb:
                      addFragment(new Search_Fragment());
                      break;
              }
              return true;
          }
      });

      botombar.setSelectedItemId(R.id.inicio_btn_bb);

    }

    private  void  addFragment(Fragment fragment){
        getSupportFragmentManager()
                .beginTransaction()
                .replace(R.id.container, fragment)
                .setTransition(FragmentTransaction.TRANSIT_FRAGMENT_FADE)
                .addToBackStack(null)
                .commit();
    }
}

Nadir Antonio Soza Solis

student•

Te comparto mi clase, a mi me funciono perfecto

package com.nadirss14.msn.views;

import android.support.annotation.NonNull;
import android.support.design.widget.BottomNavigationView;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentTransaction;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.MenuItem;
import android.widget.Switch;

import com.nadirss14.msn.R;
import com.nadirss14.msn.views.fragments.HomeFragment;
import com.nadirss14.msn.views.fragments.ProfileFragment;
import com.nadirss14.msn.views.fragments.SearchCardFragment;

public class ContainerActivity extends AppCompatActivity {

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

        callBottomBar();        
    }

    private  void callBottomBar(){
        BottomNavigationView botonBar= findViewById(R.id.bottom_navigation_view);

        botonBar.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem _menuItem) {

                int nameMenu=_menuItem.getItemId();

                switch(nameMenu){
                    case R.id.option_home:
                        switchFragment(new HomeFragment());
                        break;
                    case R.id.option_profile:
                        switchFragment(new ProfileFragment());
                        break;
                    case  R.id.option_search:
                        switchFragment(new SearchCardFragment());
                        break;
                }

                return true;
            }
        });

        botonBar.setSelectedItemId(R.id.option_home);
    }

    private void switchFragment(Fragment _fragment){

        getSupportFragmentManager()
                .beginTransaction()
                .replace(R.id.my_container,_fragment)
                .setTransition(FragmentTransaction.TRANSIT_FRAGMENT_FADE)
                .addToBackStack(null)
                .commit();
    }
}

Carlos Jesús Fernández Salazar

student•

Me costó un poco hacer que, al día de hoy, los fragments se mostraran correctamente mediante bottomNavigationView. En este tutorial dejé el código de mi ContainerActivity y explico paso a paso lo que hice para que estuvera funcional y para controlar el comportamiento del botón Back.

Espero pueda ser de ayuda para tí.

Abner Batz

student•

Fredy Vega sugiere utilizar siempre if y no switch ,.,:(

Uriel Ramírez

student•

Depende los casos. Es más, sería interesante que cambiaras la lógica a If y nos cuentas si hay gran difenrecia. :D

Abner Batz

student•

Quedará entonces de esta manera;

if (tabId == R.id.home) {
// The tab with id R.id.tab_favorites was selected,
// change your content accordingly.
HomeFragment homeFragment = new HomeFragment();
getSupportFragmentManager().beginTransaction().replace(R.id.container, homeFragment)
.setTransition(android.support.v4.app.FragmentTransaction.TRANSIT_FRAGMENT_FADE)
.addToBackStack(null).commit();
}
else if (tabId == R.id.search){
ProfileFragment profileFragment = new ProfileFragment();
getSupportFragmentManager().beginTransaction().replace(R.id.container, profileFragment)
.setTransition(android.support.v4.app.FragmentTransaction.TRANSIT_FRAGMENT_FADE)
.addToBackStack(null).commit();
}
else if (tabId == R.id.iam){
SearchFragment searchFragment = new SearchFragment();
getSupportFragmentManager().beginTransaction().replace(R.id.container, searchFragment)
.setTransition(android.support.v4.app.FragmentTransaction.TRANSIT_FRAGMENT_FADE)
.addToBackStack(null).commit();
}

Nelson Alfredo Briceño Bañados

student•

Cuando se tiene un problema y se busca como solucionarlo y comprender el fondo del problema, se aprende tan profundo que difícil se olvida, no dejen de perseverar

Alfonso Navarro

company_admin•

He llegado a la misma conclusion amigo, los errores te llevan a la investigacion y esa investigacion te ayuda a comprender a mejores niveles la situacion q estas enfrentando. Aunq no crean los erroes te ayudar aprender full.

Juan Guillermo Perez Cardozo

student•

Amigos aca les dejo un par de videos que les puede ayudar pues android studio ahora trae nativo el View BottomNavigationView. https://www.youtube.com/watch?v=tPV8xA7m-iw https://www.youtube.com/watch?v=jpaHMcQDaDg

Juan Jose Mayorga

student•

Ayuda!

No puedo continuar porque no me reconoce los ID de profile y search, solo el de home, ya intenté el clean proyect y el rebuild y siempre sale el mismo error:

Alfonso Navarro

company_admin•

Amigo la imagen no agranda, por lo q se hace dificil ver el codigo, de igual manera verificar q los items tenga id.

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/searchItem"
        android:title="@string/buscar"
        android:icon="@drawable/ic_icons8_search_48" />
    <item
       *android:id="@+id/homeItem"
        android:title="@string/home"
        android:icon="@drawable/ic_icons8_home_page_48" />
    <item
        android:id="@+id/profileItem"
        android:title="@string/Yo"
        android:icon="@drawable/ic_icons8_user_48" />
</menu>```


Quedo atento.

Juan Jose Mayorga

student•

Sí, todos los ítems tienen su ID, pero sólo reconoce el de home, los demás los marca en rojo, como si no existieran

Angel Baron

student•

Anahí muchas gracias por contestar.
Los logos están de 24*24, pero lo solucioné de esta forma:
Hice un estilo para el texto con: app:bb_titleTextAppearance="@style/tamañotitle

Muchísimas gracias

Ann Code

teacher•

Perfecto! 😃

Jorge Rodríguez Castillo

student•

Dejo el enlace de Material Design

https://material.google.com/components/bottom-navigation.html#bottom-navigation-specs

Henry Alejandro Palacios Lemus

student•

No tienes que seguir exactamente las metricas. Solo son referencias, pero no una regla que debes seguir. Ya queda a tu imaginacion, el jugar con los tamanos y colores en Material Design.

Platzi Team

student•

Tengo el siguiente error:

Caused by: android.view.InflateException: Binary XML file line #16: Binary XML file line #2: Error inflating class com.roughike.bottombar.BottomBar Caused by: android.view.InflateException: Binary XML file line #2: Error inflating class com.roughike.bottombar.BottomBar Caused by: java.lang.reflect.InvocationTargetException Caused by: java.lang.ArithmeticException: divide by zero

Esto en el

<?xml version="1.0" encoding="utf-8"?>
<com.roughike.bottombar.BottomBar xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/bottombar"
    android:layout_width="match_parent"
    android:layout_height="70dp"
    android:layout_alignParentBottom="true"
    android:layout_gravity="bottom"
    app:bb_activeTabColor="@android:color/white"
    app:bb_inActiveTabColor="@android:color/white"
    app:bb_tabXmlResource="@xml/bottombartaps">

</com.roughike.bottombar.BottomBar>

Ya hice Build and clean project, pero no funciona. Qué puedo hacer?

Jair Israel Avilés Eusebio

student•

Te sugiero verificar que estes ingresando bien las dependencias en el gradle y sincronizarlo correctamente. Podrias eliminar caché del Android Studio con la siguiente opción File > Invalidate Caches / Restart.

Este último proceso demora un poco ya que lo que hace es eliminar todo el cache que pueda tener el IDE para iniciar de nuevamente toda su configuración.

Alexander susa Susa

student•

al momento de compilar el emulador me saca de la aplcacion

Jair Israel Avilés Eusebio

student•

En el android monitor podrias revisar la causa de la excepción ya que todo el log se muestra en esta sección.

Jaime Alexander Uribe Uribe

student•

cuando trato de ejecutar el botton home, me abre la ventana, pero no me carga nada… la imagen en blanco. me adelante dos clases más … pero continuo con el problema.

@anncode me podrías colaborar?
https://github.com/marco8785/intergram

Ludian Quiñones Solano

student•

profesora los iconos del tab los presiono y no me muestra nada no tengo error solo que no muestra nada
ue podria revisar?

Ann Code

teacher•

Podría ser que no estás llamando bien a tus fragments pon el código que estás usando en Container Activity

Ludian Quiñones Solano

student•

este es profe

<code>
package com.example.ludiantec.platzigram.view;

import android.app.FragmentTransaction;
import android.content.Intent;
import android.support.annotation.IdRes;
import android.support.v4.app.Fragment;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;

import com.example.ludiantec.platzigram.R;
import com.example.ludiantec.platzigram.view.fragments.HomeFragment;
import com.example.ludiantec.platzigram.view.fragments.ProfileFragment;
import com.example.ludiantec.platzigram.view.fragments.SearchFragment;
import com.roughike.bottombar.BottomBar;
import com.roughike.bottombar.OnTabReselectListener;
import com.roughike.bottombar.OnTabSelectListener;

public class ContainerActivity extends AppCompatActivity {
private Fragment fragment;
    @Override
    protected void onCreate(final Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_container);
        BottomBar bottomBar = (BottomBar) findViewById(R.id.bottombar);
        bottomBar.setDefaultTab(R.id.home);
        bottomBar.setOnTabReselectListener(new OnTabReselectListener() {
            @Override
            public void onTabReSelected(@IdRes int tabId) {
                switch (tabId){
                    case R.id.home:
                        fragment=new HomeFragment();
                        break;
                    case R.id.search:
                        fragment=new SearchFragment();
                        break;
                    case R.id.profile:
                        fragment=new ProfileFragment();
                        break;
                }
                getSupportFragmentManager().beginTransaction()
                .replace(R.id.container, fragment)
                .setTransition(FragmentTransaction.TRANSIT_FRAGMENT_FADE)
                .addToBackStack(null).commit()
                ;

            }
        });
    }

}