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)
Related
I am facing some problems while developing a screen involving a tabWidget. I have used a scrollView. The problem is that when i scroll up, the editText overlaps the tabs. Here is my main.xml file. So when i try scrolling up, the title editText begins to overlap on the TabHeading.
<?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="match_parent"
android:id="#+id/tabHost"
>
<TabWidget android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#android:id/tabs"
/>
<FrameLayout android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="50px"
android:id="#android:id/tabcontent"
>
<ScrollView android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/scrollview">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:id="#+id/createAlarmTab"
android:paddingTop="50px"
>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/title"
android:visibility="visible"
/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/desciption"
android:visibility="visible"
android:singleLine="false"
android:lines="4"
android:gravity="top"
android:padding="10px"
/>
<DatePicker
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/alarmDate"
android:visibility="visible"
android:padding="10px"
/>
<TimePicker
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/alarmTime"
android:visibility="visible"
android:padding="10px"
/>
</LinearLayout>
</ScrollView>
<LinearLayout android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="wrap_content"
android:id="#+id/viewAlarmTab"
android:paddingTop="50px"
>
<ListView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/alarmList"
android:visibility="visible"
android:padding="10px"
/>
</LinearLayout>
</FrameLayout>
</TabHost>
Managed to solve it. Enclosed the scrollview inside a linearLayout and added some padding.
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>
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.
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.
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.