Android does not show tabs

Android does not show tabs - android

I am in a process of changing home activity to include tabs. I use https://github.com/saulmm/CoordinatorExamples as a source. For unknown reason I do not see the tabs in my AppBarLayout. I can see the Fragment content but tab headers are not displayed at all. I use appcompat-v7:23.3.0.
Shortened layout:
<android.support.design.widget.CoordinatorLayout
<android.support.design.widget.AppBarLayout
<android.support.design.widget.CollapsingToolbarLayout
<ImageView ..
<android.support.v7.widget.Toolbar ..
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:id="#+id/main.tabs"
android:layout_width="fill_parent"
android:layout_height="?attr/actionBarSize"
app:tabSelectedTextColor="?android:attr/textColorPrimaryInverse"
app:tabIndicatorColor="?android:attr/textColorPrimaryInverse"
app:tabIndicatorHeight="4dp" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/dashboard.viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
/>
Activity:
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_dashboard);
CollapsingToolbarLayout collapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.main_collapsing);
collapsingToolbarLayout.setTitle(getString(R.string.app_name));
ViewPager viewPager = (ViewPager) findViewById(R.id.dashboard_viewpager);
viewPager.setAdapter(new TabsAdapter(getSupportFragmentManager()));
TabLayout tabLayout = (TabLayout) findViewById(R.id.main_tabs);
tabLayout.setupWithViewPager(viewPager);
}
class TabsAdapter extends FragmentPagerAdapter {
public TabsAdapter(FragmentManager fm) {
super(fm);
}
public int getCount() {
return 1;
}
public Fragment getItem(int i) {
switch(i) {
case 0: return DashboardHomeFragment.newInstance();
}
return null;
}
public CharSequence getPageTitle(int position) {
return "Home";
}
}
Fragment:
public class DashboardHomeFragment extends Fragment implements View.OnClickListener {
public View onCreateView(LayoutInflater inflater, #Nullable ViewGroup container, #Nullable Bundle savedInstanceState) {
return inflater.inflate(R.layout.fragment_dashboard_home, container, false);
}
public void onActivityCreated(#Nullable Bundle state) {
log.debug("onActivityCreated()");
super.onActivityCreated(state);
}
and its layout:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Hry"
android:textAppearance="#style/TextAppearance.Header"
android:paddingRight="8dp"
android:paddingLeft="8dp"
style="#style/TextComponent.ItemRow"/>
<TextView
android:id="#+id/main.button.puzzle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Najdi výsledek"
android:textAppearance="#style/TextAppearance.Item"
android:drawableRight="#drawable/ic_arrow_forward_24dp"
style="#style/TextComponent.ItemRow.Selectable"/>
There is a second problem but I will post it in separate question linked to this question.
Update:
It was caused by CoordinatorLayout misconfiguration. I changed:
android:layout_height="150dp"
to
android:layout_height="wrap_content"
and the tabs appeared suddenly.

According to the guidelines of Android and the material design, it is correct to use the coordinatorLayout.
The appBarLayout should be max 256dp and inside we find the toolbar and the views that you need.
If you want the views collapsing insert into collapsingToolbarLayout.
If you want the toolbar expandable will be inserted inside the collapsingToolbarLayout.
The tabLayout often is insert into appBarLayout but out collapsingToolbarLayout.
The sum of views height is equals at appBarLayout height (or use wrap_content for appBarLayout).
This is an example of expandable toolbar with tabLayout, in this case appBarLayout has a fixed height but you can use wrap_content.
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="256dp"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="202dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="#color/your_color"
android:fitsSystemWindows="true">
<--Your views-->
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:gravity="top"
app:titleMarginTop="13dp"
android:minHeight="?attr/actionBarSize"
app:popupTheme="#style/AppTheme.PopupOverlay"
app:layout_collapseMode="pin"
/>
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"
android:background="#color/your_color"
app:tabSelectedTextColor="#color/your_color"
app:tabTextColor="#color/your_color"
app:tabIndicatorColor="#color/your_color"
app:tabMode="fixed"
app:tabGravity="fill"
/>
</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>

Related

CoordinatorLayout - match_parent doesn't work

Little, but annoying problem:
I've made a tabbed Activity, where the tabs contain a ListView. However, if I set the ViewPager's dimensions to match_parent, everything seems to be fine, BUT, at the bottom, the ViewPager's egde goes out of the screen.
Like this: link
Result: link
Layout:
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="de.gymoth.goapp.vertretungsplan.VertretungsplanActivityNew">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="#dimen/appbar_padding_top"
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"
app:layout_scrollFlags="scroll|enterAlways">
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
Java:
public class VertretungsplanActivityNew extends AppCompatActivity {
private VertretungsplanFragment firstFragment;
private VertretungsplanFragment secondFragment;
private TabLayout tabLayout;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_vertretungsplan);
firstFragment = VertretungsplanFragment.newInstance(0);
secondFragment = VertretungsplanFragment.newInstance(1);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
SectionsPagerAdapter sectionsPagerAdapter = new SectionsPagerAdapter(getSupportFragmentManager());
ViewPager viewPager = (ViewPager) findViewById(R.id.container);
viewPager.setAdapter(sectionsPagerAdapter);
tabLayout = (TabLayout) findViewById(R.id.tabs);
tabLayout.setupWithViewPager(viewPager);
}
public class SectionsPagerAdapter extends FragmentPagerAdapter {
public SectionsPagerAdapter(FragmentManager fm) {
super(fm);
}
#Override
public Fragment getItem(int position) {
switch(position) {
case 0:
return firstFragment;
case 1:
return secondFragment;
default:
return null;
}
}
#Override
public int getCount() {
return 2;
}
#Override
public CharSequence getPageTitle(int position) {
return "";
}
}
public void setTabTitle(int index, CharSequence title) {
tabLayout.getTabAt(index).setText(title);
}
}
Does anyone have an explanation for this? Any help is appreciated.

Replace CoordinatorLayout with LinearLayout, then it will work fine. I added sample code bellow.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
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:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay">
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</LinearLayout>

Roshan's answer is good unless you will need the functionality of CoordinatorLayout.
In that case you can do a simple workaround:
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="48dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />

How can i implement Collapsing layout with tabs without a list view?

i am working on a android project where i have to implement collapsing toolbar with tabs . Tabs should contain a normal Relative layout which has 4 textview.
I am successfully able to implement the collapsing toolbar but the problem is when ever i try to scroll upwards holding the tabs i have implemented collapse toolbar is not working. On the same tabs if i use a list view or Grid layout its working fine when i scroll. If i try to use Normal layout's such as Linear or Relative layout i am not able to scroll. is there any way i can fix this without list or grid layout?
below is my code for xml:
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
style="#style/MyStyle"
android:layout_width="match_parent"
app:tabIndicatorColor="#F21757"
app:tabSelectedTextColor="#F21757"
android:layout_height="?actionBarSize"
app:tabTextColor="#android:color/white"
app:layout_anchor="#+id/MyAppbar"
app:layout_anchorGravity="bottom"
android:layout_gravity="bottom"
app:tabGravity="fill"
app:tabMode="scrollable"
android:background="#171C20" />
<android.support.design.widget.AppBarLayout
android:id="#+id/MyAppbar"
android:layout_width="match_parent"
android:layout_height="256dp"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
>
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapse_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="#000000"
android:fitsSystemWindows="true">
<ImageView
android:id="#+id/bgheader"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="#drawable/load"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax"
/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
app:layout_collapseMode="pin"
/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewPager"
android:paddingBottom="20dp"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="?attr/actionBarSize"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>

Try this
Step 1. main_activity.xml
<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:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.ncrypted.demoapplications.MainActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsingToolBar_hotel_details"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/img_hotel_details"
android:layout_width="match_parent"
android:layout_height="300dp"
android:contentDescription="#string/strong_image_of_andorid"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:src="#mipmap/ic_launcher"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolBar_hotel_detail"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Light"
app:layout_scrollFlags="scroll|enterAlways">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_collapseMode="pin"
app:tabGravity="fill"
app:tabMode="fixed" />
</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.v4.view.ViewPager>
Step:2 Create fragments activity
- FragmentActivity1
fragment1.xml
<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"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context="com.ncrypted.demoapplications.FragmentActivity1">
<!-- TODO: Update blank fragment layout -->
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="#string/hello_blank_fragment1" />
FragmentActivity.java
public class FragmentActivity1 extends Fragment {
public FragmentActivity1()
{
// Required empty public constructor
}
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState)
{
// Inflate the layout for this fragment
return inflater.inflate(R.layout.fragment_fragment_activity1, container, false);
}
}
Step:3 take two other Fragment 2,3 and write code as above
Step:4 MainActivity.java
public class MainActivity extends AppCompatActivity {
private ViewPager pager;
private TabLayout tabLayout;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolBar_hotel_detail);
setSupportActionBar(toolbar);
ViewCompat.setTransitionName(findViewById(R.id.app_bar_layout), "Extra Image");
CollapsingToolbarLayout collapsingToolbarLayout = (CollapsingToolbarLayout)
findViewById(R.id.collapsingToolBar_hotel_details); collapsingToolbarLayout.setContentScrimColor(ContextCompat.getColor(getApplicationContext(), R.color.colorPrimary));
collapsingToolbarLayout.setTitle("Collaps");
pager = (ViewPager) findViewById(R.id.viewPager);
ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
adapter.addFragment(new FragmentActivity1());
adapter.addFragment(new FragmentActivity2());
adapter.addFragment(new FragmentActivity3());
pager.setAdapter(adapter);
tabLayout = (TabLayout) findViewById(R.id.tabs);
tabLayout.setupWithViewPager(pager);
tabLayout.getTabAt(0).setText("Tab1");
tabLayout.getTabAt(1).setText("Tab2");
tabLayout.getTabAt(2).setText("Tab3");
}
class ViewPagerAdapter extends FragmentPagerAdapter {
private final List<Fragment> mFragmentList = new ArrayList<>();
public ViewPagerAdapter(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) {
mFragmentList.add(fragment);
}
}
}

how to gone toolbar menu when collapsed appBarLayout in android

I want gone toolbar Menu when collapsed appBarlayout, but I don't know how can it.
My code is here:
public class MainFragment extends BaseFragment implements Toolbar.OnMenuItemClickListener ...
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_main, container, false);
...
}
#Override
public int getMenu() {
return R.menu.search;
}
XML codes :
<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="com.sepandar.xengine.fragment.MainFragment">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsingToolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/transparent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimaryDark"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<com.sepandar.xengine.views.XTabLayout
android:id="#+id/xTab"
android:layout_width="match_parent"
android:layout_height="200dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
app:tabMode="scrollable"/>
<com.api.common.widget.MyToolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#android:color/transparent"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/ToolBarStyle"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/xTab"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
<com.nt.googleplaysearch.views.SearchView
android:id="#+id/search"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="invisible"
app:layout_collapseMode="pin"/>
</android.support.design.widget.CoordinatorLayout>
I want when Collapsed appBarLayout, gone public int getMenu(), and when expand show this public int getMenu().
How can I it?

Use AppBarLayout.OnOffsetChangedListener to get appbar status {expand/collapse},
Then hide appbar menu on offset value change.

use this app:layout_scrollFlags="scroll|enterAlways" insted of app:layout_scrollFlags="scroll|exitUntilCollapsed" in MyToolbar it was work with RecyclerView or NestedScrollView as second element in CoordinatorLayout
wrap your ViewPager in NestedScrollView

Problems with the scrolling in a expandable list view inside a viewpager - Android

I have an aplication with a toolbar and an tab layout in appcompat v7. I navegate across the tabs with a View Pager, but the problem is where put an Expandable List View inside, doesn't scroll: this is my Java code from the principal activity
The minimal API is 15: Android Ice Cream Sandwicth 4.0.4
public class Principal extends AppCompatActivity{
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_principal);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
final TabLayout Tabulacion = (TabLayout) findViewById(R.id.Tabulacion);
final ViewPager viewPager = (ViewPager) findViewById(R.id.Pager);
final PagerAdapter adapter = new PagerAdapter(getSupportFragmentManager(), Tabulacion.getTabCount());
viewPager.setAdapter(adapter);
viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(Tabulacion));
Tabulacion.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
#Override
public void onTabSelected(TabLayout.Tab tab) {
viewPager.setCurrentItem(tab.getPosition());
}
#Override
public void onTabUnselected(TabLayout.Tab tab) {
}
#Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
}
the Java code from the PagerAdapter
public class PagerAdapter extends FragmentStatePagerAdapter {
int intNumTabs;
public PagerAdapter(FragmentManager FM, int NumTabs) {
super(FM);
this.intNumTabs = NumTabs;
}
#Override
public Fragment getItem(int position) {
switch (position) {
case 0:
TabHome Tab1 = new TabHome();
return Tab1;
case 1:
TabLectura Tab2 = new TabLectura();
return Tab2;
default:
return null;
}
}
#Override
public int getCount() {
return intNumTabs;
}
}
the XML code from the principal activity
<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=".Principal">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay"
android:id="#+id/textView">
<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.TabLayout
android:id="#+id/Tabulacion"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.TabItem
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Inicio">
</android.support.design.widget.TabItem>
<android.support.design.widget.TabItem
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Lectura">
</android.support.design.widget.TabItem>
</android.support.design.widget.TabLayout>
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/Pager"
android:isScrollContainer="true"
android:nestedScrollingEnabled="true"
android:background="#color/backgroundColor" />
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
the XML code from the tab 2 fragment:
<ExpandableListView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/ListView">
</ExpandableListView>
The content of the Expandable List View is dynamic generated

I solve it! I extract the view pager from the app coordinator layout in the XML, there is the final code
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
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:orientation="vertical"
tools:context=".Principal">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay"
android:id="#+id/textView">
<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.TabLayout
android:id="#+id/Tabulacion"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.TabItem
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Inicio">
</android.support.design.widget.TabItem>
<android.support.design.widget.TabItem
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Lectura">
</android.support.design.widget.TabItem>
</android.support.design.widget.TabLayout>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/Pager"
android:background="#color/backgroundColor" />
</LinearLayout>

Use a recyclerview instead of listview. I have implemented it in a view pager and it works perfectly. Recyclerview does virtually everything that a listview does and much more.

Collapsing/Expanding view coordinated with Sliding RecyclerView

I am trying to achieve the following affect (also see image below):
the app opens with a view (map) partially visible and the RecyclerView at a default anchor point (center image)
user scrolls the RecyclerView up, the map collapses and the list continues scrolling (right image)
user scrolls the RecyclerView down, the map expands to a maximum point (note the list should not slide completely off screen but to some anchored point) (left image)

To create this we need 1 Activity and 3 Fragments.
The Activity will host a TabLayout and a ViewPager like so:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" />
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
Since we only need to do the sliding behavior for the 1st Fragment the first Fragment gets an XML layout like so:
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="400dp"
android:orientation="vertical"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsingToolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<com.google.android.gms.maps.MapView
android:id="#+id/mapView"
app:layout_collapseMode="parallax"
android:layout_height="400dp"
android:layout_width="match_parent" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>
You can make the other Fragments however you like I just created fake data and a simple RecyclerView in the other Fragments.
Then call these views in your Activity and Fragment like so:
Activity
public class MainActivity extends AppCompatActivity {
private TabLayout mTabLayout;
private ViewPager mViewPager;
private SampleViewPagerAdapter mViewPagerAdapter;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.another_activity);
mTabLayout = (TabLayout) findViewById(R.id.sliding_tabs);
mViewPager = (ViewPager) findViewById(R.id.viewpager);
mViewPagerAdapter = new SampleViewPagerAdapter(getSupportFragmentManager());
mViewPager.setAdapter(mViewPagerAdapter);
mTabLayout.setupWithViewPager(mViewPager);
}
}
ViewPager Adapter
public class SampleViewPagerAdapter extends FragmentPagerAdapter {
public SampleViewPagerAdapter(FragmentManager fm) {
super(fm);
}
#Override
public Fragment getItem(int position) {
switch (position) {
case 0:
return new MapFragment();
case 1:
return new ScrollFragment();
case 2:
return new ScrollFragment();
default:
return new ScrollFragment();
}
}
#Override
public int getCount() {
return 3;
}
#Override
public CharSequence getPageTitle(int position) {
String[] tabNames = {"Stops", "Planner", "Alerts"};
return tabNames[position];
}
}
Map Fragment with Sliding RecyclerView
public class MapFragment extends Fragment {
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View root = inflater.inflate(R.layout.activity_main, null);
initCollapsingToolbar(root);
// Initialize map
initFragment();
return root;
}
private void initCollapsingToolbar(View root) {
CollapsingToolbarLayout collapsingToolbarLayout =
(CollapsingToolbarLayout) root.findViewById(R.id.collapsingToolbar);
collapsingToolbarLayout.setContentScrimColor(getResources().getColor(R.color.cyan_500));
}
private void initFragment() {
FakeDataFragment fragment = new FakeDataFragment();
getChildFragmentManager().beginTransaction()
.replace(R.id.content, scrollFragment)
.commit();
}
}
You should get something like this then:
Setting the position:
You can programmatically collapse the toolbar (CollapsingToolbarLayout) using the following code:
public void collapseToolbar(){
CoordinatorLayout.LayoutParams params = (CoordinatorLayout.LayoutParams) mFrameLayout.getLayoutParams();
AppBarLayout.ScrollingViewBehavior behavior = (AppBarLayout.ScrollingViewBehavior) params.getBehavior();
if (behavior != null) {
behavior.onNestedFling(rootLayout, appbarLayout, null, 0, 10000, true);
}
}
This means when the User first sees the map the map is partially collapsed to your Default State.

I Found Solution for Tabs in CoordinatorLayout
<?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"
android:id="#+id/htab_maincontent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/htab_appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/htab_collapse_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|enterAlways|snap"
app:statusBarScrim="#null"
app:titleEnabled="false">
<LinearLayout
android:id="#+id/isprofile"
android:layout_width="match_parent"
android:layout_height="180dp"
android:background="#drawable/profile_cover"
android:gravity="center"
app:layout_collapseMode="parallax">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginBottom="10dp"
android:gravity="center"
android:orientation="vertical">
<com.root.findagame.utills.CircleImageView
android:id="#+id/profile_pic"
android:layout_width="60dp"
android:layout_height="60dp"
android:background="#drawable/profile_pic" />
<TextView
android:id="#+id/txtUserName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
android:textColor="#color/cpb_white"
android:textSize="#dimen/text_medium_size"
android:textStyle="bold" />
<TextView
android:id="#+id/txtAge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text=""
android:textColor="#color/cpb_white"
android:textSize="#dimen/text_small_size" />
<TextView
android:id="#+id/txtName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text=""
android:textColor="#color/cpb_white"
android:textSize="#dimen/text_small_size"
android:visibility="gone" />
</LinearLayout>
</LinearLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/htab_toolbar"
android:layout_width="match_parent"
android:layout_height="40dp"
android:visibility="gone"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:id="#+id/htab_tabs"
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_gravity="bottom"
android:background="#color/cpb_white"
app:layout_collapseMode="pin"
app:tabIndicatorColor="#7CC142"
app:tabSelectedTextColor="#7CC142"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:tabTextAppearance="#android:style/TextAppearance.Widget.TabWidget"
app:tabTextColor="#color/lightGrayColor" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/htab_viewpager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
*Fragment*
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/dummyfrag_bg"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.RecyclerView
android:id="#+id/dummyfrag_scrollableview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false" />
</FrameLayout>

Develop Reference

The Android operating system is a mobile operating system that was developed by Google (GOOGL?) to be primarily used for touchscreen devices, cell phones, and tablets.

Android does not show tabs - android

Related

CoordinatorLayout - match_parent doesn't work

How can i implement Collapsing layout with tabs without a list view?

how to gone toolbar menu when collapsed appBarLayout in android

Problems with the scrolling in a expandable list view inside a viewpager - Android

Collapsing/Expanding view coordinated with Sliding RecyclerView

Categories

Resources