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.
Related
I want to design a divided screen into two non equal parts in a landscape mode of screen. So, I thought automatically in using fragments. But the problem that I have encountered is that each fragment match the half of the screen. And that's not what I want exactly. What I want is a screen with two parts non equal in their width. I want something like this:
You can make use of the weight parameter.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="3" />
</LinearLayout>
Please notice the weights used for the two LinearLayouts. The first one has a weight of 1 (it can occupy 1/4 th of the screen) and the second one 3 (it can occupy 3/4 th of the screen).
Just use this exact same concept for your fragments and maintain nay proportion as you wish.
Hope I could make myself clear.
Use weight parameter
<LinearLayout android:orientation="vertical" android:layout_height="fill_parent" android:layout_width="fill_parent">
<LinearLayout android:layout_weight="1" android:layout_height="fill_parent" android:layout_width="fill_parent"/>
<LinearLayout android:layout_weight="3" android:layout_height="fill_parent" android:layout_width="fill_parent"/>
</LinearLayout>
set Linear layout weight to achieve this...
<?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" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="2" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1" />
</LinearLayout>
I want to add a Button at the right end of my TabWidget.
The TabWidget is inside a HorizontalScrollView (added in code)
but the Button shall not scroll together with the tabs,
but stay persistently right of the tab bar.
I'm not sure if I can customize the TabWidget that way, so another idea would be
to place such a Button just besides the TabWidget.
I tried this with the follwing Layout, but the TextView does not appear.
So the question for me is, is it generally doable, or do I need a different approach ?
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.app.FragmentTabHost
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/content_tabhost"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<TabWidget
android:id="#android:id/tabs"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView
android:id="#+id/tab_search"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="SEARCH HERE"/>
</LinearLayout>
<FrameLayout
android:id="#+id/content_body"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
</android.support.v4.app.FragmentTabHost>
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.
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 have an activity that displays two fragments on the screen, one under the other. The top fragment is the user interface for the activity and the second is a custom ListView. I have two fragments that can fill the top slot, each a different size. The ListView is used for both.
The problem I'm facing is that there is a major gap between the top and bottom fragments. I know that it has something to do with the layout_weight attribute, and layout_weight is the only way I've seen to control how much of the screen a fragment commands.
What I would like to find out is if there is a way to dynamically resize the reserved fragment area when the fragment is loaded, or if I'm stuck with this ugly gap.
Here is my layout:
<?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="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:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0"
/>
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="0"/>
<FrameLayout
android:id="#+android:id/realtabcontent1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<FrameLayout
android:id="#+android:id/realtabcontent2"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="2" />
</LinearLayout>
</TabHost>
</LinearLayout>
I have figured it out. The layout height of both FrameLayouts hosting the fragments should be set to android:layout_height="wrap_content" and the layout_weight line should be removed. Then the spacing is handled dynamically on a fragment being loaded to that FrameLayout.