Background a TabHost on Android - android

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)));

Related

Is it possible to use Tabwidget on 2 rows

Currently i use TabWidget with 4 tabs on 1 Rows.
Each tab have a text description, not an icon.
I want to insert 1 or 2 Tabs more, but it's not possilbe on the rows because on small screen text description will be too small.
I wonder if a can add antoher tab row (just below the first row) with 1 or 2 tab inside?
My code is:
<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="wrap_content"
android:dividerPadding="8dp"
android:scrollbars="horizontal" />
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:paddingTop="65dp" >
<!-- Tab 1 -->
<LinearLayout
android:id="#+id/tab_alimentation"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:padding="5dp" >
</LinearLayout>
<!-- Tab 2 -->
<LinearLayout
android:id="#+id/tab_lance1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:padding="5dp" >
</LinearLayout>
<!-- Tab 3-->
<LinearLayout
android:id="#+id/linearLayout_tab_resultat"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:padding="5dp">
</LinearLayout>
<!-- Tab 4 -->
<LinearLayout
android:id="#+id/tab_lance2"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:padding="5dp" >
</LinearLayout>
</FrameLayout>
</TabHost>
Do you think it's possible,?
thx,

ListView Complications

Because the information in each tab may not display depending on screen size, i have added a scrollview. The list view displays the information from the database alright but then it does not spread across the screen. It takes only a small portion of the screen and I can only scroll in that small portion. If i have 2 sets on information I expect to see two rows but I see just one and I can scroll within that to see the second set of information. But when i remove the scroll view my listview displays like it is supposed to but then the other tabs suffer because i cannot scroll to see the other fields.
Below is my main activity:
<TabHost
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/tabHost">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<TabWidget
android:id="#android:id/tabs"
android:layout_width="match_parent"
android:layout_height="match_parent"></TabWidget>
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/scrollView"
android:fillViewport="true">
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<!--Overview Tab Starts-->
<LinearLayout
android:id="#+id/overviewTab"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<ListView
android:id="#+id/displayListView"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
</LinearLayout>
<!--Overview Tab ends-->
<!--Base Data Tab starts-->
<LinearLayout
android:id="#+id/baseDataTab"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:padding="15dp">
//the needed views go here//
</LinearLayout>
<!--Base Data Tab ends-->
<!--Task Tab starts-->
<LinearLayout
android:id="#+id/taskTab"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:padding="15dp">
//the needed views go here//
</LinearLayout>
<!--Task Tab ends-->
<!--Survey Tab starts-->
<LinearLayout
android:id="#+id/surveyTab"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:padding="15dp">
//the needed views go here//
</LinearLayout>
<!--Survey Tab ends-->
</FrameLayout>
</ScrollView>
</LinearLayout>
</TabHost>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/tabHost"
android:layout_width="match_parent"
android:layout_height="fill_parent" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TabWidget
android:id="#android:id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
</TabWidget>
<ScrollView
android:id="#+id/scrollView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true" >
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<!-- Overview Tab Starts -->
<LinearLayout
android:id="#+id/overviewTab"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<ListView
android:id="#+id/displayListView"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
</LinearLayout>
<!-- Overview Tab ends -->
<!-- Base Data Tab starts -->
<LinearLayout
android:id="#+id/baseDataTab"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:padding="15dp" >
</LinearLayout>
<!-- Base Data Tab ends -->
<!-- Task Tab starts -->
<LinearLayout
android:id="#+id/taskTab"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:padding="15dp" >
</LinearLayout>
<!-- Task Tab ends -->
<!-- Survey Tab starts -->
<LinearLayout
android:id="#+id/surveyTab"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:padding="15dp" >
</LinearLayout>
<!-- Survey Tab ends -->
</FrameLayout>
</ScrollView>
</LinearLayout>
You had some problems with your layout_height and width attributes. I changed some of them, this should work ;-)

How to optimize a image with a large resolution of 1920x1080, in order to make it as a background?

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

Android + Bringing Tab to Front

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));

top border on FrameLayout when using tabs

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>

Categories

Resources