Develop Reference

Children views having equal height

I have a horizontal LinearLayout with two buttons with text inside.
The LinearLayout's and the buttons layout_height is wrap_content.
The text of one of the two buttons takes two lines unlike the other's which takes one line.
So at the end one of the buttons has a bigger height than the other which is something that I don't want.
I know how to solve this programmatically. So the reason I making this question is to know whether I can solve this through xml.
One possible solution is, for the button whose text is one line, set
layout_height="match_parent"
and it works fine.
But the problem here is that generally I don't know which button will occupy the biggest height.
In essence what I want to do is: having a LinearLayout with Views inside
I want to set the height of all the children Views to be equal to the height of the View which when has its content wrapped has the max height.
And the question is if this is possible through xml?
An example XML. Also I forgot to add that I already have 0dp in the widths.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/some_string" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/some_other_string" />
</LinearLayout>

I guess what you search is android:baselineAligned="false", this will avoid that the text are on the same baseline and the buttons will start at the same y position on the screen.
Here without android:baselineAligned="false":
And here with:
However if you also want that both buttons are equal sized try this layout example:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:baselineAligned="false">
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="aaaaa"/>
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="bbbbbbb bbbbbbbb bbbbbbbb bbbbbbbbbbbb bbbbbb"/>
</LinearLayout>
That will look like this:

Use this thing to set weigh Sum and weight layout
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="100" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="10"
android:orientation="horizontal" >
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="Button 1" />
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="Button 2" />
</LinearLayout>
</LinearLayout>

Eliminate space in Android Layout

I am trying to make a very simple Layout like this:
An image occupying the width of the screen, and a button occupying the width of the screen coming right next to it without any space.
Here is the code I have, it is next to trivial
<?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="wrap_content"
android:orientation="vertical"
tools:context="com.andrew.question.InitialActivity">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="0dp"
android:padding="0dp"
android:src="#drawable/bg" />
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="0dp"
android:padding="0dp"
android:text="Hello, I am a Button" />
</LinearLayout>
The problem is, the button does not show up, it shows the image with some space
The emulator is running with screen size 1080 x 1920, and the image has size 720 x 990, if we scale that up, it should be 1080 x 1485, leaving a lot of space for the button, but the image occupied in the middle of the screen somehow that I do not understand.
This is how a screen capture on the emulator look like:
Next, I tried to swap the order of the button and the image (just for the sake of experimenting), I see something like this:
I get this:
<?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="wrap_content"
android:orientation="vertical"
tools:context="com.andrew.question.InitialActivity">
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="0dp"
android:padding="0dp"
android:text="Hello, I am a Button" />
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="0dp"
android:padding="0dp"
android:src="#drawable/bg" />
</LinearLayout>
Now I figured what happened, it appears that we have lot of spaces between the button and the image and therefore the button have no space. But where does those spaces come from? I wanted them to stick together.
The full source code of this experiment can be found in
https://github.com/cshung/MiscLab/tree/master/Question

The problem occurs here because the LinearLayout container has a height with wrap_content and the system extends the ImageView at its max and then display the TextView below it (thus below the screen height).
To get the right layout, you have to use layout_weight in the child views as follows:
<!-- fill the entire height -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
...>
<!-- take 90% of container -->
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.9"
... />
<!-- take 10% of container -->
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.1"
... />
</LinearLayout>
Then, in order to have "no space" for the image, you have to play with the attribute scaleType (see this example) as the following:
Either force the image to fit the widht/height:
<ImageView
...
android:scaleType="fitXY"/>
Or show the center and fill the w/h:
<ImageView
...
android:scaleType="centerCrop"/>

Your drawable/bg is being scaled to fit in id/imageView. The space you're getting is just the window's background not being covered by the image. Change ScaleType of your ImageView to FIT_XY, CENTER_CROP or other and watch a result. See: http://developer.android.com/reference/android/widget/ImageView.ScaleType.html

Your easiest option will probably be to use a RelativeLayout instead of a LinearLayout. I think this is the direction Android has been going lately. Everything seems to be RelativeLayout based. For instance, when you make a new layout in Android Studio, I believe it defaults to RelativeLayout. It used to be LinearLayout in the eclipse extension a while back.
Relative Layout
Using a relative layout instead you should have the following:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:context="com.andrew.question.InitialActivity">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="0dp"
android:padding="0dp"
android:src="#drawable/bg" />
<Button
android:id="#+id/button"
android:layout_below="#id/imageView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="0dp"
android:padding="0dp"
android:text="Hello, I am a Button" />
</RelativeLayout >
Note that I simply changed LinearLayout to RelativeLayout, removed the setOrientation and then added the following line to your button.
android:layout_below="#id/imageView"

First of all your image is too big so it basically takes up all of the screen space in the first place and pushes the button down the viewable region.There is no need to modify the padding or margin as it is in the LinearLayout and it places all child views one after the other.
Set a desired height to the image view and also a scale type to get what you are expecting.
<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="wrap_content"
android:orientation="vertical"
tools:context="com.andrew.question.InitialActivity">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:scaleType="centerCrop"
android:layout_height="300dp"
android:src="#drawable/bg" />
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Hello, I am a Button" />
</LinearLayout>
Screen shot

ScrollView adds large space at the bottom

My main Activity has a number of buttons, that fit below each other on a large Tablet screen, but not on a smaller Phone screen. I added a ScrollView, so that the user can scroll down to the other buttons if the screen size requires it:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="#drawable/bg"
android:gravity="center_horizontal">
<TextView
android:id="#+id/trackSelectorText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal"/>
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center_horizontal">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="foo" />
<!-- More buttons -->
</LinearLayout>
</ScrollView>
</LinearLayout>
This kinda works, however I have a large blank space below the last button (i.e. the ScrollView can scroll down too far). Both on an actual Tablet and on the emulator with a Phone configuration. If I center the inner LinearLayout (instead of center_horizontal), the space is evenly spread between the top and the bottom, which I don't want neither. How do I fix this layout?
I hope this image makes it more clear, imagine that the ScrollView has been completely scrolled down and showing the last buttons. The blank space I mean is the one below Button 6 on the right image:

Try adding this attribute to your ScrollView element.
android:fillViewport="true"
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:fillViewport="true" > ... </ScrollVIew>
Ref: ScrollView Ref

Actually, it wasn't really related to the layout (unless I'm missing something). I tried commenting out the background attributed, and it suddenly worked. The background imaged (#drawable/bg) was simply too big and caused the scrolling. I converted the background into a 9-patch image, so it could be scaled automatically, and voilà, the additional space was gone.
Still, if this would've been achievable without 9-patch, I'd still be interested to hear if this can be done in the XML file.

you can use this attribute in scrollview to avoid extra padding at bottom of view
android:overScrollMode="never"

I have checked with my code..Work perfectly:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#drawable/bg"
android:gravity="center_horizontal">
<TextView
android:id="#+id/trackSelectorText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal"/>
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center_horizontal">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="foo" />
<!-- More buttons -->
</LinearLayout>
</ScrollView>
</LinearLayout>
May be Help you.......!!

scrollable and non scrollable images

I'm trying to build a gui for my app. It is comprised of two images, one on top of the other. The bottom image needs to be scrollable, the top image needs to be fixed.
This is the current layout xml for the view:
<?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:gravity="right"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="right"
android:orientation="horizontal" >
<Button
android:id="#+id/button_load"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Load" />
<Button
android:id="#+id/button_save"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Save" />
</LinearLayout>
<uk.co.test.EditorView
android:id="#+id/EditorView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top" />
<HorizontalScrollView
android:id="#+id/scroll_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="bottom" >
<ImageView
android:id="#+id/image_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:src="#drawable/imagemdpi" />
</HorizontalScrollView>
</LinearLayout>
Using this layout, the bottom image does not scroll, it is compressed to the width of the screen. If I remove the EditorView, it does scroll. How can I make the gui act as I want?
Any help gratefully received. Thanks

I'm actually not sure why removing the EditorView makes it work. Also, I only see one image view in your layout. But to make that ImageView scroll horizontally, I would change the layout_width of the scroll view to "match_parent" and add a scale type to your image view.
(see: https://developer.android.com/reference/android/widget/ImageView.ScaleType.html )
I would try either "center" or "matrix," although usually I have to play around with these a bit to get it to work just how I want it.
so:
<HorizontalScrollView
android:id="#+id/scroll_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="bottom" >
<ImageView
android:id="#+id/image_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="center"
android:layout_gravity="bottom"
android:src="#drawable/imagemdpi" />
</HorizontalScrollView>
In generally, with scroll views, you want to match_parent for the size of the scroll view, but wrap_content for the view being scrolled. The scroll view will allow the wrapped view to grow bigger than its own bounds, but if the scroll view grows bigger than the screen bounds, it won't scroll because it thinks it's showing everything already.

Android: even spacing between view aligned vertically

My layout have 4 EditText views aligned vertically. but there is empty spacing after the last EditText. I want to align these views evenly so that the spacing b/w, before and after the views is same.
How to achieve this?
--nehatha

You can wrap every of your EditText to a FrameLayout with equal layout weight and set the Gravity of those frame layouts to center (or layout_gravity of EditTexts).
Edited:
Well, my initial solution leaves less space at top and bottom than between the edit texts. But this one works fine: simply add FrameLayout between each view and at top and bottom with layout_weight="1":
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:layout_width="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_height="fill_parent"
>
<FrameLayout
android:layout_width="fill_parent"
android:layout_weight="1"
android:layout_height="wrap_content"
></FrameLayout>
<EditText
android:layout_height="wrap_content"
android:layout_width="fill_parent"
></EditText>
<FrameLayout
android:layout_width="fill_parent"
android:layout_weight="1"
android:layout_height="wrap_content"
>
</FrameLayout>
<EditText
android:layout_height="wrap_content"
android:layout_width="fill_parent"
></EditText>
<FrameLayout
android:layout_width="fill_parent"
android:layout_weight="1"
android:layout_height="wrap_content"
>
</FrameLayout>
<EditText
android:layout_height="wrap_content"
android:layout_width="fill_parent"
></EditText>
<FrameLayout
android:layout_width="fill_parent"
android:layout_weight="1"
android:layout_height="wrap_content"
>
</FrameLayout>
<EditText
android:layout_height="wrap_content"
android:layout_width="fill_parent"
></EditText>
<FrameLayout
android:layout_width="fill_parent"
android:layout_weight="1"
android:layout_height="wrap_content"
>
</FrameLayout>
</LinearLayout>

if you are using xml, then in all EditText add this tag,
android:layoutMargin = "5dip"
and in your parent layout (i ll assume its LinearLayout )
android:layoutHeight = "wrap_content"
Updated
adding hard coded values does't harm your code, since "dip" and "dp" are all units which get adapted to different screen resolutions. it has zero affect evn if the screen resolution changes..
chek this.. http://developer.android.com/resources/samples/MultiResolution/index.html