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>
Related
I have a layout with listview and two buttons side by side at the bottom of the listview. Everything work fine until I have added the swiperefreshlayout for my listview.
My codes are as below.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#FFF"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:id="#+id/search_bar"
android:background="#color/colorPrimaryDark"
android:orientation="vertical"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
>
<EditText
android:id="#+id/keyword_editText"
android:layout_width="fill_parent"
android:layout_height="30dp"
android:background="#drawable/search_edit_text"
android:hint="Keyword"
android:textColorHint="#color/list_item_title"
android:textColor="#000"
android:layout_centerVertical="true"
android:maxLines="1"/>
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/listView_layout"
android:orientation="vertical"
android:layout_below="#+id/search_bar"
>
<android.support.v4.widget.SwipeRefreshLayout
android:id="#+id/refresh"
android:layout_height="match_parent"
android:layout_width="match_parent">
<ListView
android:layout_width="wrap_content"
android:layout_height="0dip"
android:layout_weight="1"
android:id="#+id/RsListView"
android:dividerHeight="1dp"
android:divider="#D3D3D3"/>
</android.support.v4.widget.SwipeRefreshLayout>
<LinearLayout
android:id="#+id/test"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<Button
android:id="#+id/req_history_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Request History"
android:layout_weight="1"
android:background="#drawable/request_history_button"
android:textColor="#drawable/button_text_color"
/>
<Button
android:id="#+id/apprv_history_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Approval History"
android:layout_weight="1"
android:background="#drawable/approval_history_button"
android:textColor="#drawable/button_text_color"
/>
</LinearLayout>
</LinearLayout>
Sorry for dumping my codes here as I can't figure out any other way for you guys to understand my code.
Please help
Inside LinearLayout usually all children have even dimension according to orientation. However, when you would like one child to take a little amount of place and another to fill the rest, you might be interested in layout_weight parameter. If the child that should fill the space gets android:layout_weight="1" it will fill the space making a place for other views.
In order to see the buttons add android:layout_weight="1" to SwipeRefreshLayout and set android:layout_height="0dp". That will make your buttons visible.
<HorizontalScrollView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:fillViewport="true">
<ListView
android:id="#+id/attackslist"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#ffffff" />
</HorizontalScrollView>
I put a ListView inside an HorizontalScrollView because its content is way too long to fit in the screen, but what i get is that the list looks like this (the background color is there to show where the list's childs stop)
while i want all the childs equally spaced in there until the end of the list, which i get if the ListView is not inside a scrollbar
My custom layout I use in the adapter looks like this
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_width="match_parent"
android:background="#ffffff"
android:layout_height="match_parent">
<TextView
android:id="#+id/Moves"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_gravity="fill"
android:layout_weight="1"
android:gravity="center"
android:text="Moves"
android:textSize="14dp" />
<TextView
android:id="#+id/Hitboxactive"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_gravity="fill"
android:layout_weight="1"
android:gravity="center"
android:text="Hitbox Active"
android:textSize="14dp" />
</LinearLayout>
How should I handle this situation? Can I change the values during runtime?
Should I use a different View?
Thanks
I have a layout with 1 layout inside of it which is all inside a ScrollView. I am trying to get the whole screen to scroll with the content inside of the listview then the textviews underneath that listview. I get the whole listview to populate and show correctly but the bottom layout with all the textviews do not show up.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<include
android:id="#+id/app_bar"
layout="#layout/app_bar" />
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
android:layout_below="#id/app_bar">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="10dp">
<ImageView
android:id="#+id/bannerReceiptLogo"
android:layout_width="170dp"
android:layout_height="75dp"
android:layout_centerHorizontal="true"
android:layout_marginTop="30dp"
android:background="#drawable/img_logo_receipt_cub" />
<TextView
android:id="#+id/bannerAddressHeader"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_below="#id/bannerReceiptLogo"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:text="#string/storeHeader"
android:textAlignment="center"
android:textSize="18sp" />
<ListView
android:id="#+id/fullEReceiptListView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/bannerAddressHeader"
android:layout_marginTop="10dp"
android:scrollbars="none"/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_below="#id/fullEReceiptListView"
android:layout_weight="1">
<View
android:id="#+id/totalDivider"
android:layout_width="match_parent"
android:layout_height="3dp"
android:background="#color/colorGrey"
/>
<TextView
android:id="#+id/txtSubTotal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="SUBTOTAL"
android:textSize="20sp"
android:layout_below="#+id/totalDivider"/>
<TextView
android:id="#+id/txtSubTotalFinal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="$13.58"
android:layout_alignParentRight="true"
android:textSize="20dp"
android:layout_below="#+id/totalDivider"/>
<TextView
android:id="#+id/txtTaxText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TAX"
android:textSize="20sp"
android:layout_below="#+id/txtSubTotal"/>
<TextView
android:id="#+id/txtTaxTotal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="$0.80"
android:layout_alignParentRight="true"
android:textSize="20dp"
android:layout_below="#+id/txtSubTotalFinal"/>
<TextView
android:id="#+id/txtCompleteTotal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TOTAL"
android:textSize="20sp"
android:layout_below="#+id/txtTaxText"/>
<TextView
android:id="#+id/txtCompleteTotalNumber"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="$14.38"
android:layout_alignParentRight="true"
android:textSize="20dp"
android:layout_below="#+id/txtTaxText"/>
</RelativeLayout>
</RelativeLayout>
</ScrollView>
</RelativeLayout>
Do not put ListView inside ScrollView. ListView is a widget that is already scrollable. See NestedScrollView from Support library.
If you set the ListView height to wrap_content the height will have the height to comport all items. That way, the below content will be pushed away.
However Android don't have a great support for nested scrolls, it's considered a bad practice. This way, your ListView will not have the native scroll feature, and will need some hack to work as expected.
A better workaround is use the NestedScrollView, so you scroll may work (maybe you will need put your ListView inside another parent to control the height)
change ListView's layout_height to wrap_content
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 have a LinearLayout (vertical) and it should contain 3 elements in the following order: textview, listview and button. The listview could be really high so in order to keep all the 3 elements visible I put the 3 elements each one inside another layout. So my structure is like:
linear layout (vertical)
linear layout (horizontal)
textview
linear layout (vertial) *
listview
relative layout
button
In order to get it working I set a fixed height to the vertical linearlayout which only contains the listview (*) but I know it is a bad choice because on bigger devices there will be a lot of empty space. How can I fix it?
thanks
User percentage values for the LinearLayout(*), so they take up a percentage of the parent's height,
and for the rest, if you want them to take up remaining space, add attribute: android:layout_weight:1;
Implement your layout this way :
<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" >
<TextView
android:id="#+id/mTextView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:gravity="center"
android:padding="10dp"
android:text="Header Text" />
<ListView
android:id="#+id/mListView"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="#+id/mButton"
android:layout_below="#+id/mTextView" >
</ListView>
<Button
android:id="#+id/mButton"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="Button1" />
</RelativeLayout>
// try 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:padding="5dp"
android:orientation="vertical">
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="match_parent">
<TextView
android:id="#+id/textview"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="textview"/>
</LinearLayout>
<LinearLayout
android:layout_height="0dp"
android:layout_width="match_parent"
android:layout_marginTop="5dp"
android:layout_weight="1">
<ListView
android:layout_height="match_parent"
android:layout_width="match_parent"
android:cacheColorHint="#00000000"
android:divider="#null"
android:dividerHeight="0dp"
android:smoothScrollbar="true"
android:id="#+id/listview"/>
</LinearLayout>
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:layout_marginTop="5dp"
android:gravity="center">
<Button
android:id="#+id/button"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="button"/>
</LinearLayout>
</LinearLayout>