Develop Reference

Inflated tab items in Tab Layout does not match parent in android

I have gone through these but does not seems to work
working with
android.support.design.widget.TabLayout
needs to set custom views to each child tab as a match parent to child size
pragmatically give a size
View v = LayoutInflater.from(this).inflate(R.layout.layout_two, null);
v.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
tabLayout.getTabAt(0).setCustomView(v);
this works as a match parent because there is no background but once add a inflate view issue comes
tabLayout.getTabAt(1).setText("About").setIcon(R.drawable.drop_complete);
though about the tabIndicator as well
setting its height to app:tabIndicatorHeight="0dp" or adding android:tabStripEnabled="false" does not help.
here is a picture with boundaries which clearly shows the small gap like padding(blue bar is my TabLayout with two tabs )
left one is inflated
right one is normal .setIcon
any help to make inflated one match parent with no gaps ?
Here is my code
XML
<android.support.design.widget.CoordinatorLayout
android:id="#+id/main_layout"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:elevation="30dp">
//------- INSIDE THIS I HAVE A TAB
<android.support.v7.widget.Toolbar
android:background="#drawable/capture"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:elevation="0dp"
app:layout_scrollFlags="scroll|enterAlways"
/>
//------ HERE comes THE TAB That I DEAL
<android.support.design.widget.TabLayout
android:tabStripEnabled="false"
app:tabIndicatorHeight="0dp"
android:id="#+id/tab_layout"
android:scrollbars="none"
android:layout_below="#+id/toolbar"
android:layout_width="fill_parent"
android:layout_height="match_parent"
app:tabTextColor="#d3d3d3"
android:minHeight="?attr/actionBarSize"
android:orientation="vertical" >
</android.support.design.widget.TabLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:background="#467"
android:id="#+id/viewpager"
android:layout_below="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
/>
</android.support.design.widget.CoordinatorLayout>
myClass
public class LayoutExampleActivity extends AppCompatActivity {
private TabLayout tabLayout;
private ViewPager viewPager;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_layout_example);
tabLayout = (TabLayout) findViewById(R.id.tab_layout);
viewPager = (ViewPager) findViewById(R.id.viewpager);
setupViewPagerAdaptor(viewPager);
tabLayout.setupWithViewPager(viewPager);
setTabs();
}
private void setupViewPagerAdaptor(ViewPager viewPager) {
ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
adapter.addFragment(new FragmentOne(), "First");
adapter.addFragment(new GalleryFragment(), "Second");
// adapter.addFragment(new FragmentOne(), "Third");
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);
}
}
public void setTabs() {
tabLayout.getTabAt(0).setCustomView(R.layout.layout_one);
tabLayout.getTabAt(1).setText("About").setIcon(R.drawable.drop_complete);
}
}

Set tabPaddingStart and tabPaddingEnd attributes.
like this:
<android.support.design.widget.TabLayout
...
app:tabPaddingStart="0dp"
app:tabPaddingEnd="0dp" >
This question might be duplicated.
see: Cannot remove Padding from Tabs when using Custom views with Tab Layout

TabLayout header hides first item on a ListView in a fragment

i've got my Android skills a bit rusty, and i hope someone can help me with this. I've got a TabLayout with a ViewPager to swipe the same Fragment with different data in a ListView. Everything is working ok, but I've got a problem. The tabs header text hides a part of the Fragment, causing the first element of the ListView being hiden behind. I really have tried to find a solution for this problem but i couldn't, I'm sure it must be something simple but no solution. If you need more info, please ask.
I've got this activity layout:
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay"/>
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/toolbar"
android:background="?attr/colorPrimary"
android:elevation="6dp"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="fill_parent"
/>
</android.support.design.widget.CoordinatorLayout>
This is the activity code:
public class ParadasActivity extends AppCompatActivity
implements LoaderManager.LoaderCallbacks<Cursor>{
...
#Override
public void onLoadFinished(Loader<Cursor> cursorLoader, Cursor cursor) {
TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout);
while (cursor.moveToNext()) {
Tab tab =tabLayout.newTab();
tabLayout.addTab(tab);
}
Fragment code:
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
final View view = inflater.inflate(R.layout.fragment_paradas, container, false);
paradasAdapter = new ParadasAdapter(getActivity(), null, 0);
mListView = (ListView) view.findViewById(R.id.listview_paradas);
mListView.setAdapter(paradasAdapter);
return view;
}
Fragment layout:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/fragment_paradas"
tools:context="com.pikohsoft.android.tussantander.ParadasActivityFragment"
tools:showIn="#layout/activity_paradas">
<ListView android:id="#+id/listview_paradas"
android:layout_height="match_parent"
android:layout_width="match_parent"
/>
And the code for the pager adapter:
public class SublineasPagerAdapter extends FragmentStatePagerAdapter {
int mNumOfTabs;
public SublineasPagerAdapter(FragmentManager fm, int NumOfTabs, Bundle arguments) {
super(fm);
this.mNumOfTabs = NumOfTabs;
}
#Override
public Fragment getItem(int position) {
ParadasActivityFragment tab1 = new ParadasActivityFragment();
return tab1;
}
#Override
public int getCount() {
return mNumOfTabs;
}

When you use CoordinatorLayout it's Extend from ViewGroup so when you put your ViewPager (or other kinds of Layout) in Z-order they overlap (and you see they come on top of each other) so by using
app:layout_behavior="#string/appbar_scrolling_view_behavior"
You tell to CoordinatorLayout hey it's a bit different !!! and it look at your AppBarLayout and put this layout below appbar.

Some questions on Android UI

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();
}

Scrolling fragment should collapse toolbar

I have the following program, in which I want to add a collapsing toolbar. It is a tab-layout, with multiple fragments attached.
XML File
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
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="wrap_content"/>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="scrollable"
app:tabContentStart="72dp" />
</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>
JAVA File
public class Competitions extends AppCompatActivity {
private Toolbar toolbar;
private TabLayout tabLayout;
private ViewPager viewPager;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
Intent intent = getIntent();
setContentView(R.layout.competition);
toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setTitle("Competitions");
getSupportActionBar().setHomeButtonEnabled(true);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
viewPager = (ViewPager) findViewById(R.id.viewpager);
setupViewPager(viewPager);
tabLayout = (TabLayout) findViewById(R.id.tabs);
tabLayout.setupWithViewPager(viewPager);
}
private void setupViewPager(ViewPager viewPager) {
ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
adapter.addFragment(new IntChal(), "International Challenges");
adapter.addFragment(new XMach(), "Xtreme Machines");
adapter.addFragment(new TVoltz(), "Technovoltz");
adapter.addFragment(new Robotron(), "Robotron");
adapter.addFragment(new Dimensions(), "Dimensions");
adapter.addFragment(new Tinker(), "Tinkerer");
adapter.addFragment(new Aero(), "Aerostrike");
adapter.addFragment(new Lamp(), "Solar Urja Lamp");
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);
}
}
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case android.R.id.home:
onBackPressed();
return true;
}
return super.onOptionsItemSelected(item);
}
}
I had tried this before, but when I replaced my toolbar with a collapsing toolbar, all that happened that it would collapse if I scroll the toolbar portion. What I require is that on scrolling the fragment down, the toolbar should collapse. How do I do that.
P.S. I am a beginner , so please explain why your solution works.
EDIT
Okay, what I want is that when I scroll the fragment, the toolbar should collapse on it's own. With the following solutions, what is happening is that I have to manually first collapse the toolbar , and then scroll through the fragment, which is not what I want. Please help me do the same

Try to create Scrolling Activity project in android studio. Which gives you a collapsing toolbar. Steps: Android studio -> Add New Project -> Give project details -> in step Add an activity to mobile select Scrolling Activity . Done

Change your toolbar like this
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
See example here at 'https://github.com/chrisbanes/cheesesquare' for more reference, it is working fine for me. i hope it can help you.

seem your layout is correct, refer this tutorial it will help you to achieve your goal.
Update:
Adding app:layout_scrollFlags="scroll|enterAlways" to toolbar will resolve your issue.

Tabs in Toolbar without Viewpager in android

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.