I am using the following XML for tabs and this displays the tab at the bottom. However the tabs are being overlapped by the list and i cannot access any tab feature. The picture might be able to explain it better.
The list is draw over the tab. I appreciate any suggestions of bringing the tab to the front
XML:
![<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:orientation="vertical"
android:layout_width="fill_parent" android:layout_height="fill_parent"
>
<View android:layout_width="fill_parent" android:layout_height="0.5dip"
android:background="#000"/>
<TabWidget android:id="#android:id/tabs"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:layout_marginLeft="0dip" android:layout_marginRight="0dip"
android:layout_alignParentBottom="true"
/>
<View android:layout_width="fill_parent" android:layout_height="2dip"
android:background="#696969" />
<View android:layout_width="fill_parent" android:layout_height="2dip"
android:background="#000" />
<FrameLayout android:id="#android:id/tabcontent"
android:layout_width="fill_parent" android:layout_height="fill_parent" />
</RelativeLayout>
</TabHost>][1]
The solution for this is you have to set listview height so it will not overlap the tab at boot, just set fixed size for it.
<Listview
android:layoutheight="some fixed value">
If you are dynamically filling that then use
ln.setLayoutParams(new LayoutParams(width,height));
Related
I have a Tabhost in my app which have 5 tabs in it. I set a background image on my tabhost by putting android:background = "#drawable/background" in my xml file, but unfortunately the whole ui becomes laggy. How can I optimize the image in order to eliminate the lag in my UI? Please help me with this one.
<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"
android:background = "#drawable/background">
<LinearLayout
android:id="#+id/LinearLayout01"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#FCAFA6"
android:orientation="vertical" >
<ImageView
android:layout_width="fill_parent"
android:layout_height= "52dp"
android:background="#drawable/header" />
<TextView
android:id="#+id/tabTitle"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp"
android:gravity="center"
android:text="Home"
android:textColor="#FFFFFF" />
</LinearLayout>
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1">
</FrameLayout>
<TabWidget
android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0" >
</TabWidget>
</LinearLayout>
</TabHost>
You have to make various device size background and put on respective folder for more check this :Android background image size in pixel
How to delete 2 point in bottom of tabhost
Please see below image to get more detail.
Thanks so much.
This is XML, I'm using default tabhost and i don't know why they appear
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_marginBottom="50dp">
<TabHost android:id="#android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="top"
android:layout_marginLeft="-4dp"
android:layout_marginRight="-4dp"
android:layout_marginTop="37dp"
android:layout_weight="1" >
</FrameLayout>
<TabWidget
android:id="#android:id/tabs"
style="#color/white"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0" />
</LinearLayout>
</TabHost>
</FrameLayout>
You're going to need to post the XML/Code you used to create this.
I have created a TabHost in main activity with 4 tab specs. I have set the background for the Tab host (drawable, png image) and made all activities in the tab specs to be transparent.
For example:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<!-- Dummy item to prevent EditText from receiving focus -->
<LinearLayout
android:focusable="true" android:focusableInTouchMode="true"
android:layout_width="0px" android:layout_height="0px"/>
<EditText android:id="#+id/etContactSearch"
android:layout_height="60dip"
android:layout_width="fill_parent"
android:drawableRight="#drawable/search_contact" >
</EditText>
<ListView android:id="#+id/lvContacts"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_margin="1dp"
android:cacheColorHint="#00000000"
android:listSelector="#drawable/relative_layout_clickable">
</ListView>
</LinearLayout>
And one of the tab specs has some linear layouts and list activity:
<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"
android:background="#drawable/bck_list">
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="0dp">
<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="0dp" />
</LinearLayout>
</TabHost>
When I start the application from Eclipse, the first time it runs, the background (#drawable/bck_list) is shown perfectly. But if I close the application and run it again, the background is missing (black color is showing instead).
What can be the problem here?
mTabHost.addTab(mTabHost
.newTabSpec("tab_1")
.setIndicator(g(R.string.TList))
.setIndicator(g(R.string.TList),
getResources().getDrawable(R.drawable.lis))
.setContent(new Intent().setClass(this, GList.class)));
I have this layout file in my android application:
<?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">
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1">
<TextView
android:id="#+id/textview1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="this is a tab" />
<TextView
android:id="#+id/textview2"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="this is another tab" />
<LinearLayout
android:id="#+id/layoutSearch"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<TextView
android:id="#+id/textview4"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="Search here" />
<EditText
android:id="#+id/editSearch"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</FrameLayout>
<TabWidget
android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0"/>
</LinearLayout>
</TabHost>
My problem is that LinearLayout android:id="#+id/layoutSearch" shows only one of the elements it contains (the text view, in the code above) If I remove the textview, it shows the EditText.
How do I make it display both (and more) elements?
There's a lot of excess layout there, but it looks like the real issue is that layoutSearch is a vertical LinearLayout with two children, but the first child's height is set to fill_parent, so you naturally never see the second one. Try setting its height to 0px but giving it a layout_weight of 1, and it should expand to take all the available space not taken by the EditText below it.
I have a screen that uses tabs in my android application. There is a line (like a border) that shows between the tabwidget and the framelayout. I want to get rid of that line, but cant seem to find what it is. I have determined that it is part of the FrameLayout by setting its visibilty to gone. Please refer to the code 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="fill_parent">
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#fb8c10"
>
<ImageView
android:id="#+id/img_confirm_header"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:src="#drawable/confirm_header"
/>
<TabWidget
android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="0dip"
android:background="#fb8c10"
android:tabStripEnabled="false"
/>
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/tab_bg"
/>
</LinearLayout>
</TabHost>
This is a link of the current layout and what I'm trying to do
http://img441.imageshack.us/g/screenshot20110116at513.png/
The orange layout is my app, and the gray is what I'm trying to do.
Notice how in the gray screenshot the tab flows into the frame.
Apologies for the links, I can't post images yet :p
Thanks!
I managed to solve this by manipulating the z-index using relative layout. I was able to position the tabs slightly over the frame layout. Refer to code 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="fill_parent">
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#fb8c10"
>
<ImageView
android:id="#+id/img_confirm_header"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:src="#drawable/tab_header"
/>
<RelativeLayout
android:id="#+id/widget77"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#android:color/transparent"
>
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#android:color/transparent"
android:layout_marginTop="33dip"
/>
<TabWidget
android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#fb8c10"
android:tabStripEnabled="true"
android:layout_above="#android:id/tabcontent"
android:layout_marginBottom="40dip"
/>
</RelativeLayout>
</LinearLayout>
</TabHost>
Just now I came across this issue. However, I also tried to remove the top border of FrameLayout. I did it. but I don't think it is a way to remove the top border. anyway FYI,
Just place an TextView with background white on Border and use AbsoluteLayout.
Eg:
<AbsoluteLayout>
<TabHost
android:layout_x="0dip"
android:layout_y="5dip" ...>
<AbsoluteLayout android:padding="5dip" android:background="#ffffff">
<TabWidget/>
<FrameLayout ....
android:layout_x="0dip" android:layout_y="65dip" />
</AbsoluteLayout>
</TabHost>
<TextView
android:layout_width="fill_parent" android:layout_height="25dip"
android:layout_x="0dip" android:layout_y="65dip"
android:background="#ffffff"/>
</AbsoluteLayout>