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.