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.
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 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've problem similar to the one here: Android ListView doesn't expand the whole screen?
The XML is:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="fill_parent" android:id="#+id/ResultLayout">
<ScrollView android:layout_width="fill_parent" android:layout_height="fill_parent">
<ListView android:layout_width="fill_parent" android:id="#+id/ListView"
android:layout_height="fill_parent"></ListView>
</ScrollView>
<LinearLayout android:id="#+id/pagingPanel"
android:gravity="center" android:layout_width="fill_parent"
android:layout_height="fill_parent" android:orientation="horizontal"></LinearLayout>
<Spinner android:layout_width="fill_parent" android:id="#+id/ManSpinner"
android:layout_height="fill_parent" />
</LinearLayout>
In this case, I should have a ScrollView or the PagingPanel LinearLayout will disappear.
Edit
The desired layout is to have all the elements stacked on top of each other. but if the elements exceed the page height, a scroll should be added to the ListView.
If you have a vertical LinearLayout, You can't have multiple fill_parent for layout_height of your LinearLayout elements. What layout you would like to achieve? Uniformly divide screen for all elements?
Another problem is that using ListView in ScrollView is not a good idea also because ListView itself is scrollable.
You should write what layout you would like to achieve with your XML. Also generally is a good practice to write your XML in multiple steps and iterate to woking solution layout by layout.
EDIT: Ok, try something like this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/ResultLayout">
<ListView android:id="#+id/ListView"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<LinearLayout android:id="#+id/pagingPanel"
android:gravity="center"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
</LinearLayout>
<Spinner android:id="#+id/ManSpinner"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
</LinearLayout>
I have a layout that is three linear layouts. The top has some icons and the middle has a tabhost. Each tabhost has a list inside it. The bottom linearlayout has two buttons that should stay at the bottom on the screen at all times. The problem is when a list in the tabhost gets too long, it displays over the buttons. I tried to find some way to get the buttons to bedisplayed over the list but have failed so far. Any help would be appreciated. :-) Thanks!
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TabHost
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="395dp"
android:background="#000000">
<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>
</LinearLayout>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="fill"
android:layout_margin="0dp"
android:padding="0dp"
>
<Button
android:id="#+id/btnGroup"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Ptt"
android:layout_gravity="bottom"
android:layout_weight="2"
android:hapticFeedbackEnabled="true"/>
<Button
android:id="#+id/btnMenu"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Menu"
android:layout_gravity="bottom"
android:layout_weight="2"
android:hapticFeedbackEnabled="true"/>
</LinearLayout>
I generally put my LinearLayouts inside of a ScrollView to solve this situation. (The buttons stay outside) It allows your buttons to stay in the correct location at all times and the user scroll the rest of the view.
ScrollView Docs