I am exploring different Android app UIs. I am trying to make one that has two columns, and on each column is a button that shifts into a different screen, but the two columns remain stationary.
An example to what I'm trying to replicate: http://i.imgur.com/a2IqkV1.jpg
The 'list' and 'number' screens each have their own separate layouts, I think I need to do something with fragments, but I don't know where to start.
Thanks
When you dont know where to start you can go for TabLayout : TabLayout and ViewPager : ViewPager and ofcourse Fragment :Fragment .You can create a layout like in the image by using this 3 items. Also you can follow this guide to create a screen like in the image, guide is so good for beginners : google-play-style-tabs-using-tablayout
Additionally if you want to switch your Fragment when any of tab clicked, add this code :
tablayout.addOnTabSelectedListener(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) {
}
});
Related
I'm trying to make a layout similar to Google's Play Store. I'm having a little trouble identifying the following views.
Yellow - Is this an ActionBar.Tab or a ViewPager or something else?
Red - Is this just a RadioGroup with RadioButtons in a Horizontal ScrollView?
the view highlighted with yellow is a TabLayout from support library and the red one is a Horizontal ListView with Chip View
https://github.com/Plumillon/ChipView
Or you can make it your self using a TextView with a rounded corner shape drawable as background
Edit: Then you should use a FrameLayout instead of ViewPager and with addOnTabSelectedListener get selected tab on TabLayout and show the appropriate Fragment inside FrameLayout
tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
#Override
public void onTabSelected(TabLayout.Tab tab) {
page = tabLayout.getSelectedTabPosition();
switch (page) {
case 0:
fragmentManager.beginTransaction().replace(R.id.container, fragment1).commitAllowingStateLoss();
break;
case 1:
fragmentManager.beginTransaction().replace(R.id.container, fragment2).commitAllowingStateLoss();
break;
default:
fragmentManager.beginTransaction().replace(R.id.container, fragment3).commitAllowingStateLoss();
}
}
#Override
public void onTabUnselected(TabLayout.Tab tab) {
}
#Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
I have a main activity with 3 tabs,when i swipe the tabbed indicator doesn't move but the layout changes while selecting a tab the indicator moves and the layout changes too.
Make sure you have a OnPageChangeListener attached to your ViewPager
mViewPager.setOnPageChangeListener(
new ViewPager.SimpleOnPageChangeListener() {
#Override
public void onPageSelected(int position) {
mTabs.getTabAt(position).select();
}
});
You can also do like
tabLayout.setupWithViewPager(viewPager);
I'm using Android Tutorial Bubbles library to add informative bubbles referring to views in my UI. My main UI consists of three tabs using a ViewPager. And I would like the tutorial for the second tab to begin only when the user navigates to that tab. I am able to catch the event that the user navigates to the tab using an OnPageChangeListener.
The problem is that the onPageSelected() method fires before the views are in their correct positions, meaning that the highlighted area that is supposed to surround the view of interest is significantly shifted. I could solve this using Thread.sleep() for a short period of time; is there a cleaner way of handling this?
Here's my code:
viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
#Override
public void onPageSelected(int position) {
if (position == 1) {
sensorReadingFragment.showTutorial();
}
}
});
Ok, you can delay it as
pager.post(new Runnable() {
#Override
public void run() {
pager.setCurrentItem(position_tab);
// Perform your operations
}
});
I am new to Android development. I have a ViewPager which holds TabLayout (that has fixed number of tabs). The ViewPager has SectionPagerAdapter (that has a fragment corresponding to tabs).
Now, I want to update tab content when user selects the tab and as it becomes visible (or when user wants to refresh the content).
But I am not sure which is correct way I can do this.
So far till now I found two solutions:
1) Add listener to TabLayout:
tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener()
{
#Override
public void onTabSelected(TabLayout.Tab tab)
{
mViewPager.setCurrentItem(tab.getPosition());
// Update tab containts here
}
#Override
public void onTabUnselected(TabLayout.Tab tab)
{
}
#Override
public void onTabReselected(TabLayout.Tab tab)
{
}
});
2) Use ViewPager.OnPageChangeListener to get callbacks for when a page fragment (inside Tab) becomes visible:
viewPager.setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener()
{
#Override
public void onPageSelected(int position)
{
// Update tab containts here
}
});
Can someone expert in this please advice me?
The way a viewpager adapter works (with tabs) is that once you add your fragments to the viewpager, then you basically need to add content to your fragments and let the adapter manage which fragment is visible when a given tab is selected.
So, by simply using : OnTabSelectedListenerinterface on your tabLayout, all you need to do is `setCurrentItem(tab.getPosition()); on your viewPager reference (from your layout).
You can have a method like this to add fragments to your viewPagerAdapter:
private void setupViewPager(ViewPager viewPager){
//then create an instance of your ViewPagerAdapter class here
ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
//then add fragments for each TAB here
//by calling a method inside your Adapter like this
adapter.addFrag(new FragmentOne(), "TITLE HERE");
adapter.addFrag(new FragmentTwo(), "TITLE TWO");
//Now set your adapter here
viewPager.setAdapter(adapter);
}
Now in your fragments, you can show different content accordingly.
I hope this helps!
I need to show tab content on occasion, otherwise the area must be filled with "non-tabhost" data.However, tabs should be visible and when user clicks any of those tabs "non-tabhost" must be hidden and appropriate tab content must become visible.
It's something connected to a fake tab creation ?
Give an example of creating TabHost with tabs unselected.
Thanks.
What I usually do is, add an extra Tab and use setVisibility(View.GONE) to hide it. THis will just hide the tab button from the user, and the Tab will still be there, in the "background" and you can programmatically select it, by using tabHost.setCurrentTab(0). I also usually keep this tab as the first one.
1.copy the code where you want to tabs make unselected
tabLayout.setSelectedTabIndicatorColor(Color.WHITE);
tabLayout.setTabTextColors(Color.BLACK, Color.BLACK);
2.Override on Tabselected Listener and paste the following code
tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
#Override`enter code here
public void onTabSelected(TabLayout.Tab tab) {
tabLayout.setSelectedTabIndicatorColor(Color.parseColor("#EB1C23"));
tabLayout.setTabTextColors(Color.BLACK, Color.RED);
viewPager.setCurrentItem(position);
}
#Override
public void onTabUnselected(TabLayout.Tab tab) {
}
#Override
public void onTabReselected(TabLayout.Tab tab) {
tabLayout.setSelectedTabIndicatorColor(Color.parseColor("#EB1C23"));
tabLayout.setTabTextColors(Color.BLACK, Color.RED);
viewPager.setCurrentItem(position);
}
});