I have a problem with ScrollView component.
How to prevent stretching of ScrollView?
I have a LinearLayout with weight_sum = 2 and in it an ImageView with layout_weight = 1 and a ScrollView with layout_weight = 1
It looks fine when ScrollView has 2, 3 elements, that means that it doesn't need to scroll.
When I add more elements the ScrollView resizes, its height gets bigger and bigger, and the ImageView gets smaller.
Height of those items is wrap_content.
How to prevent that problem?
Code:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginTop="5dp"
android:layout_weight="3"
android:orientation="vertical"
android:weightSum="2" >
<ImageView
android:id="#+id/pregamePlayerNames"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/en_player_names" />
<ScrollView
android:id="#+id/scrollView1"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_weight="1" >
<LinearLayout
android:id="#+id/pregamePlayerNamesScroll"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/home_player_names_ram"
android:orientation="vertical" >
</LinearLayout>
</ScrollView>
</LinearLayout>
set the items with weight to height=0dp if you want to dynamically divide the space.
If you are giving weight to the layout no need to specify the height
<ImageView
android:id="#+id/pregamePlayerNames"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:layout_gravity="center"
android:background="#drawable/en_player_names" />
<ScrollView
android:id="#+id/scrollView1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" >
.................
................
Related
I have an ImageView, a TextView and another 'ImageView', grouped in a vertical LinearLayout.
The TextView should contain long text, so I wrapped it in a ScrollView. The first ImageView should be 100dp height, and the third 100dp height. The middle TextView should fill the entire available space, and if the text is too long the a scroll bar should appear.
The entire layout is part of a parent layout, so this layout has only part of the screen available. To demonstrate it i set the LinearLayout height to be 265dp.
The problem is that the the whole text appears, the scroll bar doesn't appear, and the third bottom ImageView height is squashed.
I'm following this post, and this is a screenshot.
My code:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="265dp"
android:background="#BDBDBD"
android:orientation="vertical">
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:background="#FFFF00" />
<ScrollView
android:id="#+id/SCROLLER_ID"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollbars="vertical"
android:fillViewport="true">
<TextView
android:id="#+id/TEXT_STATUS_ID"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1.0"
android:text="bla\nbla\nbla\nbla\nbla\nbla\nbla"/>
</ScrollView>
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:background="#FF00FF" />
</LinearLayout>
Try this layout :
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#BDBDBD"
android:orientation="vertical">
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:background="#FFFF00" />
<ScrollView
android:id="#+id/SCROLLER_ID"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<TextView
android:id="#+id/TEXT_STATUS_ID"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="bla\nbla\nbla\nbla\nbla\nbla\nbla"/>
</ScrollView>
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:background="#FF00FF" />
</LinearLayout>
<?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="265dp"
android:background="#BDBDBD" >
<ImageView
android:id="#+id/imgtop"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_alignParentTop="true"
android:background="#FFFF00" />
<ImageView
android:id="#+id/imgbottom"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_alignParentBottom="true"
android:background="#FF00FF" />
<ScrollView
android:id="#+id/SCROLLER_ID"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#id/imgbottom"
android:layout_below="#id/imgtop"
android:fillViewport="true"
android:scrollbars="vertical" >
<TextView
android:id="#+id/TEXT_STATUS_ID"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="bla\nbla\nbla\nbla\nbla\nbla\nbla"
android:textColor="#color/black" />
</ScrollView>
</RelativeLayout>
<ScrollView
android:id="#+id/SCROLLER_ID"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollbars="vertical"
android:fillViewport="true">
<TextView
android:id="#+id/TEXT_STATUS_ID"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1.0"
android:text="bla\nbla\nbla\nbla\nbla\nbla\nbla"/>
</ScrollView>
the weight that you assigned to the TextView does not have any meaning: It's inside a ScrollView (which extends FrameLayout, not LinearLayout) and even if it did have a meaning it's not what you are looking for - It's just say that it should take most of the space inside the ScrollView
You gave the ScrollView height of wrap_content - in your case it means that it will take the full height of the TextView - thus if the TextView height is bigger than the height of the screen - It will take all the height of the screen - thus your last TextView will not have enough space.
You can solve it using 3 (or more) methods
Assign fixed height to the ScrollView
Assign weight to the ScrollView (and maybe also to the rest of the Views)
Use the New PercentRelativeLayout. just assign height percent for the ScrollView to capture.
I am trying to create, as a test, a row of three images (evenly spaced with a vertical orientation) in the top half of my screen. For some reason, android:layout_height="0dp" is giving me an error, saying it will make the view invisible. It is right of course, I can't see a thing. Why is that the case? I changed the weight to 1, so why isn't it expanding to take up the space available? Thanks!
<LinearLayout 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"
android:orientation="horizontal">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="100dp"
android:scaleType="centerCrop"
android:src="#drawable/arches_utah"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="100dp"
android:scaleType="centerCrop"
android:src="#drawable/blue_sea_mountains"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="100dp"
android:scaleType="centerCrop"
android:src="#drawable/china_jungle"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical">
</LinearLayout>
The layout_weight on an element applies to the parent of said element. Since you parent element has a horizontal orientation, you can only use layout_weight paired with layout_width. If your root LinearLayout was a vertical then you could set the layout_height to be 0dp and use layout_weight instead.
Judging by your question, it sounds like you should be setting weights and height on the three elements within the first child LinearLayout.
The weight attribute needs to be specified on the same axis as the orientation of the parent. Since your parent LinearLayout has a horizontal orientation, the weight attribute works on the width, so you need layout_height="wrap_content" and layout_width="0dp" on the child LinearLayout.
So the problem is between your 2 LinearLayouts.
You have not closed your parent Linear Layout and layout width relate weight not height...You can also use weightSum like this...
<LinearLayout 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"
android:orientation="horizontal"
android:weightSum="2" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical" >
<ImageView
android:layout_width="match_parent"
android:layout_height="100dp"
android:scaleType="centerCrop"
android:src="#drawable/arches_utah" />
<ImageView
android:layout_width="match_parent"
android:layout_height="100dp"
android:scaleType="centerCrop"
android:src="#drawable/blue_sea_mountains" />
<ImageView
android:layout_width="match_parent"
android:layout_height="100dp"
android:scaleType="centerCrop"
android:src="#drawable/china_jungle" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical" >
</LinearLayout>
</LinearLayout>
I have seen that the width of an element can be set to a fraction of the screen width by using a relative layout (code below showing ONLY the relevant properties):
<LinearLayout>
<ImageView
android:layout_width="0dp"
android:layout_weight=".40" />
</imageView>
<TextView
android:layout_width="0dp"
android_layout_weight=".60" />
</LinearLayout>
But ... apparently this same trick can NOT be done for assigning proportional height of an element. Eclipse complains if I attempt to set a layout_height of 0dp. What should I do if I want an image with a caption, where the image takes up 40% of the screen height and the caption below gets 60% ?
You can indeed assign weights for both horizontal and vertical orientations of a LinearLayout.
Horizontal orientation example:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<ImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".40" />
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".60" />
</LinearLayout>
Vertical orientation example:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ImageView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight=".40" />
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight=".60" />
</LinearLayout>
As an aside, it's useful to know that you don't have to specify floating point numbers for the weights. Android will simply sum up all of the weights and then divide by the total to get the percentage for each. So using 4 and 6 respectively for the layout_weights would have worked just as well.
Add android:orientation="vertical" to your layout and then set layout_height=0dp and weight to wanted values.
So:
<LinearLayout
android:orientation="vertical">
<ImageView
android:layout_height="0dp"
android:layout_weight=".40" />
</imageView>
<TextView
android:layout_height="0dp"
android_layout_weight=".60" />
</LinearLayout>
I have an EditText tag inside the LinearLayout with horizontal orientation, I want to make height of my EditText as percentage of parent LinearLayout's height. How can this be achieved?
Please don't suggest layout_weight attribute as it will be used to control child elements width not height.
You could write a custom layout that resizes its children to the correct percentages, which is probably the best solution.
Or you could use layout_weight and wrap the EditText in another LinearLayout, something like:
<?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:layout_height="match_parent">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:weightSum="2"
android:orientation="vertical">
<View
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="1"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:text="one"/>
</LinearLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="two"/>
</LinearLayout>
Percentages within a LinearLayout are very easy.
Give your view a weight
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:weightSum="2"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="0.5"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="0.25"
android:text="one"/>
</LinearLayout>
I've set the height of the two textViews to 0, but the layout_weight says to make one 50% of the LinearLayout and the other 25% the height of the layout.
When I add this, the buttons I add programatically to the RelativeLayouts don't show up in the layouts. But when I change the width from 0 to fill parent, they overlap. How can I make each RelativeLayout take up half the width of the LinearLayout?
<ScrollView
android:id="#+id/svButtons"
android:layout_width="match_parent"
android:layout_height="175dp" >
<LinearLayout
android:id="#+id/linlayColumns"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:weightSum="2">
<RelativeLayout
android:id="#+id/rellayLeftColumn"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content" >
</RelativeLayout>
<RelativeLayout
android:id="#+id/rellayRightColumn"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content" >
</RelativeLayout>
</LinearLayout>
</ScrollView>
If you want to split your RelativeLayouts horizontally, your LinearLayout orientation should be set to horizontal :
<LinearLayout
android:id="#+id/linlayColumns"
android:orientation="horizontal"
... >