I have the following layout, and for some reason the ScrollView overlaps the over views.
I don't quite understand the whole use of the weight and layout_weight attribute in android.
I am thinking that has something to do with my problem.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/list"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:id="#+id/topbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:adjustViewBounds="true"
android:scaleType="fitXY"
/>
<ImageView
android:id="#+id/secondbar"
android:adjustViewBounds="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/topbarr"
android:scaleType="fitXY"
/>
<ScrollView
android:id="#+id/buttonlistview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_below="#+id/secondbar"
android:scrollbarFadeDuration="0"
>
</ScrollView>
</RelativeLayout>
Firstly, you should have only one view with android:layout_alignParentTop="true" if you want your views to be one below another.
Secondly, you only need to use #+id once for each variable. Once it's declared, you refer to it by #id.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/list"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:id="#+id/topbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:adjustViewBounds="true"
android:scaleType="fitXY"
/>
<ImageView
android:id="#+id/secondbar"
android:adjustViewBounds="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#id/topbar"
android:scaleType="fitXY"
/>
<ScrollView
android:id="#+id/buttonlistview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_below="#id/secondbar"
android:scrollbarFadeDuration="0"
>
</ScrollView>
</RelativeLayout>
android weight and layout_weight attributes can be only used for Linearlayout or its childLayout.
As for layout_weight is used with the child view of the LinearLayout which divides the child width or height in ratios.
if u give layout_weight you should set the corresponding width or height to 0dp.
layout_weightSum is used with the parent the Linearlayout to define how much ratio it can be divided.
This hasn't to do anything with your problem right now, because you are using a RelativeLayout all the childViews start from the topleft corner. you have to give constraints in relativeLayout to align your views
And for scrollview
A child that is often used is a LinearLayout in a vertical orientation, presenting a vertical array of top-level items that the user can scroll through.
You should never use a ScrollView with a ListView, because ListView takes care of its own vertical scrolling.
take linear layout and adjust the weight as your desired UI looks
here it will divide three equal halves for 2 imageview and scrollview
<ImageView
android:id="#+id/topbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:layout_weight="1"
android:adjustViewBounds="true"
android:scaleType="fitXY"
android:src="#drawable/ic_launcher"
/>
<ImageView
android:id="#+id/secondbar"
android:adjustViewBounds="true"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_alignParentLeft="true"
android:layout_below="#+id/topbarr"
android:scaleType="fitXY"
/>
<ScrollView
android:id="#+id/buttonlistview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_below="#+id/secondbar"
android:scrollbarFadeDuration="0"
>
</ScrollView>
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 don't know how to align 3 elements side by side. I would like to have :
One view with a thin width on the left
One linearLayout with text content on the middle
One imageView always on the right
Like this :
And today, i got this :
Here is my code :
<?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:background="#color/gris_clair"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:background="#color/blanc" >
<View
android:id="#+id/view1"
android:layout_width="7dp"
android:layout_height="90dp"
android:background="#color/green_normal" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
</LinearLayout>
<ImageView
android:id="#+id/imageView1"
android:layout_width="80dp"
android:layout_height="90dp"
android:layout_gravity="right"
android:scaleType="centerCrop"
android:src="#drawable/test2" />
</LinearLayout>
</LinearLayout>
You can simplify your layout by setting the root LinearLayout to a horizontal orientation:
<?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="wrap_content"
android:background="#color/gris_clair"
android:layout_margin="5dp"
android:orientation="horizontal" >
<View
android:id="#+id/view1"
android:layout_width="7dp"
android:layout_height="match_parent"
android:background="#color/green_normal" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="TextView" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="80dp"
android:layout_height="90dp"
android:layout_gravity="right"
android:scaleType="centerCrop"
android:src="#drawable/test2" />
</LinearLayout>
You may want to tweak the colors or sizes to fit your desired end result.
I set the parent View's height to wrap the content, first two Views to match the parent view's height and the image to your size. This means that your image will decide the parent View's height.
If you want to evenly space/scale the views horizontally on your screen and use up all the space they have available you should look at the android:layout_weight attribute. You would set android:layout_width="0dp" for each View you want to scale with screen size and add android:layout_weight="x" where x is a number.
The number you choose will depend on how you want to divide up the available space each View will use. As an example if you wanted one View to use 1/3rd of the available space with a second using 2/3rds then set the first to 1 and the second to 2. 1+2=3 so 1 of a total 3 units and 2 of a total 3 units.
For your textview use weight to fill up space:
<TextView
android:id="#+id/textView1"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="TextView" />
You can use relative layout for that. and for the image view add alignparentright rule.
<RelativeLayout >
<View />
<LinearLayout/>
</LinearLayout>
<ImageView
android:alignParentRight="true" />
</RelativeLayout>
or use the weight for linearlayout, put 1 for textview and rest 0.
You can easy solve this problem using weight in LinearLayout, or make your parent RelativeLayout and place middle layout toLeftOf your left view and toRightOf your right view.
You can use relative Layout instead of linear layout to design custom design of your page.
It might help you.
<?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:background="#color/gris_clair"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:background="#color/blanc" >
<View
android:id="#+id/view1"
android:layout_width="7dp"
android:layout_height="90dp"
android:background="#color/green_normal" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
</LinearLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imageView1"
android:layout_width="80dp"
android:layout_height="90dp"
android:scaleType="centerCrop"
android:src="#drawable/test2"
android:layout_alignParentRight="true"
/>
</RelativeLayout>
</LinearLayout>
check this it might help you
I have a imageView and a linear layout inside a linear layout. It looks like this:
What I want to happen is have the second linear layout with all of the buttons and params be a fixed height, and then have the image view height be dynamic depending on whatever the size of the screen is. So if there is a large screen then the image will be large and the button and sliders will always be the same.
Here is a snippet of what I have:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
>
<ImageView
android:id="#+id/imgPreview"
android:layout_width="match_parent"
android:layout_height="400dp"
android:visibility="visible"
android:layout_gravity="center_vertical|right"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:scaleType="centerCrop"
/>
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="fill_parent">
Is there an easy way to do this?
You can do this by giving the ImageView a layout_height of 0dp and setting its layout_weight to 1. The inner LinearLayout will have its layout_height set to wrap_content.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" >
<ImageView
android:id="#+id/imgPreview"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:visibility="visible"
android:scaleType="centerCrop" />
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Your button and slider content here>
</LinearLayout>
</LinearLayout>
Yes, you can do this using:
android:layout_height="0dp"
android:layout_weight="YOUR VALUE"
I have a RelativeLayout with some stuff in it, and I want a background view to fill the whole thing. This is what I would expect to work:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#000" >
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_alignParentBottom="true"
android:layout_margin="1px"
android:background="#fafafa" />
<ImageView
android:id="#+id/im"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:src="#drawable/ic_blank_profile" />
.... and so on.
That doesn't work. It fills the width but the height gets set to zero. However, if I change layout_alignParentBottom to layout_alignBottom="#+id/im" then it does work (sort of; that's not a satisfactory solution but at least it isn't 0 height any more).
What's going on? Is this a bug?
You need to change the relative layout from
android:layout_height="wrap_content"
to
android:layout_height="match_parent"
Because you are wrapping the height of the parent to the child, and the child to match the parent, it will come up 0.
if you are wanting to have other things above/below the relative layout, then use android weights.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0px" <!-- or 0dip -->
android:layout_weight="1"
android:background="#000" >
Try setting the layout_height property of you relative layout to match_parent
And what happens if you remove all the alignParent properties from the view and just use match_parent for the width and the height of the view?
Rolf
Final Edit?:
Small example, something like this?
Using a container? When the content of the inner RelativeLayout grows the View will just stretch with it.
<?xml version="1.0" encoding="utf-8"?>
<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="vertical" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<View
android:id="#+id/view1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignBottom="#+id/relativeLayout1"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_margin="1px"
android:background="#fafafa" />
<RelativeLayout
android:id="#+id/relativeLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/im"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:src="#drawable/ic_blank_profile" />
</RelativeLayout>
</RelativeLayout>
</LinearLayout>