I am new to android programming and I am trying to change the tab on the touch of tab header text. Here is my code
activity_main
<android.support.design.widget.AppBarLayout>
<android.support.design.widget.CollapsingToolbarLayout>
<ImageView
android:id="#+id/image"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:src="#drawable/test_image"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:scaleType="centerCrop" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:background="#android:color/transparent"
app:layout_collapseMode="pin"
/>
<android.support.v7.widget.Toolbar/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
Mainactivity.java
tabLayout = (TabLayout) findViewById(R.id.tabs);
tabLayout.setupWithViewPager(viewPager);
Output for this application is a tablayout with fragments as tabs which contain cardview. Now when I touch the tab header I am able to switch to different tabs also I can switch tab by swiping the fragments with my finger.However when I add this
tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
#Override
public void onTabSelected(TabLayout.Tab tab) {
CharSequence _header = tab.getText();
Selected_Tab_Header = String.valueOf(_header);
if (Selected_Tab_Header == "Tab1") {
headerImage.setImageResource(R.drawable.someImage);
}
}
#Override
public void onTabReselected(TabLayout.Tab tab) {
}
#Override
public void onTabUnselected(TabLayout.Tab tab) {
}
});
I cannot switch tab's anymore i.e when I touch the tab header though the code is fired(image changes) the tab is not switched however swiping the tab's with finger still works.Is there any thing missing from my code? or is there any other way to achieve this?
Dont forget viewPager.setCurrentItem(tab.getPosition()) in your onTabSelected:
public void onTabSelected(TabLayout.Tab tab) {
CharSequence _header = tab.getText();
Selected_Tab_Header = String.valueOf(_header);
if (Selected_Tab_Header == "Tab1") {
headerImage.setImageResource(R.drawable.someImage);
}
if (viewPager != null) {
viewPager.setCurrentItem(tab.getPosition());
}
}
Hope this helps!!
Related
In my view i have two viewpager
ViewPager viewPager // this is to show images of cars
ViewPager vehicleDetailsViewPager // this is to show cars details
and also i have one tablayout
TabLayout tabLayout
this tablayout i have 3 menus like Exterior,Interior and System & Functions
My issue is when i click on each tab in my tablayout it automatically changes my images in the first viewPager
My activity page
public class VehicleDetailsActivity extends AppCompatActivity {
ViewPager viewPager;
CirclePageIndicator circlePageIndicator;
ViewPager.SimpleOnPageChangeListener pagerSyncronizer;
List<Car> carsList=new ArrayList<>();
#Override
protected void onCreate(#Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.vehicle_details_activity);
viewPager = findViewById(R.id.carImageViewPager);
viewPager.setOffscreenPageLimit(5);
circlePageIndicator = findViewById(R.id.circlePageIndicator);
pagerSyncronizer = getPagerSynchronizer();
prepareCarsList();
viewPager.setAdapter(new ViewPageAdapter(getSupportFragmentManager(), carsList));
circlePageIndicator.setViewPager(viewPager);
viewPager.setCurrentItem(0);
circlePageIndicator.setOnPageChangeListener(pagerSyncronizer);
TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs);
tabLayout.addTab(tabLayout.newTab().setText("Exterior"));
tabLayout.addTab(tabLayout.newTab().setText("Interior"));
tabLayout.addTab(tabLayout.newTab().setText("System & Functions"));
tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
final ViewPager vehicleDetailsViewPager = (ViewPager) findViewById(R.id.vehicleDetailsViewPager);
final DeatilsFragmentPageAdapter deatilsFragmentPageAdapter = new DeatilsFragmentPageAdapter
(getSupportFragmentManager(), getApplicationContext(),tabLayout.getTabCount());
vehicleDetailsViewPager.setAdapter(deatilsFragmentPageAdapter);
vehicleDetailsViewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
tabLayout.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) {
}
});
}
/*
* for sync the viewpage item with page indicator to indicate
*/
private ViewPager.SimpleOnPageChangeListener getPagerSynchronizer() {
return new ViewPager.SimpleOnPageChangeListener() {
#Override
public void onPageSelected(int position) {
viewPager.setCurrentItem(position, true);
}
};
}
My Layout XML is
<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="wrap_content"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginBottom="15dp"
android:id="#+id/RelativeLayout"
android:orientation="vertical">
<TextView
android:id="#+id/txtCarName"
android:text="Aston Martin DB8"
app:layout_constraintStart_toEndOf="#+id/vehicleImage"
android:layout_height="30dp"
android:layout_width="wrap_content"
android:layout_marginLeft="5dp"
android:layout_margin="15dp"
style="#style/vehicleNameStyle"
android:layout_alignParentTop="true"
/>
<androidx.viewpager.widget.ViewPager
android:id="#+id/carImageViewPager"
android:layout_width="match_parent"
android:layout_height="150dp"
android:background="#drawable/my_custom_background"
android:layout_alignBottom="#+id/txtCarName"
/>
<com.viewpagerindicator.CirclePageIndicator
android:id="#+id/circlePageIndicator"
android:layout_width="match_parent"
android:layout_height="30dp"
android:layout_marginTop="8dp"
android:paddingTop="5dp"
android:visibility="visible"
app:fillColor="#color/colorPrimary"
app:strokeColor="#000"
android:layout_alignBottom="#+id/carImageViewPager"/>
<com.google.android.material.tabs.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"/>
<androidx.viewpager.widget.ViewPager
android:id="#+id/vehicleDetailsViewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</LinearLayout>
Can anyone please suggest where im doing wrong.Please see the attached image for better understanding of my issue. When i attaching tablayout with fragment, The xml content is not displaying in my view
Because you have used first viewPager instance inside OnTabSelectedListener's onTabSelected. Try using vehicleDetailsViewPager inside onTabSelected instead of viewPager
#Override
public void onTabSelected(TabLayout.Tab tab) {
vehicleDetailsViewPager.setCurrentItem(tab.getPosition());
}
Please change the view pager reference to your second view pager like below
#Override
public void onTabSelected(TabLayout.Tab tab) {
vehicleDetailsViewPager .setCurrentItem(tab.getPosition());
}
You are using the first images showing view pager reference in tablayout click .
Try this way :)
I followed these tutorial Android TabLayout Example using ViewPager and Fragments
Android TabLayout Example
But if I swipe the fragment the view pager will not move.
I am getting this result output I got
I followed the above tutuorial only no changes, but when we swipe the fragment the tabs will not shift. Please help me. Thanks in advance.
This is the activity_main.xml
<LinearLayout
android:id="#+id/main_layout"
android:orientation="vertical"
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">
<!-- our toolbar -->
<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"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
<!-- our tablayout to display tabs -->
<android.support.design.widget.TabLayout
android:id="#+id/tabLayout"
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"/>
<!-- View pager to swipe views -->
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="fill_parent"/>
</LinearLayout>
The pages on the viewpager is swiping, that's why it's showing "Tab 3" on page. This is happening due to swiping properties of ViewPager. But the tab is not changing accordingly, that's why is it showing on TAB1. Because there is no link established between tablayout and viewpager.
If you're using a ViewPager together with this tab layout, you can call setupWithViewPager(ViewPager) to link the two together, described here.
So no need to call addTab().
mTabLayout = (TabLayout)findViewById(R.id.tabLayout);
mViewPager = (ViewPager)findViewById(R.id.pager);
//mTabLayout.addTab(mTabLayout.newTab().setText("Tab1"));
//mTabLayout.addTab(mTabLayout.newTab().setText("Tab2"));
//mTabLayout.addTab(mTabLayout.newTab().setText("Tab3"));
//mTabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
Pager pager = new Pager(getSupportFragmentManager(),3);
mViewPager.setAdapter(pager);
mTabLayout.setupWithViewPager(mViewPager);
This tablayout will be automatically populated from the PagerAdapter's page titles. For this in,
class Pager extends FragmentStatePagerAdapter{...
#Override
public CharSequence getPageTitle(int position) {
super.getPageTitle(position);
switch (position){
case 0:
return "Tab1";
case 1:
return "Tab2";
case 2:
return "Tab3";
default:
return null;
}
}
viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
tabLayout.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) {
}
});
Please, anybody help me. I have a 2 big problem:
App bar moves my left button to center app, right after string:
setSupportActionBar(mToolbar)
buttons - wrap/wrap, tryed to wrap her in RelativeLayout, tryed to set "anchor" parameter - no effect - title moves her then appears.
Fragments appears higher then fragmentContainer - on my appbar.
My idea was - 1 main activity + 3 fragments changes in her bottom part, and settings-activity. Screen applied.
Also I have a question:
For now I changes fragment using .replace - method. If I do it then I send search query and receive list of elements - it would create a new main fragment with empty list? But now it's not important. Of course, I can get fragments by tag, if one exists.
Code.
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
style="#style/match">
<android.support.design.widget.AppBarLayout
style="#style/fill"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="72dp"
android:background="#color/colorPrimary"
app:theme="#style/ToolBarStyle"
app:popupTheme="#style/AppTheme.PopupOverlay"
app:layout_collapseMode="pin">
<RelativeLayout
style="#style/wrap">
<ImageView
android:id="#+id/settings_btn"
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_alignParentLeft="true"
android:src="#drawable/servis"
android:contentDescription="#string/settings.title"
android:fitsSystemWindows="true"/>
</RelativeLayout>
<ImageView
android:id="#+id/logout_btn"
android:layout_width="24dp"
android:layout_height="wrap_content"
android:layout_gravity="right|center_vertical"
android:layout_marginRight="#dimen/spacing_normal_16"
android:layout_weight="0.5"
android:src="#drawable/off"
android:contentDescription="#string/main.logout"
android:cropToPadding="false"/>
</android.support.v7.widget.Toolbar>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#color/black"/>
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
style="#style/fill"
app:layout_scrollFlags="scroll|snap">
<android.support.design.widget.TabItem
android:id="#+id/search_tab"
style="#style/wrap"
android:text="#string/main.search"/>
<android.support.design.widget.TabItem
android:id="#+id/saved_tab"
style="#style/wrap"
android:text="#string/main.saved"/>
</android.support.design.widget.TabLayout>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content"/>
</android.support.design.widget.CoordinatorLayout>
content.xml (like in books):
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/fragmentContainer"
style="#style/match"
tools:context=".ui.activities.MainActivity"/>
fragment_main.xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
style="#style/match">
<android.support.v7.widget.RecyclerView
android:id="#+id/audio_list"
style="#style/recycler_view"/>
... <buttonsLayout>
</RelativeLayout>
MainActivity:
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
private DataManager mDataManager;
private Toolbar mToolbar;
private ImageView mSettings, mLogout;
private TabLayout mTabLayout;
private TabItem mSearchTab, mSavedTab;
private int accentColorId, primaryColorId;
private String mQuery;
public void setQuery(String query) {
mQuery = query;
}
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mDataManager = DataManager.getInstance();
mToolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(mToolbar);
//mToolbar.setTextAlignment(View.TEXT_ALIGNMENT_CENTER);
mSettings = (ImageView) findViewById(R.id.settings_btn);
mSettings.setOnClickListener(this);
mLogout = (ImageView) findViewById(R.id.logout_btn);
mLogout.setOnClickListener(this);
accentColorId = getResources().getColor(R.color.colorAccent);
primaryColorId = getResources().getColor(R.color.colorPrimary);
mTabLayout = (TabLayout) findViewById(R.id.tab_layout);
mSearchTab = (TabItem) findViewById(R.id.search_tab);
mSavedTab = (TabItem) findViewById(R.id.saved_tab);
mTabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
#Override
public void onTabSelected(TabLayout.Tab tab) {
if (tab.getPosition() == 0) {
//mSearchTab.setBackgroundColor(accentColorId);
//mSavedTab.setBackgroundColor(primaryColorId);
showFragment(SearchFragment.newInstance(mQuery), "search");
} else if(tab.getPosition() == 1) {
showFragment(new SavedFragment(), "saved");
}
}
#Override
public void onTabUnselected(TabLayout.Tab tab) {}
#Override
public void onTabReselected(TabLayout.Tab tab) {}
});
mTabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
signIn();
}
...
private void showFragment(Fragment fragment, String tag) {
FragmentManager fm = getFragmentManager();
fm.beginTransaction()
.replace(R.id.fragmentContainer, fragment, tag)
.addToBackStack(tag)
.commit();
}
I have PodCastTab....i want fully Display TabName???
am not Asking about TabHost??
TabHost and TabLayout are Different...
This is ScreenShot of Tabs
once see this my code :
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//Initializing the tablayout
tabLayout = (TabLayout) findViewById(R.id.tabLayout);
//Adding the tabs using addTab() method
tabLayout.addTab(tabLayout.newTab().setText("Home").setIcon(R.drawable.home_selector));
tabLayout.addTab(tabLayout.newTab().setText("News").setIcon(R.drawable.news_selector));
tabLayout.addTab(tabLayout.newTab().setText("Videos").setIcon(R.drawable.video_selector));
tabLayout.addTab(tabLayout.newTab().setText("PodCasts").setIcon(R.drawable.podcast_selector));
tabLayout.addTab(tabLayout.newTab().setText("More").setIcon(R.drawable.more_selector));
tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
//tabLayout.setupWithViewPager(viewPager);
//Initializing viewPager
viewPager = (ViewPager) findViewById(R.id.pager);
//Creating our pager adapter
ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager(), tabLayout.getTabCount());
//Adding adapter to pager
viewPager.setAdapter(adapter);
viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
tabLayout.setOnTabSelectedListener(new TabLayout.ViewPagerOnTabSelectedListener(viewPager) {
#Override
public void onTabSelected(TabLayout.Tab tab) {
if (tab.getPosition() == 0) {
bottombar.show();
} else if (tab.getPosition() == 1) {
bottombar.hide();
} else if (tab.getPosition() == 2) {
bottombar.hide();
} else if (tab.getPosition() == 3) {
bottombar.hide();
}
super.onTabSelected(tab);
}
#Override
public void onTabUnselected(TabLayout.Tab tab) {
super.onTabUnselected(tab);
}
});
}
this is Xml File
<LinearLayout
android:id="#+id/main_layout"
android:orientation="vertical"
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=".Activity.MainActivity">
<!-- our tablayout to display tabs -->
<android.support.design.widget.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:tabBackground="#drawable/shape"
android:textAlignment="center"
app:tabTextColor="#838587"
app:tabSelectedTextColor="#fafafa"
app:tabIndicatorColor="#fffeff"
app:tabIndicatorHeight="2dp"
app:tabMode="fixed"
app:tabTextAppearance="#style/MyTabLayoutTextAppearance"
android:fitsSystemWindows="true"
app:tabMaxWidth="250dp"
android:minWidth="150sp"
app:tabGravity="fill">
</android.support.design.widget.TabLayout>
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"/>
how to display full Tab Text??
You can do this through TabLayout
First you inflate your tab if not present, using
RelativeLayout tab = (RelativeLayout) LayoutInflater
.from(MainActivity.this)
.inflate(R.layout.tab_layout, null, false);
and then you create a new tab and set a custom view using
tab_layout.newTab().setCustomView(tab);
Note that if you already have a tab (let's say you're working with a ViewPager), you can get the tab at a specific index instead of creating a new one by calling
tab_layout.getTabAt(0).setCustomView(tab);
I have gone through lot of answers in SO and didn't get any proper solution to implement the Tabs in Toolbar without Viewpager.
I have gone through the SlidingTabsBasic example available in sdk samples, however, that didn't meet my requirements.
Please help me to implement the Tabs in Toolbar without Viewpager.
Please don't suggest me to use Viewpager, because my app should not support that as per the UI.
Now, we have android support design library to implement the Tabs using android.support.design.widget.TabLayout. Here is the snapshot of code. Hope this will help for someone.
public class MainActivity extends AppCompactActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout);
tabLayout.addTab(tabLayout.newTab().setText("Tab1"));
tabLayout.addTab(tabLayout.newTab().setText("Tab2"));
tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
#Override
public void onTabSelected(TabLayout.Tab tab) {
//load fragment or do whatever you want
Fragment fragment = new MyFragment();
getFragmentManager()
.beginTransaction().replace(R.id.containerLayout, fragment).commit();
}
#Override
public void onTabUnselected(TabLayout.Tab tab) {
}
#Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
}
}
activity_main.xml 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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<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/ThemeOverlay.AppCompat.Light" />
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="scrollable" />
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/containerLayout">
</LinearLayout>
Please help me to implement the Tabs in Toolbar without Viewpager.
The Toolbar class does not support any form of tabs, with or without a ViewPager.
If you want a tabbed UI, and you do not want to use ViewPager, you are welcome to use FragmentTabHost or create your own tab UI yourself.