The ViewPager doesn't work to swipe the fragment. I'm using Drawer activity then added a BottomNavigationView, and in the main content i added a FrameLayout to be a fragment container and positioned below the TabLayout and above the BottomNaigationView. Then I made a class named PagerAdapter extends FragmnetPagerAdapter.
I made a constructor and implement the getItem() and getCount() methods, then in the MainActivity I initialized all the views by its id but when I run the app all works except the the swipe among the fragment with the Viewpager. What should I do more to make it work.
This is my PagerAdapter class:
public class PageAdapter extends FragmentPagerAdapter {
private int numberOfTabs;
public PageAdapter(FragmentManager fm, int numberOfTabs) {
super(fm);
this.numberOfTabs = numberOfTabs;
}
#Override
public Fragment getItem(int position) {
switch (position){
case(0) : return new HomeFragment();
case(1) : return new CouponFragment();
default : return null;
}
}
#Override
public int getCount() {
return numberOfTabs;
}
}
Here is my xml file:
<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"
tools:context=".MainActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
Tool Bar with TextView to set the title
<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" >
<TextView
android:id="#+id/my_title"
android:text="Title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="25sp"
android:layout_gravity="center"
android:textColor="#color/white"
/>
</android.support.v7.widget.Toolbar>
Here the TabLayout is added with three tabs Home,Coupons and Notifications. I want the ViewPager to swipe among the three tabs
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/toolbar"
app:tabGravity="fill"
app:tabIndicatorColor="#color/color"
app:tabMode="fixed"
app:tabSelectedTextColor="#color/color"
app:tabTextColor="#color/fadeWhite">
<android.support.design.widget.TabItem
android:id="#+id/tab_home"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Home"
style="#style/MyCustomTabLayout"
/>
<android.support.design.widget.TabItem
android:id="#+id/tab_coupons"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Coupons"
style="#style/MyCustomTabLayout"
/>
<android.support.design.widget.TabItem
android:id="#+id/tab_notifiactions"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Notifiactions"
style="#style/MyCustomTabLayout"
/>
</android.support.design.widget.TabLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toTopOf="#id/navBar"
app:layout_constraintTop_toTopOf="parent"/>
<include layout="#layout/content_main" />
Here is the MainActivity:
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
appBarLayout = (AppBarLayout) findViewById(R.id.app_bar);
tabLayout = (TabLayout) findViewById(R.id.tab_layout);
tab_home = (TabItem) findViewById(R.id.tab_home);
tab_coupons = (TabItem) findViewById(R.id.tab_coupons);
tab_noti = (TabItem) findViewById(R.id.tab_notifiactions);
viewPager = (ViewPager) findViewById(R.id.view_pager);
adapter = new PageAdapter(getSupportFragmentManager(),tabLayout.getTabGravity());
viewPager.setAdapter(adapter);
//setupToolBar
toolbar = (Toolbar) findViewById(R.id.toolbar);
my_title = (TextView) findViewById(R.id.my_title);
setSupportActionBar(toolbar);
my_title.setText(toolbar.getTitle());
getSupportActionBar().setDisplayShowTitleEnabled(false);
This line is wrong:
adapter = new PageAdapter(getSupportFragmentManager(),tabLayout.getTabGravity());
You should pass to your adapter the tabs count. tabLayout.getTabGravity() https://developer.android.com/reference/android/support/design/widget/TabLayout.html#getTabGravity() returns the current gravity used for laying out tabs.
Related
Good Day ! I'm currently creating an android app. My first problem is, Im getting a problem with my TabLayout. I want to display the tablayout IN the Toolbar...
This is my MainActivity:
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// Create the adapter that will return a fragment for each section
mPagerAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
private final Fragment[] mFragments = new Fragment[] {
new MyPostsFragment(),
new MyPostsFragment(),
new MyPostsFragment(),
};
private final String[] mFragmentNames = new String[] {
getString(R.string.heading_recent),
getString(R.string.heading_recent),
getString(R.string.heading_recent)
};
#Override
public Fragment getItem(int position) {
return mFragments[position];
}
#Override
public int getCount() {
return mFragments.length;
}
#Override
public CharSequence getPageTitle(int position) {
return mFragmentNames[position];
}
};
// Set up the ViewPager with the sections adapter.
mViewPager = (ViewPager) findViewById(R.id.container);
mViewPager.setAdapter(mPagerAdapter);
TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs);
tabLayout.setupWithViewPager(mViewPager);
// Button launches NewPostActivity
findViewById(R.id.fab_new_post).setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
startActivity(new Intent(MainActivity.this, NewReportActivity.class));
}
});
}
And this is the Layout:
<?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"
tools:context=".activities.MainActivity">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/tabs" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab_new_post"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:src="#drawable/ic_add_new_report"
android:layout_margin="16dp"/>
</RelativeLayout>
extending your theme to parent="Theme.AppCompat.Light.NoActionBar" will do the trick
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
By adding this, you're telling the system To not to use ActionBar.
You can simply hide the Toolbar to achieve what you want.
Dynamically:
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,WindowManager.LayoutParams.FLAG_FULLSCREEN);
or through Styles:
android:theme="#android:style/Theme.Holo.Light.NoActionBar.Fullscreen"
Try this, I am able to add tab inside toolbar using the below code.
<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.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabTextColor="#android:color/white"
app:tabSelectedTextColor="#color/aqua_marine"
app:tabIndicatorColor="#color/aqua_marine"
app:tabMode="fixed"
app:tabGravity="fill">
</android.support.design.widget.TabLayout>
</android.support.v7.widget.Toolbar>
</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" />
<include layout="#layout/content_home" />
I created tabs with ViewPager. But the titles of the tabs are appearing in the center of the screen. I would like to keep the titles on the top of the screen. Please check my following xml codes and java files. Kindly let me know how to fix this issue.
This is the xml file for MainActivity:
<?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:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:context="com.example.bright.myapplication.MainActivity">
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerHorizontal="true"
android:id="#+id/tablayout"
android:layout_below="#+id/toolbar">
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Left" />
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Center" />
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Right" />
</android.support.design.widget.TabLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
android: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"
android:layout_alignParentStart="true"
android:layout_below="#+id/toolbar" />
</RelativeLayout>
The following is the xml file for the first fragment:
fragment_blank_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"
tools:context="com.example.bright.myapplication.BlankFragment1">
<!-- TODO: Update blank fragment layout -->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="hello_blank_fragment 1" />
</FrameLayout>
The following is the xml file for the second fragment:
fragment_blank_fragment2.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"
tools:context="com.example.bright.myapplication.BlankFragment2">
<!-- TODO: Update blank fragment layout -->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="hello_blank_fragment 2" />
</FrameLayout>
and one more xml file for a fragment
The following is the Activity file:
MainActivity.java
public class MainActivity extends AppCompatActivity {
TabLayout tabLayout;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
tabLayout = (TabLayout)findViewById(R.id.tablayout);
tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
MyAdapter myAdapter = new MyAdapter(getSupportFragmentManager(),3);
ViewPager viewPager = (ViewPager)findViewById(R.id.viewpager);
viewPager.setAdapter(myAdapter);
viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
}
}
The following is the place where I am returning the fragments to the main activity through ViewPager:
MyAdapter.java
public class MyAdapter extends FragmentStatePagerAdapter {
int tabcount;
public MyAdapter(FragmentManager fm, int count) {
super(fm);
tabcount = count;
}
#Override
public Fragment getItem(int position) {
switch (position){
case 0:
BlankFragment1 fragment1 = new BlankFragment1();
return fragment1;
case 1:
BlankFragment2 fragment2 = new BlankFragment2();
return fragment2;
case 2:
BlankFragment3 fragment3 = new BlankFragment3();
return fragment3;
default:
return null;
}
}
#Override
public int getCount() {
return tabcount;
}
}
The reason your TabLayout is appearing in the center of the screen is because you have the layout_height set to match_parent. The default gravity of the items within a TabLayout is center_vertical.
I am assuming you want the standard look and feel of tabs as per the Material Design Guidelines, in which case the layout file for your MainActivity should look more like this:
<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="wrap_content">
<android.support.design.widget.AppBarLayout android:id="#+id/app_bar"
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.TabLayout android:id="#+id/tab_layout"
android:layout_width="match_parent" android:layout_height="wrap_content"
app:tabIndicatorColor="?attr/colorAccent">
<android.support.design.widget.TabItem
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:text="#string/tab_left"/>
<android.support.design.widget.TabItem
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:text="#string/tab_center"/>
<android.support.design.widget.TabItem
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:text="#string/tab_right"/>
</android.support.design.widget.TabLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.ViewPager android:id="#+id/pager"
android:layout_width="match_parent" android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>
Also, there is a convenience method for setting up tabs with a ViewPager, instead of calling viewPager.setOnPageChangeListener():
tabLayout.setupWithViewPager(viewPager);
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>
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.
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>