Tab Widget and Listview combo - android

Howdy, I am trying to combine the TabWidget and ListView Tutorials. Also I added a couple of buttons with no functions right now. Each tab is supposed to be a ListView (for right now). I run the app and it launches as just a ListView and no tabs. Here is the main.xml used in TabaWidget.java:
<?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"
android:padding="5dp">
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="50dp"
android:gravity="center_horizontal" >
<Button
android:id="#+id/MainMenu"
android:layout_width="120dp"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="Main Menu" />
<Button
android:id="#+id/Sort"
android:layout_width="120dp"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="Sort" />
</LinearLayout>
<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:layout_width="fill_parent"
android:layout_height="wrap_content" />
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="5dp" />
</LinearLayout>
</TabHost>
</LinearLayout>
If the problem doesn't lye in there, then I can post other code as well. Thanks in advance.

Related

To want Tab layout set in bottom in android

How can i set Tab Layout in Bottom?
I try this property
android:gravity="bottom"
android:layout_marginBottom="-3dp"
but not any effect and give error.

Place Tab Widget to below FrameLayout like this
<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+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">
<FrameLayout android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight="1" >
</FrameLayout>
<TabWidget android:id="#android:id/tabs"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:layout_weight="0" />
</LinearLayout>
</TabHost>

You have a best android Tab Layout to set that in Layout Bottom. Just use this code -
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="0dip"
android:layout_height="55dip"
android:layout_weight="1"
android:orientation="vertical"
android:background="#drawable/tab_indicator"
android:padding="5dp">
<ImageView android:id="#+id/icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:src="#drawable/icon"
/>
<TextView android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
style="?android:attr/tabWidgetStyle"
/>
And, see this answer. Hope this helps you.

positiong a textView on the screen

I want to place a TextView below the red zone in the following image but I just can do it.
Until now I have the following layout:
<TabHost android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/tabhost1"
xmlns:android="http://schemas.android.com/apk/res/android"
>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TabWidget
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#android:id/tabs"
android:layout_alignParentBottom="true"
/>
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#android:id/tabcontent"
>
</FrameLayout>
</RelativeLayout>
</TabHost>
<LinearLayout android:layout_width="fill_parent"
android:layout_below="#id/layout"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/text"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="0 restaurant trouves"
android:gravity="center_horizontal"
android:layout_alignParentBottom="true"
android:textSize="15dip"
android:textColor="#000000"
/>
</LinearLayout>
Can someone tell what is the right code for placing the textView below the red tab?
Thank you!

Is everything you mentioned in your post in one XML file? It looks like its not well formatted and your screenshot does not make it clear too, but I am giving it a try.
It seems that your TextView is not even inside the RelativeLayout.You are closing it's tag before declaring your TextView, so you have to move it into RelativeLayout.
And I don't know if you want to show this TextView in every single Tab. But if it is like that, you could try the following scheme:
<?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:id="#+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TabWidget
android:id="#android:id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
</TabWidget>
<RelativeLayout
android:id="#+id/relativeLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="TextView" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/textView1"
android:text="TextView" />
</RelativeLayout>
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:id="#+id/tab1"
android:layout_width="match_parent"
android:layout_height="match_parent" >
</LinearLayout>
<LinearLayout
android:id="#+id/tab2"
android:layout_width="match_parent"
android:layout_height="match_parent" >
</LinearLayout>
<LinearLayout
android:id="#+id/tab3"
android:layout_width="match_parent"
android:layout_height="match_parent" >
</LinearLayout>
</FrameLayout>
</LinearLayout>
</TabHost>
</LinearLayout>
There are two TextViews in this example. One is centered and the other one is drawn below of the first with: android:layout_below="#id/textView1".
Now you have to do this with your Views...

your layout code doesn't seem to have everything you have on the screenshot, so I'm not sure how your red set of tabs work but here's a mockup with a simple view:
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TabWidget
android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" />
<TextView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#android:id/tabs"
android:layout_centerHorizontal="true"
android:background="#FFFFFF"
android:gravity="center_horizontal"
android:text="0 restaurant trouves"
android:textColor="#000000"
android:textSize="15dip" />
<View
android:layout_width="fill_parent"
android:layout_height="50dp"
android:layout_above="#+id/text"
android:background="#ff0000" />
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
</FrameLayout>
</RelativeLayout>
That will give you this: (eclipse screenshot, no tabs in widget)

How to add a button above a tabHost layout

So all I want to do is add a button above the tabhost layout...can anyone help me? I've tried several things such as align_bottom, switching views... nothing's worked. If I need to post the code where I'm calling the xml let me know. Here's my xml code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/linearLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<Button
android:id="#+id/button1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button" />
<TabHost
android:id="#android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TabWidget
android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="fill_parent"></TabWidget>
<FrameLayout
android:id="#android:id/tabcontent"
android:background="#ffffff"
android:layout_width="match_parent"
android:layout_height="match_parent"></FrameLayout>
<TextView
android:id="#+id/view1"
android:layout_width="match_parent"
android:layout_height="439dp" ></TextView>
<TextView
android:id="#+id/view2"
android:layout_width="match_parent"
android:layout_height="344dp" ></TextView>
<TextView
android:id="#+id/view3"
android:layout_width="314dp"
android:layout_height="match_parent" ></TextView>
</TabHost>
</LinearLayout>

I had the same issue which i could solve by using below code for xml file:
<?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="wrap_content"
android:padding="5dp">
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/button"
android:text="Button"
/>
<TabWidget android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<FrameLayout android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="5dp" />
</LinearLayout>
</TabHost>

TabHost with FrameLayout under LinearLayout

I've got a small problem with an xml file and a TabHost containing a FrameLayout that shows a ListActivity. A small LinearLayout shall be at the bottom but this is always shown in front of the ListActivity so there are items in the ListActivity behind the LinearLayout even when you scroll the ListView down. I've tried many combinations of different Layouts but I couldn't find a solution :|
Maybe you've got an idea?
Thanks!
This picture might explain my concern: http://img822.imageshack.us/i/listactivity.png/
And here is the xml code:
<?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">
<TabWidget
android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"/>
</LinearLayout>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#231f20">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="There are items behind me..." />
<Button
android:id="#+string/connect"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Connect"
android:layout_gravity="center_horizontal"
android:layout_margin="5dp"/>
</LinearLayout>

You can achieve what you want by using a RelativeLayout:
<?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">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TabWidget
android:id="#+id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"/>
<FrameLayout
android:id="#+id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_below="#id/tabs"
android:layout_above="#+id/footer" />
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/footer"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#231f20"
android:layout_alignParentBottom="true">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="There are items behind me..." />
<Button
android:id="#+string/connect"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Connect"
android:layout_gravity="center_horizontal"
android:layout_margin="5dp"/>
</LinearLayout>
</RelativeLayout>
</TabHost>

Here's an example of a layout I use in one of my apps:
<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/tabhost"
android:weightSum="100"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<!-- This layout will always remain on top -->
<LinearLayout
android:id="#+id/TopBarLayout"
android:background="#drawable/textview_bottom"
android:layout_weight="10"
android:paddingLeft="10dip"
android:paddingRight="10dip"
android:orientation="horizontal"
android:gravity="center_vertical|left"
android:layout_width="fill_parent"
android:layout_height="0dip"
android:weightSum="100"
>
<TextView
android:layout_marginRight="5dip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Mode »"
/>
<Button
style="#style/Tab_Button"
android:id="#+id/ModeChangeButton"
/>
<TextView
android:layout_marginRight="5dip"
android:layout_marginLeft="5dip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="»"
/>
<Button
android:paddingRight="5dip"
android:paddingLeft="5dip"
style="#style/Tab_Button"
android:id="#+id/DateChangeButton"
/>
<View
android:layout_weight="100"
android:layout_width="0dip"
android:layout_height="wrap_content"
/>
<ImageButton
style="#style/Tab_Button"
android:id="#+id/ConfigButton"
android:src="#drawable/gear"
/>
</LinearLayout>
<!-- Frame for tab content -->
<FrameLayout
android:background="#000000"
android:layout_weight="78"
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="0dip"
/>
<!-- Tabs at bottom of screen -->
<TabWidget
android:background="#drawable/textview_top"
android:layout_weight="12"
android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="0dip"
/>
</LinearLayout>
</TabHost>
Here, my LinearLayout is at the top of the screen, but that's an easy fix. You'll probably want to use layout_weight as shown here.

How to create GUI with text links and tabs

I want to create a UI like http://www.ndtv.com/static/images/iphone/motorola_droid.jpg, where extra links are below the tabs. How can we achieve this?
I already made tabs but not understanding how to add this text view with this.

Try it like the XML below.
<?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="wrap_content">
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/background_retinav2">
<LinearLayout
android:layout_gravity="center"
android:foregroundGravity="bottom"
android:background="#color/white"
android:id="#+id/rl_1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<HorizontalScrollView
android:paddingTop="8dp"
android:id="#+id/gv"
android:layout_width="wrap_content"
android:layout_marginTop="0dp"
android:layout_height="wrap_content"
android:background="#ffffff"
android:scrollbars="none"
android:layout_weight="1"
android:foregroundGravity="bottom">
<TextView
android:text="Top Stories"
android:layout_width="wrap_content"
android:layout_height="wrap_content"></TextView>
<TextView
android:text="News"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<LinearLayout
android:id="#+id/san_tag"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</LinearLayout>
</HorizontalScrollView>
</LinearLayout>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<WebView android:id="#+id/content_movies"
android:layout_weight="1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"/>
</FrameLayout>
</LinearLayout>
<TabWidget
android:id="#android:id/tabs"
android:gravity="top"
android:layout_gravity="top"
android:listSelector="#color/gray"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
</TabHost>
Inside the scrollview, place the text view what you need, so it has your title menus.
For more about TabHost, refer to the URL http://developer.android.com/resources/samples/ApiDemos/src/com/example/android/apis/view/Tabs1.html.

Categories

Resources