Develop Reference

How can I create this layout in Android?

I've been trying to recreate this layout in Android Studio (API 19) without success.
I added at the top part of the image what I need without texts on it, the part below has some explanations.
Every time I tried (no matter LinearLayout or GridLayout), the text in the middle broke the design if it is long or if I do not set real DP size (like using wrap_content), if the text has a fixed size I must adapt it to every screen size on both, vertical and horizontal, which I don't want, because I must update a lot of files it every time I make changes on layouts, and if it has wrap_content and the text is long the switch goes off of the screen.
I made this "design" with Photoshop of what I need to recreate on Android Studio on a layout (xml only, not programmatically), if possible I'd like LinearLayout or GridLayout or both, I don't care how much sub-layouts are needed.
Additional: If someone knows how to get that switch style for older versions of Android, it'd be really good to get the same style on that too, but is not necessary.
Please help me, I really can't make it, thanks a lot.

With a Relative Layout this kind of design wont be a problem.
You will need to use the properties android:layout_alignParentRight and android:layout_alignParentLeft.
Your center textview will use android:layout_toRightOf and ndroid:layout_toLeftOf.
More informations : Relative layout documentation

Use following XML as your layout codes, this is exactly what you want on your designs
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/image"
android:layout_width="40dp"
android:layout_height="40dp"
android:src="#drawable/icon_paypal"
android:layout_margin="16dp"/>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/switchlayout"
android:layout_toRightOf="#+id/image"
android:layout_marginTop="16dp"
android:orientation="vertical">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Text 1"
android:textColor="#000"
/>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Text 2"
android:textColor="#ccc"
/>
</LinearLayout>
<LinearLayout
android:id="#+id/switchlayout"
android:layout_width="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginRight="16dp"
android:paddingLeft="16dp"
android:gravity="center"
android:layout_height="72dp">
<Switch
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>

Use Follow XML code. it will fit in any screen
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_weight="1"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".2"
android:gravity="center">
<ImageView
android:layout_width="40dp"
android:layout_height="wrap_content"
android:src="#drawable/app_icon" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".6">
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".2"
android:gravity="center">
<Switch
android:layout_width="40dp"
android:layout_height="wrap_content" />
</LinearLayout>

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.

Place a fixed height button at the bottom of the screen always

I wish to keep a button at the bottom of my Activity screen. It has to be fixed irrespective of the size of scrollview above it. The problem is that once the textviews of the scrollview take up some place, the height of my button keeps decreasing and it eventually gets pushed out of the activity screen. This is the layout I am using.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:orientation="vertical">
<TextView android:id="#+id/tvBanner" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:layout_alignParentLeft="true"
android:layout_alignParentTop="true" android:gravity="center"
android:text="Practice Exam" />
<ScrollView android:id="#+id/Scroll" android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout android:id="#+id/LinearLayout1"
android:layout_width="match_parent" android:layout_height="wrap_content"
android:orientation="vertical">
<TextView android:id="#+id/tvDesc" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:layout_margin="10dp"
android:gravity="center" android:paddingTop="40dp" android:text="#string/welcom"
android:textSize="20sp" />
<TextView android:id="#+id/tvURL" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_marginBottom="30dp"
android:paddingTop="10dp" android:layout_gravity="center"
android:text="hello" android:textColor="#android:color/white"
android:typeface="sans" />
</LinearLayout>
</ScrollView>
<RelativeLayout android:layout_width="fill_parent"
android:layout_height="fill_parent" android:gravity="bottom">
<Button android:id="#+id/btBottom" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:layout_weight="1"
android:text="Enter" />
</RelativeLayout>
</LinearLayout>
I have also tried using android:weight=1 and android:layout_height=0dp in the Scrollview. But this removes the entire Scrollview portion from my activity and I can't see anything.
I do know that there are many similar questions asked about this and believe me, I have tried many of these. However, none of the tricks have worked for me. I have spent almost half a day fixing this. Kindly help.

For a case like this always use RelativeLayouts. A LinearLayout is not intended for such a usage.
Try this:
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true">
<Button android:id="#+id/btBottom"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Enter"
android:layout_alignParentBottom="true"/>
<ScrollView
...
android:layout_above="#id/btnGetMoreResults"/>
</RelativeLayour>

You should try using RealativeLayout instead of Linear, and then you could use
android:layout_above="#+id/btBottom"
android:layout_alignParentBottom="true"
That should solve your problem.

looks like you need 'alignParentBottom' in your button like this
<Button android:id="#+id/btBottom"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="Enter" />

Do not wrap Button to RelativeLayout
Set layout_height of ScrollView to 0dp
Add layout_weight of ScrollView to 1

For this it would probably be a good idea if you used RelativeLayout for the outer wrapper layout. Then you could just set the layout with the button inside to LinearLayout and set layout_alignParentButtom="true" while you set your #+id/Scroll to layout_alignParentTop="true"
Also, you should probably set the layout with the button inside´s height to wrap_content instead of fill_parent

Why do you use a LinearLayout at top level at all ?
Choose a RelativeLayout with fill/fill and the following three childern (no further nesting !):
1) TextView with android:layout_alignParentTop="true" and android:layout_centerHorizontal="true"
2) Button with android:layout_alignParentBottom="true" and android:layout_centerHorizontal="true"
3) ScrollView with android:layout_below=#id/textview_id and android:layout_above="#id/button_id"
I didn't test it though, but give it a try.

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>

Android RelativeLayout

I'm very new to Android development and I'm trying to figure out how to use the RelativeLayout tag to position my Views. My goal is to have a large TextView on the left, with two ButtonViews to the right of it, stacked on top of each other. Here's the XML code I'm using:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/main_layout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/wood_tile">
<TextView
android:id="#+id/life_counter"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="00" />
<Button android:text="#string/button_up"
android:id="#+id/button_up"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/life_counter"/>
<Button android:text="#string/button_down"
android:id="#+id/button_down"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/button_up"/>
</RelativeLayout>
I feel that I must not be using the tag properly. Can someone explain how it works? Thanks in advance.

You have the left side TextView's width set to fill_parent, this will make it consume the entire screen. Anything placed to the right of it will be off screen. Use wrap_content or a specific width for the elements within the relative layout.
Your approach is also a bit off. If you want the two buttons aligned to the right of the screen, use this:
<RelativeLayout
android:id="#+id/main_layout"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:id="#+id/life_counter"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="00" />
<Button android:text="Button Up"
android:id="#+id/button_up"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"/>
<Button android:text="Button Down"
android:id="#+id/button_down"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#+id/button_up"/>
</RelativeLayout>