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>
Related
when i used the single linear layout in scrollview then the output and code is like that
Xml code:
<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:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<ScrollView
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"
android:weightSum="10">
<ImageView
android:id="#+id/disp_img"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="4"
android:background="#color/grey"
android:scaleType="fitXY" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_margin="10dp"
android:layout_weight="5"
android:orientation="vertical">
<TextView
android:id="#+id/disp_title"
style="#style/disTitleTextViewStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"></TextView>
<TextView
android:id="#+id/disp_cont"
style="#style/disdiscTextViewStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"></TextView>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#drawable/disptextdes"
android:orientation="vertical"
>
<TextView
android:id="#+id/disp_readmore"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="30dp"
android:layout_marginTop="15dp"
android:text="To read more click on this"
android:textColor="#android:color/black"
android:textSize="15sp"></TextView>
</LinearLayout>
</LinearLayout>
</ScrollView>
</RelativeLayout>
output is:
But when i add another layout then code and output is look like
<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:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
//first linear layout
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="10">
<ImageView
android:id="#+id/disp_img"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="4"
android:background="#color/grey"
android:scaleType="fitXY" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_margin="10dp"
android:layout_weight="5"
android:orientation="vertical">
<TextView
android:id="#+id/disp_title"
style="#style/disTitleTextViewStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"></TextView>
<TextView
android:id="#+id/disp_cont"
style="#style/disdiscTextViewStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"></TextView>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#drawable/disptextdes"
android:orientation="vertical"
>
<TextView
android:id="#+id/disp_readmore"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="30dp"
android:layout_marginTop="15dp"
android:text="To read more click on this"
android:textColor="#android:color/black"
android:textSize="15sp"></TextView>
</LinearLayout>
// when i add second linear layout then the first linear layout is varied,I don't know why
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/citispotterlogo"></ImageView>
</LinearLayout>
</LinearLayout>
</ScrollView>
</RelativeLayout>
output is :
When i added the image in linear layout the first linear layout shrink I don't know why?
Please help me to solve this,I try to search this on google in stackoverflow but i don't find nothing about this. Can anybody solve this or give me some another approach for solving this problem.
So my final output is look like this
I have added two images which are in scrollview
(https://i.stack.imgur.com/DpJ9C.png)
(https://i.stack.imgur.com/QhQoL.png)
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="10">
This LinearLayout has height which is match_parent, you should have used wrap_content or use a fixed height so that the second layout must be visible
This layout uses a weightSum in the first linear layout when you add the last LinearLayout you do not include a weight for it. This is causing the UI to render incorrectly.
I've included a couple of option solution for you both should do the job.
Option 1
change the weighted sum in the first LinearLayout to 11 and then add a weight value of 1 to the last LinearLayout.
Option 2
Add a weighted value to the last LinearLayout but you will need to adjust the rest of the weighted values so it equals weight sum in the first LinearLayout (10).
LayoutWeight Review
LinearLayout supports assigning a weight to individual children with the android:layout_weight attribute. This attribute assigns an "importance" value to a view in terms of how much space it should occupy on the screen. A larger weight value allows it to expand to fill any remaining space in the parent view. Child views can specify a weight value, and then any remaining space in the view group is assigned to children in the proportion of their declared weight. The default weight is zero.
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 a LinearLayout, the direct child of a ScrollView, with two children. The first child can be almost any height (it's an Image), but the second child will have content that is much larger than the height of the viewport. I tried using layout_weight to achieve this, but that only resulted in the image being set to something like 1dp and the second child taking the rest, because the weights are only assigned to the remaining space.
How do I force the image to take up at least 40% of the screen space?
<ScrollView
android:id="#+id/scroll_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2"
android:src="#drawable/my_image" />
<LinearLayout
android:id="#+id/prediction_container"
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="#android:color/white"
android:orientation="vertical"
android:layout_weight="1">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="[really long text]" />
</LinearLayout>
</LinearLayout>
</ScrollView>
You're missing android:adjustViewBounds="true" on your ImageView
Change your ImageView code to something like this
<ImageView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="4"
android:src="#drawable/my_image"
android:adjustViewBounds="true"
/>
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.
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>