I have tabs that contains Fragment and i want to provide the swipe gesture to move right and left. I'm using it inside of Fragment and inside of activity. I use ViewPager inside of FragmentTabHost both from support.v4 package (need to work on >=API 10). The problem is that the pager starts showing the content from the top of layout and tabhost is showing the tabs first and then the content. Of course i want the second behavior. So what i see is the content twice, one with tabs and one without. Here is my layout xml file. Notice that i have also some other views above the tabhost (#+id/relative_header) so action bar tabs don't fit in this case. I've already try to move pager into realtabcontent or above it with no luck.
<android.support.v4.app.FragmentTabHost
android:id="#android:id/tabhost"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_below="#+id/relative_header" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TabWidget
android:id="#android:id/tabs"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0">
</TabWidget>
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="0" />
<FrameLayout
android:id="#+android:id/realtabcontent"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
</android.support.v4.app.FragmentTabHost>
I'm not sure but I assume that one of them is incompatible with the other, but i don't know which compination should use to provide swipe gesture between fragments tabs. Any idea about what I'm doing wrong?
Well, i'm writing this answer for anyone will have the same question in future. I misunderstood the role of each layout. ViewPager and TabHost doing more or less the same thing. To enable the swipe gesture i should have used ViewPager. To add tabs to this, i used the library PagerSlidingTabStrip , also on Feb. 14 2014 seems that android team released a native layout for this: PagerSlidingTabStrip . The tricky point was that tabhost has content and tab in the same layout but it cannot provide the swipe gesture.
Related
I want to create an activity where there's an image view and a view pager right after. I have try some stuff, but the tabs of the viewpager always appear at the top of the screen.
In order what I would like to have:
Action Bar
Image view (here the M)
Tab
Content of the tab (Fragment)
Here's the closest I have got.
Here's my code. (I'm pretty sur I overkilled it, but I was trying stuff)
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/profile_image_linear_layout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true">
<ImageView
android:id="#+id/profile_image_view"
android:layout_width="fill_parent"
android:layout_height="200dp" />
</LinearLayout>
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_below="#+id/profile_image_linear_layout">
<android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/pager"
android:layout_width="fill_parent"
android:layout_height="match_parent"
tools:context="madduck.ioweyou.ProfileActivity" />
</FrameLayout>
</RelativeLayout>
Thanks in advance !
Use a TabLayout instead of the ActionBar tabs.
https://developer.android.com/reference/android/support/design/widget/TabLayout.html
For this to work you'd need to use the Android Toolbar (which is really just another View with some half-baked additions).
have a layout like this in your activity: (pseudo code)
<TOOLBAR>
<IMAGEVIEW>
<VIEWPAGER WITH TABS>
You'll want to declare your Theme/Styles to make sure your activity contains no action bar (since you will be replacing it with the Toolbar). Also some versions of Android used to crash if you tried to add a Toolbar when there was an ActionBar. Not sure if this was fixed.
What i am trying to do:
I am using a drawer where i have 10 fragments
Inside one of the fragment i am trying to add view pager with
sliding tabs(that has view pager indicator as per jake wharton)
What is happening:
When i tried to do this i get error as described here in one of my
other stackoverflow question
I am not able to bring the architecture described in the figure
below
Question::
Is placing view pager with sliding tabs not possible inside
fragments ?
If so are there any samples online ? (Jake wharton sample is done
with placing widgets in activity not fragments)
If any other way is available are there any open source library for
this
Note: i am aware nested way is not advised, but i need to get this architecture
Architecture i am trying to get it:
At first, you can try this sample from Google https://developer.android.com/samples/SlidingTabsBasic/project.html. It also contains the SlidingTabLayout class, try it, if you use something different.
This project is similar to your (has the same layout) except navigation drawer.
So, let's do the following things:
your main layout may look like this:
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="#+id/content_fragment"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<LinearLayout
android:id="#+id/drawer"
android:layout_width="#dimen/drawer_width"
android:layout_height="match_parent"
android:layout_gravity="left"
android:background="#color/drawer_back"
android:gravity="left|center_vertical"
android:orientation="vertical">
<ListView
android:id="#+id/left_drawer"
android:layout_width="#dimen/drawer_width"
android:layout_height="0dip"
android:layout_gravity="left"
android:layout_weight="1"
android:background="#color/drawer_back"
android:choiceMode="singleChoice"
android:clipToPadding="false"
android:divider="#android:color/darker_gray"
android:dividerHeight="1dp" />
</LinearLayout>
</android.support.v4.widget.DrawerLayout>
For fragment with sliding tabs use the following layout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<yourpackage.slidinglayout.SlidingTabLayout
android:id="#+id/sliding_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"/>
<View
android:layout_width="match_parent"
android:layout_height="4dp"
android:background="#drawable/toolbar_shadow" />
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="0px"
android:layout_weight="1"
android:layout_marginTop="#dimen/small_padding"
android:background="#android:color/white"/>
</LinearLayout>
After that you should create a Fragments for your ViewPager and etc. but I think, you've already done it.
Fragment with sliding tabs and ViewPager - it's up to you.
On drawer item with sliding tabs clicked, simple use the FragmentTransaction:
mCurrentFragment = new SlidingTabsFragment();
mTransaction.replace(R.id.content_fragment, mCurrentFragment);
mTransaction.commit();
Is it somehow possible to host two FragmentActivities in one layout?
For example, if I have following layout, can I host one FragmentActivity in container1 and one FragmentActivity in container2?:
<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"
tools:context=".MainActivity" >
<FrameLayout
android:id="#+id/container1"
android:layout_width="match_parent"
android:layout_height="150dp" >
</FrameLayout>
<FrameLayout
android:id="#+id/container2"
android:layout_width="match_parent"
android:layout_height="150dp" >
</FrameLayout>
If this is not possible, can I have one FragmentActivity that loads two different fragments and displays one in container1 and one in container2?
You are a bit confused. Layouts doesn't contain activities, activities contain a layout. In your layout you can put Views and fragments, so yes, it is possible to load two fragments in one FragmentActivity, or rather it is the only way to achieve what you want.
I have been reading your posts and they are very helpful. However, I really need your experienced advise in this and what would you do if you were me.
I am doing and application in which is has 4 tabs. The layout of the 4 tabs is similar (a table that has values in its cells and 3 buttons, and textview). The only thing that changes from one tab to another is the table values and textview. However, I need to share data between the tabs as the values on each tab are dependent on previous tab
How do you think I should approach? I have been reading that using views is generally recommended over activites. Can I use the same view layout for all the tabs?
Please any help on how you would design it will be great. I am on 2.1 and targetting pretty much all platforms .THANK U
PS: I tried (as an example) having textview under the framelayout, but the problem is that changing the text in Java code will make the textview changes in all the tabs. For some reason, I am feeling that having 4 text views (one for each tab) is kinda redundant and bad design but I dont know!
I would approach this by defining a layout, and using that same layout in each of your tabs. E.g.
public class MyTabActivity1 extends Activity {
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.tab_layout);
}
You can go for TabHost and TabWidget to solve your problem. Below is a sample demo for with the implementation. Tab_Layout.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="vertical">
<TabHost android:id="#android:id/tabhost" android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout android:layout_width="fill_parent"
android:layout_height="fill_parent" android:orientation="vertical"
android:paddingTop="4dip">
<TabWidget android:id="#android:id/tabs"
android:layout_width="match_parent" android:layout_height="wrap_content"
android:layout_weight="0" android:orientation="horizontal" />
<FrameLayout android:id="#+android:id/tabcontent"
android:layout_width="match_parent" android:layout_height="0dp"
android:layout_weight="1" />
</LinearLayout>
</TabHost>
</LinearLayout>
In iPhone we can create a view that has a tab bar and make it the root view of the application then use the tab bar to navigate through sub views.
what is the most close approach to this in Android?
Is it to use a Tabbed Control? but this includes using just one activity.
what is the approach to use in Android to create an activity with a navigation control to other activities in a way similar to that of the iPhone?
There's a tutorial for creating a "Tab Layout" on the android dev site:
You can implement your tab content in
one of two ways: use the tabs to swap
Views within the same Activity, or use
the tabs to change between entirely
separate activities
(source: android.com)
Sorry, I really don't know the iPhone, but may a QuickAction Dialog help you??
http://www.londatiga.net/it/how-to-create-quickaction-dialog-in-android/
I imagine a list of some activities in that dialog.
I hope this is close to what you want.
There are a couple of examples around
http://www.anddev.org/code-snippets-for-android-f33/iphone-tabs-for-android-t14678.html
This one is scrollable
http://code.google.com/p/mobyfactory-uiwidgets-android/
<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginBottom="0dp"
>
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
/>
<TabWidget
android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0"
/>
</LinearLayout>
</TabHost>