How to create GUI with text links and tabs - android

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.

Related

How to remove top shade on tab content

I have created an Android Tab Activity with the following XML code:
<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"
android:layout_marginBottom="5dp"
/>
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1" />
</LinearLayout>
</TabHost>
The first tab renders a WebView in its own layout file like this:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center|top"
android:orientation="vertical"
android:layout_margin="0dp" android:padding="0dp">
<ScrollView
android:layout_width="match_parent" android:layout_height="match_parent"
android:layout_margin="0dp" android:padding="0dp">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_margin="0dp" android:padding="0dp">
<WebView android:id="#+id/webview"
android:layout_height="match_parent" android:layout_width="fill_parent" android:background="#00000000"
android:layout_margin="0dp" android:padding="0dp"
/>
<Button android:id="#+id/next" android:layout_width="fill_parent" android:layout_height="fill_parent"
android:text="#string/hotelPhotosBtn" android:layout_marginLeft="8dp" android:layout_marginRight="8dp"/>
</LinearLayout>
</ScrollView>
And the result is the activity to render something like this:
My Question is:
Why this shade appears inside the tab content ? How can i remove it ?
I have tried everything to remove it but it keeps on appearing.
I have read this and this but noone helped.
setStripEnabled(false);
Look at this Android Developer web
http://developer.android.com/reference/android/widget/TabWidget.html#setStripEnabled%28boolean%29

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)

RelativeLayout, Include and layout_alignParentBottom doesn't work

How do I let my include exactly at the end of the screen? At the time he gets to the end of the content.
<!-- language: lang-xml -->
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="fill_parent">
<ScrollView android:layout_width="fill_parent"
android:layout_height="fill_parent" android:background="#f6ba79"
android:orientation="vertical" android:id="#+id/layout">
<LinearLayout android:id="#+id/linearLayout2"
android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="fill_parent" android:background="#drawable/preferences_background">
<include android:id="#+id/include1" android:layout_width="fill_parent"
layout="#layout/top" android:layout_height="wrap_content"></include>
<LinearLayout android:layout_width="fill_parent"
android:gravity="center" android:id="#+id/linearLayout1"
android:layout_height="wrap_content">
<LinearLayout android:orientation="vertical"
android:layout_width="270dp" android:id="#+id/body"
android:layout_height="wrap_content" android:focusableInTouchMode="true">
<ImageView android:src="#drawable/preferences"
style="#style/Theme.Connector.ImageElement" android:layout_width="wrap_content"
android:id="#+id/title" android:layout_height="wrap_content"></ImageView>
<Spinner android:layout_width="fill_parent"
style="#style/Theme.Connector.WelcomeSpinner"
android:layout_weight="1" android:id="#+id/spinner_isp"
android:layout_height="wrap_content" />
<EditText android:singleLine="true" android:hint="#string/txt_user"
android:layout_height="wrap_content" android:layout_width="fill_parent"
android:id="#+id/edit_user" style="#style/Theme.Connector.PreferencesInput" />
<EditText android:singleLine="true" android:hint="#string/txt_password"
android:layout_height="wrap_content" android:layout_width="fill_parent"
android:id="#+id/edit_password" android:password="true"
style="#style/Theme.Connector.PreferencesInput" />
<LinearLayout android:orientation="vertical"
android:layout_width="fill_parent" android:id="#+id/frm_action"
android:layout_height="fill_parent" android:baselineAligned="false">
<Button android:text="#string/btn_save"
android:layout_weight="0" android:layout_width="130dp"
android:layout_height="wrap_content" style="#style/Theme.Connector.Button"
android:layout_gravity="center" android:id="#+id/btn_save"></Button>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</ScrollView>
<include android:id="#+id/include1" android:layout_width="fill_parent"
layout="#layout/menu" android:layout_height="wrap_content" android:layout_alignParentBottom="true"></include>
</RelativeLayout>
The problem is that your ScrollerView has a layout_height="fill_parent". RelativeLayout will make that view fill the entire space.
A LinearLayout will work better in your case:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<ScrollView
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#f6ba79"
android:orientation="vertical"
android:id="#+id/layout">
...
</ScrollView>
<include
android:id="#+id/include1"
android:layout_width="fill_parent"
layout="#layout/menu"
android:layout_height="wrap_content" />
</LinearLayout>
The key here is to have the height of the ScrollerView set to 0dp and the weight set to 1 (or any number really). LinearLayout will then stretch the ScrollerView to fill the view and still make room for the #layout/menu at the bottom.

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.

Tab Widget and Listview combo

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.

Categories

Resources