I want to add icon image as a tab in my android app.
When added, the tab height is equal to icon image height. but width of tab is larger than icon image width. i want tab width also equal to icon image width.
My Application Picture:
My Requirement:
Also, i want to make blue selection strip of tab invisible. i used "android:tabStripEnabled=false" but still it is visible.
layout code:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:background="#drawable/abst"
tools:context=".MainActivity">
<RelativeLayout
android:id="#+id/header"
android:layout_width="fill_parent"
android:layout_height="20dp"
android:background="#drawable/header">
</RelativeLayout>
<TabHost
android:id="#android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_below="#+id/header">
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<HorizontalScrollView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scrollbars="none"
>
<TabWidget android:id="#android:id/tabs"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="0sp"
android:tabStripEnabled="false"
android:dividerPadding="0dp"/>
</HorizontalScrollView>
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="5dp">
</FrameLayout>
</LinearLayout>
I wants some hints to make it possible. Thanks.
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
I've followed the answer of rekaszero in Android remove space between tabs in tabwidget but now i need to set the tabs fit the screen automatically (in this mini-tut they are too big and they are off the screen) and also need to remove the text because the tabs should have only the icon to occupy the entire tab and not text. I can set their width in the main.class but i dont want to set their width, but they to fit auto.
Can someone help me out?
thanks
Ok. I figured out the big tabs width with the replacement with this code on main.xml:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TabHost
android:id="#android:id/tabhost"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="5dp" >
<TabWidget
android:id="#android:id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
</TabWidget>
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="5dp" >
</FrameLayout>
</LinearLayout>
</TabHost>
</RelativeLayout>
Now i'll try to remove the text from it. If you already know how help me out. thanks
I want make a layout like this:
The thing with the action bar is fine, I made it work. But the left list with the images is displayed over the whole display when I create a ListView, so you can't see the TabHost on the right side. So how can I make a ListView on the left and a TabHost right, so that the list is 20% of the display and the tab 80%?
So that you can select an image in the list and do something with it in the tabs. It's for tablets and I work with the Honeycomb 3.0 API.
My Layout is like this:
<?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"
android:orientation="horizontal">
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical" >
<ListView
android:id="#+id/id_list_view"
android:layout_width="wrap_content"
android:layout_height="fill_parent" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical" >
<TabHost
android:id="#+id/tabhost"
android:layout_width="wrap_content"
android:layout_height="match_parent" >
<LinearLayout
android:id="#+id/linearLayout3"
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>
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="match_parent"
android:layout_height="match_parent" >
</FrameLayout>
</LinearLayout>
</TabHost>
</LinearLayout>
I recommend you to make this screen using Fragments, it's the best and the correct way to achieve what you want
Keep layout weight property for both vertical Linear Layouts as 0.2 and 0.8 respectively and keep layout width equal to 0 pixels for both vertical Linear Layouts.
I'm trying to split the screen in 2 areas, to the left an ImageView and to the right a ScrolView. I'm adding the ImageView and the content of the ScrollView programatically, so the xml file of the layout looks like this:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<FrameLayout
android:id="#+id/scene_view"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="left"
>
</FrameLayout>
<ScrollView
android:layout_height="fill_parent"
android:layout_width="#dimen/scrollmenu_width"
android:layout_gravity="right"
>
<LinearLayout
android:id="#+id/scrollmenu"
android:layout_height="fill_parent"
android:orientation="vertical"
android:layout_width="fill_parent"
>
</LinearLayout>
</ScrollView>
</FrameLayout>
What am I doing wrong? because I'm getting the ScrollView to the right, but the ImageView centered (relative to the screen) placed on the left of the screen. The resolution of the image exceeds the screen's resolution so I get black sp
I think you should make use of the LinearLayout and the weight parameter to solve this problem.
I have edited your snippet to give you an idea of how you should use it.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal">
<FrameLayout
android:id="#+id/scene_view"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_gravity="left"
android:layout_weight=1>
</FrameLayout>
<ScrollView
android:layout_height="fill_parent"
android:layout_width="0dp"
android:layout_weight=1
android:layout_gravity="right">
<LinearLayout
android:id="#+id/scrollmenu"
android:layout_height="fill_parent"
android:orientation="vertical"
android:layout_width="fill_parent">
</LinearLayout>
</ScrollView>
</FrameLayout>
I hope it helps..
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.