I am trying to design this page
but I have design like this ( both fragment are there but the pagertabstrip of unseen page only see when I moved to this page )
Issue Facing
How would I set the width of the PagerTabStrip so that both login and register( highlighted in the first image) is visible in the same page.
XML:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:weightSum="2"
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<LinearLayout
android:layout_weight="1.6"
android:gravity="center"
android:id="#+id/logo"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:textSize="25dp"
android:gravity="center"
android:textAppearance="#style/Base.TextAppearance.AppCompat.Large"
android:textStyle="bold"
android:text=""
android:visibility="visible"
android:src="#drawable/logo_new"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/textView8" />
</LinearLayout>
<LinearLayout
android:layout_weight="0.4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<android.support.v4.view.ViewPager
app:tabMode="fixed"
android:id="#+id/vpPager"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.view.PagerTabStrip
app:tabMode="fixed"
android:id="#+id/pager_header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:paddingBottom="4dp"
android:paddingTop="4dp" />
</android.support.v4.view.ViewPager>
</LinearLayout>
</LinearLayout>
Java File
public class Authentication extends AppCompatActivity {
FragmentPagerAdapter adapterViewPager;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.authentication);
SharedPreferences app_preferences = PreferenceManager.getDefaultSharedPreferences(getApplicationContext());
Boolean login_already=app_preferences.getBoolean("login",false);
if (login_already)
{
startActivity(new Intent(Authentication.this,MainActivity.class));
finish();
}
ViewPager vpPager = (ViewPager) findViewById(R.id.vpPager);
adapterViewPager = new MyPagerAdapter(getSupportFragmentManager());
vpPager.setAdapter(adapterViewPager);
// Attach the page change listener inside the activity
vpPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
// This method will be invoked when a new page becomes selected.
#Override
public void onPageSelected(int position) {
Toast.makeText(Authentication.this,
"Selected page position: " + position, Toast.LENGTH_SHORT).show();
}
// This method will be invoked when the current page is scrolled
#Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
// Code goes here
}
// Called when the scroll state changes:
// SCROLL_STATE_IDLE, SCROLL_STATE_DRAGGING, SCROLL_STATE_SETTLING
#Override
public void onPageScrollStateChanged(int state) {
// Code goes here
}
});
}
public static class MyPagerAdapter extends FragmentPagerAdapter {
private static int NUM_ITEMS = 2;
public MyPagerAdapter(FragmentManager fragmentManager) {
super(fragmentManager);
}
// Returns total number of pages
#Override
public int getCount() {
return NUM_ITEMS;
}
// Returns the fragment to display for that page
#Override
public Fragment getItem(int position) {
switch (position) {
case 0: // Fragment # 0 - This will show FirstFragment
return Login.newInstance(0, "Login");
case 1: // Fragment # 0 - This will show FirstFragment different title
return Registration.newInstance(1, "Register");
default:
return null;
}
}
// Returns the page title for the top indicator
#Override
public CharSequence getPageTitle(int position) {
if (position==0)
return "Login";
else
return "Register";
//return "Page " + position;
}
}
}
That layout xml worked for me...
EDIT: Oh sry i'm using another lib:
https://github.com/jpardogo/PagerSlidingTabStrip
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
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">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<com.astuetz.PagerSlidingTabStrip
android:id="#android:id/tabs"
android:layout_width="match_parent"
android:layout_height="48dip"
android:textColor="#FFFFFFFF"
app:pstsDividerColor="#FFFFFFFF"
app:pstsDividerPadding="10dp"
app:pstsDividerWidth="1dp"
app:pstsIndicatorColor="#FF33B5E6"
app:pstsIndicatorHeight="5dp"
app:pstsTabPaddingLeftRight="20dip"
app:pstsUnderlineColor="#FF33B5E6">
</com.astuetz.PagerSlidingTabStrip>
<FrameLayout
android:id="#+id/movie_framelayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v4.view.ViewPager
android:id="#+id/movie_pager"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</android.support.v4.view.ViewPager>
</FrameLayout>
</LinearLayout>
</FrameLayout>
When you want to display only selected tab and other will hide then set your PagerTabStrip as bellow.
<android.support.v4.view.PagerTabStrip
android:id="#+id/pager_header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:paddingBottom="4dp"
android:paddingTop="4dp"
app:tabMode="scrollable"
app:tabTextColor="#000000"
app:tabSelectedTextColor="#ff0000"
app:tabIndicatorColor="#ff0000"/>
app:tabTextColor="" is your normal tab text color.
app:tabSelectedTextColor="" is color of your selected tab.
app:tabIndicatorColor="" is your selected tab indicatore color.
So use as per your requirement. For detail that how to use tab layout then check this tutorial.
Related
I've got simple tabLayout within Fragment file which is CoordinatorLayout.
It works good, when user swipes, different Fragments are displayed.
The problem is, tabs aren't respond for clicking, user cannot select particular tab,it has oportunity to swipe only
Below I launch files containing XML, ViewPager2 adapter, and Fragment.java in which I've implemented mechanism for swiping.
For global, in MainActivity I've implemented toolbar, that's why in Fragment's TabLayout I'm using margin top 50dp.
I also lunch its code.
<androidx.coordinatorlayout.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/coordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainFragment">
<com.google.android.material.tabs.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="#style/Widget.MyApp.TabLayout"
android:layout_marginTop="56dp"
android:layout_below="#+id/toolbar"
app:tabMode="fixed" />
<androidx.viewpager2.widget.ViewPager2
android:id="#+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior"/>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/constraintLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end|right">
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/minusFab"
android:visibility="invisible"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_remove_circle_outline_24px"
app:layout_constraintEnd_toEndOf="#id/plusFab"
app:layout_constraintTop_toTopOf="parent" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/plusFab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="invisible"
android:layout_marginTop="20dp"
android:layout_marginBottom="24dp"
android:src="#drawable/ic_add_circle_outline_24px"
app:layout_constraintBottom_toTopOf="#+id/mainFab"
app:layout_constraintEnd_toEndOf="#+id/mainFab"
app:layout_constraintTop_toBottomOf="#+id/minusFab" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/mainFab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:layout_marginBottom="16dp"
android:src="#drawable/ic_expand_less_24px"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
I've configured all mechanisms responsible for tabs logic:
public class ViewPagerAdapter extends FragmentStateAdapter {
public ViewPagerAdapter(#NonNull FragmentActivity fragmentActivity) {
super(fragmentActivity);
}
#NonNull
#Override
public Fragment createFragment(int position) {
switch (position)
{
case 0: return new FirstFragment();
case 1: return new SecondFragment();
case 2: return new ThirdFragment();
default:
return null;
}
}
#Override
public int getItemCount() {
return 3;
}
}
And implementation in Fragment.Java
public class MainFragment extends Fragment {
public MainFragment() {
// Required empty public constructor
}
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
}
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_main, container, false);
ViewPager2 viewPager2 = view.findViewById(R.id.viewPager);
viewPager2.setAdapter(new ViewPagerAdapter(getActivity()));
TabLayout tabLayout = view.findViewById(R.id.tab_layout);
TabLayoutMediator tabLayoutMediator = new TabLayoutMediator(
tabLayout, viewPager2, new TabLayoutMediator.TabConfigurationStrategy() {
#Override
public void onConfigureTab(#NonNull TabLayout.Tab tab, int position) {
switch (position){
case 0: tab.setText("First");
break;
case 1: tab.setText("Second");
break;
case 2: tab.setText("Third");
break;
}
}
}
);
tabLayoutMediator.attach();
// Inflate the layout for this fragment
return view;
}
}
MainActivity Layout:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/Theme.FragmentsWithTabs.AppBarOverlay"
app:layout_constraintTop_toTopOf="parent">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/Theme.FragmentsWithTabs.PopupOverlay">
<com.google.android.material.switchmaterial.SwitchMaterial
android:id="#+id/color_mode_switch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center|end"
android:text="Switch here"
android:textAppearance="#style/TextAppearance.AppCompat.Small" />
</androidx.appcompat.widget.Toolbar>
</com.google.android.material.appbar.AppBarLayout>
<fragment
android:id="#+id/fragment"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:defaultNavHost="true"
app:navGraph="#navigation/nav_graph"
tools:layout_editor_absoluteX="127dp"
tools:layout_editor_absoluteY="297dp" />
</androidx.constraintlayout.widget.ConstraintLayout>
You have to add listener on tablayout to listen tab select event. Like,
tabLayout.setupWithViewPager(viewPager);
tabLayout.setOnTabSelectedListener(
new TabLayout.ViewPagerOnTabSelectedListener(viewPager) {
#Override
public void onTabSelected(TabLayout.Tab tab) {
//here you can write code to change page of viewpager based on tab id.
// like, viewpager.setCurrentItem(0);
}
});
Finally I've came with an answer. In this situation, ViewPager2 was expanded on all screen hence overlapping clicks on TabLayout :)
So solution was simple, now MainFragment's ViewPager2 code looks like follows:
<androidx.viewpager2.widget.ViewPager2
android:id="#+id/viewPager"
android:layout_width="match_parent"
android:layout_height="629dp"
android:layout_gravity="bottom"
app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior" />
I want to display two fragments in a cardview, i was able to display tablayout but not the fragments, tried everything, help me as this might be simple I guess. I uploaded screenshot as well, as seen from the screenshot tablayout is displayed correctly but not the fragment below it
Code in the Activity.
....
//Creating our pager adapter
Pager adapter = new Pager(getSupportFragmentManager(), Titles, 2);
...
viewPager = (ViewPager) findViewById(R.id.srviewpager);
//Adding adapter to pager
viewPager.setAdapter(adapter);
final TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs);
tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
tabLayout.setupWithViewPager(viewPager);
..
public class Pager extends FragmentStatePagerAdapter {
CharSequence Titles[]; // This will Store the Titles of the Tabs which are Going to be passed when ViewPagerAdapter is created
int NumbOfTabs; // Store the number of tabs, this will also be passed when the ViewPagerAdapter is created
private static final String TAG = "ViewPagerAdapter";
// Build a Constructor and assign the passed Values to appropriate values in the class
public Pager(FragmentManager fm, CharSequence mTitles[], int mNumbOfTabsumb) {
super(fm);
this.Titles = mTitles;
this.NumbOfTabs = mNumbOfTabsumb;
}
//Overriding method getItem
#Override
public Fragment getItem(int position) {
//Returning the current tabs
switch (position) {
case 0:
return new ShippingFragment();
case 1:
return new ReturnsFragment();
}
return null;
}
// Overriden method getCount to get the number of tabs
#Override
public int getCount() {
return NumbOfTabs;
}
#Override
public CharSequence getPageTitle(int position) {
return Titles[position];
}
}
this is my layout file, contains 3 cardview, the last cardview has to display two fragments, shipping and returns. So far I am able to display only tablayout with two tabs but not the fragments.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:cardview="http://schemas.android.com/apk/res-auto"
xmlns:app="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.CardView
android:id="#+id/description_cd"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="8dp"
cardview:cardCornerRadius="8dp"
cardview:cardElevation="15dp"
cardview:cardBackgroundColor="#color/cardview_light_background"
cardview:contentPadding="2dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true">
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:id="#+id/features_cd"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
cardview:cardCornerRadius="8dp"
cardview:cardElevation="15dp"
cardview:cardBackgroundColor="#color/cardview_light_background"
cardview:contentPadding="2dp"
android:layout_below="#+id/description_cd"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="false"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="false"
android:layout_margin="8dp">
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:id="#+id/sp_cd"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
cardview:cardCornerRadius="8dp"
cardview:cardElevation="15dp"
cardview:cardBackgroundColor="#color/cardview_light_background"
cardview:contentPadding="2dp"
android:layout_below="#+id/features_cd"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="false"
android:layout_margin="8dp">
<com.spoorthy.apsaratrendz.thirdpartyviews.RippleView
android:id="#+id/shipping_payment_rpv"
android:layout_width="match_parent"
android:layout_height="match_parent"
cardview:rv_color="#color/green"
cardview:rv_type="rectangle"
cardview:rv_rippleDuration="#integer/ripduration_rpv">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/shippingandreturns"
android:id="#+id/textViewsp"
android:layout_alignParentTop="true"
android:singleLine="true"
android:textSize="25sp"
android:textStyle="bold"
android:background="#FFFFFF"
android:textColor="#d52e9e"
android:inputType="text"
android:padding="1dp"
android:paddingEnd="1dp"
android:paddingStart="1dp" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="fixed"
android:layout_below="#+id/textViewsp"/>
<android.support.v4.view.ViewPager
android:id="#+id/srviewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/tabs"/>
</com.spoorthy.apsaratrendz.thirdpartyviews.RippleView>
</android.support.v7.widget.CardView>
</RelativeLayout>
Here are my two fragment layouts
shippingfragment.xml
<?xml version="1.0" encoding="utf-8"?>
<com.spoorthy.apsaratrendz.thirdpartyviews.ReadMoreTextView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/fragmentText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="25sp"
android:textStyle="bold"
android:text="#string/returns"
android:layout_margin="4dp"
android:padding="4dp" />
returnsfragment.xml
<?xml version="1.0" encoding="utf-8"?>
<com.spoorthy.apsaratrendz.thirdpartyviews.ReadMoreTextView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/fragmentText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="25sp"
android:textStyle="bold"
android:text="#string/returns"
android:layout_margin="4dp"
android:padding="4dp" />
And my two fragment java files..
public class ReturnsFragment extends Fragment {
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
View v = inflater.inflate(R.layout.returnsfragment, null);
return v;
}
}
public class ShippingFragment extends Fragment {
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
View v = inflater.inflate(R.layout.shippingfragment, null);
return v;
}
}
Solved the problem by changing the CardView layout height to 350dp, instead of match_parent.
<android.support.v7.widget.CardView
android:id="#+id/sp_cd"
android:layout_width="match_parent"
android:layout_height="350dp".../>
I'm using a FragmentStatePagerAdapter to manage three tabbed Fragments that each have a ListView and a button. When the parent Fragment loads the via the ViewPager and PagerAdapter, the Button is missing but the ListView still shows. Switching to another tab in the Fragment causes the buttons to show up as they were supposed to.
Why isn't the button showing on the first view load?
public class DetailsPagerAdapter extends FragmentStatePagerAdapter {
private Creature creature;
public DetailsPagerAdapter(FragmentManager fm, Creature creature) {
super(fm);
this.creature = creature;
}
#Override
public Fragment getItem(int position) {
switch(position) {
case 0:
return StatFragment.newInstance(creature);
case 1:
return ModFragment.newInstance(creature);
case 2:
return ResourceFragment.newInstance(creature);
}
return new Fragment();
}
#Override
public int getCount() {
return 3;
}
#Override
public CharSequence getPageTitle(int position) {
switch(position) {
case 0:
return "Stats";
case 1:
return "Mods";
case 2:
return "Resources";
}
return "";
}
}
Details Fragment - Contains the tabs
public class CreatureDetailFragment extends Fragment {
private Creature creature;
private DetailsPagerAdapter detailsPagerAdapter;
private ViewPager viewPager;
private TabLayout tabs;
public CreatureDetailFragment() {
}
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
if (getArguments().containsKey(Creature.ID_INTENT_MESSAGE)) {
this.creature = Creature.get(this.getContext(), getArguments().getLong(Creature.ID_INTENT_MESSAGE, 0l));
Activity activity = this.getActivity();
CollapsingToolbarLayout collapsingToolbarLayout = (CollapsingToolbarLayout) activity.findViewById(R.id.toolbar_layout);
if (collapsingToolbarLayout != null) {
collapsingToolbarLayout.setTitle(this.creature.name);
}
this.detailsPagerAdapter = new DetailsPagerAdapter(this.getActivity().getSupportFragmentManager(), creature);
}
}
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
super.onCreateView(inflater, container, savedInstanceState);
View view = inflater.inflate(R.layout.fragment_creature_details_tabbed, container, false);
this.viewPager = (ViewPager) view.findViewById(R.id.viewPager);
this.viewPager.setAdapter(this.detailsPagerAdapter);
this.tabs = (TabLayout) view.findViewById(R.id.tabLayout);
this.tabs.setupWithViewPager(this.viewPager);
return view;
}
}
Parent layout that contains tabs
<?xml version="1.0" encoding="utf-8"?>
<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=".DetailActivity">
<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/detail_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/tabLayout"
android:layout_width="match_parent" android:layout_height="wrap_content"
android:fillViewport="false" />
</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>
Tab Layout
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<ListView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/tabListView"
android:layout_alignParentTop="true"
android:layout_above="#+id/btnAddItem" />
<ImageButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/btnAddItem"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:textColor="#d5d5d5"
android:background="#000"
android:textSize="24dp"
android:alpha=".7"
android:src="#drawable/ic_action_add" />
</RelativeLayout>
It seems that CoordinatorLayout wasn't the best layout to use for my tab fragment. The ListView was pushing the button out of the viewable space on first load and, for some reason, was only being rendered when redrawing the view.
I switched it to RelativeLayout and added some attributes to the ViewPager:
<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:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentBottom="true"
android:layout_below="#+id/appbar" />
The PagerTitleStrip is overflowing. I am not able to see all the title at a time. Not able to make out what i am missing here. I have attached the screenshots.
Also how do i add material UI theme to these tabs. which library is required and how to i apply the theme for the tab or for the entire application
My adapter code
public class MyAdapter extends FragmentPagerAdapter
{
int totalFragments = 3;
public MyAdapter(FragmentManager fm) {
super(fm);
}
#Override
public Fragment getItem(int position) {
return MyFragment.newInstance(position);
}
#Override
public int getCount() {
return totalFragments;
}
#Override
public CharSequence getPageTitle(int position) {
switch (position) {
case 0:
return "Tab One";
case 1:
return "Tab Two";
case 2:
return "Tab Three";
}
return null;
}
}
Layout file:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.3"
android:orientation="vertical" >
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.7"
android:orientation="vertical" >
<android.support.v4.view.ViewPager
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<android.support.v4.view.PagerTitleStrip
android:id="#+id/pager_title_strip"
android:scrollbarSize="200dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:background="#33b5e5"
android:paddingBottom="4dp"
android:paddingTop="4dp"
android:textColor="#fff" />
</android.support.v4.view.ViewPager>
</LinearLayout>
</LinearLayout>
First, where you have used fill_parent, replace those with match_parent, since filling is deprecated.
Second, the common settings for ViewPager size are
android:layout_width="match_parent"
android:layout_height="0px"
and possibly
android:layout_weight="1"
After these, for your PagerTitleStrip, try
android:layout_width="wrap_content"
Third, The material way of designing tabbed vies is with TabLayout, which Google has some tutorials and examples for.
I referred this Pager Sliding Tab Strip.I am getting the output as it is.
But my only problem is I didn't know how to add the button for categories tab,Textview for Home tab,Edittext for Top Paid tab.
There I seen only two layout :
activity_main.xml:
<RelativeLayout 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" >
<com.astuetz.PagerSlidingTabStrip
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="48dip"
android:background="#drawable/background_tabs" />
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/colors"
android:layout_below="#+id/tabs"
tools:context=".MainActivity" />
<LinearLayout
android:id="#+id/colors"
android:layout_width="match_parent"
android:layout_height="48dip"
android:layout_alignParentBottom="true"
android:layout_marginBottom="8dip"
android:layout_marginLeft="4dip"
android:layout_marginRight="4dip"
android:orientation="horizontal" >
</LinearLayout>
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/colors"
android:layout_alignTop="#+id/pager"
android:layout_marginLeft="58dp"
android:layout_marginTop="46dp"
android:text="Button" />
</RelativeLayout>
fragment_quick_contact.xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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="wrap_content" >
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="170dip"
android:scaleType="centerCrop"
android:src="#drawable/contact" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/image"
android:background="#77000000"
android:paddingBottom="14dip"
android:paddingLeft="8dip"
android:paddingTop="14dip"
android:text="Quick Contact"
android:textColor="#FFFFFFFF"
android:textSize="18sp" />
<com.astuetz.PagerSlidingTabStrip
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="62dip"
android:layout_below="#+id/image"
android:background="#drawable/background_tabs_diagonal"
app:pstsDividerColor="#00000000"
app:pstsIndicatorColor="#FF33B5E6"
app:pstsTabPaddingLeftRight="14dip"
app:pstsUnderlineColor="#FF33B5E6" />
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="96dip"
android:layout_below="#+id/tabs" />
</RelativeLayout>
MainActivity,java:
public class MyPagerAdapter extends FragmentPagerAdapter {
private final String[] TITLES = { "Categories", "Home","Profile" };
public MyPagerAdapter(FragmentManager fm) {
super(fm);
}
#Override
public CharSequence getPageTitle(int position) {
return TITLES[position];
}
#Override
public int getCount() {
return TITLES.length;
}
return SuperAwesomeCardFragment.newInstance(position);
}
}
If I add a button in activity_main.xml. It just add the button not only in Category tab.But, it added the button in all tabs.
I need to add the button in category tab.Then I have to add the edit text in Home tab.is it possible to do this in Pager Sliding Tab Strip.
Edit: There was no xml layout separately for category tab and home tab.That's why I am getting confused with this.
you should add the button on Category Tab fragment layout, not activity_main layout
The user #Calvinfly suggested me,so I can found out the answer.To be more Clear:
In my MainActivity.java inside MyPagerAdapter I set the position like this
#Override
public Fragment getItem(int position) {
switch (position) {
case 0:
return new Category();
case 1:
return new Home();
case 2:
return new TopPaid();
}
return SuperAwesomeCardFragment.newInstance(position);
}