How to create Tabs with icons and text TabLayout android - android

I am working on an android app and wants to create a layout like below.
I want to make the Tabs same as shown in this layout which will be scrolling horizontally. I want to set the icons of reactions and text on these tabs. The Icons are the server images which I need to show, but I have no idea how can I show server url images in the tabs as icons.
Is there any other way of making this layout except TabLayout or Sliding TabLayout with which I can get the same UI as in image?
Please help if anyone know how to do this.

ViewPager Adapter
public class ViewPagerAdapter extends FragmentPagerAdapter {
private static int NUM_ITEMS = 2;
private Context mContext;
private String[] tabText;
public ViewPagerAdapter(FragmentManager fragmentManager, Context context) {
super(fragmentManager);
this.mContext = context;
this.tabText = new String[]{
"First tab",
"second tab"
};
}
#Override
public Fragment getItem(int position) {
switch (position) {
case 0:
return new FirstFragment();
case 1:
return new SecondFragment();
default:
return null;
}
}
#Override
public int getCount() {
return NUM_ITEMS;
}
#Override
public CharSequence getPageTitle(int position) {
return tabText[position];
}
}
MainActivity.Java
private int[] imageResId = {// icon resource };
mTabLayout = (TabLayout) view.findViewById(R.id.tl_viewer);
mViewpager = (ViewPager) view.findViewById(R.id.vp_viewer);
mTabLayout.setupWithViewPager(mViewpager);
//Method to set up tab layout icon
private void setUpTabIcon() {
for (int i = 0; i < mTabLayout.getTabCount(); i++) {
mTabLayout.getTabAt(i).setIcon(imageResId[i]);
}
}
Tab count and Tab text picked from ViewPager Adapter. and icon picked from setTabIcon method

You will need to have an custom layout for your tabs.
See this link How to set icon next to text in tablayout
And to answer your another query of displaying the server images, you can use a library for that purpose like http://square.github.io/picasso/

Please use Below link of Android hive. Android Hive Explain very well for working with TabLayout -
http://www.androidhive.info/2015/09/android-material-design-working-with-tabs/

Related

Two fragments in one page of ViewPager

I'm searching solution of my problem. I have to make app using 3 fragments - just like on the picture. Picture of layout
I'm using ViewPager to have swipeable tabs which are required. But there is a problem - i can't set two fragments into one page of ViewPager.
public class ProgrammingLanguageInfo extends FragmentActivity{
private String languageName;
private int languageImageID;
private String languageDescription;
private String SHARED_PREFERENCES;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_view_pager);
languageName = getIntent().getStringExtra("LANGUAGE_NAME");
languageImageID = getIntent().getIntExtra("LANGUAGE_IMAGE", 0);
languageDescription = getIntent().getStringExtra("LANGUAGE_DESCRIPTION");
SHARED_PREFERENCES = getIntent().getStringExtra("LANGUAGE_SHARED_PREFERENCES");
ViewPager pager = (ViewPager) findViewById(R.id.viewPager);
pager.setAdapter(new MyPagerAdapter(getSupportFragmentManager()));
}
private class MyPagerAdapter extends FragmentPagerAdapter {
public MyPagerAdapter(FragmentManager fm) {
super(fm);
}
#Override
public Fragment getItem(int pos) {
if(pos==0){
return FirstFragment.newInstance(languageName, languageImageID, languageDescription, SHARED_PREFERENCES);
}
else{
return SecondFragment.newInstance("aaa");
}
}
#Override
public int getCount() {
return 2;
}
}
The problem comes in function getItem(int pos). On page number 0 everything is ok - there is one fragment to display. But how to display two fragments on next page of ViewPager? I can't return two Fragments from this function.
Check this tutorial. Hoe this will help!
https://tausiq.wordpress.com/2014/06/06/android-multiple-fragments-stack-in-each-viewpager-tab/
as a sollution you need to make a fragment that contains the 2 fragments as a child fragment instead of getSupportedFragment call
getChildFragmentManager()
and the other parts of creating and showing a fragment
make a xml that should use two containers for the fragments to use
and finaly return the above fragment as 2secon frag

How to delete a Tab and its associated fragment from TabLayout & FragmentStatePagerAdapter

I am trying to create a program with TabLayout and an option menu which when selected can add or delete the tab along with the fragment. I can delete the tab but I am not able to understand what else needs to be done because I have to delete the fragments that the tab holds, more over I may also have to rearrange the position of the fragments which I just can't seem to figure out. Could you please help me with this ?
under mainAcitivity this is how I add tabs
tabLayout = (TabLayout) findViewById(R.id.tab_layout);
tab1= tabLayout.newTab().setText("TAB 1");
tabLayout.addTab(tab1);
tab2 = tabLayout.newTab().setText("TAB 2");
tabLayout.addTab(tabKantipur);
This is the FragmentstatePagerAdapter
public class TabPagerAdapter extends FragmentStatePagerAdapter {
int tabCount;
public TabPagerAdapter(FragmentManager fm, int numberOfTabs) {
super(fm);
this.tabCount = numberOfTabs;
}
#Override
public int getItemPosition(Object object) {
return super.getItemPosition(object);
}
#Override
public Fragment getItem(int position) {
switch (position) {
case 0:
return NewsFragment.newInstance("data for fragment 1");
case 1:
return NewsFragment.newInstance("data for fragment 2");
default:
return null;
}
}
#Override
public int getCount() {
return tabCount;
}
}
Basically here NewsFragment is the fragment whose new instance is used in the tabs. Under onActivityResult I am getting the data that has been requested from the options Menu to add or delete fragmetns
mpagerAdapter = new TabPagerAdapter(getSupportFragmentManager(), tabLayout.getTabCount());
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
removedTab = ..data received from ooption menu
// here I want to remove the Tab & the fragments (tab1 & its fragment)
if (removeTab == "tab1") {
tabLayout.removeTab(tab1);
mpagerAdapter.notifyDataSetChanged();
}
}
As I do this only the first tab gets removed I would like to know how to remove the associated fragment too.
You don't have to explicitly delete the fragment, you can remove the fragment.
You can remove the tab and do notifyDataSetChanged on the viewPagerAdapter instance.It will take care of removing the fragment.
I had asked a similar question using fragmentarray for which i got it to work . this is the link, Issue: Logic to find the position of a fragment in a fragment arraylist?

How to move to a specific tab from an activity in android

I am working on the following screen named FriendListActivity:
As you can see here , I am 3 tabs named CHAT,GROUPS and CONTACTS .Each tab is displaying some contents.For example Groups Tab is displaying the number of groups.On clicking each Group ,Group Chat Screen is opened .Now In Group Chat screen ,i have a toolbar .Consider the following code:
Toolbar toolbarGroupChat = (Toolbar) findViewById(R.id.toolbarGroupChat);
setSupportActionBar(toolbarGroupChat);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setTitle(upperCase(group_name));
//ViewPager
viewPager = (ViewPager) findViewById(R.id.viewPager);
//Initializing PagerAdapter
PagerAdapter pagerAdapter = new PagerAdapter(getSupportFragmentManager(), tabLayout.getTabCount());
viewPager.setAdapter(pagerAdapter);
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) {
}
});
PagerAdapter.java
public class PagerAdapter extends FragmentStatePagerAdapter {
private int noOfTabs;
public PagerAdapter(FragmentManager fm, int noOfTabs) {
super(fm);
this.noOfTabs = noOfTabs;
}
#Override
public Fragment getItem(int position) {
switch (position) {
case 0:
ChatFragment chatFragment = new ChatFragment();
return chatFragment;
case 1:
GroupsFragment groupsFragment = new GroupsFragment();
return groupsFragment;
case 2:
ContactsFragment contactsFragment = new ContactsFragment();
return contactsFragment;
default:
return null;
}
}
#Override
public int getCount() {
return noOfTabs;
}
}
On clicking the arrow on the toolbar ,my application is moved to the screen containing three tabs.My problem is current selected tab is always CHAT tab ,when i am moving from an activity to FriendListActivity .When i am moving from Group Chat Screen to FriendListActivity,the current selected tab should be GROUPS Tab.
Solved.
Edited Working Code:
When we are moving from an Activity to a specific tab ,We need to pass the TAb number using intents from the Activity.Use the following code for handling click on the back button of the Toolbar .Override the getSupportParentActivityIntent() method:
public Intent getSupportParentActivityIntent() {
final Bundle bundle = new Bundle();
final Intent intent = new Intent(this, FriendsListActivity.class);
bundle.putString("TabNumber", tab_number);
intent.putExtras(bundle);
return intent;
}
Now inside the activity containing 3 tabs,use the following code:
final Intent intent = getIntent();
if (intent.hasExtra("TabNumber")) {
String tab = intent.getExtras().getString("TabNumber");
Log.e("TabNumberFriendList",tab);
switchToTab(tab);
}
public void switchToTab(String tab){
if(tab.equals("0")){
viewPager.setCurrentItem(0);
}else if(tab.equals("1")){
viewPager.setCurrentItem(1);
}else if(tab.equals("2")){
viewPager.setCurrentItem(2);
}
}
Use the setCurrentItem(int position) method of your ViewPager object to move to a specific tab.
You might have created a tabHost, so when it is done making, you should use -
tabHost.setCurrentTab(1);
and you can use same code with different parameters whenever you want to set another tab.
Ref
From the screenshot you must be using Tablayout, so from there you can use these two in build functions.
tabLayout.getSelectedTabPosition();
Save this tab in some variable and then onCreate set that integer value in this function..
tabLayout.getTabAt(<Your last selected tab>);
Hope this helps..:)
You can also use this piece of code:
Add public static TabToOpen = 1 in the group chat activity(say group_chat_activity).
then use setCurrentTab(group_chat_activity.TabToOpen) in onResume() of activity where your ViewPager object is to move to a specific tab. This is particularly useful when you need a button to access a particular tab in sliding activity.

PageAdapter and Fragments

I am trying to set up sliding tabs on top of an activity. I want this result :
I'm following the explanations of this example : http://developer.android.com/samples/SlidingTabsBasic/project.html
And I'm also looking at this video : https://www.youtube.com/watch?v=tRg_eDfQ8fk
I'm doing so because of this post : Action bar navigation modes are deprecated in Android L
I have 3 fragments for each of my tab. Each inflates a different layout and do different things. Now I need to connect them to my PageAdapter. I've already used an adaptor for a ListView. I used getView with the position to do my work
However with this PageAdapter I'm not sure what I need to proceed. Should I use this method to create my fragment :
public Object instantiateItem(ViewGroup container, int position) {
and if so, how should it be done ?
Thank you.
You must implement a FragmentPagerAdapter like this:
public class TabsPagerAdapter extends FragmentPagerAdapter {
public TabsPagerAdapter(FragmentManager fm) {
super(fm);
}
#Override
public Fragment getItem(int index) {
switch (index) {
case 0:
return new FirstFragment();
case 1:
return new TwoFragment();
case 2:
return new ThreeFragment();
}
return null;
}
#Override
public int getCount() {
// get item count - equal to number of tabs
return 3;
}
}
and set it to viewpager adapter:
mAdapter = new TabsPagerAdapter(getSupportFragmentManager());
viewPager.setAdapter(mAdapter);

Switching tabs not working on click of tabs with PagerSlidingTabStrips

I've integrated PagerSlidingTabStrips in my application which runs as expected on Swipe of tabs.
But selecting tabs on PagerSlidingTabStrips doesn't switch to that fragment which works perfectly on swiping between tabs.
FragmentManager fm = getSupportFragmentManager();
mPager = (ViewPager) findViewById(R.id.pager);
ViewPagerAdapter viewpageradapter = new ViewPagerAdapter(fm);
mPager.setAdapter(viewpageradapter);
pagerSlidingTabStrp = (PagerSlidingTabStrip) findViewById(R.id.pager_sliding_tab_strip);
pagerSlidingTabStrp.setShouldExpand(true);
pagerSlidingTabStrp.setViewPager(mPager);
pagerSlidingTabStrp.setOnPageChangeListener(ViewPagerListener);
// Capture ViewPager page swipes
ViewPager.SimpleOnPageChangeListener ViewPagerListener = new ViewPager.SimpleOnPageChangeListener() {
#Override
public void onPageSelected(int position) {
super.onPageSelected(position);
switch(position)
{
case 0:
setMotherActionBarTitle(getString(R.string.str_all_contacts_fragment));
break;
case 1:
setMotherActionBarTitle(getString(R.string.str_group_contacts_fragment));
break;
case 2:
setMotherActionBarTitle(getString(R.string.str_call_logs_fragment));
break;
}
}
};
ViewPagerAdapter
public class ViewPagerAdapter extends FragmentPagerAdapter implements IconTabProvider {
final int PAGE_COUNT = 3;
private final int[] ICONS = { R.drawable.tab_icon_zname_contact_selector, R.drawable.tab_icon_zname_friends_selector,
R.drawable.tab_icon_zname_call_log_selector };
public ViewPagerAdapter(FragmentManager fm) {
super(fm);
}
#Override
public Fragment getItem(int item) {
switch (item) {
case 0:
ContactsFragment homeFragment = new ContactsFragment();
return homeFragment;
case 1:
GroupsFragment groupsFragment = new GroupsFragment();
return groupsFragment;
case 2:
CallLogsFragment callLogsFragment = new CallLogsFragment();
return callLogsFragment;
}
return null;
}
#Override
public int getCount() {
return PAGE_COUNT;
}
#Override
public int getPageIconResId(int position) {
return ICONS[position];
}
}
How to make selecting tabs works with PagerSlidingTabStrips? Morever PagerSlidingTabStrips tabs are not even clickabe.
Did I missed out to implement something? Or to add pagerSlidingTabStrips.setClickable(true)? or something?
Again the selector of PagerSlidingTabStrips tabs not selected proper drawable with selector. What could be possible the reason for that?
Here's a picture of it.
I've found out why clicking tab was not working with PagerSlidingTabStrips after I've looked out for other options with sliding tabs functionality like SlidingTabsLayout which also was not able to click tabs.
Found out problem was with my xml layout which covers whole as ViewPager which doesn't make tabs clickable of eitherPagerSlidingTabStrips or SlidingTabsLayout works.
<com.netdoers.zname.utils.PagerSlidingTabStrip
android:id="#+id/pager_sliding_tab_strip"
android:layout_width="fill_parent"
android:layout_height="45dip"
android:background="#android:color/white"
app:pstsDividerColor="#FFFFA500"
app:pstsIndicatorColor="#FFFFA500"
app:pstsTabPaddingLeftRight="14dip"
app:pstsUnderlineColor="#FFFFA500" />
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="45dp" />
Leaving same height in Viewpager as of PagerSlidingTabStips from top where PagerSlidingTabStrips rendered solved my issue.
Indeed the issue is in XML. The issue probably due to RelativeLayout is used om the XML. Consider using LinearLayout will ensure there's no overlap between views.

Categories

Resources