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>
Related
I want to design 4 tabs bottom at the screen, but my problem is tabs are hidden at bottom of the screen.But in an empty activity the tabs are shown. see the images.
this image is showing tabs with and without activity
here is my code, xml and java
Try setting property
android:layout_above="#id/tabs" to FrameLayout
Edit:
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/tabhost"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TabWidget
android:id="#android:id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" />
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#android:id/tabs"
android:layout_alignParentTop="true" />
</RelativeLayout>
</TabHost>
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" />
I want to be able to scroll within each screen in my android application. when you scroll I want the tab bar to scroll as well. My code works..However when you go to the screen with the tab bar, the tab bar is not visible..to see the tab bar you have to scroll up. Is there any way for the tab bar to be visible by default? thanks
My tab_host.xml code
<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#android:id/tabhost">
<ScrollView
android:layout_height="fill_parent"
android:layout_width="fill_parent" >
<LinearLayout
android:id="#+id/LinearLayout01"
android:orientation="vertical"
android:layout_height="fill_parent"
android:layout_width="fill_parent">
<TabWidget
android:id="#android:id/tabs"
android:layout_height="wrap_content"
android:layout_width="fill_parent">
</TabWidget>
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_height="fill_parent"
android:layout_width="fill_parent">
</FrameLayout>
</LinearLayout>
A ViewPager is what you need and along with a sliding tab class.
<android.support.v4.view.ViewPager
android:id="#+id/mPager"
android:layout_width="match_parent"
android:layout_height="0px"
android:layout_weight="1"
android:background="#color/white"/>
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've been working on a small project that consists of a GUI with a number of tabs. I'm quite new with the concept of fragments however it seems that they're a best practice within the android tab landscape. I managed to code a simple tab app, that switches between 3 tabs.
The only issue I have is when I try placing the tabs at the bottom of the screen. When they're at the bottom, the tab widget covers the container(framelayout in this case) and so nothing happens, the screen remains the same when clicking the various tabs.
The following XML layout represents the good version( where the tabs are at the top of the screen):
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TabHost
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"
>
<TabWidget
android:id="#android:id/tabs"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0"
/>
<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="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
</LinearLayout>
</TabHost>
</LinearLayout>
The following XML layout represents the version that isn't working, when the tabs are at the bottom of the screen:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TabHost
android:id="#android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<RelativeLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TabWidget
android:id="#android:id/tabs"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
/>
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="0dp"
android:layout_height="0dp"
/>
<FrameLayout
android:id="#+android:id/realtabcontent"
android:layout_width="fill_parent"
android:layout_height="0dp"
/>
</RelativeLayout>
</TabHost>
</LinearLayout>
I changed the layour to relativelayout and added this command: android:layout_alignParentBottom="true" to the tabwidget. Does anyone have an alternative idea of how I can sort this issue? Thanks in advance.
In general using tabs at the bottom of the screen is a bad solution (see Android design guidelines).
For your solution: put TabWidget at the end of list of view. Because of drawing is a line process and fragments this your case are drowed upper TabWidget
You can use weight instead. Try this layout marking
<android.support.v4.app.FragmentTabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/tabhost"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<TabWidget
android:id="#android:id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</android.support.v4.app.FragmentTabHost>
You can replace FragmentTabHost with own TabHost class. So, your tabs will be at the bottom of the screen.
Be careful with nested weights (they are bad for performance) and deeping in view hierarchy (especially for android < 4).