I am trying to show a rectangular box with a centered TextView as a footer bar at the bottom of a UI (just like the toolbar/actionbar is shown as a header bar above the main UI). The TextView should be below the main UI (which is a ScrollView) and the TextView doesn't show at all. Everything else shows correctly. Any ideas on what I'm doing wrong?
layout.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFFFFF"
android:focusableInTouchMode="true"
tools:context=".CardViewActivity">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar" >
</include>
<ScrollView
android:id="#+id/ScrollView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
...>
...
</ScrollView>
<TextView
android:id="#+id/skychilltext2"
android:text="skychill"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:textStyle="bold"
android:textColor="#FFFFFF"
android:background="#color/colorPrimary"
android:textAppearance="?android:attr/textAppearanceMedium"
android:clickable="true" />
</LinearLayout>
because you set the height to match_parent, it will take up all the room. I'm not sure exactly how you want it, but you could add a weight to it to expand to as much room as possible.
<ScrollView
android:id="#+id/ScrollView1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
...>
...
</ScrollView>
Weight specifies how much percentage of the screen the view will take, so if every view has the same weight they will equally take up the same amount of space on the screen.
view 1 - weight 1
view 2 - weight 1
view 3 - weight 1
view 4 - weight 3 since this is weight 3 and all the weights above add up to
| 3, this view will take up exactly half the screen.
| the other ones will take 1/6 of the screen because (1+1+1+3 = 6)
Try below
<RelativeLayout
(...)>
<LinearLayout android:id="#+id/ll1"
android:layout_alignParentTop="true"
(...)/>
<TextView android:id="#+id/button"
android:layout_alignParentBottom="true"
(...)/>
<ScrollView
android:layout_above="#id/button"
android:layout_below="#id/ll1"
(...)/>
</RelativeLayout>
For reference see here How to make a static button under a ScrollView? or How can I place new items under scrollview
The problem is android:layout_height="match_parent" in ScrollView. It directs LinearLayout to give all the height to it, leaving nothing for TextView.
Change ScrollView:
android:layout_height="wrap_content"
android:layout_weight="1"
Change TextView:
android:layout_weight="0"
set android:layout:weight on TextView.
You need weightsum to scale layout. Your code set match_parent for height scrollView
<ScrollView
android:id="#+id/ScrollView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
...>
...
Related
I have vertical linearLayout. First element is a framelayout that has some content and second element is button that should always be at the very bottom.
While button should be at the bottom, the framelayout should take the rest space that is in the linearlayout
<LinearLayout
...>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
...
</FrameLayout>
<Button
.../>
</LinearLayout>
The key to this solution is the combination of 0dp height for your FrameLayout and the layout_weight attribute. This attribute allows a LinearLayout to divide the "extra" space up between its children. Your button takes up a fixed amount of space, and your FrameLayout takes up no space at all... so everything that isn't the button winds up being given to the FrameLayout and now it fills up the whole LinearLayout while leaving enough space for the Button below it.
Use android:layout_height="match_parent" on your FrameLayout
you should use RelativeLayout somthing Like that :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Test"
android:layout_alignParentBottom="true"
android:id="#+id/btnTest"
/>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorAccent"
android:layout_above="#id/btnTest"
>
</FrameLayout>
</RelativeLayout>
I'm struggling on a layout management so I decided to ask here.
I would like to get 3 layouts working in a certain way.
I have 3 views vertically dispatched into a RelativeLayout (let's call them VTop, VMiddle and VBottom).
VBottom is a Button, I want him to stay aligned with the bottom of the screen and to never move or get resized (actually working).
VMiddle is a scroll view. I want this ScrollView to take all possible place between the bottom button (VBottom) and the top most layout (VTop) but never having it height inferior to an specific size.
I would like to have VTop (A linear layout containing some TextViews and other stuffs) wrapping all of its content as long as VMiddle doesn't get smaller that its minimum size.
Actually the code I have is almost working but when I Inflate too much content into VMiddle, it keeps growing towards the top of the screen and VTop completely disappear. I want VMiddle to stay at it minimum size if VTop doesn't have enough space to wrap his content.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/relativeLayout1">
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/linearLayout1" <!-- VTop -->
android:layout_above="#+id/eventDetail_RateLayout"
android:layout_alignParentTop="true"
android:layout_margin="10sp"> <!-- LOT OF VIEWS, NEED TO BE WRAPPED AS MUCH AS POSSIBLE -->
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="100px"
android:id="#+id/eventDetail_RateLayout" <!-- Not visible for now, you can ignore it -->
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
android:minWidth="25px"
android:minHeight="25px"
android:background="#color/common_google_signin_btn_text_light_default"
android:layout_above="#+id/eventDetail_CommentScrollView"
android:visibility="gone" />
<ScrollView
android:id="#+id/eventDetail_CommentScrollView" <!-- VMiddle -->
android:background="#4D4A58"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/eventDetail_commentButton">
<LinearLayout
android:orientation="vertical"
android:minWidth="25px"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/eventDetail_CommentLayout" />
</ScrollView>
<Button
android:text="commenter"
android:id="#+id/eventDetail_commentButton" <!-- VMiddle, this one is doing ok -->
android:background="#666"
android:textColor="#f8f8f8"
android:layout_width="match_parent"
android:layout_height="30sp"
android:layout_alignParentBottom="true" />
</RelativeLayout>
Thanks for your answers.
Try the following code for the ScrollView -
<ScrollView
android:id="#+id/eventDetail_CommentScrollView" <!-- VMiddle -->
android:background="#4D4A58"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_below="#id/linearLayout1"
android:layout_weight="1"
android:layout_above="#+id/eventDetail_commentButton">
...
</ScrollView>
Use this, however the kind of UI you want can be easily achieved using Linear layout and using weight and weightSum properties.. also rename ID of the layout and views accordingly
<?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">
<LinearLayout
android:id="#+id/topLayout"
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_alignParentTop="true"
android:background="#70AD47"
android:orientation="vertical">
</LinearLayout>
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/btnBottom"
android:layout_below="#+id/topLayout"
android:background="#ED7D31"
android:minHeight="400dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
</LinearLayout>
</ScrollView>
<Button
android:id="#+id/btnBottom"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#4472C4"
android:text="Bottom button" />
</RelativeLayout>
1. Add attribute android:layout_below="#id/linearLayout1" and android:layout_above="#id/eventDetail_commentButton" to ScrollView to keep it at middle position.
2. Use ScrollView and its child LinearLayout height android:layout_width="match_parent" although its not necessary.
No matter how big the top and bottom layout, middle scrollview will always fill the middle free spaces. It will never change the height of top and bottom layout.
Here is the working layout:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/relativeLayout1">
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/linearLayout1"
android:layout_alignParentTop="true"
android:layout_margin="10sp">
</LinearLayout>
<Button
android:text="commenter"
android:id="#+id/eventDetail_commentButton"
android:background="#666"
android:textColor="#f8f8f8"
android:layout_width="match_parent"
android:layout_height="30sp"
android:layout_alignParentBottom="true" />
<ScrollView
android:id="#+id/eventDetail_CommentScrollView"
android:background="#4D4A58"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/linearLayout1"
android:layout_above="#id/eventDetail_commentButton">
<LinearLayout
android:orientation="vertical"
android:minWidth="25px"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/eventDetail_CommentLayout" />
</ScrollView>
</RelativeLayout>
Hope this will help~
Use android:layout_below="#+id/linearlayout1"
in eventDetail_RateLayout
I'm pretty sure none of the given answers achieve what you're looking for. What you wanna do is not simple because it involves a circular dependency: you basically want your vTop view to wrap and fill any space left by your vMiddle view (android:layout_above="#id/vMiddle") and at the same time you want your vMiddle view to wrap and fill any space left by your vTop view (android:layout_below="#id/vTop").
The only solution I can imagine would be to check and set the view sizes programmatically, I don't think this is doable only by rearranging your layout.
I finally achieved to get something close to what I wanted. I combined layout_above and below and fixed the size of VTop by making the Huge TextView scrollable. I have now VTop and VBottom at a fixed size and VMiddle taking the rest of the place at the center.
Thanks for your fast answers :)
I have a layout in a scrollview and I add another layout to the end of the first one. Actually I am trying to make a one page design and the rest of the other views will appear after scrolling. I tried to put linearlayout1 and linearlayout2 to another view but it didn't work. Also I set scrollview android:fillViewport="true" but it made the scrollview in screen size.
I've added an image of what I want, but it could also be one view, I mean lin1 and lin2 together.
I can set width and height for one phone but I want to do this for each screen. For example like yahoo weather app. They have done one layout for first view and start another view from the end of screen. I tried so many things but I couldn't imagine how to put layouts. Could you help me?
Thanks for your help
Here is what I want
Here is I tried:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/scroller"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:id="#+id/linearlayout1"
android:background="#android:color/holo_purple"
android:layout_width="match_parent"
android:layout_height="350dp" >
<TextView
android:text="LinearLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearlayout2"
android:background="#android:color/holo_blue_bright"
android:layout_width="match_parent"
android:layout_height="250dp"
android:orientation="vertical">
<TextView
android:text="LinearLayout2"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:background="#android:color/holo_green_light"
android:layout_width="match_parent"
android:layout_height="350dp">
<TextView
android:text="LnearLayout3"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
</ScrollView>
But unfortunately I couldn't configure this for each screen size.
enter image description here
Just try this.
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_below="#+id/action_bar"
Instead of hardcoding the height as in:
android:layout_height="250dp"
Set android:layout_height="0dp" and use
android:layout_weight="25"
And also in the other layout use weight. Weight works like this, if you have 3 components in your container, set the weights to let's say 1, 2 and 3 => they will take in that order 1/6, 2/6 and 3/6 of the container. 6 being the sum of 1,2,3. So here instead of using heights as 350 and 250, you can set them to 0 and use weights 2.5 and 3.5 or 25 and 35.
I have a CircularMeter class which is derived from Button. The problem is that it is not resizing even if the weight given is 0.5 (ie. half the vertical screen).
<LinearLayout
android:id="#+id/WidgetDataLayout"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_alignParentTop="true"
android:layout_weight="0.5"
android:orientation="vertical"
android:layout_gravity="center_horizontal">
<com.test.CircularMeter
android:id="#+id/cm1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal" />
</LinearLayout>
Any Ideas ?
You can take help from this example to make your circularmeter fill half of the vertical screen
eg.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:weightSum="1">
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal"
android:layout_weight="0.5"
android:background="#123456"
android:orientation="vertical" >
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#123456"
android:text="#string/hello_world" />
</LinearLayout>
</LinearLayout>
There's no layout_weight in CircularMeter.
It's parent LinearLayout has both android:layout_alignParentTop="true" and android:layout_weight="0.5" which is not correct since layout_alignParentTop is a layout attribute for a RelativeLayout parent while android:layout_weightis an attribute for a LinearLayout parent. The layout XML does not show what is the parent layout actually is. android:layout_height="0dp" would make the layout invisible unless there really is a vertical LinearLayout as a parent.
Also note that layout_weight="0.5" won't make the view size half the screen. After doing first pass layout for a linear layout, the weight mechanism just distributes any remaining space in proportion of element weights. By default an element's weight is 0. So if you have just one element with non-zero weight, it will get all remaining space in its linear layout parent.
I'd like the top half of my screen to be a graph, and the bottom part to be a listview. Both parts should occupy half of the screen.
With the setup I have now it only works if there are like 10 or more items in the listview. If there are less, the listview will take up less than half the screen. If there's one item in the list, it takes up even less the the height of one list item.
Based on the solution of ANDROID : split the screen in 2 equals parts with 2 listviews this is what I've got now:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="0.5"
android:id="#+id/graph_container"
android:orientation="vertical">
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="0.5"
android:orientation="vertical">
<ListView
android:id="#android:id/list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:drawSelectorOnTop="false"/>
</LinearLayout>
</LinearLayout>
I add the graph dynamically:
((LinearLayout) findViewById(R.id.graph_container))
.addView(chart, 0,
new LinearLayout.LayoutParams(
ViewGroup.LayoutParams.MATCH_PARENT,
ViewGroup.LayoutParams.MATCH_PARENT));
Does anyone know how I should do this?
UPDATE
So, the essential part was changing the layout_height to math_parent. Removing the parent linear layout of the listview was optional, but definitely cleaner.
Remove container that listView stays in, change the weight to 1 and set height of the main container to match_parent. Here is an example:
<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="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:id="#+id/graph_container"
android:orientation="vertical">
</LinearLayout>
<ListView
android:id="#android:id/list"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:fillViewport="true"
android:drawSelectorOnTop="false" >
</ListView>
You just have to change your first LinearLayout height to match_parent
Try to use weight values as digits 1:1 fox example.
Setting the android:weightSum="1" and android:layout_height="match_parent" for the parent LinearLayout should work.