Desired layout is a header, with two frames below (to contain fragments later) and buttons fixed at the bottom of the screen:
Header Text
----------------------
frame 1 | frame 2
----------------------
btn 1 btn 2 btn 3
I pretty much have this sorted (xml at end), with one problem... the two frames are overlapping the buttons.
I've done some searching on the issue and found this, but all that does is change my problem from the frames overflowing the buttons to the frames overflowing the header.
I also tried setting the buttons to appear below the frames instead of aligned to the bottom of the parent, but that just pushed them off the screen.
current layout xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TextView
android:id="#+id/fdname"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:clickable="true"
android:gravity="center"
android:text="No department info has been entered yet"
android:textSize="25dp" />
<TextView
android:id="#+id/fdaddress"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/fdname"
android:gravity="center"
android:text="address"
android:textSize="15dp" />
<TextView
android:id="#+id/horizontalline"
android:layout_width="match_parent"
android:layout_height="2dip"
android:layout_below="#id/fdaddress"
android:background="#ff23cf"
android:gravity="center_vertical"
android:paddingBottom="2dip"
android:paddingTop="2dip" />
<LinearLayout
android:id="#+id/frames"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/horizontalline"
android:orientation="horizontal" >
<FrameLayout
android:id="#+id/leftpane"
android:layout_width="0px"
android:layout_height="match_parent"
android:layout_weight="1" />
<TextView
android:id="#+id/verticalline"
android:layout_width="2dp"
android:layout_height="match_parent"
android:background="#ff23cf"
android:gravity="center_horizontal"
android:paddingLeft="5dip"
android:paddingRight="5dip" />
<FrameLayout
android:id="#+id/rightpane"
android:layout_width="0px"
android:layout_height="match_parent"
android:layout_weight="1" >
</FrameLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/buttons"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:gravity="center"
android:orientation="horizontal" >
<Button
android:id="#+id/EventViewButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:minHeight="25dp"
android:text="#string/menu_event_view"
android:textSize="15dp"
android:layout_weight="1">
</Button>
<Button
android:id="#+id/MemberViewButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:minHeight="25dp"
android:text="#string/menu_member_view"
android:textSize="15dp"
android:layout_weight="1">
</Button>
<Button
android:id="#+id/AttendanceViewButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:minHeight="25dp"
android:text="#string/menu_atnd_view"
android:textSize="15dp"
android:layout_weight="1">
</Button>
</LinearLayout>
</RelativeLayout>
Try to declare the LinearLayout containing your buttons before the LinearLayout containing your frames, preserving the android:layout_alignParentBottom="true" attribute.
Then, to your frames container, add an above constraint:
android:layout_below="#id/horizontalline"
android:layout_above="#id/buttons"
This way should force your frames to be last thing to be drawn on the screen, thus filling the remaining space.
Hope it works!
<LinearLayout
android:id="#+id/frames"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/horizontalline"
android:orientation="horizontal" >
Why is your layout_height="match_parent"? You'll need to specify some height, or wrap_content.
http://developer.android.com/resources/samples/ApiDemos/res/layout/relative_layout_1.html
Refer to this for top layer/alignment of you three views.(three text views in example)
Then use linearlayout with orientation horizontal, for your two frames, and same again for buttons
--
so basically to the frames id add alignbottom true , and provide
android:layout_above
android:layout_below
parameters
Related
I'm having a lot of trouble getting my ScrollView to function properly. I'm using a Master-Detail design. The Master scrolls, since it's a listView. The Detail when selected will display the scrollbar implemented in my XML for a couple seconds when the Activity is inflated before disappearing (Stackoverflow won't allow me to post the screenshot of the error since this is my first post)
When I try to scroll the Detail Activity with touch input nothing happens. I've tried copying and pasting Mel's solution to what seems like an identical problem in the post at ScrollView doesn't work. I've also tried every conceivable combination of match_parent and fill_parent for the parent, child, and ScrollView itself. Any help is appreciated. My XML code is below:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/item_detail_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ItemDetailActivity"
tools:ignore="MergeRootFrame">
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/scrollLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:fillViewport="true"
>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/linearLayout"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="5dp"
android:layout_marginTop="20dp"
android:stretchColumns="1, 2"
>
<ImageView
android:id="#+id/picture"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="20dp"
android:src="#drawable/bmp1"
android:layout_alignParentTop="true"
/>
<TableLayout
android:id="#+id/tableLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp"
android:layout_marginTop="20dp"
android:stretchColumns="1, 2">
<!-- Table Row 0 -->
<TableRow
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:id="#+id/tableRow0">
<TextView
android:id="#+id/priWeapon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/priWeapon" android:textColor="#000" android:textStyle="bold"
android:gravity="left"
android:padding="5dp"/>
<EditText
android:id="#+id/priWeaponEditText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/NA" android:textSize="14sp" android:textStyle="bold"
android:gravity="center"
android:focusable="false"
android:layout_weight="1"
android:cursorVisible="false"
android:longClickable="false"/>
</TableRow>
<!-- Table Row 1 -->
<TableRow
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:id="#+id/tableRow1">
<TextView
android:id="#+id/priWeaponRange"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/priMaxRange" android:textColor="#000"
android:gravity="left"
android:padding="5dp"/>
<EditText
android:id="#+id/priWeaponRangeEditText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/NA" android:textSize="14sp"
android:gravity="center"
android:focusable="false"
android:layout_weight="1"
android:cursorVisible="false"
android:longClickable="false"/>
</TableRow>
</TableLayout>
</LinearLayout>
</ScrollView>
</FrameLayout>
I found a solution! Instead of trying to apply the formatting to the Activity XML itself, I cut and pasted it into one of the Activity's Fragment XMLs, which didn't have a frameLayout. Because of this change it now scrolls perfectly while maintaining the title bar on top throughout the scroll, exactly the behavior that I wanted. I've posted the final code below. If you have a solution that would still allow me to use a scrollView inside a FrameLayout though I'd be more than happy to see it for future reference. Thank you for your help!
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/scrollLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:fillViewport="true"
>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/linearLayout"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="5dp"
android:layout_marginTop="20dp"
android:stretchColumns="1, 2"
>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/item_detail"
style="?android:attr/textAppearanceLarge"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="16dp"
android:textIsSelectable="true"
tools:context=".ItemDetailFragment"/>
<ImageView
android:id="#+id/picture"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="20dp"
android:src="#drawable/bmp1"
android:layout_alignParentTop="true"
/>
<TableLayout
android:id="#+id/tableLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp"
android:layout_marginTop="20dp"
android:stretchColumns="1, 2">
<!-- Table Row 0 -->
<TableRow
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:id="#+id/tableRow0">
<TextView
android:id="#+id/priWeapon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/priWeapon" android:textColor="#000" android:textStyle="bold"
android:gravity="left"
android:padding="5dp"/>
<EditText
android:id="#+id/priWeaponEditText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/NA" android:textSize="14sp" android:textStyle="bold"
android:gravity="center"
android:focusable="false"
android:layout_weight="1"
android:cursorVisible="false"
android:longClickable="false"/>
</TableRow>
</TableLayout>
</LinearLayout>
</ScrollView>
Your goal is to use the maximal screen size for the ImageView and then scroll down to the (at first invisible) TableLayout? Thats afaik not possible. When you set android:layout_height="fill_parent" on ImageView it uses the the maximum possible (in your example all of the screen size) space. So no TableLayout is rendered and there is no need for scrolling. You should set the android:layout_height="wrap_content" in the ImageView.
Some notes on the source code:
Use match_parent instead of fill_parent. It's renamed since API Level 8
You have a useless android:layout_below="#id/picture" in the TableLayout. May an artifact from a previous version with RelativeLayout?
Remove the namespace definitions in the TableLayout
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 am working on creating a page with a layout with header "Account Information" (ref.. image). Followed by a table and i need to populate the table dynamically after fetching from server but not able to do so. Below is the .xml file and attached is the image:
<LinearLayout
android:id="#+id/header"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#layout/header_gradient" >
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="10dip"
android:layout_weight="0.20"
android:gravity="center_horizontal"
android:padding="15dp"
android:text="#string/my_account_header_text"
android:textColor="#ffffff"
android:textSize="24sp" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#ffffff" >
<RelativeLayout
android:id="#+id/my_activity_layout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#ffffff" >
<TextView
android:id="#+id/my_acc_component"
android:layout_width="158dp"
android:layout_height="wrap_content"
android:text="#string/my_account_component"
android:textColor="#372c24"
android:textSize="#dimen/login_credentials_txt" />
<TextView
android:id="#+id/my_acc_details"
android:layout_width="158dp"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/my_acc_component"
android:text="#string/my_account_details"
android:textColor="#372c24"
android:textSize="#dimen/login_credentials_txt" />
</RelativeLayout>
</LinearLayout>
</LinearLayout>
This may not be your issue, since I don't know what the problem is yet, but there is an issue that I see. When using weight in a LinearLayout with a vertical orientation your height should be 0dp. Similarly, if it is a horizontal orientation then width should be 0dp. So for example you would change your layouts to
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#ffffff" >
and
<RelativeLayout
android:id="#+id/my_activity_layout"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#ffffff" >
Also, this is definitely not whatever your problem is but fill_parent is deprecated and match_parent should be used instead.
*Actually, there is a problem with the weight property... if you are working with weight then you better use weight_sum property in the LinearLayout and give your textView or other view an percentage depending on your giver weight_sum value in the parent layout...
However,I think what you are looking for is something like this:*
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center|top"
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/header"
android:background="#drawable/image" // if you want your title/header to be upon the image. Or just create another ImageView for that image
/>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:weightSum="100"
android:orientation="horizontal"
>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:margin_Top="50dp"
android:weight="50"
android:id="#+id/my_acc_component"
android:text="your text"
android:textSize="your Size"
/>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:margin_Top="50dp"
android:weight="50"
android:id="#+id/my_acc_details"
android:text="your text"
android:textSize="your Size"
/>
</LinearLayout>
</RelativeLayout>
I'm searching for a solution to set up multiple rows in a scrollview.
I have 15 buttons (3*5) and want to scroll to the right so there are another 15 buttons.
What I already got: all buttons are in one huge row ( at least, scrolling iself worked ).
Then I tried to set the HorizontalScrollView on the highest layer (line #1 in XML) and after that a LinearLayout that contains 3 further LinearLayouts so the tree looks like this:
<HorizontalScrollView
<LinearLayout
<LinearLayout
(buttonABCDEF)
</LinearLayout>
<LinearLayout
(button01234)
</LinearLayout>
<LinearLayout
(button56789)
</LinearLayout>
</LinearLayout>
</HorizontalScrollView>
What I get then is a (~80x80) rectangle (the linear layout in the ScrollView) that shows a text (the first view in my layout) and a button (buttonA - the first one) that is so stemmed (by whatever) that every character is written into a new line. (The amount of letters= amount of lines= button height). This isn't scrollable at all.
I'm trying to post only the code that is relevant. Note: that android:layout stuff is not important for you since it is not working in a linear layout:
<HorizontalScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:ads="http://schemas.android.com/apk/lib/com.google.ads"
android:screenOrientation="landscape"
android:theme="#android:style/Theme.NoTitleBar.Fullscreen"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/horizontalScrollView1"
tools:context=".MainActivity"
android:background="#android:color/black"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation='vertical' >
android:layout_width="9dp"
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
android:layout_width="9dp"
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginTop="0dp"
android:textColor="#android:color/white"
android:text="text"
android:textAppearance="?android:attr/textAppearanceMedium" />
<Button
android:id="#+id/buttonA"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/buttonB"
android:layout_toRightOf="#+id/textView1"
android:width="70dp"
android:text="A" />
<Button
android:id="#+id/buttonE"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/buttonD"
android:layout_alignBottom="#+id/buttonD"
android:layout_toRightOf="#+id/buttonD"
android:width="70dp"
android:text="B" />
<Button
android:id="#+id/buttonF"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/buttonE"
android:layout_alignBottom="#+id/buttonE"
android:layout_toRightOf="#+id/buttonE"
android:text="C" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<Button
android:id="#+id/button0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:background="#drawable/eins"
android:text="0" />
/LinearLayout>
/LinearLayout>
</HorizontalScrollView>
Thanks a lot for you help.
I fixed it making the layout completely new. Even that of course not the best way, it seemed faster than searching for errors
<?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"
>
<TextView
android:text="Title"
android:id="#+id/TextView01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="30px"
android:textStyle="bold"
>
</TextView>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="60px">
<Button
android:text="Choose a Story"
android:id="#+id/choose"
android:layout_width="150px"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_marginBottom="1px">
</Button>
<Button
android:text="Info"
android:id="#+id/info"
android:layout_width="150px"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_marginBottom="1px">
</Button>
</LinearLayout>
</LinearLayout>
In this code, as you can see, there is a title, 2 linear layouts, and 2 buttons that are inside a linear layout. What I'm trying to do is center the 2 buttons. No matter what I do, I can never get the 2 buttons to be centered at the bottom with a height of 60px.
In the end I'm trying to make the text centered both vertically and horizontally, and have the 2 buttons on the bottom centered horizontally. What do I need to change?
Heres a picture of what it looks like in the Layout Editor.
On your inner linear layout, set the layout_gravity.
Here's one solution
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TextView
android:text="Title"
android:id="#+id/TextView01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="30dip"
android:textStyle="bold"
/>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="60dip"
android:layout_gravity="bottom|center_horizontal"
android:layout_marginBottom="1dip"
>
<Button
android:text="Choose a Story"
android:id="#+id/choose"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1"
/>
<Button
android:text="Info"
android:id="#+id/info"
android:layout_width="0dip"
android:layout_weight="1"
android:layout_height="wrap_content"
/>
</LinearLayout>
</FrameLayout>
In general, you should style the outermost component (container) which will then position all of its children accordingly. As a side not, this layout would be achieved using just a single (or pair, depending on exactly what you're trying to do) or FrameLayouts, which would significantly reduce the layout overhead. While there's nothing wrong with LinearLayout, it is surprisingly computationally expensive.