viewpager - tabs android material design

Fragmento de pestañas dentro de Fragmento

Question

Tengo en mi Actividad Principal una barra de navegación de acción usando pestañas usando Fragmentos (con Diseño de Material), como a continuación, que funciona bien, pero ahora deseo tener navegación con pestañas dentro de mis Fragmentos ...

// Add Fragments to Tabs in Main Activity
private void setupViewPager(ViewPager viewPager) {
    Adapter adapter = new Adapter(getSupportFragmentManager());
    adapter.addFragment(new FeedsFragment(), "Latest Updates");
    adapter.addFragment(new ClubTeamsFragment(), "Club Teams");
    adapter.addFragment(new FixturesFragment(), "Fixtures");
    adapter.addFragment(new ResultsFragment(), "Results");
    adapter.addFragment(new ClubFieldsFragment(), "Club Fields");
    viewPager.setAdapter(adapter);
}

Estoy bastante seguro de que TabHost ahora está en desuso.

Deseo lograr la imagen adjunta. Las pestañas azules están en el nivel de Actividad principal y las pestañas de fecha gris están en la vista de fragmento seleccionada.

He leído algunas publicaciones sobre el uso de Tab Host o Fragment Activity, o utilizo Activity que se extiende a Fragment?

Answer 1

Vea a continuación la respuesta que obtuve con el uso de pestañas de fragmentos dentro de las pestañas de fragmentos que están en mi MainActivity

Dentro de mi fragmento usando getChildFragmentManager ()

public class FixturesTabs extends Fragment {

  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setRetainInstance(true);
  }

  @Override
  public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {

    View view = inflater.inflate(R.layout.fixtures_new_tabs,container, false);
    // Setting ViewPager for each Tabs
    ViewPager viewPager = (ViewPager) view.findViewById(R.id.viewpager);
    setupViewPager(viewPager);
    // Set Tabs inside Toolbar
    TabLayout tabs = (TabLayout) view.findViewById(R.id.fixture_tabs);
    tabs.setupWithViewPager(viewPager);


    return view;

}


// Add Fragments to Tabs
private void setupViewPager(ViewPager viewPager) {


    Adapter adapter = new Adapter(getChildFragmentManager());
    adapter.addFragment(new TodaysFixturesFragment(), "Today");
    adapter.addFragment(new WeekFixturesFragment(), "Week");
    adapter.addFragment(new MonthFixturesFragment(), "Month");
    adapter.addFragment(new AllFixturesFragment(), "Month");
    adapter.addFragment(new MyTeamsFixturesFragment(), "My Teams");
    viewPager.setAdapter(adapter);



}

static class Adapter extends FragmentPagerAdapter {
    private final List<Fragment> mFragmentList = new ArrayList<>();
    private final List<String> mFragmentTitleList = new ArrayList<>();

    public Adapter(FragmentManager manager) {
        super(manager);
    }

    @Override
    public Fragment getItem(int position) {
        return mFragmentList.get(position);
    }

    @Override
    public int getCount() {
        return mFragmentList.size();
    }

    public void addFragment(Fragment fragment, String title) {
        mFragmentList.add(fragment);
        mFragmentTitleList.add(title);
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return mFragmentTitleList.get(position);
    }
}



}

Y mi XML se llama "fixtures_new_tabs.xml" para que coincida con el diseño inflado

<?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"
xmlns:app="http://schemas.android.com/apk/res-auto">


<android.support.design.widget.CoordinatorLayout
    android:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.TabLayout
            android:id="@+id/result_tabs"
            android:background="@color/grey"
            app:tabTextColor="@color/medium_grey"
            app:tabSelectedTextColor="@color/colorPrimary"
            app:tabIndicatorColor="@color/colorPrimary"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabMode="scrollable"/>
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</android.support.design.widget.CoordinatorLayout>

</RelativeLayout>

Espero que esto ayude o señale a otros en la dirección de su solución.

Answer 2

Para hacer una respuesta más completa a la de BENN1TH, lo que hice fue arrojar un fragmento del ActivityMain con las pestañas.

    public class MainActivity extends AppCompatActivity {

    Button throwFragment;

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

        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        throwFragment = (Button) findViewById(R.id.throwFragment);

        //I add a fragment at run time
        throwFragment.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                //I get the fragments manager instance
                FragmentManager fragmentManager = getSupportFragmentManager();

                //I create a transaction
                FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();

                //I create a new fragment and add it to the layout of the activity
                FixturesTabs fixturesTabs = new FixturesTabs();
                fragmentTransaction.replace(R.id.containerTabs, fixturesTabs);

                //I confirm the change              
                fragmentTransaction.commit();
            }
        });
    }
    }

activity_main.xml Diseño que pertenece a la actividad principal, donde creé un botón para lanzar el fragmento en tiempo de ejecución.

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="org.itdevelopers.braian.tabsinsidefragment.MainActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

    </android.support.design.widget.AppBarLayout>

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:id="@+id/containerTabs"/>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_gravity="center">

        <Button
            android:id="@+id/throwFragment"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="I throw fragment with tabs" />
    </LinearLayout>
</android.support.design.widget.CoordinatorLayout>

IMPORTANTE : la actividad principal será el contexto del fragmento con las pestañas, y en el diseño de esto es necesario mencionar la importancia de la siguiente línea para seguir un estilo en el diseño.

Tiene la funcionalidad de hacer que la barra de herramientas de la actividad principal no se solape con el TabLayout del fragmento.

app:layout_behavior="@string/appbar_scrolling_view_behavior"

Lanzar un fragmento con pestañas puede ser muy útil cuando utilizas una barra de navegación inferior, porque si usamos las pestañas predeterminadas que están involucradas en una actividad, esto consumirá más recursos (mira esto en El Logcat de Android Studio con ''Sin filtros'' en milisegundos )

• Moraleja de la historia *: es preferible usar TabbedFragment.

Es mi primer comentario en la comunidad, espero poder colaborar con algo. Gracias.