ActionBar Tabs





Descargar Código


MyActivity.java
import android.app.Activity;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentTransaction;
import android.support.v7.app.ActionBar;
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;

public class MyActivity extends ActionBarActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //setContentView(R.layout.activity_my);  //se saca porque sino se solapan

        ActionBar actionBar = getSupportActionBar();


        /**INDICAR TITULO Y SUBTITULO**/
        actionBar.setTitle("Titulo");
        actionBar.setSubtitle("Subtitulo");


        /**MODO TABS EN ACTIONBAR**/
        actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);

        /**CREAR TABS**/
        ActionBar.Tab tab = actionBar.newTab()
                .setText("Productos")
                .setTabListener(new TabsListener(
                        this, "productos", FragmentsProducto.class));
        actionBar.addTab(tab);

        tab = actionBar.newTab()
                .setText("Clientes")
                .setTabListener(new TabsListener(
                        this, "clientes", FragmentsCliente.class));
        actionBar.addTab(tab);

        tab = actionBar.newTab()
                .setText("Pedidos")
                .setTabListener(new TabsListener(
                        this, "pedidos", FragmentsPedido.class));
        actionBar.addTab(tab);


    }

    public class TabsListener  implements ActionBar.TabListener {

        private Fragment fragment;
        private final String tag;

        public TabsListener(Activity activity, String tag, Class cls) {
            this.tag = tag;
            fragment = Fragment.instantiate(activity, cls.getName());
        }

        public void onTabSelected(ActionBar.Tab tab, FragmentTransaction ft) {
            ft.replace(android.R.id.content, fragment, tag);
        }

        public void onTabUnselected(ActionBar.Tab tab, FragmentTransaction ft) {
            ft.remove(fragment);
        }

        public void onTabReselected(ActionBar.Tab tab, FragmentTransaction ft) {}
    }
}

FragmentsCliente.java
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class FragmentsCliente extends Fragment {
    View rootView;

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

FragmentsPedido.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 FragmentsPedido extends Fragment {
    View rootView;

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

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

/**
 * Created by user on 24/08/2014.
 */
public class FragmentsProducto extends Fragment {
    View rootView;

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

activity_my.xml //este no lo usamos porque se solapa con los xml de los fragments
<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"
    tools:context=".MyActivity">

    <TextView
        android:text="holaaaa"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</RelativeLayout>

fm_cliente.xml
<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:text="cliente"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</LinearLayout>

fm_pedido.xml
<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:text="pedido"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</LinearLayout>

fm_producto.xml
<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:text="pedido"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</LinearLayout>

28 comentarios:

  1. compile tu proyecto sin ningun error , pero lo ejecuto en el emulador y sale lo siguiente , ActionBar Tabs se detuvo. y no se que hacer :(.

    ResponderEliminar
    Respuestas
    1. a mi me sucede lo mismo, alguien que ayude porfaaaaa...!!!

      Eliminar
  2. Hola una pregunto en los fracment como pudo implementar un metodo, ya que al intentar recuperar datos de la vista con " findViewById " me marca un erro que puedo hacer gracias

    ResponderEliminar
    Respuestas
    1. tenes que anteponerle el "rootView" sería "rootView.findViewById ........

      Eliminar
    2. hola gracias si funciono, la otra cuestión que ahora apareció es que no reconoce mi método que pedo hacer ????

      mi codigo es este
      Double num1,num2,resul,num3,num4,resul1;
      Integer NP, NPT;

      public void SumaCompras(View miVista){
      TextView txtTotalpes, txtNpiezas, txtdedua, txtnuevadeuda;
      EditText txtCostopieza;

      txtCostopieza = (EditText)rootView.findViewById(R.id.txt_costoP1);
      txtTotalpes = (TextView) rootView.findViewById(R.id.txt_totalpieza);

      num1 = Double.parseDouble(txtCostopieza.getText().toString());
      num2 = Double.parseDouble(txtTotalpes.getText().toString());

      resul= num1 +num2;

      TextView resultado = (TextView)rootView.findViewById(R.id.txt_totalpieza);
      resultado.setText(resul.toString());

      txtCostopieza.setText("");

      txtNpiezas = (TextView) rootView.findViewById(R.id.NumeroP);
      NP= Integer.parseInt(txtNpiezas.getText().toString());
      NPT=NP+1;
      TextView rnp = (TextView)rootView.findViewById(R.id.Npiezas);
      rnp.setText(NPT.toString());

      txtdedua = (TextView) rootView.findViewById(R.id.txt_deuda1);
      txtnuevadeuda = (TextView) rootView.findViewById(R.id.txt_deudanueva);

      num3 = Double.parseDouble(txtdedua.getText().toString());
      num4 = Double.parseDouble(txtnuevadeuda.getText().toString());

      resul1= num3 +num4;

      TextView resultado1 = (TextView)rootView.findViewById(R.id.txt_deudanueva);
      resultado1.setText(resul1.toString());
      }

      Eliminar
    3. A simple vista se ve bien.
      Yo haría dos cosas
      1) cambiar
      resultado1.setText(resul1.toString())
      por
      resultado1.setText(""+resul1);
      2) utilizaría los Log.i("anom", "paso por aquí1");
      Lo haces cada dos lineas, incrementando el "paso por aqui"
      y a través del LogCat ves hasta donde llega

      Eliminar
    4. ok are eso pero a lo que me refiero que cuando intento colocar el método "SumaCompras" no lo encuentra, es decir en la interfaz no sale el nombre, y si lo pongo manual no marca ningún erro pero cuando le doy click al boto me cierra la aplicación

      Eliminar
    5. te puede llegar a faltar enlazarla desde el xml android:onClick="SumaCompras"
      sino tienes que aprender a leer el LogCat hay alguna conversión que no esta resultando.
      Decime que te sale y vemos.

      Eliminar
    6. hola este si lo pongo en el xml de este modo



      y en el logCat sale este erro :

      04-05 00:07:59.842 1508-1508/nera.cobros E/AndroidRuntime﹕ FATAL EXCEPTION: main
      java.lang.IllegalStateException: Could not find a method SumaCompras(View) in the activity class nera.cobros.MainActivityMenus for onClick handler on view class android.widget.ImageButton with id 'imageButton6'
      at android.view.View$1.onClick(View.java:3031)
      at android.view.View.performClick(View.java:3511)
      at android.view.View$PerformClick.run(View.java:14105)
      at android.os.Handler.handleCallback(Handler.java:605)
      at android.os.Handler.dispatchMessage(Handler.java:92)
      at android.os.Looper.loop(Looper.java:137)
      at android.app.ActivityThread.main(ActivityThread.java:4424)
      at java.lang.reflect.Method.invokeNative(Native Method)
      at java.lang.reflect.Method.invoke(Method.java:511)
      at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:784)
      at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:551)
      at dalvik.system.NativeStart.main(Native Method)
      Caused by: java.lang.NoSuchMethodException: SumaCompras [class android.view.View]
      at java.lang.Class.getConstructorOrMethod(Class.java:460)
      at java.lang.Class.getMethod(Class.java:915)
      at android.view.View$1.onClick(View.java:3024)
                  at android.view.View.performClick(View.java:3511)
                  at android.view.View$PerformClick.run(View.java:14105)
                  at android.os.Handler.handleCallback(Handler.java:605)
                  at android.os.Handler.dispatchMessage(Handler.java:92)
                  at android.os.Looper.loop(Looper.java:137)
                  at android.app.ActivityThread.main(ActivityThread.java:4424)
                  at java.lang.reflect.Method.invokeNative(Native Method)
                  at java.lang.reflect.Method.invoke(Method.java:511)
                  at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:784)
                  at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:551)
                  at dalvik.system.NativeStart.main(Native Method)

      Eliminar
  3. Buenisimos tutoriales, gracias por los apotes, felicitaciones, att. Josue (Guatemala)

    ResponderEliminar
  4. Manito una pregunta . Como agrego los menú para cada fragmentos osea los que borraste en main activity pero diferente para cada fragmentos . Será que antes de borrarlo los guardo en word y después los pego en los fragment

    ResponderEliminar
  5. Se compila sin errore , sin embargo ce cierra la aplicacion.

    ResponderEliminar
  6. AYUDA ME SALE SUBRAYA LA SIGUIENTE LINEA
    actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);

    TAMBIEN en la clase ActionBarActivity

    ResponderEliminar
    Respuestas
    1. subrayada por favor quien sabe como solucionarlo Gracias
      actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);

      Eliminar
  7. hola necesito saber como agregar imagen a las opciones en tabs

    ResponderEliminar
    Respuestas
    1. Hola, en vez de poner:

      tab = actionBar.newTab().setText("texto").setTabListener(this);

      Pones:

      tab = actionBar.newTab().setIcon(R.drawable.icono).setTabListener(this);

      Eliminar
  8. Hola. Excelente el código, muchas gracias.

    Abusando de tu confianza, me podrías explicar como implementar el onTabSelected.
    Veo que ahí están los métodos, pero no logro asociarlos a los tabs.

    Soy algo nuevo con android.

    Muchísimas gracias.

    ResponderEliminar
  9. hola amigo una consulta, disculpa la ignorancia, quiero aplicar este mismo metodo, tengo dos preguntas:

    1: al momento de crear los layout deben ser activity o Fragment? y porque?
    2: al momento de tener listo ya los tabs, estos funcionan igualmente deslizando con el dedo, a lo que me refiero si es que estoy en la ventana de producto, para irme a la pestaña de clientes, puedo con solo deslizar el dedo en ves de hacerle click con el dedo?

    esas serian mis dudas, espero que me las aclares, muy buenos los tutoriales.
    muchas gracias

    ResponderEliminar
  10. Muy buenas..
    Espero no sea molestia y me puedan ayudar por favor :c
    Soy nuevo en Android
    Dentro de un tab quiero poner un webview

    ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
    public class Web extends AppCompatActivity {

    private WebView mWebView;

    protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.fm_nosotros);

    // INI AGREGADO
    //web view en el cual vamos a presentar la pag web
    mWebView = (WebView) findViewById(R.id.webView);
    // Activamos Javascript
    WebSettings webSettings = mWebView.getSettings();
    webSettings.setJavaScriptEnabled(true);
    /* Url que carga la app (webview) */
    mWebView.loadUrl("http://anai.edu.ec");
    // Forzamos el webview para que abra los enlaces internos dentro de la la APP
    mWebView.setWebViewClient(new WebViewClient());
    // Forzamos el webview para que abra los enlaces externos en el navegador
    mWebView.setWebViewClient(new MyAppWebViewClient());
    // FIN AGREGADO}
    }

    // INI AGREGADO
    @Override
    // Detectar cuando se presiona el botón de retroceso
    public void onBackPressed() {
    if (mWebView.canGoBack()) {
    mWebView.goBack();
    } else {
    super.onBackPressed();
    }
    }
    // FIN AGREGADO

    }

    Todo bien con eso si ejecuto esa clase funciona pero al ejecutar la aplicacion no muestra nada en ese tab

    creo que tiene que ver algo con esto
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    rootView = inflater.inflate(R.layout.fm_nosotros, container, false);
    return rootView;
    }

    ResponderEliminar
  11. como puedo implementar un list view en en el ultimo Tab??..Ya lo intente varias veces pero no lo consigo, al agregar mas código en el main.java ya no me corre la aplicación..

    ResponderEliminar
  12. Que tal, muy buen material..

    Te queria consultar. implemente los tabs con fragments. La cuestion es que lanzo una actividad desde una de las pestañas fragments. Pero luego que realizo su tarea quiero volver a esa pestaña. Con finish no me sirve porque yo necesito que un listview se actualice cuando vuelva. y con un intent no se lanza, asumo porq no extiende de activity. Y si lanzo la main. se lanza pero desde la pestaña 1.

    Algun mecanismo para volver a la pestaña fragments y se actualice los datos en ella?

    Desde ya gracias. atte Cidius

    ResponderEliminar
  13. hola rodrigo podria contactarte urgente respondee!!!

    ResponderEliminar
  14. Hola vieras que no lo logro y estoy al borde de la desesperación hice una app con un navigator drawer que en el contenedor tiene botones y desde el navigator necesito cargar un activity que contenga tablayout la cosa es que no da error el código pero me presenta el actionbar vacio. Qué me falta de hacer o es problema de compatibilidad?

    ResponderEliminar
  15. /**INDICAR TITULO Y SUBTITULO**/
    actionBar.setTitle("Titulo");
    actionBar.setSubtitle("titulo");

    Mi consulta es como cambiar estos valores, con el nombre de mis clases, osea si entro a Pedido que me coloque "Pedido" como titulo y si entro a Productos que me muestre el titulo "Productos". Saludos

    ResponderEliminar
  16. Hola como puedo hacer que de una actividad le pase un parametro a un control de un fragment ??

    ResponderEliminar