I have used normal tabLayout with viewpager. I am using custom tabs for the tabLayout. But some strange behavior happens in tabs.
As you can see there is space between first two tabs but there is no space between second and third tabs.
Note : In third tab I have set the visibility of arrow imageview to gone. That is not an issue.
My tablayout screen layout file :
<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:tabGravity="center"
app:tabIndicatorHeight="3dp"
app:tabPaddingStart="0dp"
app:tabPaddingEnd="0dp"
android:layout_marginTop="#dimen/margin_15"
app:tabIndicatorColor="#color/colorTransperent"
app:tabMode="fixed"
app:tabTextAppearance="?android:attr/textAppearanceMedium" />
<com.smartcompliant.views.CustomPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
Custom tabs :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="horizontal">
<TextView
android:id="#+id/tvTabTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:text="#tools:sample/lorem"
android:textSize="#dimen/font_14"/>
<ImageView
android:id="#+id/ivArrow"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="#drawable/ic_right"/>
</LinearLayout>
In java file inflating tabs like :
View v = LayoutInflater.from(getContext()).inflate(R.layout.cust_tabs, null);
tabForm = (TextView) v.findViewById(R.id.tvTabTitle);
tabForm.setText(getResources().getString(R.string.form));
tabForm.setTextColor(getContext().getResources().getColor(R.color.colorGreen));
tabLayout.getTabAt(0).setCustomView(v);
So basically two issues :
Space between tabs to be equal.
In some small device screen tab gravity center is not working.
Let me know if any code required. Thank you :)
Try this
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabGravity="center"
app:tabIndicatorHeight="3dp"
app:tabPaddingStart="0dp"
app:tabPaddingEnd="0dp"
android:layout_marginTop="15dp"
app:tabIndicatorColor="#android:color/transparent"
app:tabMode="scrollable"
app:tabTextAppearance="?android:attr/textAppearanceMedium" />
custom tab layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal">
<TextView
android:id="#+id/tvTabTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="14sp"
tools:text="#tools:sample/lorem" />
<ImageView
android:id="#+id/ivArrow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_right" />
</LinearLayout>
set tab icon
public void setTab(){
View v = LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
TextView tabForm = (TextView) v.findViewById(R.id.tvTabTitle);
tabForm.setText("Fill details");
tabLayout.getTabAt(0).setCustomView(v);
View v2 = LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
TextView tabForm2 = (TextView) v2.findViewById(R.id.tvTabTitle);
tabForm2.setText("Select photo");
tabLayout.getTabAt(1).setCustomView(v2);
View v3 = LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
TextView tabForm3 = (TextView) v3.findViewById(R.id.tvTabTitle);
tabForm3.setText("submit");
ImageView imageView=v3.findViewById(R.id.ivArrow);
imageView.setVisibility(View.INVISIBLE);
tabLayout.getTabAt(2).setCustomView(v3);
}
EDITED For fixed tabMode to work, you need to make imageview invisible and not gone.
GONE will not take any space in you UI hierarchy, where are INVISIBLE will still be there in UI hierarchy but not visible. In your original implementation can you please replace GONE => INVISIBLE based on your logic
MainActivity.java
package in.silentsudo.shoppingcardnavigation;
import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;
import android.support.v4.content.ContextCompat;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends AppCompatActivity implements TabLayout.OnTabSelectedListener {
private ViewPager viewPager;
private TabLayout tabLayout;
private String[] titles = new String[]{
"File details", "Select Photo", "Submit"
};
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
tabLayout = findViewById(R.id.tab_layout);
viewPager = findViewById(R.id.view_pager);
final FormDetailsViewAdapter adapter = new FormDetailsViewAdapter(getSupportFragmentManager());
adapter.addPage(new PlaceHolderFragment());
adapter.addPage(new PlaceHolderFragment());
adapter.addPage(new PlaceHolderFragment());
viewPager.setAdapter(adapter);
tabLayout.addTab(tabLayout.newTab());
tabLayout.addTab(tabLayout.newTab());
tabLayout.addTab(tabLayout.newTab());
tabLayout.setupWithViewPager(viewPager);
final LayoutInflater inflater = LayoutInflater.from(this);
for (int i = 0; i < 3; i++) {
View v = inflater.inflate(R.layout.item_tab, tabLayout, false);
TextView txtView = (TextView) v.findViewById(R.id.txt);
ImageView img = (ImageView) v.findViewById(R.id.img);
txtView.setText(titles[i]);
txtView.setTextColor(ContextCompat.getColor(this, R.color.tab_color_unselected));
img.setImageResource(R.drawable.ic_right_unselected);
if(i == 2) {
img.setVisibility(View.INVISIBLE);
}
tabLayout.getTabAt(i).setCustomView(v);
}
tabLayout.getTabAt(0).select();
viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
tabLayout.addOnTabSelectedListener(this);
tabLayout.post(new Runnable() {
#Override
public void run() {
onTabSelected(tabLayout.getTabAt(0));
}
});
}
#Override
public void onTabSelected(TabLayout.Tab tab) {
System.out.println("Tab selected : " + tab.getPosition());
View customView = tab.getCustomView();
TextView txtView = (TextView) customView.findViewById(R.id.txt);
ImageView img = (ImageView) customView.findViewById(R.id.img);
txtView.setTextColor(ContextCompat.getColor(this, R.color.tab_color_selected));
img.setImageResource(R.drawable.ic_right_selected);
}
#Override
public void onTabUnselected(TabLayout.Tab tab) {
System.out.println("Tab unselected : " + tab.getPosition());
View customView = tab.getCustomView();
TextView txtView = (TextView) customView.findViewById(R.id.txt);
ImageView img = (ImageView) customView.findViewById(R.id.img);
txtView.setTextColor(ContextCompat.getColor(this, R.color.tab_color_unselected));
img.setImageResource(R.drawable.ic_right_unselected);
}
#Override
public void onTabReselected(TabLayout.Tab tab) {
System.out.println("Tab reselected : " + tab.getPosition());
}
}
class FormDetailsViewAdapter extends FragmentStatePagerAdapter {
private List<Fragment> list;
public FormDetailsViewAdapter(FragmentManager fm) {
super(fm);
list = new ArrayList<>();
}
public void addPage(Fragment fragment) {
list.add(fragment);
}
#Override
public Fragment getItem(int position) {
return list.get(position);
}
#Override
public int getCount() {
return list.size();
}
#Override
public CharSequence getPageTitle(int position) {
return "Fragment " + position;
}
}
activity_main.xml
<?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="in.silentsudo.shoppingcardnavigation.MainActivity">
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_alignParentBottom="true"
android:background="#ffffff"
app:tabGravity="fill"
app:tabIndicatorColor="#android:color/transparent"
app:tabMode="fixed" />
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorAccent" />
</LinearLayout>
item_tab.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:padding="4dp"
android:orientation="horizontal">
<TextView
android:id="#+id/txt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="10sp"
android:text="This is text" />
<ImageView
android:id="#+id/img"
android:layout_width="18dp"
android:layout_height="18dp"
android:layout_marginStart="8dp"
android:src="#drawable/ic_right_selected" />
</LinearLayout>
PlaceHolderFragment.java
public class PlaceHolderFragment extends Fragment {
#Nullable
#Override
public View onCreateView(LayoutInflater inflater, #Nullable ViewGroup container, #Nullable Bundle savedInstanceState) {
return inflater.inflate(R.layout.layout_fragment_place_holder, container, false);
}
}
fragment_place_holder.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="This is place holder fragment" />
</RelativeLayout>
ic_right_selected.xml
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android" android:height="18dp" android:viewportHeight="24.0" android:viewportWidth="24.0" android:width="18dp">
<path android:fillColor="#1DE9B6" android:pathData="M8.59,16.34l4.58,-4.59 -4.58,-4.59L10,5.75l6,6 -6,6z"/>
</vector>
ic_right_unselected.xml
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="18dp"
android:height="18dp"
android:viewportHeight="24.0"
android:viewportWidth="24.0">
<path
android:fillColor="#BDBDBD"
android:pathData="M8.59,16.34l4.58,-4.59 -4.58,-4.59L10,5.75l6,6 -6,6z" />
</vector>
colors.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="colorPrimary">#3F51B5</color>
<color name="colorPrimaryDark">#303F9F</color>
<color name="colorAccent">#FF4081</color>
<color name="tab_color_selected">#1DE9B6</color>
<color name="tab_color_unselected">#BDBDBD</color>
</resources>
Related
I am new to android.I created a tablayout and a viewpager with two fragments.I have elements/items in my created Detail Fragment and a TextView in my measure fragment but when i run the code on my mobile,nothing is shown in my fragment.I haven't java code of my fragment.Everything works fine on the tablayout..i can switch between the tab but nothing is being shown in my fragments...why is that happening?
My Activity:
<?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="match_parent"
tools:context="com.example.update">
<android.support.design.widget.AppBarLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
>
<!--<include android:layout_height="wrap_content"
android:layout_width="match_parent"
layout="#layout/toolbar_layout"/>-->
<include
android:id="#+id/update_screen_toolbar"
layout="#layout/toolbar_layout"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:id="#+id/name_age_gender"
android:background="#d3d3d3"
android:layout_below="#+id/update_screen_toolbar"/>
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/tabLayout"
app:tabMode="fixed"
app:tabGravity="fill">
</android.support.design.widget.TabLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/viewPager">
</android.support.v4.view.ViewPager>
</RelativeLayout>
JAVA code for activity
package com.example.update;
import android.content.Intent;
import android.support.design.widget.TabLayout;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.TextView;
import android.widget.Toast;
public class UpdateDetail extends AppCompatActivity {
TabLayout tabLayout;
ViewPager viewPager;
ViewPagerAdapter viewPagerAdapter;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_detail);
tabLayout=(TabLayout)findViewById(R.id.tabLayout);
viewPager=(ViewPager)findViewById(R.id.viewPager);
viewPagerAdapter=new ViewPagerAdapter(getSupportFragmentManager());
viewPagerAdapter.addFragments(new DetailFragment()," DETAIL");
viewPagerAdapter.addFragments(new MeasureFragment(),"MEASURE");
viewPager.setAdapter(viewPagerAdapter);
tabLayout.setupWithViewPager(viewPager);
}
}
code for DetailFragment:
<FrameLayout 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="com.example.DetailFragment">
<!-- TODO: Update blank fragment layout -->
<Button
android:id="#+id/expandableButton4"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#066da1"
android:drawableRight="#android:drawable/arrow_down_float"
android:onClick="expandableButton4"
android:paddingRight="10dp"
android:text="Expand/Collapse Android Example"
android:textColor="#fff" />
<com.github.aakira.expandablelayout.ExpandableRelativeLayout
android:id="#+id/expandableLayout4"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/expandableButton4"
android:background="#90066da1"
android:padding="16dp"
app:ael_duration="400"
app:ael_expanded="false"
app:ael_interpolator="bounce"
app:ael_orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Implements the expand and collapse by sliding logic for a top or a bottom view in a two children view or layout or any widgets composition.
Implements the expand and collapse by sliding logic for a top or a bottom view in a two children view or layout or any widgets composition." />
</com.github.aakira.expandablelayout.ExpandableRelativeLayout>
</FrameLayout>
Try this one:
public class FriendshipParentFragment extends Fragment {
#BindView(R.id.tabs)
TabLayout tabs;
#BindView(R.id.viewpager)
ViewPager viewPager;
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_friendship_parent, container, false);
ButterKnife.bind(this, view);
initTabs();
return view;
}
private void initTabs(){
viewPager.setAdapter(new TabsAdapter(getChildFragmentManager()));
tabs.setupWithViewPager(viewPager);
tabs.getTabAt(0).setText("Tab1");
tabs.getTabAt(1).setText("Tab2");
tabs.setTabTextColors(ContextCompat.getColor(getActivity(), R.color.colorAccent), ContextCompat.getColor(getActivity(), R.color.colorBottomNavigationPrimary));
tabs.setSelectedTabIndicatorColor(ContextCompat.getColor(getActivity(), R.color.white));
tabs.setSelectedTabIndicatorHeight(4);
}
public class TabsAdapter extends FragmentPagerAdapter {
public TabsAdapter(FragmentManager fm) {
super(fm);
}
#Override
public Fragment getItem(int position) {
switch (position){
case 0:
return new FollowersFragment();
case 1:
return new FollowFragment();
}
return null;
}
#Override
public int getCount() {
return 2;
}
}
}
xml file
<LinearLayout 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:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="owo.owocar.driver.OrdersParentFragment">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="48dp"
android:elevation="4dp"
app:tabGravity="fill" />
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:id="#+id/viewpager"
android:layout_height="match_parent"></android.support.v4.view.ViewPager>
I want to make transparent for ViewPager, but I can't find any way to get it (It always has WHITE color, not transparent)
My layout: main_activity.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/wallpaper">
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:background="#00ffffff"
android:layout_width="match_parent"
android:layout_height="match_parent" >
</android.support.v4.view.ViewPager>
</LinearLayout>
The layout for first fragment:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:background="#00ffffff"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="AAAAAAAAAAAAAAAA"
android:id="#+id/textView"
android:layout_gravity="center_horizontal"/>
</LinearLayout>
And the layout for second fragment:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:background="#00ffffff"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="#+id/button"
android:layout_gravity="center_horizontal"/>
</LinearLayout>
I already set transparent for both background of ViewPager and layouts for fragments. But it's always WHITE.
So, Is it possible to set transparent for ViewPager? Can you explain it for me (if any). Any suggestion will be appreciate. Thank you.
EDIT:
I used the default theme for activity:
Screenshot:
Awais Soomro answer didn't work, so I've come up with this:
Fragment.java
#Override
public void onStart() {
super.onStart();
getView().setBackgroundColor(Color.TRANSPARENT);
}
or even...
#Override
public void onViewCreated(final View view, #Nullable Bundle savedInstanceState) {
super.onViewCreated(view, savedInstanceState);
view.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
#Override
public void onGlobalLayout() {
view.getViewTreeObserver().removeOnGlobalLayoutListener(this);
view.setBackgroundColor(Color.TRANSPARENT);
}
});
Here's the code to this:
MyFragment.java:
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class MyFragment extends Fragment {
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
return inflater.inflate(R.layout.my_fragment, container, false);
}
}
my_fragment.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:background="#00ffffff"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="AAAAAAAAAAAAAAAA"
android:textColor="#69f0ae"
android:id="#+id/textView"
android:layout_gravity="center_horizontal"/>
</LinearLayout>
Main.java:
FragmentPagerAdapter mPagerAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
#Override
public Fragment getItem(int position) {
return new MyFragment();
}
#Override
public int getCount() {
return 1;
}
};
ViewPager mViewPager = (ViewPager) findViewById(R.id.view_pager);
mViewPager.setAdapter(mPagerAdapter);
main_activity.xml:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/wallpaper">
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:background="#00000000"
android:layout_width="match_parent"
android:layout_height="match_parent" >
</android.support.v4.view.ViewPager>
</android.support.constraint.ConstraintLayout>
The problem is probably not the background color of the ViewPager. It's probably the view that's inflated by the adapter that ViewPager is using. Change the background color of that view.
How can I add images into tab ? Currently I'm able to move the tab to bottom but have no idea on how to change the LL Tab1, LL Tab2, LL Tab3 to icon.Am I on the right path ? Any help would be greatly appreciated.
xml code
<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/tabhost"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:padding="5dp" >
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="5dp"
android:layout_weight="1" >
<LinearLayout
android:id="#+id/ll_tab1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" />
<LinearLayout
android:id="#+id/ll_tab2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" />
<LinearLayout
android:id="#+id/ll_tab3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" />
</FrameLayout>
<TabWidget
android:id="#android:id/tabs"
android:background="#color/light_gray"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0"/>
</LinearLayout>
</TabHost>
Anyone can help? Thanks a lot !
Try using TabLayout from Android Design Support Library to meet material design guidelines for tabs.
The Design library’s TabLayout implements both fixed tabs, where the
view’s width is divided equally between all of the tabs, as well as
scrollable tabs, where the tabs are not a uniform size and can scroll
horizontally.
To implement TabLayout check this guide and how to add the icon for swipeable tabs to set icons to tabs using setIcon.
final int[] ICONS = new int[]{
R.drawable.ic_action_document,
R.drawable.ic_action_tick,
R.drawable.ic_action_trash};
....
TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs);
tabLayout.setupWithViewPager(mViewPager);
tabLayout.getTabAt(0).setIcon(ICONS[0]);
tabLayout.getTabAt(1).setIcon(ICONS[1]);
tabLayout.getTabAt(2).setIcon(ICONS[2]);
To set the tabs at the bottom in a TabLayout check - How can I set tabs at the bottom and also hide top actionbar? where you put the TabLayout in a relativeLayout and align it to parent bottom:
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
app:tabMode="fixed"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:elevation="6dp"
app:tabTextColor="#d3d3d3"
app:tabSelectedTextColor="#ffffff"
app:tabIndicatorColor="#ff00ff"
android:minHeight="?attr/actionBarSize"
android:layout_alignParentBottom="true"
/>
Although you can put your tab layout at the bottom, try not to use bottom tab bars if possible as per the Pure Android guide.
Other platforms use the bottom tab bar to switch between the app's
views. Per platform convention, Android's tabs for view control are
shown in action bars at the top of the screen instead.
import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends AppCompatActivity {
private Toolbar toolbar;
private TabLayout tabLayout;
private ViewPager viewPager;
private int[] tabIcons = {
R.drawable.ic_tab_favourite,
R.drawable.ic_tab_call,
R.drawable.ic_tab_contacts
};
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
viewPager = (ViewPager) findViewById(R.id.viewpager);
setupViewPager(viewPager);
tabLayout = (TabLayout) findViewById(R.id.tabs);
tabLayout.setupWithViewPager(viewPager);
setupTabIcons();
}
private void setupTabIcons() {
tabLayout.getTabAt(0).setIcon(tabIcons[0]);
tabLayout.getTabAt(1).setIcon(tabIcons[1]);
tabLayout.getTabAt(2).setIcon(tabIcons[2]);
}
private void setupViewPager(ViewPager viewPager) {
ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
adapter.addFragment(new OneFragment(), "ONE");
adapter.addFragment(new TwoFragment(), "TWO");
adapter.addFragment(new ThreeFragment(), "THREE");
viewPager.setAdapter(adapter);
}
class ViewPagerAdapter extends FragmentPagerAdapter {
private final List<Fragment> mFragmentList = new ArrayList<>();
private final List<String> mFragmentTitleList = new ArrayList<>();
public ViewPagerAdapter(FragmentManager manager) {
super(manager);
}
#Override
public Fragment getItem(int position) {
return mFragmentList.get(position);
}
#Override
public int getCount() {
return mFragmentList.size();
}
public void addFragment(Fragment fragment, String title) {
mFragmentList.add(fragment);
mFragmentTitleList.add(title);
}
#Override
public CharSequence getPageTitle(int position) {
return mFragmentTitleList.get(position);
}
}
}
Layout for Tab
activity_main.xml
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<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/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
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>
Fragments(Class) used in this tab
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class OneFragment extends Fragment{
public OneFragment() {
// Required empty public constructor
}
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
}
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
return inflater.inflate(R.layout.fragment_one, container, false);
}
}
Xml file
fragment_one.xml
<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=".fragments.OneFragment">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/one"
android:textSize="40dp"
android:textStyle="bold"
android:layout_centerInParent="true"/>
</RelativeLayout>
TwoFragment.java
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class TwoFragment extends Fragment{
public TwoFragment() {
// Required empty public constructor
}
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
}
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
return inflater.inflate(R.layout.fragment_two, container, false);
}
}
fragment_two.xml
<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=".fragments.TwoFragment">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/one"
android:textSize="40dp"
android:textStyle="bold"
android:layout_centerInParent="true"/>
</RelativeLayout>
You can create third fragment class, and layout as i have done above.
Run it. Hope this would work
Try this,
puth this activity_main.xml and set the custom height to TabLayout.
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="#dimen/custom_tab_layout_height"
app:tabMode="fixed"
app:tabGravity="fill"/>
Create an xml layout named custom_tab.xml under res ⇒ layout. In this layout we have defined the custom view for the tab.
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/tab"
android:textColor="#color/colorAccent"
android:textSize="#dimen/tab_label"
android:fontFamily="#string/font_fontFamily_medium"/>
Open MainActivity.java and modify the code as below. Here if you observe setupTabIcons() method, I have rendered custom_tab.xml layout in each tab using below lines of code.
TextView tabOne = (TextView) LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
tabOne.setText("ONE");
tabOne.setCompoundDrawablesWithIntrinsicBounds(0, R.drawable.ic_tab_favourite, 0, 0);
tabLayout.getTabAt(0).setCustomView(tabOne);
TextView tabTwo = (TextView) LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
tabTwo.setText("TWO");
tabTwo.setCompoundDrawablesWithIntrinsicBounds(0, R.drawable.ic_tab_call, 0, 0);
tabLayout.getTabAt(1).setCustomView(tabTwo);
TextView tabThree = (TextView) LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
tabThree.setText("THREE");
tabThree.setCompoundDrawablesWithIntrinsicBounds(0, R.drawable.ic_tab_contacts, 0, 0);
tabLayout.getTabAt(2).setCustomView(tabThree);
Try this,Really interesting.Must be the solution
http://www.androidhive.info/2015/09/android-material-design-working-with-tabs/
Well you can either place an ImageView in your Linearlayout that is each tab, or you can set an drawable as a background for your LinearLayout. If your image will act a background then you will obviously want to add that image as a background and not add an ImageView as a child to your LinearLayout. If it is going to be content though, not a background, you should add an ImageView to each LinearLayout like you would add a child of any other type to a parent View.
Here I'm implementing TabLayout with viewPager in a Fragment using library of com.astuetz.PagerSlidingTabStrip. Everything is fine but now I want to add custom Tab and some more functionalities.
test_tab_fragment.xml
<?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">
<com.astuetz.PagerSlidingTabStrip
android:id="#+id/mainTabLayout"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#111"
app:pstsDividerColor="#color/text_color"
app:pstsIndicatorColor="#color/green"
app:pstsIndicatorHeight="2dp"
app:pstsShouldExpand="true"
app:pstsTextAllCaps="true"
app:tabGravity="fill"
app:tabMode="fixed" />
<com.cws.widget.NonSiwpablePager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
TestTabFragment.java
public class TestTabFragment extends Fragment {
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.test_tab_fragment, container, false);
PagerSlidingTabStrip myTabLayout = (PagerSlidingTabStrip) view.findViewById(R.id.mainTabLayout);
NonSiwpablePager pager = (NonSiwpablePager) view.findViewById(R.id.pager);
ViewPagerAdapter mAdapter = getViewPagerAdapter();
pager.setAdapter(mAdapter);
pager.setOffscreenPageLimit(4);
myTabLayout.setViewPager(pager);
for (int i = 0; i < mAdapter.getCount(); i++) {
View tabView = mAdapter.getCustomeView(getActivity(), i);;
tabView = LayoutInflater.from(getContext()).inflate(R.layout.custom_tab_view, myTabLayout,
false);
String title_arr[] = {"ADVISORY", "CALENDER", "TOP ADVISORS", "EXPERT VIEW"};
int[] drawables = new int[]{R.drawable.advisory_normal, R.drawable.calender_normal, R.drawable.topadvisor_normal, R.drawable.expertview_normal};
TextView mTextView = (TextView) tabView.findViewById(R.id.textView);
ImageView mImageView = (ImageView) tabView.findViewById(R.id.imageView2);
mImageView.setImageResource(drawables[i]);
mTextView.setText(title_arr[i]);
myTabLayout.addView(tabView);
}
return view;
}
And custom_tab_view.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:paddingBottom="#dimen/et_topPadding"
android:paddingTop="#dimen/et_topPadding">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="3dp" />
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:textColor="#color/text_color"
android:textSize="#dimen/custom_tab_tSize" />
</LinearLayout>
</LinearLayout>
If anyone has done it so please help me to solve it.
I was working with and slider tab, insaid the main view I have 2 tabs and insaid them, I have a XML to set the UI. Everything is perfect, I get my slide tabs and I can run the app. The problem is when I try to get a button from my fragments. I was reading about LayoutInflater, but I couldn´t solved.
Please, I think I don´t undestand very well how the fragment works and I would like a little of help about this.
This is my main activity (onCreate):
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
facebookLogin = new FacebookLogin(getApplicationContext());
setContentView(R.layout.register_tabs);
toolBar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolBar);
adapter = new ViewPagerAdapter(getSupportFragmentManager(),Titles,Numboftabs);
pager = (ViewPager) findViewById(R.id.pager);
pager.setAdapter(adapter);
tabs = (SlidingTabLayout) findViewById(R.id.tabs);
tabs.setDistributeEvenly(true);
tabs.setCustomTabColorizer(new SlidingTabLayout.TabColorizer() {
#Override
public int getIndicatorColor(int position) {
return getResources().getColor(R.color.colorPrimary);
}
});
tabs.setViewPager(pager);
}
I my main XML:
<LinearLayout
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"
android:orientation="vertical"
tools:context=".MainActivity">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar"
/>
<com.cheescake.clasi.all.SlidingTabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="2dp"/>
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:layout_weight="1"
/>
</LinearLayout>
And the XML and class where I have my button:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="6">
<Space
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_weight="3" />
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_weight="1">
<Space
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="3" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="Inicia sesión para comprar y vender los mejores productos "
android:id="#+id/textView"
android:gravity="center" />
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textPersonName"
android:hint="#string/user_name"
android:ems="10"
android:id="#+id/editText"
android:layout_weight="2"
android:gravity="bottom" />
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textPassword"
android:hint="#string/user_pass"
android:ems="10"
android:id="#+id/editText2"
android:layout_weight="2"
android:gravity="bottom" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textSize="10dp"
android:text="¿has olvidado tu contraseña?"
android:textColor="#color/colorPrimaryDark"
android:id="#+id/text_loggin"
android:layout_weight="1.3"
android:layout_marginLeft="5dp"
android:gravity="right" />
<Space
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1" />
<com.google.android.gms.common.SignInButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="New Button"
android:id="#+id/button"
android:layout_weight="1" />
<com.facebook.login.widget.LoginButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/login_button"
android:layout_weight="1" />
<Space
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="3" />
</LinearLayout>
<Space
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_weight="3" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.8"
android:background="#color/bottomBackground">
<Space
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="5" />
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="#string/finish"
android:id="#+id/txtNextButton"
android:layout_weight="1"
android:gravity="center" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
The class of the fragment:
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import com.facebook.login.widget.LoginButton;
public class RegisterTabLogin extends Fragment {
private LoginButton loginButton;
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, #Nullable Bundle savedInstanceState) {
View v =inflater.inflate(R.layout.register_tab_login,container,false);
return v;
}
}
As I say, I just want to get a View from the fragment and work with it in the Main Activity, I was reading about LayoutInflater but I could´t solved, Also I read some questions here, (Using button from a fragment in main activity) but I couldn´t solved.
Any help will be gratefull, a link o something.
have you tried this?
public class RegisterTabLogin extends Fragment {
private LoginButton loginButton;
private LoginCallback mCallback;
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, #Nullable Bundle savedInstanceState) {
View v =inflater.inflate(R.layout.register_tab_login,container,false);
loginButton = (LoginButton) v.findViewById(R.id.login_button);
showData.setOnClickListener(onClickListener);
return v;
}
#Override
public void onAttach(Activity activity) {
super.onAttach(activity);
try {
mCallback = (LoginCallback) activity;
} catch (ClassCastException e) {
throw new ClassCastException(
"Activity must implement LoginCallback.");
}
}
private final OnClickListener onClickListener = new OnClickListener() {
#Override
public void onClick(View v) {
if (mCallback != null) {
mCallback.onLogin();
}
}
};
public static interface LoginCallback{
void onLogin();
}
}
then on MainActivity
public class MainActivity extends Activity implements
RegisterTabLogin.LoginCallback {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
facebookLogin = new FacebookLogin(getApplicationContext());
setContentView(R.layout.register_tabs);
toolBar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolBar);
adapter = new ViewPagerAdapter(getSupportFragmentManager(),Titles,Numboftabs);
pager = (ViewPager) findViewById(R.id.pager);
pager.setAdapter(adapter);
tabs = (SlidingTabLayout) findViewById(R.id.tabs);
tabs.setDistributeEvenly(true);
tabs.setCustomTabColorizer(new SlidingTabLayout.TabColorizer() {
#Override
public int getIndicatorColor(int position) {
return getResources().getColor(R.color.colorPrimary);
}
});
tabs.setViewPager(pager);
}
#Override
public void onLogin() {
//DO SOMETHING
}
}
In your Main Activity, access this view in the OnStart() method like this:
#Override
protected void onStart() {
Button yourButton = (Button)findViewById(R.id.yourButton);
super.onStart();
}
EDIT:
Your fragment should be present in your Main Activity.
You can add RegisterTabLogin in a certain containerView present in your Main Activity layout in the OnCreate() method like this:
RegisterTabLogin registerTabLogin= new RegisterTabLogin();
getFragmentManager().beginTransaction().add(R.id.a_certain_layout, registerTabLogin).commit();