I want to fit two Listviews (+two Textviews) and a Button evenly into a LinearLayout. The final result should look something like this:
The Listviews can contain any number of items (from empty to requiring to scroll), however the button must be always visible. A lot of answers here suggest to use layout_weight along with layout_height="0dp" and layout_width="fill_parent", however this results in the Listviews taking up all available space and pushing the button out of the screen. I assume the parameters for the button are wrong, but I can't figure out which of them. At least the TextViews are working, since they are positioned correctly in every case.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_gravity="center">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textSize="12sp"
android:gravity="left"/>
<ListView
android:layout_height="0dp"
android:layout_weight="1"
android:layout_width="fill_parent"/>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textSize="12sp"
android:layout_marginTop="12dp"
android:gravity="left"/>
<ListView
android:layout_height="0dp"
android:layout_weight="1"
android:layout_width="fill_parent"/>
<Button
android:layout_height="0dp"
android:layout_weight="1"
android:layout_width="fill_parent"/>
</LinearLayout>
I want to avoid to further nest the layout with additional LinearLayouts, unless there is no other way.
Something like this (not tested):
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="12sp"/>
<ListView
android:layout_height="0dp"
android:layout_weight="1"
android:layout_width="fill_parent"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="12sp"
android:layout_marginTop="12dp"/>
<ListView
android:layout_height="0dp"
android:layout_weight="1"
android:layout_width="fill_parent"/>
<Button
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_width="wrap_content"/>
</LinearLayout>
Your button needs to have wrap_content height and (I think the reason of your bug) LinearLayout should have fill_parent as the height.
Related
I am trying to show three different vertical sections in my Android layout on one screen, each taking up one third of the screen, one on the top, one in the middle, and one on the bottom. Each section has a TextView and a ListView, and the ListViews can scroll so that you can see all items, but the overall page does not move. I have tried putting each TextView and ListView in a LinearLayout and setting the height of each LinearLayout to one third the total height of the screen, but the first ListView just shows all the items in it, taking up most of the screen, and the other sections are pushed down. I also tried using layout_weights, but for some reason it did not work. (EDIT: Setting layout_weight="1" ended up working, I'm not sure what I did wrong the first time) How can I make this work, or is there a better way to go about this?
<LinearLayout
android:layout_width="match_parent" android:layout_height="match_parent"
android:orientation="horizontal" >
<ListView android:layout_width="0dp" android:layout_weight="1"
android:layout_height="match_parent" android:background="#FF0000"/>
<ListView android:layout_width="0dp" android:layout_weight="1"
android:layout_height="match_parent" android:background="#00FF00">
<ListView android:layout_width="0dp" android:layout_weight="1"
android:layout_height="match_parent" android:background="#0000FF">
</LinearLayout>
This will give you three equally wide columns: to make it rows, change the orientation to vertical and swap the values of layout_height and layout_width for each listview. If you need to add the TextViews, you'll have to make each listview in this code either a RelativeLayout LinearLayout or FrameLayout, using same width/height/weight and arranging the ListView and TextView inside to taste. To do this most efficiently, use a Framelayout and use a margin on the listview to offset it from the TextView. You can place the TextView relative to the ListView inside the FrameLayout by using the layout_gravity in the TextView.
Ie (swapping the first "column"):
<FrameLayout android:orientation="vertical" android:layout_width="0dp"
android:layout_weight="1" android:layout_height="match_parent"
android:background="#FF0000">
<TextView android:text="Column!" android:background="#3Eff0000"
android:layout_height="40dp" android:layout_width="match_parent">
<ListView android:layout_marginTop="48dp" android:layout_height="match_parent"
android:layout_width="match_parent" android:background="#8Aff0000"/>
</FrameLayout>
Use 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="horizontal"
android:weightSum="3">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#ff89ff91">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="#1"
android:id="#+id/textView"
android:padding="5dp"
android:gravity="center" />
<ListView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/listView"
android:layout_below="#+id/textView" />
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#ffff8177">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="#2"
android:id="#+id/textView2"
android:padding="5dp"
android:gravity="center" />
<ListView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/listView2"
android:layout_below="#+id/textView2" />
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#ffffe85d">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="#3"
android:id="#+id/textView3"
android:padding="5dp"
android:gravity="center" />
<ListView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/listView3"
android:layout_below="#+id/textView3" />
</RelativeLayout>
</LinearLayout>
I would like to obtain this layout for an Android app for mobile phones:
Icon - Object1
List with entries related to Object1
Icon - Object2
List with entries related to Object2
So far I have used the following layout tree (edited graphically with the editor in Android Studio):
Root-LinearLayout
Vertical LinearLayout
Horizontal LinearLayout with icon and text
ListView
Vertical LinearLayout
Horizontal LinearLayout with icon and text
ListView
May be this is not the best way to organize such layout (may be I should use lists with header, but suggestions very welcome), however it can be a good case for understanding deeper how ListView works.
This is the graphical layout generated:
the blue row corresponds to the first LinearLayout. As you can see from the second screenshot that follows, the second list goes all the way down to Hell, bringing me with her. Is there any way to make the lists respect the wrap_content+ weight behaviour?
The XML code follows. I have tried several combos (both reasonable and unreasonable) of layout:weights but none works. I also tried to set the min-width of the first LinearLayout (the hidden one), but nothing changes.
Could you please help me?
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="2">
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1">
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:minHeight="50dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView15"
android:src="#drawable/abc_ic_menu_share_mtrl_alpha" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Object1"
android:id="#+id/textView24"
android:textSize="26dp"
android:paddingLeft="10dp" />
</LinearLayout>
</LinearLayout>
<ListView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/listView2"
android:layout_weight="1" />
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1">
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView16"
android:src="#drawable/abc_ic_commit_search_api_mtrl_alpha" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Object2"
android:id="#+id/textView25"
android:textSize="26dp"
android:paddingLeft="10dp" />
</LinearLayout>
<ListView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/listView"
android:layout_weight="1" />
</LinearLayout>
It should work if you put your ListViews inside of the child LinearLayouts which hold the LinearLayout that has the TextView and ImageView. You also should be using "0dp" for the height when using weight with a vertical layout.
Something like this, I believe, should work
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="2">
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1">
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:gravity="center_vertical"
android:minHeight="50dp"
android:layout_weight=".2">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView15"
android:src="#drawable/abc_ic_menu_share_mtrl_alpha" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Object1"
android:id="#+id/textView24"
android:textSize="26dp"
android:paddingLeft="10dp" />
</LinearLayout>
<ListView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:id="#+id/listView2"
android:layout_weight=".8" />
</LinearLayout>
Note the other changes: I gave the inner-LinearLayout an arbitrary weight of ".2" then the ListView a weight of ".8". And, of course, set the height to "0dp". You may need to play with those weights a bit but I think doing something like that for both first child LinearLayouts should get you close.
That may get your current layout to work but using headers and/or an ExpandableListView may be a better option.
I use tableLayout, and I want to set height of tableRow as tall as it has to be in order to display textViews correctly (which are in linearLayout). At the moment, the second textView is not displayed correctly (it simply doesn't fit in the row).
This is the XML:
<TableLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
android:background="#color/background">
<TableRow
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#color/stripe_background"
android:gravity="right|center_vertical"
android:paddingTop="#dimen/stripe_padding_buttons_top_bottom"
android:paddingBottom="#dimen/stripe_padding_buttons_top_bottom"
android:paddingLeft="#dimen/stripe_padding_sides"
android:paddingRight="#dimen/stripe_padding_sides"
android:layout_marginBottom="#dimen/stripe_margin_top_bottom">
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_column="0"
android:layout_weight="1"
android:paddingRight="#dimen/stripe_padding_between_text_views"
android:gravity="right|center_vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/settings_text_view_current_consumption_main"
android:id="#+id/textViewCurrentConsumptionMain"
android:textColor="#color/big_text"
android:textSize="#dimen/small_text"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/settings_text_view_current_consumption_additional"
android:id="#+id/textViewCurrentConsumptionAdditional"
android:textColor="#color/small_text"/>
</LinearLayout>
<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/checkBox"
android:layout_column="1"
android:button="#drawable/check_box_custom"
android:checked="true" />
</TableRow>
</TableLayout>
In order to make my question clearer, this is the problem in the image. Second textView is not displayed properly:
Make LinearLayout and all TextViews heights to wrap_content (TableRow) also
Good Afternoon,
I have a list being generated gradually on the users screen, (right now the list is sitting in a scrollview but that might not be the final resting place.) Above the scrollview are a few buttons, and below the scrollview are a few buttons. Scrollview takes up whole middle of the screen.
Right now, as the list is generated, it goes under the buttons below the scrollview. I would like it however to stop at the top. Also looking for it to always display the last line, rather than the new information start disappearing at the bottom.
I know this is probably confusing so if you have any questions please let me know.
Right now the XML looks a little something like this, and its layed out in this order on the screen too.
<Button
android:text="Ok"
android:id="#+id/buttonOk"
android:layout_height="wrap_content"
android:layout_width="75sp"
android:layout_below="#+id/textHoleNumber"
android:layout_alignParentRight="true"></Button>
<ScrollView <-- ***would like this to line up under the OK button***
android:layout_height="wrap_content"
android:id="#+id/scrollView1"
android:layout_width="fill_parent"
android:layout_below="#+id/buttonMinus">
<TextView
android:id="#+id/textScoreCard"
android:layout_height="wrap_content"
android:text="Score card info goes here"
android:textSize="20sp"
android:layout_width="fill_parent"></TextView>
</ScrollView> <-- ***would like this to stay above linear layout***
<LinearLayout
android:layout_width="fill_parent"
android:id="#+id/linearLayout1"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true">
<Button
android:layout_height="wrap_content"
android:layout_width="0dip"
android:layout_weight="1"
android:id="#+id/buttonSave"
android:text="Save"></Button>
<Button
android:id="#+id/buttonReset"
android:layout_height="wrap_content"
android:layout_width="0dip"
android:layout_weight="1"
android:layout_toRightOf="#+id/buttonSave"
android:layout_alignTop="#+id/buttonSave"
android:layout_alignBottom="#+id/buttonSave"
android:text="Reset"></Button>
</LinearLayout>
Always use Scrollview inside linear layout and give android:layout_weight="1". Try following example it will work..
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="fill_parent" android:background="#null">
<LinearLayout android:id ="#+id/layout_above_scrollview" android:orientation="vertical"
android:layout_width="fill_parent" android:layout_height="fill_parent">
<ScrollView android:id="#id/android:list" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:layout_weight="1">
<LinearLayout android:id ="#+id/layout_above_scrollview" android:orientation="vertical"
android:layout_width="fill_parent" android:layout_height="fill_parent">
// Your components........
</LinearLayout>
</ScrollView>
<LinearLayout android:id="#+id/add_app_done_layout" android:layout_height="wrap_content"
android:layout_width="wrap_content" android:layout_marginTop="5dp"
android:layout_marginLeft="50dp"
android:orientation="horizontal" android:layout_alignParentBottom="true">
<Button android:id="#+id/add_app_done" android:text="Done"
android:layout_width="100dp"
android:textStyle="bold" android:layout_height="wrap_content" />
<Button android:id="#+id/add_app_revert" android:text="Revert"
android:layout_width="100dp" android:layout_marginLeft="5dp"
android:textStyle="bold" android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
If you're talking about what I think you are, try adding a margin to the bottom of the scrollview, and a negative margin to the top of the linear layout. For instance:
<ScrollView android:id="#+id/scrollView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginBottom="60sp">
<LinearLayout android:id="#+id/linearLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
</LinearLayout>
</ScrollView>
<LinearLayout android:id="#+id/linearLayout2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="-60sp">
</LinearLayout>
As for scrolling to the bottom of the scrollview when a new item is added, look at How to scroll to bottom in a ScrollView on activity startup.
Note: This is assuming you have your ScrollView and the LinearLayout beneath it all contained in a vertical LinearLayout.
I have some behaviour of my layout. I give two of them, very similar to each other. Only one difference is the width attribute of the textviews.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="bottom">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:isScrollContainer="true"
android:gravity="center"
android:background="#color/black">
<LinearLayout
android:id="#+id/tabs"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:orientation="horizontal"
android:background="#color/black"
android:layout_weight="1">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Einstellungen"
android:drawableTop="#drawable/selector_settings"
android:id="#+id/main_menu_button_connection"
android:gravity="center"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textSize="10px">
</TextView>
...
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Suche"
android:drawableTop="#drawable/selector_search"
android:id="#+id/main_menu_button_connection"
android:gravity="center"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textSize="10px">
</TextView>
</LinearLayout>
</LinearLayout>
</LinearLayout>
If layout_width is set to wrap content, I get following layout results:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="bottom">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:isScrollContainer="true"
android:gravity="center"
android:background="#color/black">
<LinearLayout
android:id="#+id/tabs"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:orientation="horizontal"
android:background="#color/black"
android:layout_weight="1">
<TextView
android:layout_width="70dp"
android:layout_height="wrap_content"
android:text="Einstellungen"
android:drawableTop="#drawable/selector_settings"
android:id="#+id/main_menu_button_connection"
android:gravity="center"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textSize="10px">
</TextView>
...
<TextView
android:layout_width="70dp"
android:layout_height="wrap_content"
android:text="Suche"
android:drawableTop="#drawable/selector_search"
android:id="#+id/main_menu_button_connection"
android:gravity="center"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textSize="10px">
</TextView>
</LinearLayout>
</LinearLayout>
</LinearLayout>
If layout_width is set to a value instead (here 70dp), my layout looks so, I want it to have:
Can anybody explain me, why?!
Is there some solution avoiding to set a constant width and still having layout result like at the second picture?!
Thank you in advance
You probably want to give each TextView an equal layout weight such as android:layout_weight="1" and a width of fill_parent. Also, don't give a weight for the tabs linear layout. Also, while I don't really know what's going on later in the layout file, having three nested LinearLayouts seems like it might be wasteful. Maybe you can get rid of one of them?
I recommend starting over and using the eclipse designer view or use droiddraw to create the layout, especially since there are recent improvements to the layout editor.