Develop Reference

Adding two linear layout in scrollview the layout either shrink or compress. Here i am using layout_weight in them that's why the problem occurs

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.

Android: ImageView src ignores the layout_weight property of parent element

I have two vertical table rows with the property layout_weight = "1" so they take equal space vertically, but if I add an "ImageView" tag in those tables tags with android:src property it resizes the parent tableRow tag according to the image's real size, so is there any way that I can keep those equal heights of TableRow without specifying the exact size of ImageView or TableRow
Code,
working code (simplified version)
<?xml version="1.0" encoding="utf-8"?>
<TableLayout 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"
android:layout_gravity="center">
<TableRow
android:layout_width="match_parent"
android:layout_weight="1">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:color/white" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_weight="1">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:color/black" />
</TableRow>
</TableLayout>
But as soon as I add the android:src to ImageViews property and choose an image, the size of the parent <TableRow> changes according to the size of that image, is there any way that the image just fits into the current size of the parent `and doesn't change its parent size?
based on Manishika answer I tried this code but it didn't work either
<TableLayout 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"
android:weightSum="1"
android:measureWithLargestChild="true"
xmlns:android="http://schemas.android.com/apk/res/android">
<TableRow
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="#android:color/holo_green_light"
android:gravity="center"
android:layout_weight=".5">
<ImageView
android:layout_width="match_parent"
android:src="#drawable/ic_launcher_background"
android:background="#android:color/white"/>
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight=".5"
android:gravity="center"
android:background="#android:color/holo_blue_bright">
<ImageView
android:layout_width="match_parent"
tools:srcCompat="#tools:sample/backgrounds/scenic"
android:background="#android:color/black"/>
</TableRow>
</TableLayout>
Thanks!

Make sure the parent_layout has a android:weightSum="2" attribute
android:weightSum
Defines the maximum weight sum. If unspecified, the sum is computed by adding the layout_weight of all of the children. This can
be used for instance to give a single child 50% of the total available
space by giving it a layout_weight of 0.5 and setting the weightSum to
1.0.

Try this.
This way both the rows will divide the table layout height.
Height i specified as 400dp just to test if its getting divided equally among the rows. You can keep it match parent or anything depending upon your requirement.
<TableLayout android:layout_width="match_parent"
android:layout_height="400dp">
<TableRow android:layout_weight="1">
<ImageView
android:background="#color/white"
android:src="#drawable/image"
android:layout_height="match_parent"/>
</TableRow>
<TableRow android:layout_weight="1">
<ImageView
android:background="#color/black"
android:src="#drawable/image"
android:layout_height="match_parent"/>
</TableRow>
</TableLayout>

Check the scale type method. Furthermore, if you don't want your images to jump the rest of the layout you can always put a specific height or width
android:scaleType="centerCrop"

You have to put android:weightSum="2" on your TableLayout, and you also need to set your layout_width="0dp" in both TableRow's. I don't think you need android:layout_weight="1" on your ImageView tho

If you are still looking for answer, Please consider doing the below changes :
Add android:measureWithLargestChild="true" to your TableLayout, this will ensure to take row height of the largest height TableRow among all.
Instead of adding gravity to TableLayout add it to TableRows as layout_gravity controls how the view lays out its contents inside its own container and I believe you want the Images to be in center.
Add weightSum to TableLayout and divide the weights in each TableRow.
Try the below layout XML I used and is working :
<TableLayout android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="1"
android:measureWithLargestChild="true">
<TableRow
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="#android:color/holo_green_light"
android:gravity="center"
android:layout_weight=".5">
<ImageView
android:layout_width="match_parent"
android:src="#drawable/ic_launcher_background"
android:background="#android:color/white"/>
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight=".5"
android:gravity="center"
android:background="#android:color/holo_blue_bright">
<ImageView
android:layout_width="match_parent"
android:src="#drawable/ic_dashboard_black_24dp"
android:background="#android:color/black"/>
</TableRow>
</TableLayout>

android ProgressBar is changing height dimension of parent LinearLayout

I have a bunch of RelativeLayout inside LinearLayout. Inside this will be ProgressBar and other elements.
The problem at the moment is that the ProgressBar is extending the height dimension of the parent LinearLayout when placed inside the RelativeLayout.
Here's the basics of what I have.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_weight="1"
android:weightSum="2">
<RelativeLayout
android:id="#+id/timer1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:color/darker_gray">
<ProgressBar
android:layout_width="200dp"
android:layout_height="20dp"
style="#android:style/Widget.ProgressBar.Horizontal"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:layout_centerInParent="true"/>
</RelativeLayout>
<RelativeLayout
android:id="#+id/timer2"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:color/holo_blue_light"/>
</LinearLayout>
The ProgressBar looks like it is extending height of the parent LinearLayout by the height of the ProgressBar. Which of course is not wanted.
Bare in mind that the above LinearLayout is inside another vertical LinearLayout where weightSum="3". So this distortion of the height means all will not fit in the screen vertically.
The one flaw I may have in my thinking is that because I have not yet completed the code (not put ProgressBar in each of the three levels) that it's just a quirk. I'll do that and report back. But it still seems to me this can't be a good thing.

<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:orientation="horizontal"
android:layout_weight="1">
<RelativeLayout
android:id="#+id/timer1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:color/darker_gray">
<ProgressBar
android:layout_width="200dp"
android:layout_height="20dp"
style="#android:style/Widget.ProgressBar.Horizontal"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:layout_centerInParent="true"/>
</RelativeLayout>
<RelativeLayout
android:id="#+id/timer2"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:color/holo_blue_light"/>
</LinearLayout>
when using weights use the width or the height to 0dp which ever orientation u need

Well there you go. After I filled all three levels of the outer LinearLayout (not visible in example code above), the layout seemed to sort itself out.
All height parameters are the same (each taking up one third of the height of the screen) and this is true in both the xml Preview pane and when tested on an emulator.
So it looks to me that if you have a weightSum of 3, then the layout will not balance out until you have actually written the code for all three weight divisions.
For example, this would work:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:wieghtSum="3" >
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="#string/example_text" />
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="#string/example_text" />
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="#string/example_text" />
<LinearLayout/>
But the following would potentially show a distorted height of the text views because the code is incomplete. weightSum is set to 3 but only code for two of the three divisions is written.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:wieghtSum="3" >
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="#string/example_text" />
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="#string/example_text" />
<LinearLayout/>

Element relative height in layout

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>

Android: Layout looks different on different devices

Hi I have an activity with an imageview and a row with buttons at the bottom.The buttons are added to the iconView layout programmatically.When I test my app on my HTC one the buttons are displayed correct.
Once I run it on a device with a smaller screen it is cropped i.e. only the top of the buttons is displayed.
How can I make my code device independent?
<?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="#000000"
android:orientation="horizontal" >
<LinearLayout
android:id="#+id/mainView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/background2"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="0.95"
android:orientation="vertical"
android:paddingLeft="4dp"
android:paddingTop="4dp"
android:paddingRight="4dp"
android:paddingBottom="4dp"
android:src="#android:drawable/ic_menu_camera" />
<LinearLayout
android:id="#+id/iconView"
android:layout_weight="0.05"
android:layout_width="match_parent"
android:layout_height="60dp"
android:orientation="horizontal" >
</LinearLayout>
</LinearLayout>
</LinearLayout>
Thanks in advance.

Try this layout:
<?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="#000000" >
<RelativeLayout
android:id="#+id/mainView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/background2" >
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="4dp"
android:layout_above="#+id/iconView"
android:src="#android:drawable/ic_menu_camera" />
<LinearLayout
android:id="#+id/iconView"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_alignParentBottom="true"
android:orientation="horizontal" />
</RelativeLayout>
</LinearLayout>

Try this
make the first view with android:layout_weight="1"
and the with a static height without the layout_weight, this should solve it

Unfortunately the solutions did not work. Eventually I changed my code and add the buttons in the xml, not programmatically. This works fine. I don't know why...

When adding button either programmatically or in XML layout, try to use LinearLayout as the parent for button and leverage the "weightsum" property of that LinearLayout.
When you're going to share the real state of screen's width or height equally between a number of views such as buttons or textview or ..., you can set "layout_weight" property on those controls. Notice that, this is only possible when using LinearLayouts.
What happens at the end is that the linearlayout's real estate is calculated and allocated according to each child's element's "layout_weight" value.
The example below shows how to put two buttons beside each other and make them fill the screen's width equally :
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="2"
>
<Button
android:id="#+id/btn_left"
android:layout_width="0dp" // width is calculated by weight
android:layout_height= "wrap_content"
android:layout_weight="1" />
<Button
android:id="#+id/btn_right"
android:layout_width="0dp" // width is calculated by weight
android:layout_height= "wrap_content"
android:layout_weight="1" />
<LinearLayout/>