Sigueme en Facebook Sigueme en Twitter Sigueme en Instagram Sigueme en Youtube
JC Mouse Bolivia
Index / Android / Crea un Tabbed Activity desde cero

Crea un Tabbed Activity desde cero

Autor jc mouse viernes, mayo 19, 2017

Un Tabbed Activity te permite cambiar la vista entre  fragmentos desplazando el dedo  de izquierda a derecha o de derecha a izquierda, Android Studio cuenta con una plantilla para crear un proyecto base, sin embargo, si estas aprendiendo android es mejor conocer como se crea este Tabbed Activty desde cero.

Paso 1. EL Proyecto

Creamos un nuevo proyecto en Android Studio que se llamara “Tabbed Demo“, a continuación seleccionamos el SDK “Minimum SDK: API 16 Android 4.1” para tener mayor compatibilidad con dispositivos.

tab android

Presionamos siguiente y elegimos un Empty Activity, dejamos como esta el nombre de “MainActivity” y su layout “activity_main” que sale por defecto, presionamos finish para crear el proyecto.

example tabbed

Paso 2. Los Fragments

Un Tabbed Activity puede tener 2, 3, 4 o más fragments, dependiendo de las necesidades que se tenga. Android Studio tambien te permite crear Fragments (clase y su layout) automáticamente, pero como dijimos en un principio, si estamos aprendiendo, es mejor conocer como se crean las cosas desde codigo. A continuación los pasos pasos para crear Fragments.

Clic derecho sobre el proyecto “org.example.tabbeddemo”, new -> java class y agregamos  una nueva clase con el nombre de “JobsFragment“, a continuación clic derecho sobre la carpeta layout -> new -> Layout Resource File -> y colocamos en file name:fragment_jobs“, presionamos OK para crear el archivo.

Reemplazamos el código del layout con:

<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="#d14115"
    tools:context="org.example.tabbeddemo.JobsFragment">

    <TextView
        android:textSize="32dp"
        android:textColor="#FFF"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="\u0022¿Por qué enrolarse en la marina si puedes ser un pirata?\u0022 - Steve Jobs" />

</FrameLayout>

donde en context, indicamos la ruta del archivo java al que corresponde este Fragment, en este caso la ruta es: org.example.tabbeddemo.JobsFragment. También le asignamos un color de fondo (android:background) rojo en este caso, y en  android:text colocamos una frase de Steve Jobs.

En vista diseño podremos ver algo como esto:

jobs frase

Ahora en la clase JobsFragment.java, reemplazamos el código por el código mínimo necesario para un fragment:

package org.example.tabbeddemo;

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

public class JobsFragment extends Fragment {

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

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

}

donde en inflate indicamos el layout que corresponde a la clase fragment, el layout que creamos más arriba “R.layout.fragment_jobs“.

Si quieres saber más sobre los Fragments, te invito a visitar “Introducción a Fragment“.

A continuación, agregaremos 2 clases más con sus respectivos layouts, estos son:

  • WozniakFragment.java y su layout fragment_wozniak
  • GatesFragment.java y su layout fragment_gates

El texto para Wozniak:

Mi padre me explicó que la educación y el conocimiento es lo que le permitirá a los niños mejorar el mundo – Steve Wozniak

El texto para Bill

Al mundo no le importará tu autoestima. El mundo esperará que logres algo, independientemente de que te sientas bien o no contigo mismo –  Bill Gates

Y realizaremos los mismos pasos que con JobsFragment.javafragment_jobs, al final debes tener algo como esto:

gates_wozniak

Paso 3.  activity_main

Abre el archivo activity_main y reemplaza el código por

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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="0dp"
    tools:context="org.example.tabbeddemo.MainActivity">

    <android.support.v4.view.ViewPager
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</RelativeLayout>

A nuestro layout le agregamos un ViewPager en donde se cargaran los fragments, en vista diseño no veras ningún cambio. Continuemos.

Paso 4. MainActivity

Esta es la clase principal donde implementaremos los fragments y el ViewPager.

package org.example.tabbeddemo;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

    /**
     * para gestionar cada uno de los fragmentos
     * */
    private SectionsPagerAdapter mSectionsPagerAdapter;
    /**
     * Para alojar el contenido de cada fragment
     * */
    private ViewPager mViewPager;


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

        //inicializamos
        mSectionsPagerAdapter = new SectionsPagerAdapter(getSupportFragmentManager());
        mViewPager = (ViewPager) findViewById(R.id.container);
        mViewPager.setAdapter(mSectionsPagerAdapter);
    }

    /**
     * Clase que devolvera un fragment segun la seccion donde se encuentre
     * */
    public class SectionsPagerAdapter extends FragmentPagerAdapter {
        public SectionsPagerAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int position) {
            switch(position){
                case 0: return JobsFragment.newInstance();
                case 1: return WozniakFragment.newInstance();
                case 2: return GatesFragment.newInstance();
            }
            return null;
        }

        @Override
        public int getCount() {
            return 3;//tenemos tres fragment
        }

    }

}

Ya solo nos queda ejecutar el proyecto y probar

tabbed activity

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

Introducción a los Gráficos en Pygame

Introducción a los Gráficos en Pygame

Antes de programar un videojuego, es necesario saber: Cómo representar figuras en la pantalla Cómo se manejan las coorde...

Gráficos iReport con parámetros tipo Date

Gráficos iReport con parámetros tipo Date

Matando dos pájaros de un solo tiro :), doy respuesta a un par de preguntas que están relacionadas, en este post veremos...

Bloquear pantalla cliente

Bloquear pantalla cliente

En este tutorial crearemos una aplicación que bloqueara toda la pantalla de la PC y no nos dejara realizar ninguna tarea...

Encriptación simétrica en java

Encriptación simétrica en java

En este post veremos un ejemplo sencillo de encriptación/desencriptación simétrica que el API de Java nos permite realiz...

Formulario de login personalizado

Formulario de login personalizado

Hola, en este oportunidad dejo a disposición un formulario de logueo que se me ocurrió de repente creo inspirado en las...

Ejercicios sencillos en C Sharp

Ejercicios sencillos en C Sharp

Lenguaje: C# Nivel: Básico 1) Se desea desarrollar un programa que permita introducir una oración por teclado y contar l...

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*

Comparte lo que sabes

Categorias

Últimas entradas

Una Prueba Unitaria, es una forma de comprobar que nuestro código, hace lo que se supone debe hacer; es decir, se asegur...

La prueba del camino básico, es una prueba de “caja blanca” que consiste en verificar el código de nuestros...

Si quieres cambiar el nombre de tus atributos sin tener que reescribir código java por X o Y razón, GSON te permite reno...

Un JList nos permite almacenar objetos en una lista y mostrarlos gráficamente en una serie vertical en el cual el usuari...

Android Bolivia

Bandera en Alto