I'm developing an Android app implementing the a tabhost, viewpager, and a top-side sliding drawer and tabs at the bottom. The application uses the android-support-v4 FragmentPagerAdapter, which can be found in the samples of the v4-support-package. A reference can be found here:
http://developer.android.com/reference/android/support/v4/app/FragmentPagerAdapter.html
I can't seem to get both the Sliding Drawer and the TabHost to appear on the screen at the same time.
Here is my layout. The com.mobicartel... block is a custom sliding drawer. -------------------------------------------------------------------------------------------
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:my="http://schemas.android.com/apk/res/com.mobicartel.tabsandpager"
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<com.mobicartel.tabsandpager.slidingdrawer.MultiDirectionSlidingDrawer
xmlns:my="http://schemas.android.com/apk/res/com.mobicartel.tabsandpager"
android:id="#+id/drawer"
my:direction="topToBottom"
android:layout_width="match_parent"
android:layout_height="wrap_content"
my:handle="#+id/handle"
my:content="#+id/content">
<include
android:id="#id/content"
layout="#layout/pen_content" />
<ImageButton
android:id="#id/handle"
android:layout_width="wrap_content"
android:layout_height="40px"
android:src="#drawable/sliding_drawer_handle_bottom" />
</com.mobicartel.tabsandpager.slidingdrawer.MultiDirectionSlidingDrawer>
<FrameLayout
android:id="#+id/tab_host_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/drawer">
<TabHost
android:id="#android:id/tabhost"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="0"/>
<TabWidget
android:id="#android:id/tabs"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0"
android:layout_marginBottom="-4dip"/>
</LinearLayout>
</TabHost>
</FrameLayout>
The content of TabHost actually isn't being displayed. Instead, the tab listener & viewpager listener control each other so they are in sync. The ViewPager is populated with fragments by a special adapter.
Any ideas?
Does anybody
I've never used TabHost with tabs at the bottom, because it is advised against (in the official Design Guidelines), however, it appears that you are using the hack found here: https://stackoverflow.com/a/2710404/377260.
I notice that your FrameLayout weight is 0, along with the height and width. Try setting them to:
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="5dp"
android:layout_weight="1"/>
as found in the answer linked to.
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 am Unable to set Scroll view inside my android app development when i am adding scroll view it overlapping tab head and also unable to switch tabs thank you for your valuable time..`
<TabWidget
android:id="#android:id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</TabWidget>
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/bRecharge">
<ScrollView
android:id="#+id/scroll"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#android:id/tabhost">
<LinearLayout
android:id="#+id/linear"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<RelativeLayout
android:id="#+id/Mobile"
android:layout_width="match_parent"
android:layout_height="419dp"
android:orientation="vertical">
</RelativeLayout>
<RelativeLayout
android:id="#+id/DTH"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
</RelativeLayout>
<RelativeLayout
android:id="#+id/Datacard"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
</RelativeLayout>
</LinearLayout>
</ScrollView>
</FrameLayout>
</TabHost>`
Open <TabHost> . In your code you're adding </TabHost> but I don't see anywhere the open of it.
Sorry friends .. its very simple to add scroll view in tabhost add scroll view the different activity xml files that we used in the main tabhost
Thank you so much
I'm developing an application for Android 2.3.3 later. In an Activity I use a tabhost the first tab has a pager for photos, the second a list, The whole layout has a background image. When I test my app in my virtual Machine API lvl 18 there is no problem, when I test it in my device Android 2.3.6, I have a problem. When I scroll the list, its background becomes white and when I stop interacting with it, its background is returned to be the background of the layout.Is this a problem due to Android version? can I do something to fix it? this is the layout file just in case you se something I miss.
<?xml version="1.0" encoding="utf-8"?><TabHost xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/tabHost"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/panel_start">
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="5dp">
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="5dp"
android:layout_weight="1">
<RelativeLayout
android:id="#+id/tab1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
<RelativeLayout android:id="#+id/tab2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:background="#drawable/panel_start" >
<ListView
android:id="#+id/videos"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true" >
</ListView>
</RelativeLayout>
</FrameLayout>
<TabWidget
android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0"
android:layout_marginBottom="-4dp"/>
</LinearLayout>
try this line for ListView
android:cacheColorHint="#android:color/transparent"
By using this your background stay as you given
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).
I know this is a bit odd but bear with me.
I have a custom view, that extends TabHost and inflates a XML.
It includes several views, it is aligned to bottom and everything works great.
The problem is when I put the TabHost in a different activity, where I don't want to see any of the TabHost views. Only the TabHost tabs on top of the activity layout. Basically, I want the TabHost to be there as a disabled bottom bar.
here's the TabHost XML (which works great and aligned to bottom, as long as I toggle between one of the custom views):
<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+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="match_parent"
android:layout_weight="1"
>
<CustomView#1
android:id="#+id/tab_watch_me"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<CustomView#2
android:id="#+id/tab_messages"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<CustomView#3
android:id="#+id/tab_search_results"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<CustomView#4
android:id="#+id/tab_my_profile"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<CustomView#5
android:id="#+id/tab_user_profile"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</FrameLayout>
<TabWidget
android:id="#android:id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0" />
</LinearLayout>
</TabHost>
Here's the activity XML (the one that I don't want the tabhost views to be shown, only to align the tabhost buttons to the bottom):
<?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" >
<customview.HeaderView
android:id="#+id/header_view"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
**//Notice that I don't want to show any of the customViews the tabhost hold. only the tabhost tabs/buttons**
<customview.MyTabHost
android:id="#+id/settings_tabhost"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
Let me know if you need more code in order to help!
Thank you!
My RelativeLayout solution in case this helps anyone. I'm still looking for a better solution if anyone has to offer.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<customview.HeaderView
android:id="#+id/header_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true" />
<Any other view
android:layout_below="#+id/header_view"
/>
<customview.MyTabHost
android:id="#+id/settings_tabhost"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentBottom="true" />
</RelativeLayout>