Develop Reference

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/>

How to separate layouts with weightSum in android?

I seem to be having issues understanding weightSum and LayoutWidth. My code is below:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="3">
<LinearLayout
android:background="#cccccc"
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:padding="20sp"
android:textSize="30sp"
android:gravity="center_horizontal"
android:text="Cheapest Fare Option"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
<LinearLayout
android:background="#666666"
android:layout_weight="2"
android:layout_width="match_parent"
android:layout_height="match_parent">
</LinearLayout>
</LinearLayout>
My understanding of this is the 1st layout will take up 1/3 of the space and 2nd layout will take 2/3 of the space, but the reverse is happening, i.e. 1st layout is taking 2/3 and 2nd layout is taking 1/3
Why is this happening? Trying hard to understand this.

Taking your android:orientation="vertical", you want to get this ratio vertically therefore your android:layout_height attribute should be 0dp for both the child LinearLayout.
Set -
android:layout_height="0dp"
for both the inner LinearLayout.
Alternatively if you want to obtain the ratio horizontally then use android:orientation="horizontal" set -
android:layout_width="0dp"
for both the inner LinearLayout.
The thing is when you want to achieve ratio then you don't set that particular dimension (width or height) to match parent. Rather set it to 0dp so that Android can handle it for you automatically.

<LinearLayout
android:background="#cccccc"
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="0dp">
<TextView
android:padding="20sp"
android:textSize="30sp"
android:gravity="center_horizontal"
android:text="Cheapest Fare Option"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
<LinearLayout
android:background="#666666"
android:layout_weight="2"
android:layout_width="match_parent"
android:layout_height="0dp">
</LinearLayout>

Android : 3 elements side by side

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

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/>

ImageViews aren't aligned vertically when using padding

Im trying to get two ImageViews side by side with a gap around the image. Ive been using Padding, Margin etc and all have had the same effect (See Image Below)
as you can see the image on the right is shifted upwards, how do i stop this?
Here's the layout file im using:
<?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:orientation="vertical" >
<!-- Top Row -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/tab_headlines"
android:src="#drawable/headlines"
android:layout_margin="5sp"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/tab_headlines"
android:src="#drawable/headlines"
/>
</LinearLayout>
I am going to be using more rows of images hence the extra LinearLayout

Use layout_weight to divide your layout equally. Try the following code:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<!-- Top Row -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="6dp"
android:layout_marginRight="3dp"
android:layout_weight="1"
android:contentDescription="#string/tab_headlines"
android:src="#drawable/headlines" />
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="3dp"
android:layout_marginRight="6dp"
android:layout_weight="1"
android:contentDescription="#string/tab_headlines"
android:src="#drawable/headlines" />
</LinearLayout>
</LinearLayout>
Also, never use sp for specifying layout dimensions. Use dp instead.

You have given layout_margin for left side image and didn't give for the right side image.That's where the issue lies. If you want only two images in a row and if the image size is same for the both then you can make use of layout_weight attribute and give padding for space in between them.
so,try this. It will work.
<!-- Top Row -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:contentDescription="#string/tab_headlines"
android:src="#drawable/headlines"
android:padding="3dp"
/>
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:contentDescription="#string/tab_headlines"
android:src="#drawable/headlines"
android:padding="3dp"
/>
</LinearLayout>

To fix Vertical alignment :
Use android:layout_height="match_parent" in your ImageView
by using android:layout_height="match_parent" inside ImageView it will be matched to its parent your LinearLayout which is android:layout_height="wrap_content"
Now Question arises why the height will be same for both ImageViews ?
Reason your parent LinearLayout's Height will be automatically chosen from ImageView Whose height is greater because of android:layout_height="wrap_content" in your LinearLayout !
and by using android:layout_height="match_parent" you will be using same height for ImageView whose height is smaller !
To Fix Horizontal alignment :
use android:layout_weight="equal weight value for btoh"
change your code to
<ImageView
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:contentDescription="#string/tab_headlines"
android:src="#drawable/headlines"
android:layout_margin="5sp"
/>
<ImageView
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:contentDescription="#string/tab_headlines"
android:src="#drawable/headlines"
/>