Good Day ! I'm currently creating an android app. My first problem is, Im getting a problem with my TabLayout. I want to display the tablayout IN the Toolbar...
This is my MainActivity:
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// Create the adapter that will return a fragment for each section
mPagerAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
private final Fragment[] mFragments = new Fragment[] {
new MyPostsFragment(),
new MyPostsFragment(),
new MyPostsFragment(),
};
private final String[] mFragmentNames = new String[] {
getString(R.string.heading_recent),
getString(R.string.heading_recent),
getString(R.string.heading_recent)
};
#Override
public Fragment getItem(int position) {
return mFragments[position];
}
#Override
public int getCount() {
return mFragments.length;
}
#Override
public CharSequence getPageTitle(int position) {
return mFragmentNames[position];
}
};
// Set up the ViewPager with the sections adapter.
mViewPager = (ViewPager) findViewById(R.id.container);
mViewPager.setAdapter(mPagerAdapter);
TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs);
tabLayout.setupWithViewPager(mViewPager);
// Button launches NewPostActivity
findViewById(R.id.fab_new_post).setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
startActivity(new Intent(MainActivity.this, NewReportActivity.class));
}
});
}
And this is the Layout:
<?xml version="1.0" encoding="utf-8"?>
<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=".activities.MainActivity">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/tabs" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab_new_post"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:src="#drawable/ic_add_new_report"
android:layout_margin="16dp"/>
</RelativeLayout>
extending your theme to parent="Theme.AppCompat.Light.NoActionBar" will do the trick
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
By adding this, you're telling the system To not to use ActionBar.
You can simply hide the Toolbar to achieve what you want.
Dynamically:
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,WindowManager.LayoutParams.FLAG_FULLSCREEN);
or through Styles:
android:theme="#android:style/Theme.Holo.Light.NoActionBar.Fullscreen"
Try this, I am able to add tab inside toolbar using the below code.
<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/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabTextColor="#android:color/white"
app:tabSelectedTextColor="#color/aqua_marine"
app:tabIndicatorColor="#color/aqua_marine"
app:tabMode="fixed"
app:tabGravity="fill">
</android.support.design.widget.TabLayout>
</android.support.v7.widget.Toolbar>
</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" />
<include layout="#layout/content_home" />
Related
The ViewPager doesn't work to swipe the fragment. I'm using Drawer activity then added a BottomNavigationView, and in the main content i added a FrameLayout to be a fragment container and positioned below the TabLayout and above the BottomNaigationView. Then I made a class named PagerAdapter extends FragmnetPagerAdapter.
I made a constructor and implement the getItem() and getCount() methods, then in the MainActivity I initialized all the views by its id but when I run the app all works except the the swipe among the fragment with the Viewpager. What should I do more to make it work.
This is my PagerAdapter class:
public class PageAdapter extends FragmentPagerAdapter {
private int numberOfTabs;
public PageAdapter(FragmentManager fm, int numberOfTabs) {
super(fm);
this.numberOfTabs = numberOfTabs;
}
#Override
public Fragment getItem(int position) {
switch (position){
case(0) : return new HomeFragment();
case(1) : return new CouponFragment();
default : return null;
}
}
#Override
public int getCount() {
return numberOfTabs;
}
}
Here is my 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"
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/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
Tool Bar with TextView to set the title
<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" >
<TextView
android:id="#+id/my_title"
android:text="Title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="25sp"
android:layout_gravity="center"
android:textColor="#color/white"
/>
</android.support.v7.widget.Toolbar>
Here the TabLayout is added with three tabs Home,Coupons and Notifications. I want the ViewPager to swipe among the three tabs
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/toolbar"
app:tabGravity="fill"
app:tabIndicatorColor="#color/color"
app:tabMode="fixed"
app:tabSelectedTextColor="#color/color"
app:tabTextColor="#color/fadeWhite">
<android.support.design.widget.TabItem
android:id="#+id/tab_home"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Home"
style="#style/MyCustomTabLayout"
/>
<android.support.design.widget.TabItem
android:id="#+id/tab_coupons"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Coupons"
style="#style/MyCustomTabLayout"
/>
<android.support.design.widget.TabItem
android:id="#+id/tab_notifiactions"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Notifiactions"
style="#style/MyCustomTabLayout"
/>
</android.support.design.widget.TabLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toTopOf="#id/navBar"
app:layout_constraintTop_toTopOf="parent"/>
<include layout="#layout/content_main" />
Here is the MainActivity:
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
appBarLayout = (AppBarLayout) findViewById(R.id.app_bar);
tabLayout = (TabLayout) findViewById(R.id.tab_layout);
tab_home = (TabItem) findViewById(R.id.tab_home);
tab_coupons = (TabItem) findViewById(R.id.tab_coupons);
tab_noti = (TabItem) findViewById(R.id.tab_notifiactions);
viewPager = (ViewPager) findViewById(R.id.view_pager);
adapter = new PageAdapter(getSupportFragmentManager(),tabLayout.getTabGravity());
viewPager.setAdapter(adapter);
//setupToolBar
toolbar = (Toolbar) findViewById(R.id.toolbar);
my_title = (TextView) findViewById(R.id.my_title);
setSupportActionBar(toolbar);
my_title.setText(toolbar.getTitle());
getSupportActionBar().setDisplayShowTitleEnabled(false);
This line is wrong:
adapter = new PageAdapter(getSupportFragmentManager(),tabLayout.getTabGravity());
You should pass to your adapter the tabs count. tabLayout.getTabGravity() https://developer.android.com/reference/android/support/design/widget/TabLayout.html#getTabGravity() returns the current gravity used for laying out tabs.
Little, but annoying problem:
I've made a tabbed Activity, where the tabs contain a ListView. However, if I set the ViewPager's dimensions to match_parent, everything seems to be fine, BUT, at the bottom, the ViewPager's egde goes out of the screen.
Like this: link
Result: link
Layout:
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="de.gymoth.goapp.vertretungsplan.VertretungsplanActivityNew">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="#dimen/appbar_padding_top"
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"
app:layout_scrollFlags="scroll|enterAlways">
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
Java:
public class VertretungsplanActivityNew extends AppCompatActivity {
private VertretungsplanFragment firstFragment;
private VertretungsplanFragment secondFragment;
private TabLayout tabLayout;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_vertretungsplan);
firstFragment = VertretungsplanFragment.newInstance(0);
secondFragment = VertretungsplanFragment.newInstance(1);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
SectionsPagerAdapter sectionsPagerAdapter = new SectionsPagerAdapter(getSupportFragmentManager());
ViewPager viewPager = (ViewPager) findViewById(R.id.container);
viewPager.setAdapter(sectionsPagerAdapter);
tabLayout = (TabLayout) findViewById(R.id.tabs);
tabLayout.setupWithViewPager(viewPager);
}
public class SectionsPagerAdapter extends FragmentPagerAdapter {
public SectionsPagerAdapter(FragmentManager fm) {
super(fm);
}
#Override
public Fragment getItem(int position) {
switch(position) {
case 0:
return firstFragment;
case 1:
return secondFragment;
default:
return null;
}
}
#Override
public int getCount() {
return 2;
}
#Override
public CharSequence getPageTitle(int position) {
return "";
}
}
public void setTabTitle(int index, CharSequence title) {
tabLayout.getTabAt(index).setText(title);
}
}
Does anyone have an explanation for this? Any help is appreciated.
Replace CoordinatorLayout with LinearLayout, then it will work fine. I added sample code bellow.
<LinearLayout 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:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay">
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</LinearLayout>
Roshan's answer is good unless you will need the functionality of CoordinatorLayout.
In that case you can do a simple workaround:
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="48dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
I have an aplication with a toolbar and an tab layout in appcompat v7. I navegate across the tabs with a View Pager, but the problem is where put an Expandable List View inside, doesn't scroll: this is my Java code from the principal activity
The minimal API is 15: Android Ice Cream Sandwicth 4.0.4
public class Principal extends AppCompatActivity{
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_principal);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
final TabLayout Tabulacion = (TabLayout) findViewById(R.id.Tabulacion);
final ViewPager viewPager = (ViewPager) findViewById(R.id.Pager);
final PagerAdapter adapter = new PagerAdapter(getSupportFragmentManager(), Tabulacion.getTabCount());
viewPager.setAdapter(adapter);
viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(Tabulacion));
Tabulacion.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) {
}
});
}
the Java code from the PagerAdapter
public class PagerAdapter extends FragmentStatePagerAdapter {
int intNumTabs;
public PagerAdapter(FragmentManager FM, int NumTabs) {
super(FM);
this.intNumTabs = NumTabs;
}
#Override
public Fragment getItem(int position) {
switch (position) {
case 0:
TabHome Tab1 = new TabHome();
return Tab1;
case 1:
TabLectura Tab2 = new TabLectura();
return Tab2;
default:
return null;
}
}
#Override
public int getCount() {
return intNumTabs;
}
}
the XML code from the principal activity
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".Principal">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay"
android:id="#+id/textView">
<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/Tabulacion"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.TabItem
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Inicio">
</android.support.design.widget.TabItem>
<android.support.design.widget.TabItem
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Lectura">
</android.support.design.widget.TabItem>
</android.support.design.widget.TabLayout>
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/Pager"
android:isScrollContainer="true"
android:nestedScrollingEnabled="true"
android:background="#color/backgroundColor" />
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
the XML code from the tab 2 fragment:
<ExpandableListView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/ListView">
</ExpandableListView>
The content of the Expandable List View is dynamic generated
I solve it! I extract the view pager from the app coordinator layout in the XML, there is the final 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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".Principal">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay"
android:id="#+id/textView">
<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/Tabulacion"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.TabItem
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Inicio">
</android.support.design.widget.TabItem>
<android.support.design.widget.TabItem
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Lectura">
</android.support.design.widget.TabItem>
</android.support.design.widget.TabLayout>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/Pager"
android:background="#color/backgroundColor" />
</LinearLayout>
Use a recyclerview instead of listview. I have implemented it in a view pager and it works perfectly. Recyclerview does virtually everything that a listview does and much more.
I was trying to make and android app with two fragments in a ViewPager together tabs, fine up to there.
The problem came when I added a FloatingActionButtom and I wanted it to change depending on the tab in which you are in. This is what I have:
With this the icon changes when the pages are changed but I want it to do it with this animation and to do that I need to call fab.hide(); and fab.show(); but Android studio sais this methods dont exist, so what can I do?
I have all my SDKs up to date together with the IDE and have included the latest design-support library on my gradle: compile 'com.android.support:design:22.2.0', also Ive imported android.support.design.widget.FloatingActionButton; into my MainActivity.
I also tried to write it on another computer (just in case) and nothing, the cannot resolve method error keeps poping up.
private TabLayout tabLayout;
private ViewPager viewPager;
private ViewPagerAdapter adapter;
FloatingActionButton fab;
ActionBar actionBar;
ContadorFragment fragContador;
Context context;
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
fab = (FloatingActionButton) findViewById(R.id.fabAñadir);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
viewPager = (ViewPager) findViewById(R.id.viewpager);
tabLayout = (TabLayout) findViewById(R.id.tabs);
setSupportActionBar(toolbar);
actionBar = getSupportActionBar();
getSupportActionBar().setElevation(0);
context = this;
fragContador = new ContadorFragment();
setupViewPager(viewPager);
tabLayout.setupWithViewPager(viewPager);
viewPager.setCurrentItem(1);
viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
#Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
#Override
public void onPageSelected(int position) {
if (position == 0){ //Esta en el contado
fab.setImageResource(R.drawable.ic_save_black_24dp);
verEstadisticas = false;
} else{// esta en las estadisticas
verEstadisticas = true;
fab.setImageResource(R.drawable.ic_add_black_24dp);
}
}
#Override
public void onPageScrollStateChanged(int state) {
}
});
}
private void setupViewPager(ViewPager viewPager) {
adapter = new ViewPagerAdapter(getSupportFragmentManager());
adapter.addFrag(fragContador, "Contador");
adapter.addFrag(new EstadisticasFragment(), "Estadisticas");
viewPager.setAdapter(adapter);
}
And the layout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:fab="http://schemas.android.com/tools"
app:layout_behavior="com.app.common.PatchedScrollingViewBehavior"
android:layout_width="match_parent"
android:layout_height="match_parent">
<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/coordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<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="exitUntilCollapsed"/>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabIndicatorColor="#000000"
app:tabIndicatorHeight="2dp"/>
</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>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fabAñadir"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_margin="16dp"
android:layout_width="56dp"
fab:fab_type="normal"
android:layout_height="56dp"
android:clickable="true"
app:borderWidth="0dp"
android:elevation="6dp"
android:src="#drawable/ic_add_black_24dp" />
</RelativeLayout>
Check the Support Library release notes here. The show() and hide() methods for the floating action button were added in revision 22.2.1, but you're using 22.2.0. Update to a newer version, preferably the latest(currently 23.1.1) and it will work.
So I'm really not sure what to tell you, but I got a running example in a brand new project.
Gradle
compile 'com.android.support:appcompat-v7:23.1.1'
compile 'com.android.support:design:23.1.1'
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:fab="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<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="exitUntilCollapsed"/>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabIndicatorColor="#000000"
app:tabIndicatorHeight="2dp"/>
</android.support.design.widget.AppBarLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Toggle FAB"
android:id="#+id/btn_toggle_fab"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"/>
</RelativeLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
fab:fab_type="normal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_margin="16dp"
android:src="#drawable/abc_ic_search_api_mtrl_alpha"/>
</android.support.design.widget.CoordinatorLayout>
MainActivity.java
import android.support.design.widget.FloatingActionButton;
public class MainActivity extends AppCompatActivity {
private FloatingActionButton fab;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
fab = (FloatingActionButton) findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
Toast.makeText(MainActivity.this, "FAB clicked", Toast.LENGTH_SHORT).show();
}
});
findViewById(R.id.btn_toggle_fab).setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
if (fab.isShown()) {
fab.hide();
} else {
fab.show();
}
}
});
}
}
I use android.support:design library for NavigationDrawer and Tabs.
I have a trouble in fragment with tabs, it's shadow beetwen Toolbar and Tabs.
Tabs fragment screenshot
MainActivity layout:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:id="#+id/coordinate"
tools:context="tabs.com.tabs.com.fragments.items">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_main" />
</android.support.design.widget.CoordinatorLayout>
Fragment tabs layout:
<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"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context="tabs.com.tabs.com.fragments.items"
android:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay"
android:duplicateParentState="true">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
app:tabGravity="fill"
app:tabMode="fixed"
android:background="#color/colorPrimary"
app:tabIndicatorColor="#color/white"
app:tabSelectedTextColor="#color/white"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="6dp">
</android.support.design.widget.TabLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v4.view.ViewPager>
</LinearLayout>
Tabs code:
public class Items extends Fragment {
public static TabLayout tabLayout;
public static ViewPager viewPager;
public static int int_items = 2;
public Items() {
}
#Nullable
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View x = inflater.inflate(R.layout.fragment_news,null);
tabLayout = (TabLayout) x.findViewById(R.id.tabs);
viewPager = (ViewPager) x.findViewById(R.id.viewpager);
viewPager.setAdapter(new MyAdapter(getChildFragmentManager()));
tabLayout.post(new Runnable() {
#Override
public void run() {
tabLayout.setupWithViewPager(viewPager);
}
});
return x;
}
class MyAdapter extends FragmentPagerAdapter{
public MyAdapter(FragmentManager fm) {
super(fm);
}
#Override
public Fragment getItem(int position)
{
switch (position){
case 0 : return new PrimaryFragment();
case 1 : return new SocialFragment();
}
return null;
}
#Override
public int getCount() {
return int_items;
}
#Override
public CharSequence getPageTitle(int position) {
switch (position){
case 0 :
return "ONE";
case 1 :
return "TWO";
}
return null;
}
}
}
How i can solve this trouble?
You can try setting same value for Elevation to both the TabLayout and ActionBar, as the ToolBar is 6dp elevated so it is casting its shadow over Tabs.
Set android:elevation="6dp" to ToolBar as it is in TabLayout.
For those who are using AppCompatActivity it is easy too, just set elevation like,
getSupportActionBar().setElevation(0);
=============================Update================================
1)
Another approach is that u make a layout having shadow part inside drawable and use it below your Tabs in XML designing.
In res/drawable/shadow.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:startColor="#android:color/transparent"
android:endColor="#33000000"
android:angle="90">
</gradient>
Now use it as
<View
android:layout_width="match_parent"
android:layout_height="8dp"
android:layout_below="#id/TabLayoutID"
android:background="#drawable/shadow" />
In your main XML containing TabLayout.
2)
Or just Add this line in your style(s): if above way doesn't work.
<item name="android:windowContentOverlay">#drawable/shadow</item>
Hope, i have helped..!
To remove the shadow of toolbar add this to your app theme:
<item name="android:windowContentOverlay">#null</item>
And You use design-support library so you have to also add below line code.
getSupportActionBar().setElevation(0);