Develop Reference

How to achieve this kind of layout in Android

I'm new to Android development and I'm trying to achieve a layout for my app that is capable of handling different screen resolutions/ratios.
I've been reading a lot of the documentation and questions on this site to try to understand the basics and concepts.
First I went through:
developer.android.com/guide/practices/screens_support.html
And questions like:
stackoverflow.com/questions/6403619/how-to-support-all-the-different-resolutions-of-android-products
I've got a pretty basic idea on how to handle things out. But still, its pretty difficult for a starter to get going, and I found myself stucked trying to achieve the solution I came up with.
I designed my app to a target resolution of 480x800, and set it up to always show in portrait mode.
This is how it looks like and how I understand it should work (I used Waldo for the sake of example haha):
(sorry for the link, I need 10 rep to post images)
http://i.imgur.com/KXTAXir.jpg
My root Layout is a LinearLayout, wich contains 3 other Layouts being A and C set up to a weight of 0.8 while B is at 8.4. This is all fine, but the contents of B are set up to DP units at the moment just to be able to test.
B consists of a frame Layout who has 3 other Layouts inside, where 2 of them are working fine, and shown only when needed. The problem is that I need B to be able to adapt based on the contents of it first child: a LinearLayout wich contains 2 ImageView and 1 ProgressBar. I need that those ImageView always keep their ratio.
Here is an example of how it should work:
http://i.imgur.com/cH7fUze.jpg
Imagine those 4 are real screens, wich vary in ratio and size. So my app should only adapt B (from my first image) to keep the images original ratio.
Here is the layout code:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/darkgray"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.8"
android:background="#666666" >
<TextView
android:id="#+id/level_text_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:text="LEVEL"
android:textAppearance="?android:attr/textAppearanceSmall" />
<TextView
android:id="#+id/level_text_score"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="SCORE"
android:textAppearance="?android:attr/textAppearanceMedium" />
<TextView
android:id="#+id/level_text_clock"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:text="01:59"
android:textAppearance="?android:attr/textAppearanceSmall" />
</RelativeLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="8.4" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="match_parent"
android:layout_height="200dp"
android:adjustViewBounds="true" />
<ProgressBar
android:id="#+id/progressBar1"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:max="1000"
android:progress="0" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="match_parent"
android:layout_height="200dp"
android:adjustViewBounds="true" />
</LinearLayout>
<RelativeLayout
android:id="#+id/pauseMask"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000000"
android:visibility="gone" >
</RelativeLayout>
<RelativeLayout
android:id="#+id/gameoverMask"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFFFFF"
android:visibility="gone" >
</RelativeLayout>
</FrameLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.8"
android:background="#666666" >
<TextView
android:id="#+id/level_text_status"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:text="0/0"
android:textAppearance="?android:attr/textAppearanceMedium" />
<Button
android:id="#+id/button1"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:text="Button"
android:onClick="useHint" />
<Button
android:id="#+id/button2"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/button1"
android:layout_centerVertical="true"
android:text="Button"
android:onClick="toggleSound" />
<Button
android:id="#+id/button3"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/button2"
android:layout_centerVertical="true"
android:text="Button"
android:onClick="togglePause" />
</RelativeLayout>
The last thing that stays unclear to me is how to handle the text and button sizes. Should I set them in DPs? How do I get them to scale accordingly like it can be seen on the bottom of my second picture.
Thank you for your help, I also want this to serve as an example to others that are having trouble to understand how to handle this kind of scenarios.

I'm not sure, if I got your question right.
However, you can specify different layouts for different screen sizes and orientations, as described here: http://developer.android.com/guide/practices/screens_support.html
Just give the respective suffix in the name of your layout XML file.

I ended up creating a custom View for my images. The view calculates the space thats left on its parent, scales the images manually and then resizes itself to the same size of the resulting image.
To resize the progress bar to have the same width as the images, I used a custom listener that gets triggered when my custom views get resized. Then I resize the progressbar to match their width.
With this I achieved what I wanted, a layout that will work perfectly in all screen sizes.

Alternative to LinearLayouts' layout_weight attribute?

I need a View to hold a number of TextViews, and the exact number I will not know unfortunately. I need the TextViews to sort of stack either under each other or right next to each other (imagine Tetris, but with just rectangles or squares). The way I have tried thinking about it is using LinearLayout to hold them either horizontally or vertically. I then use their weights to stretch them appropriately if they are next to each other. Otherwise, I use a vertical orientation. Problem is the performance with nested LinearLayouts with more complicated stacks. I thought about using RelativeLayout, but that wouldn't work because I need the TextViews to not overlap. So like if they are next to each other, they need to each take enough space evenly. With layout_weight it works great. I was hoping someone had any idea on how to make this work right/alternative.
Heres an example that is giving me a warning (only a simple example of what I am doing programmatically):
<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="horizontal" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_weight="1">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Hello World 1"
android:background="#000000"
android:layout_weight="1"/>
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Hello World 3"
android:background="#000000"
android:layout_weight="1"/>
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Hello World 4"
android:background="#000000"
android:layout_weight="1"/>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_weight="1">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Hello World 2"
android:background="#000000" />
</LinearLayout>
I've tried it with RelativeLayout by the way, but one of the TextView's needs to be a set size, but I need them to take space evenly. I won't know specific sizes. Measuring the screen width and dividing it that way is also both clunky and not precise. I appreciate anybodies input.
Edit: So I've been thinking about it some more and thought of a solution using RelativeLayout. There is a nice example in the Android docs, but the only problem is one of the Views needs to be a set size so the other one could stretch. But if there is a way to allow all of them not to have a set size, that could work too, so then they can stretch. Anyone tried doing that at some point?

It's a bit unclear what your final use case looks like, so I don't know if this will completely solve your problem, but you might take a look at TableLayout (docs link). It's based on LinearLayout so items can still be defined to evenly occupy a given space, but it allows you to define your positions and spans in terms of rows and columns.
So, for instance, your example code would look like:
<TableLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:stretchColumns="*" >
<!-- Wrap all items in a given row in a TableRow -->
<TableRow>
<TextView
android:text="Hello World 1"
android:background="#000000"/>
<TextView
android:text="Hello World 3"
android:background="#000000"/>
<TextView
android:text="Hello World 4"
android:background="#000000"/>
</TableRow>
<!-- If a child occupies an entire row, it can be by itself -->
<TextView
android:text="Hello World 2"
android:background="#000000"/>
</TableLayout>
You can also use the android:layout_column and android:layout_span attributes to define exactly which column an item should be in, and how many columns it should occupy. Also note that TableLayout and TableRow have basically ignore any layout params applied and use very specific (documented) parameters, so adding them to your code will only confuse what is actually going on. Of course, this can all be built programmatically as well as in XML.
If this does not provide the flexibility you need, I would then recommend creating your own custom layout that either extends or is based on LinearLayout. The mechanism is uses to measure children with weight is not that complex, and then you can override how each child is placed after measurement. Here is a source link to LinearLayout if you want to see how the platform does these things.

Update: As we know the percent support library is deprecated from API level 26. ConstraintLayout is the new way to achieve the same flat xml structure.
Updated Github Project
Updated Samples:
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/fifty_thirty"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#ffff8800"
android:gravity="center"
android:text="#string/fifty_fifty_text"
android:textColor="#android:color/white"
app:layout_constraintHeight_default="percent"
app:layout_constraintHeight_percent="0.5"
android:textSize="25sp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_default="percent"
app:layout_constraintWidth_percent="0.5" />
<TextView
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#ffff5566"
android:gravity="center"
android:text="#string/fifty_fifty_text"
android:textColor="#android:color/white"
android:textSize="25sp"
app:layout_constraintHeight_default="percent"
app:layout_constraintHeight_percent="0.5"
app:layout_constraintLeft_toRightOf="#id/fifty_thirty"
app:layout_constraintTop_toBottomOf="#id/fifty_thirty"
app:layout_constraintWidth_default="percent"
app:layout_constraintWidth_percent="0.5" />
</android.support.constraint.ConstraintLayout>
Deprecated
update: We can use android support library for the same.
compile 'com.android.support:percent:23.0.0'
Consider this demo for dividing the screen into 50-50 percent.
<android.support.percent.PercentRelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/fifty_huntv"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#ff7acfff"
android:text="20% - 50%"
android:textColor="#android:color/white"
app:layout_heightPercent="20%"
app:layout_widthPercent="50%" />
<TextView
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_toRightOf="#id/fifty_huntv"
android:background="#ffff5566"
android:text="80%-50%"
app:layout_heightPercent="80%"
app:layout_widthPercent="50%"
/>
</android.support.percent.PercentRelativeLayout>
Output:
Demo HERE!!!
GitHub Project HERE!!!

Handle ImageButtons with different image sizes

My layout contains 3 ImageButtons, arranged vertical in a LinearLayout.
Now I want that each of them has the same height and together fill the device's screen height.
Works fine with the attribute android:layout_weight="1". But if the image of one ImageButton is too big, it won't work (this button is higher than the others), despite setting android:scaleType="center_inside".
Any advices/tricks?
If you need any code, let me know. But there is nothin special.

If you have given weights correctly than this should work. The size of the image doesn't matter than. Just one thing to keep in mind while using weights is that attribute for which you are giving the weight(height/width) should be assigned value "0dp" in the xml, only then the weights will work correctly. Here is the example 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:orientation="vertical"
android:gravity="center"
android:weightSum="3">
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:src="#drawable/drawable1"
android:layout_weight="1"
android:scaleType="centerInside"
/>
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:src="#drawable/drawable2"
android:scaleType="fitXY" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:src="#drawable/drawable3"
android:scaleType="fitXY" />
</LinearLayout>
Just use this xml and replace the drawables according to your needs. Let me know if any issues.

automatically resize ImageButtons in LinearLayout

Summary: I want a horizontal row of ImageButtons to scale down evenly to fit in the screen size.
I have a row of ImageButtons at the top of the screen. A left-aligned logo ImageButton and then right-aligned ImageButtons for various actions.
Yes, that does sound a lot like a Honeycomb/ICS Action Bar, but the code is targeted for Froyo, so I need to implement the design in 2.2-compatible layouts.
I programmatically detect when I'm on a 7" screen or larger and switch to larger images for the ImageButtons (as the drawable-xlarge directory only works for 10" and up, and drawable-large works for 4" and up).
This works great on a phone or on a 10" tablet. However, on a 7" tablet, the images are too large for the space in portrait mode (the app is locked to portrait mode).
I have tried many different approaches to making the images scale down, as I'd rather not use yet another set of images just for 7" tablets. But the images are not spaced properly, or scale at different levels, or only some of the images appear on the screen. I've used RelativeLayout, LinearLayout, android:weightSum, setting the images as background images, as src images, etc.
EDIT: Another quirk I noticed in my experimentation was that if I set the same layout_weight, the layout worked, forcing each item to have the same width. If I want some items to have different widths--which is necessary in this case, as the first button needs to be substantially wider--then the layout breaks when I set a layout_weight that doesn't match the others. Only one or two of the items appear on screen, the rest presumable being pushed off.
Here's the layout I'm using. This is my best so far--it works great on 10" tablets and phones, and is almost tolerable on 7" tablets. But the logo--which should be the same height as the buttons and about 2.5 times wider--is noticeably taller than the other buttons. Any suggestions on improving the layout?
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/actionBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0"
android:padding="5dip"
android:gravity="center_vertical"
android:orientation="horizontal"
android:background="#drawable/action_bar_bg"
>
<ImageButton
android:id="#+id/logoButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#null"
android:src="#drawable/save_logo_03"
android:padding="2dip"
android:adjustViewBounds="true"
android:scaleType="centerInside"
/>
<View
android:id="#+id/spacer"
android:layout_width="50dip"
android:layout_height="1dip"
android:layout_weight="1"
android:visibility="invisible"
/>
<ImageButton
android:id="#+id/listButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/list_button"
android:background="#null"
android:adjustViewBounds="true"
android:padding="2dip"
android:scaleType="centerInside"
/>
<ImageButton
android:id="#+id/mapButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#null"
android:src="#drawable/map_button2"
android:adjustViewBounds="true"
android:padding="2dip"
android:scaleType="centerInside"
/>
<ImageButton
android:id="#+id/ltoButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#null"
android:src="#drawable/lto_button"
android:adjustViewBounds="true"
android:padding="2dip"
android:scaleType="centerInside"
/>
<ImageButton
android:id="#+id/searchButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#null"
android:src="#drawable/search_button"
android:adjustViewBounds="true"
android:padding="2dip"
android:scaleType="centerInside"
/>
</LinearLayout>

Unfortunately, in the end I did have to programmatically change the button sizes depending on the size of the screen.
My final layout looked like this (sanitized):
<?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:layout_weight="0"
android:padding="5dip"
android:gravity="center_vertical"
android:orientation="horizontal"
android:background="#drawable/action_bar_bg"
>
<ImageButton
android:id="#+id/logoButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0"
android:background="#null"
android:padding="2dip"
android:adjustViewBounds="true"
android:src="#drawable/logo"
android:scaleType="centerInside"
/>
<View
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="1"/>
<ImageButton
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0"
android:background="#null"
android:padding="2dip"
android:src="#drawable/button1"
android:scaleType="centerInside"
android:adjustViewBounds="true"
/>
<ImageButton
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0"
android:background="#null"
android:padding="2dip"
android:src="#drawable/button2"
android:scaleType="centerInside"
android:adjustViewBounds="true"
/>
<ImageButton
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0"
android:background="#null"
android:padding="2dip"
android:src="#drawable/button3"
android:scaleType="centerInside"
android:adjustViewBounds="true"
/>
<ImageButton
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0"
android:background="#null"
android:padding="2dip"
android:src="#drawable/button4"
android:adjustViewBounds="true"
android:scaleType="centerInside"
/>
</LinearLayout>
Notice the empty View that fills up available space, pushing the other buttons over to the right side of the screen.
In the code, I check the screen size. If it seems to be >= 7", then I switch to larger images.
If it seems to be >=7" but < 9", then I programmatically change the size of the images--and that I had to experiment with to come up with just the right number for it to work. If I had more images or they changed, I would have to repeat it. I'm not proud of such an inflexible solution, but I couldn't find anything else that worked.

This is what I've got:
In your specific case, we can say that your app layout and buttons size are under dependecy of:
The mobile device screensize/resolution;
The number of buttons in the
row;
I recommend 2 approaches to you:
Implementing your layout with RelativeLayout and weight tags. Flexible layouts can be made very easy with these ones;
Programatically define your button sizes using DisplayMetrics class, something like the snippet in the end of this post, and use an extra .xml file (say integer.xml) where you can define a constant value for your number of buttons;
In this snippet, dm is a structure that holds your device resolutions.
DisplayMetrics dm = new DisplayMetrics();
context.getWindowManager().getDefaultDisplay().getMetrics(dm);
Hope it helped you! :)

layout with buttons in a circle?

Its a challenge for all..
How we can put buttons in relative or linear layout or any other layout in a circle same as in this image. We can do it using xml or using code. Please help.
Thanks in advance

This method is the layout equivalent of plotting arbitrary X and Y coordinates.
Features:
The child objects are automatically centered in the RelativeLayout whether you use it as the top-level layout or embed it in another.
For N images your layout contains only N+1 views.
This example layout shows how to place an ImageView in each quadrant of an XY grid with origin at the center:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView
android:id="#+id/center"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_centerInParent="true"
android:background="#FFFF0000"
/>
<ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:background="#FF00FF00"
android:layout_above="#id/center"
android:layout_toLeftOf="#id/center"
android:layout_marginRight="100dp"
android:layout_marginBottom="25dp"
/>
<ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:background="#FF00FF00"
android:layout_below="#id/center"
android:layout_toLeftOf="#id/center"
android:layout_marginRight="100dp"
android:layout_marginTop="25dp"
/>
<ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:background="#FF00FF00"
android:layout_above="#id/center"
android:layout_toRightOf="#id/center"
android:layout_marginLeft="100dp"
android:layout_marginBottom="25dp"
/>
<ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:background="#FF00FF00"
android:layout_below="#id/center"
android:layout_toRightOf="#id/center"
android:layout_marginLeft="100dp"
android:layout_marginTop="25dp"
/>
</RelativeLayout>

I don't think this could be done with a layout different then AbsoluteLayout. How exactly it should be done, you have to try yourself, because it is kinda tricky, but possible!
This is what I had in mind and by the way not sure on 100% but with some efforts you could set it up to be proportional - to pass on different resolutions.

In case you copy&paste the code sample from the chosen answer, you are using Android Studio and it doesn't work, here is the solution: Replace #id/center with #+id/center
Hope it helps somebody. As my reputation is less than 50 I cannot add this as a comment.