Develop Reference

Android: Layout Problems with LinearLayout

I must be doing this all wrong, and layouts confuse me, so I hope someone might guide me in the right direction. This whole thing is a mess because I've been fiddling with it non-stop since I created it a month ago, trying to fix little issues here and there, so I apologise quite a lot in advance for this disaster.
Literally all that I want is a LinearLayout where everything is centred horizontally and vertically.
This is how it shows up in my Design page.
Before I dump in my layout, allow me to explain what's going on.
I have a TextView that shows status messages above the ImageButton. Below the ImageButton, I have a TextSwitcher and finally a circular ProgressBar.
I've had to put android:adjustViewBounds="true" and android:scaleType="fitCenter" on my ImageButton because the image is much bigger than would fit, otherwise.
Anyway, here's the dump. Hoping someone might be able to make suggestions.
<LinearLayout 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="fill_parent"
android:layout_height="fill_parent"
android:paddingBottom="0dp"
android:paddingLeft="0dp"
android:paddingRight="0dp"
android:paddingTop="0dp"
android:orientation="vertical"
android:layout_gravity="fill_vertical|center"
android:configChanges="keyboardHidden|orientation|screenSize"
android:screenOrientation="nosensor"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.gesslar.threshvote.MainActivity"
android:background="#color/colorFaded"
tools:showIn="#layout/activity_main">
<TextView android:id="#+id/textStatusMessage"
android:textColor="#color/colorText"
android:textAppearance="?android:attr/textAppearanceLarge"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center" />
<ImageButton android:id="#+id/buttonVote"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="false"
android:src="#drawable/ic_vote_button_image"
android:background="#android:color/transparent"
android:scaleType="fitCenter"
android:onClick="onVotePressed"
android:layout_gravity="center_horizontal|center_vertical"
android:adjustViewBounds="true" />
<TextSwitcher android:id="#+id/textCountdown"
android:gravity="center"
android:layout_gravity="center_horizontal"
android:textColor="#color/colorText"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textSize="#dimen/countdown"
android:includeFontPadding="false"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<ProgressBar android:id="#+id/loadingBar"
style="#style/Widget.AppCompat.ProgressBar"
android:layout_gravity="end"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:visibility="invisible"
android:indeterminate="true"/>
</LinearLayout>

If you still like using LinearLayout, you can order your layout like this to have a layout center both horizontally and vertically
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#0ff"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:orientation="vertical" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Button Center Vertical/ Horizontal" />
</LinearLayout>
</LinearLayout>
Or simple use RelativeLayout with android:layout_centerInParent="true" to have a layout center both orientation
Hope this help

First of all, LinearLayout can either store everything horizontally or vertically but not both at the same time. So you have to choose specially what do you want. If you want everything to appear in vertical fashion but still some components, say TextView needed to be in a horizontal layout, you may wish to use another LinearLayout (nested inside the main LinearLayout and give it an orientation : Horizontal ).
Apart from this, I don't think there is any problem with that Layout or I did not understand your problem properly, either one.

Scrollable Perfectly Symmetrical ImageButtons in XML Android

In my Android app, I want to create a scrollable grid of images that have the same width/height. I don't want to use GridView because there will not be that many images. So far, I have:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal"
android:weightSum="2">
<ImageButton
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:scaleType="fitCenter"
android:background="#null"
android:src="#drawable/food"/>
<ImageButton
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:scaleType="fitCenter"
android:background="#null"
android:src="#drawable/music" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal"
android:weightSum="2">
<ImageButton
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:scaleType="fitCenter"
android:background="#null"
android:src="#drawable/offcampus"/>
<ImageButton
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:scaleType="fitCenter"
android:background="#null"
android:src="#drawable/sports" />
</LinearLayout>
</LinearLayout>
</ScrollView>
It is very close to what I want to achieve, but the second LinearLayout (the one with the layout_height of 0dp) causes the first two ImageButtons to take up the majority of the screen, so that the user has to scroll a lot to see the next two ImageButtons. In other words, there is way too much space between "rows" of images. Is there any way I can fix this?
I attached a picture in case there was confusion.
Thanks for your help.

Check if the extra space is due to the LinearLayout being too tall or if the ImageButtons themselves are. You can use "Dump View Hierarchy" button in the ADT in Eclipse's Devices view.
I suspect it's the ImageButtons using the images' original height. See if setting android:adjustViewBounds on the ImageButtons help with the issue. See reference: http://developer.android.com/reference/android/widget/ImageView.html#attr_android:adjustViewBounds

Layout: background picture stretched

I have difficulties with my layout.
As my first dev project, I'm trying to make a simple chronometer.
I want to have a picture of a chronometer in the background and the start and stop button
at the bottom of the application, side by side and filling the width of the screen.
Here is my best shot, but I'm not satisfied.
All widgets are placed properly but ...
My background is streched and my buttons seem vertically compressed, even the text at the bottom is a bit cropped.
I found that if I change these lines
android:layout_width="fill_parent"
android:layout_height="fill_parent"
by
android:layout_width="wrap_content"
android:layout_height="wrap_content"
The background is ok, the buttons too .. but all widgets are placed in the center of the Activity.
How can I fix this ?
By the way if I want to have my buttons side by side, did I choose the better solution ?
Thanks for your help !
Charles.
... and now my xml ....
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="#drawable/background"
tools:context=".Chronosv1" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:layout_weight="2" >
<Chronometer
android:id="#+id/chronometer1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_weight="1" >
<Button
android:id="#+id/button1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="50"
android:text="START" />
<Button
android:id="#+id/button2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="50"
android:text="STOP" />
</LinearLayout>
I tried relativeLayout.
I don't know how to have two buttons of the same size without using a padding, I don't think it's a good idea if you want your app to run on different screens.
Anyway I come up with this, but I still have my streched image and my buttons don't have the same size.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/background"
tools:context=".Chronosv1" >
<Chronometer
android:id="#+id/chronometer1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="Start" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_toRightOf="#id/button1"
android:text="Stop" />

Try RelativeLayout ;) I think this is much easier to handle than a LinearLayout. Maybe you can upload a picture how it looks like and I will give you a relativelayout solution ;)

Can you try this out? Should work IMO.
It is a better/fool-proof way to obtain your layout.
<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="match_parent"
android:background="#drawable/background"
tools:context=".Chronosv1" >
<LinearLayout
android:id="#+id/layout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="2"
android:layout_alignParentBottom="true">
<Button
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_margin="5dp"
android:text="Start" />
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_margin="5dp"
android:text="Stop" />
</LinearLayout>
<Chronometer
android:id="#+id/chronometer1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/layout1" />
</RelativeLayout>

I finally found the solution.
First problem: my 9 patch image hid my other component.
Solution: add android:padding="0dip" in your linearlayout ... here the subject that gave me my answer (Android layout broken with 9-patch background)
Second problem: why my picture was streched whereas I designed it at the exact size of the screen. This one was a silly question ... it was because of the action bar and the other bar above (with battery level and other stuff).
To get rid of theses bars (included in the theme) use a different version of the Theme in the manifest.
I choose: Theme.Light.NoTitleBar.Fullscreen.
Problems solved.

Defining a specific xml layout with a nested layout

I am in the process of designing my first Android application and I am trying to get the hang of creating an XML layout. (I have a great deal of experience with Java)
Essentially what I wanna do:
Where the outlines describes:
Blue: A basic View (where i can set a text)
Red: A ButtonView (Used so the user can synchronize data)
Green: A nested RelativeLayout (Where i am going to add a lot of other stuff)
More specifically what i wanna do:
So my question is this: How can i set up the different layouts? I am having the must trouble with setting up the blue and red views because i want the red view to fill up around 25% of the screen width(and the blue to fill up the last 75%).
Thank you in advance.

Use layout_weight property to specify the percentage of screen space a view takes.
Like here, for e.g:
<LinearLayout android:layout_height="match_parent" android:layout_width="match_parent"
android:orientation="vertical" .........>
<LinearLayout android:layout_height="wrap_content" android:layout_width="match_parent"
android:orientation="horizontal">
<EditText android:layout_height="wrap_content" android:layout_width="0dip"
android:layout_weight="3"/>
<Button android:layout_height="wrap_content" android:layout_width="0dip"
android:layout_weight="1"/>
</LinearLayout>
//Other view
</LinearLayout>

Use following xml, this is specially designed for 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:orientation="vertical" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_weight="0.75">
<TextView
android:id="#+id/headingTextView"
style="#android:style/TextAppearance.WindowTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Cafe Vigeos"
android:textColor="#android:color/white"
android:textSize="30sp" />
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_weight="0.25">
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
</RelativeLayout>
<RelativeLayout
android:id="#+id/nested_relative_layout"
android:layout_width="match_parent"
android:layout_height="fill_parent" >
</RelativeLayout>
</LinearLayout>

How does one align views at certain positions of the screen, staying consistent across multiple screen resolutions?

I've got a bit of a problem aligning my buttons. I want to get them at (roughly) 1/3rd and 2/3rd of my screen (I provided a screenshot below to make things a bit more clear)
My code is the following:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/mainbg">
<Button
android:text="#string/topbutton"
android:background="#drawable/silvertablesbuttonbgkort"
android:id="#+id/topbutton"
android:layout_alignParentRight="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center|center_vertical">
</Button>
<Button
android:text="#string/midbutton"
android:background="#drawable/silvertablesbuttonbglang"
android:id="#+id/midbutton"
android:layout_alignParentRight="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center|center_vertical">
</Button>
<RelativeLayout
android:id="#+id/underbar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" >
<Button
android:text="#string/underbartekst"
android:background="#drawable/silvertablesunderbar"
android:id="#+id/underbarbutton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="20dp"
android:textSize="20dp"
android:gravity="left|center_vertical" >
</Button>
</RelativeLayout>
I'm trying to get it to look like this: (I'm sorry if posting screenshot mock-ups is frowned upon here, I just couldn't think of a better way to clear up what I'm trying to do)
It seems that I can't post images because I'm too new here... So here is a link to the screenshot: http://i.imgur.com/l3b3z.png
My initial idea was just wrapping a vertical linear layout around the two buttons and putting empty textviews above and in between the two, which would actually work if this app was meant to be running on one screen size, but I'm pretty sure it'd mess up on every phone with another screen resolution. I solved this problem for the bar at the bottom by using a relativelayout with android:layout_alignParentBottom="true", but I can't really think of a way to snap to 1/3rd or 2/3rd. Is there a way to do this that will work with various screen resolutions?
Edit:
I solved my problem! I tried to post it as an answer, but I can't until in 8 hours. Will do then, but for now, I'll just post it as an edit here:
I've placed a TextView of 0x0 in the middle of the screen, and put RelativeLayouts on top of and below it, filling the screen. Then I placed two TextViews of 0x0 in the middle of those layouts, and within those layouts, two new RelativeLayouts. One below the highest TextView, one above the lowest. I placed my buttons in the center of those layouts. It works like a charm, and does not rely on anything but the code itself. This is my code now:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/mainbg">
<TextView
android:text=" "
android:id="#+id/ankermidden"
android:layout_centerVertical="true"
android:layout_width="0dp"
android:layout_height="0dp">
</TextView>
<RelativeLayout
android:id="#+id/ankerveldboven"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#id/ankermidden">
<TextView
android:text=" "
android:id="#+id/ankerboven"
android:layout_centerVertical="true"
android:layout_width="0dp"
android:layout_height="0dp">
</TextView>
<RelativeLayout
android:id="#+id/ankerveldmidboven"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/ankerboven">
<Button
android:text="#string/topbutton"
android:background="#drawable/silvertablesbuttonbgkort"
android:id="#+id/topbutton"
android:layout_alignParentRight="true"
android:layout_centerInParent="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center|center_vertical">
</Button>
</RelativeLayout>
</RelativeLayout>
<RelativeLayout
android:id="#+id/ankerveldonder"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/ankermidden">
<TextView
android:text=" "
android:id="#+id/ankeronder"
android:layout_centerVertical="true"
android:layout_width="0dp"
android:layout_height="0dp">
</TextView>
<RelativeLayout
android:id="#+id/ankerveldmidonder"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#id/ankeronder">
<Button
android:text="#string/midbutton"
android:background="#drawable/silvertablesbuttonbglang"
android:id="#+id/midbutton"
android:layout_alignParentRight="true"
android:layout_centerInParent="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center|center_vertical">
</Button>
</RelativeLayout>
</RelativeLayout>
<RelativeLayout
android:id="#+id/underbar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" >
<Button
android:text="#string/underbartekst"
android:background="#drawable/silvertablesunderbar"
android:id="#+id/underbarbutton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="20dp"
android:textSize="20dp"
android:gravity="left|center_vertical" >
</Button>
</RelativeLayout>
So yeah, that was easier than I thought.

I have found a solution! One that is completely relative to itself, and does not rely on pixels or density pixels at all.
I've placed a TextView of 0x0 in the middle of the screen, and put RelativeLayouts on top of and below it, filling the screen.
Then I placed two TextViews of 0x0 in the middle of those layouts, and within those layouts, two new RelativeLayouts. One below the highest TextView, one above the lowest. I placed my buttons in the center of those layouts.
It works like a charm, and does not rely on anything but the code itself.
This is my code now:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/mainbg">
<TextView
android:text=" "
android:id="#+id/ankermidden"
android:layout_centerVertical="true"
android:layout_width="0dp"
android:layout_height="0dp">
</TextView>
<RelativeLayout
android:id="#+id/ankerveldboven"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#id/ankermidden">
<TextView
android:text=" "
android:id="#+id/ankerboven"
android:layout_centerVertical="true"
android:layout_width="0dp"
android:layout_height="0dp">
</TextView>
<RelativeLayout
android:id="#+id/ankerveldmidboven"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/ankerboven">
<Button
android:text="#string/topbutton"
android:background="#drawable/silvertablesbuttonbgkort"
android:id="#+id/topbutton"
android:layout_alignParentRight="true"
android:layout_centerInParent="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center|center_vertical">
</Button>
</RelativeLayout>
</RelativeLayout>
<RelativeLayout
android:id="#+id/ankerveldonder"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/ankermidden">
<TextView
android:text=" "
android:id="#+id/ankeronder"
android:layout_centerVertical="true"
android:layout_width="0dp"
android:layout_height="0dp">
</TextView>
<RelativeLayout
android:id="#+id/ankerveldmidonder"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#id/ankeronder">
<Button
android:text="#string/midbutton"
android:background="#drawable/silvertablesbuttonbglang"
android:id="#+id/midbutton"
android:layout_alignParentRight="true"
android:layout_centerInParent="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center|center_vertical">
</Button>
</RelativeLayout>
</RelativeLayout>
<RelativeLayout
android:id="#+id/underbar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" >
<Button
android:text="#string/underbartekst"
android:background="#drawable/silvertablesunderbar"
android:id="#+id/underbarbutton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="20dp"
android:textSize="20dp"
android:gravity="left|center_vertical" >
</Button>
</RelativeLayout>
So yeah, that was easier than I thought.
Bill Gary suggested using a margin in dp which would keep the same proportions on different screen sizes, but after a lot of experimenting, things end up looking weird for me on different screens again.
I'll do some more experimenting before I'll get back to that, because this whole dip-margins thing is weirding me out... Things that should be displayed properly are not, and things that just shouldn't, do, on some screen resolutions.
I'll start doing my homework on that stuff, but for now, albeit it being a bit long, the code I posted above works flawlessly for me.

try this, you may have to adjust the dp android:layout_marginTop="150dp"
<Button
android:text="#string/topbutton"
android:background="#drawable/silvertablesbuttonbgkort"
android:id="#+id/topbutton"
android:layout_alignParentRight="true"
android:layout_marginTop="150dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center|center_vertical">
</Button>