I'm using a FragmentTabHost (Support library, Android) to load my fragments into tabs. However, I see that the tabs are hosted over my tabcontent. But I want my tabcontent to be laid below the tabs. How is this possible?
I have search but couldn't find anything related to this.
Setting a margin or a padding won't work because, like you said in the comment, the size of the tabs may vary and that solution depends on the height of the TabHost being constant.
I answered this already here: FragmentTabHost content filling remaining space
You don't need to have the container for the fragments (the tabcontent) inside the Tabhost, when you do that you're using the same space for the content of the fragments and the tabs themselves.
Just put the Tabhost inside a vertical LinearLayout and put the FrameLayout outside, below the TabHost, just like in the following sample:
<?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">
<android.support.v4.app.FragmentTabHost
android:id="#android:id/tabhost"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TabWidget
android:id="#android:id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"/>
</android.support.v4.app.FragmentTabHost>
<FrameLayout
android:id="#+id/realtabcontent"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</LinearLayout>
You can add margin to the layouts that hold the fragments. I believe the tabs height is 56dp.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
<!--here-->
android:layout_marginTop="56dp"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:orientation="vertical">
<!--your content-->
</LinearLayout>
I noticed when setting height of TabWidget (e.g. 56dp) all is ok
<TabWidget
android:background="#color/TabWidget"
android:layout_width="match_parent"
android:layout_height="56dp" />
Related
I am trying to display tab widget in the middle of layout as shown below.
I have few text views, progress bar etc. before tab widget.
Is this possible to implement in android?
If it is, how can I do that?
Yes, it is possible.
Let's say you have a vertical LinearLayout as your main layout. You would have something like this:
<?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">
<!-- put your top widgets/progress bars here
their height needs to be fixed or wrap_content -->
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<android.support.v4.view.PagerTabStrip
android:id="#+id/pagertabstrip"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top" />
</android.support.v4.view.ViewPager>
</LinearLayout>
I have a RelativeLayout at the top of my app. Below the RelativeLayout I have a ViewPager.
To explain this in a way that will make sense, imagine the screen's height is 700 pixels. The RelativeLayout is about 200 pixels high.
I want the RelativeLayout to be position absolutely at the top of the app such that the ViewPager is behind it. I then want to add a 200 pixel paddingTop to the ViewPager so that it appears under the RelativeLayout.
Here is the layout I have now (which is obviously not working):
<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">
<RelativeLayout
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="wrap_content">
...
</RelativeLayout>
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</LinearLayout>
I load a ListView with some data under the header:
<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">
<ListView
android:id="#+id/listview"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
How can I do this?
Try changing the linearlayout to a framelayout. This will allow the views to be placed on top of each other.
Then put the code for the pageviewer above the relativelayout. This will make the pageviewer appear to be behind the relativelayout as it is rendered first, and the relativelayout rendered on top of it. Android will render views in the order in which they are declared.
Lastly, add a top margin/padding to the pageviewer to make it seem positioned below the relativelayout.
Here's what you can do:
Use RelativeLayout instead of LinearLayout as the root.
Move the ViewPager(pager) view to the top of child RelativeLayout(header)
<RelativeLayout
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.support.v4.view.ViewPager
android:id="#+id/pager"
android:paddingTop="200px"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<RelativeLayout
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</RelativeLayout>
</RelativeLayout>
I have implemented a navigation drawer. In the FrameLayout of navigation drawer I have added a fragment which contains 2 ViewPagers taking exactly half the screen each. Now I want to add a FAB button at the junction of these two viewpagers as shown here.
In my case both viewpagers occupy exactly half screen which is slightly different from what is shown in image. Can somebody help me in getting the FAB at the junction.
The code for the fragment containing the 2 viewpagers is below:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.view.ViewPager
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/shirt_section"
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="0dp" />
<android.support.v4.view.ViewPager
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/pant_section"
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="0dp" />
</LinearLayout>
You could enclose your linear layout into FrameLayout and add your button like this:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
...
</LinearLayout>
<ImageButton
android:layout_gravity="center_vertical|right"
...
/>
</FrameLayout>
I am using FragmentTabHost for one of my project.
I have more than 5 tabs in my app.
If i used one or two tabs means the TabHost looking good.
If i add more than 5 tabs, The tabhost is shrinking and the tab text showing in a second link also.
I want to add Horizontal scroll only for my tabhost.
However we can add swipe able tab. but i don't want this. i want to swipe only the tabhost. not the tab content.
Thanks in advance.
Use this layout. It includes horizontal scroll view for tab host only.
Note: just add the horizontal scrollview to your tab host bar.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:ads="http://schemas.android.com/apk/lib/com.google.ads"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/mainlayout"
tools:context=".WebView" >
<TabHost
android:id="#android:id/tabhost"
android:layout_width="fill_parent"
android:layout_gravity="center"
android:layout_height="fill_parent">
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_gravity="center"
android:layout_height="fill_parent">
<HorizontalScrollView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:fillViewport="true"
android:scrollbars="none" >
<TabWidget
android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:gravity="center"
android:background="#C0C0C0"
android:layout_height="#dimen/tab_sizes" />
</HorizontalScrollView>
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_gravity="center"
android:layout_height="fill_parent"/>
</LinearLayout>
</TabHost>
</RelativeLayout>
I have a two activities that I switch using tabs. I am having a problem where my activity content does not resize properly to account for the height of the tab widget (therefore the activity content shows clipped behind the tabs). I have the tabs at the bottom. I have tried playing with the tab layout, etc but with no luck.
Is there a way when designing a layout (for the tab content activity) to account for the tab height in android? My guess is that the way I have designed my layout for the activity is too tall after adding it to the tab host. This is possible on iOS but don't know how to do it on android. Any ideas?
<?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="match_parent"
android:layout_height="match_parent" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TabWidget
android:id="#android:id/tabs"
android:layout_alignParentBottom="true"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</TabWidget>
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_above="#android:id/tabs"
android:layout_width="match_parent"
android:layout_height="match_parent">
</FrameLayout>
</RelativeLayout>
</TabHost>
A very simple solution is to use fixed size tabs e.g.
<TabWidget
android:id="#android:id/tabs"
android:layout_alignParentBottom="true"
android:layout_width="match_parent"
android:layout_height="64dp">
</TabWidget>