I want to add a TabLayout with three buttons. underneath my app bar.
I'm using this walk-through to add tab buttons (TabLayout) underneath my app bar.
The swipe and everything is working fine. The only problem is no button appears!
What is going wrong?
(I'm using support lib and design lib version 23.0.1)
I have checked these links and haven't been of any help for me:
TabLayout tabs text not displaying
Here is my onCreate() in the main activity:
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_tabbed_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
// Create the adapter that will return a fragment for each of the three
// primary sections of the activity.
mSectionsPagerAdapter = new SectionsPagerAdapter(getSupportFragmentManager());
// Set up the ViewPager with the sections adapter.
mViewPager = (ViewPager) findViewById(R.id.container);
mViewPager.setAdapter(mSectionsPagerAdapter);
/**/
tabLayout = (TabLayout) findViewById(R.id.tabs);
tabLayout.addTab(tabLayout.newTab().setText("Tab 1"));
tabLayout.addTab(tabLayout.newTab().setText("Tab 2"));
tabLayout.addTab(tabLayout.newTab().setText("Tab 3"));
tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
tabLayout.setupWithViewPager(mViewPager);
/**/
FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG).setAction("Action", null).show();
}
});
}
Here is the activity layout XML file:
<?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:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.*.*.TabbedMainActivity">
<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:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</android.support.design.widget.TabLayout>
<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">
</android.support.v4.view.ViewPager>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_margin="#dimen/fab_margin"
android:src="#android:drawable/ic_dialog_email"/>
Add TabLayout inside the AppBathayout below the Toolbar.
Related
I've done a tabbedView that hold a ListView in a fragment and i used an ActionToolbar on which I have disabled sliding
Now i see that my ListView is covered by a Blank Space that i do not even know how to name
How to delete it?
XML
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
>
<android.support.v7.widget.Toolbar
android:elevation="4dp"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways"
android:background="#color/colorPrimary"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="#dimen/custom_tab_layout_height"
app:tabIndicatorHeight="4dp"
app:tabIndicatorColor="#color/slider_tab"
app:tabMode="fixed"
app:tabGravity="fill"
/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:layout_marginBottom="?attr/actionBarSize"
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
OnCreateMethod of the Activity that contains my fragment
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
SliceAppDB.init();
ActivityManager.TaskDescription taskDescription = new ActivityManager.TaskDescription("SliceApp",null, getResources().getColor(R.color.colorPrimary));
((Activity)this).setTaskDescription(taskDescription);
toolbar = (Toolbar) findViewById(R.id.toolbar);
toolbar.setTitleTextColor(getResources().getColor(R.color.slider_tab));
AppBarLayout.LayoutParams params = (AppBarLayout.LayoutParams) toolbar.getLayoutParams();
params.setScrollFlags(0);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(false);
vpPager = (ViewPager) findViewById(R.id.viewpager);
setupViewPager(vpPager);
tabLayout = (TabLayout) findViewById(R.id.tabs);
tabLayout.setupWithViewPager(vpPager);
setupTabIcons();
TabLayout.Tab tab= tabLayout.getTabAt(1);
tab.select();
}
The caret icon does not show up even though i am already calling the setDisplayHomeAsUpEnabled(true)
private ViewPager mViewPager;
private DrawerLayout mDrawerLayout;
private ActionBarDrawerToggle mToggle;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_home_page_tab);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
// Create the adapter that will return a fragment for each of the three
// primary sections of the activity.
mSectionsPagerAdapter = new SectionsPagerAdapter(getSupportFragmentManager());
// Set up the ViewPager with the sections adapter.
mViewPager = (ViewPager) findViewById(R.id.container);
mViewPager.setAdapter(mSectionsPagerAdapter);
mDrawerLayout = (DrawerLayout) findViewById(R.id.drawerLayout);
mToggle = new ActionBarDrawerToggle(this, mDrawerLayout, R.string.open, R.string.close);
mDrawerLayout.addDrawerListener(mToggle);
mToggle.syncState();
getSupportActionBar().setDefaultDisplayHomeAsUpEnabled(true);
TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs);
tabLayout.setupWithViewPager(mViewPager);
}
I am creating a page that contains Tabbed and Navigation activity
and this is my XML file
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/drawerLayout">
<!--navigation bar-->
<android.support.design.widget.NavigationView xmlns:android="http://schemas.android.com/apk/res/android"
tools:context="naufal.com.tugasakhir.HomePageTab"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#drawable/nav_back"
android:focusableInTouchMode="false"></android.support.design.widget.NavigationView>
<!--tool & tab bar-->
<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.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:background="#2A363B"
app:tabSelectedTextColor="#color/primary"
app:tabIndicatorColor="#color/primary"
/>
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/accent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
/>
</android.support.design.widget.AppBarLayout>
</android.support.v4.widget.DrawerLayout>
thanks for the Help.
I'm embarassed to post this question, but I'm trying for two hours to change title in my application's main activity and to, my surprise, no results. I tried:
setTitle();
getActionBar().setTitle()
getSupportActionBar().setTitle();
Everyone is writing about those above, but none of them works. Even more surprisingly - in the other activities and fragments it's all fine. Only in this one.
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main_beer);
Utils.checkGpsStatus(this);
Utils.checkNetworkStatus(this);
Location location = SmartLocation.with(this).location().getLastLocation();
if(location != null){
lat = location.getLatitude();
lng = location.getLongitude();
}
ViewPager viewPager = (ViewPager) findViewById(R.id.activity_main_activity_beer);
if (viewPager != null) {
setupViewPager(viewPager);
}
//viewPager.setOffscreenPageLimit(2);
//viewPager.setCurrentItem(1);
tabLayout = (TabLayout) findViewById(R.id.tabs);
tabLayout.setupWithViewPager(viewPager);
}
XML:
<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:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainBeerActivity" >
<LinearLayout
android:layout_height="match_parent"
android:layout_width="match_parent"
android:orientation="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior" >
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollbars="horizontal"
android:background="?attr/colorPrimary"/>
<android.support.v4.view.ViewPager
android:id="#+id/activity_main_activity_beer"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
res/values/strings.xml
<resources>
<string name="app_name">insert here title</string>
</resources>
Try this
Extend your activity with extends AppCompatActivity.
Put below code in your onCreate method.
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setDisplayShowTitleEnabled(true);
getSupportActionBar().setElevation(0);
getSupportActionBar().setTitle("Your Title");
Cheers!
private ViewPager mViewPager;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
// Create the adapter that will return a fragment for each of the three
// primary sections of the activity.
mSectionsPagerAdapter = new SectionsPagerAdapter(getSupportFragmentManager());
// Set up the ViewPager with the sections adapter.
mViewPager = (ViewPager) findViewById(R.id.container);
mViewPager.setAdapter(mSectionsPagerAdapter);
TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs);
tabLayout.setupWithViewPager(mViewPager);
}
<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: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" />
This is the best practice to make your code compatible with latest devices because default actionbar is deprecated from Lollipop.
I am using a TabLayout to navigate between fragments in my application. I would like the tabs to be aligned to the right of the Toolbar (next to the settings icon). And it does display like this when I first open the app:
However, when I rotate the screen to landscape and then back to portrait, the tabs become centered in the Toolbar:
Here is the code for the Toolbar, in activity_main.xml:
<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">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:paddingTop="16dp"
android:paddingBottom="16dp"
android:layout_gravity="center_vertical"
android:src="#drawable/ic_photo_camera_white_24dp"/>
<TextView
android:id="#+id/title_text"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:paddingLeft="56dp"
android:paddingStart="56dp"
android:textColor="#color/white"
android:textSize="#dimen/abc_text_size_title_material_toolbar"/>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="right"
app:tabMode="fixed"
app:tabMaxWidth="56dp"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
app:tabIndicatorColor="#android:color/white"/>
</RelativeLayout>
</android.support.v7.widget.Toolbar>
And the onCreate method of MainActivity.java
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
viewPager = (ViewPager) findViewById(R.id.viewpager);
setupViewPager(viewPager);
toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
tabLayout = (TabLayout) findViewById(R.id.tabs);
tabLayout.setupWithViewPager(viewPager);
setupTabIcons();
TextView tv = (TextView) findViewById(R.id.title_text);
tv.setText(viewPager.getAdapter().getPageTitle(viewPager.getCurrentItem()));
tabLayout.setOnTabSelectedListener(new TabLayout.ViewPagerOnTabSelectedListener(viewPager) {
#Override
public void onTabSelected(TabLayout.Tab tab) {
super.onTabSelected(tab);
TextView tv = (TextView) findViewById(R.id.title_text);
tv.setText(tabText[tab.getPosition()]);
}
});
}
setupViewPager method:
private void setupViewPager(ViewPager viewPager) {
ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
adapter.addFragment(new HotFragment(), "Hot");
adapter.addFragment(new YourPostsFragment(), "Your Posts");
adapter.addFragment(new ExploreMapFragment(), "Explore");
viewPager.setAdapter(adapter);
}
setupTabIcons method:
private void setupTabIcons() {
TabLayout.Tab hot = tabLayout.getTabAt(0);
TabLayout.Tab your_posts = tabLayout.getTabAt(1);
TabLayout.Tab explore = tabLayout.getTabAt(2);
hot.setIcon(tabIcons[0]);
hot.setText(null);
your_posts.setIcon(tabIcons[1]);
your_posts.setText(null);
explore.setIcon(tabIcons[2]);
explore.setText(null);
}
I have tried many different XML properties, but I'm inclined to believe this is Java related, due to the problem occurring when the activity restarts. But I can't seem to find why this would happen. Any help is appreciated.
This is what i did when i had your problem:
started new project (select tabbed activity) with android studio (inspired by their code).
this is part of my xml
<android.support.design.widget.AppBarLayout
...>
<android.support.v7.widget.Toolbar
... >
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:tabMode="fixed"
android:layout_gravity="right"
android:layout_marginRight="24dp"
style="#style/AppTabLayout"/>
</android.support.v7.widget.Toolbar>
And this is what i got:
edit margin right as you wish
The example code found on https://github.com/chrisbanes/cheesesquare results in my tablet to look like this:
However I want it to look like this :
Relevant xml code:
<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="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_scrollFlags="scroll|enterAlways" />
<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/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
Relevant code in MainActivity:
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
final ActionBar ab = getSupportActionBar();
ab.setHomeAsUpIndicator(R.drawable.ic_menu);
ab.setDisplayHomeAsUpEnabled(true);
// ...
ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
if (viewPager != null) {
Adapter adapter = new Adapter(getSupportFragmentManager());
adapter.addFragment(new CheeseListFragment(), "Category 1");
adapter.addFragment(new CheeseListFragment(), "Category 2");
adapter.addFragment(new CheeseListFragment(), "Category 3");
viewPager.setAdapter(adapter);
}
//...
TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs);
tabLayout.setupWithViewPager(viewPager);
}
What do I have to change/add to the layout/code to make the toolbar contain the tabs ?
Toolbar is a FrameLayout. Put the tabs inside the Toolbar
<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/ThemeOverlay.AppCompat.Light"
app:layout_scrollFlags="scroll|enterAlways">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.v7.widget.Toolbar>