Develop Reference

Why does using layout_below mess up the size of the start button?

I have the following xml layout:
<?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="match_parent"
android:background="#color/light_blue"
tools:context=".StoppedActivity">
<TextView
android:id="#+id/totalTimeView"
android:layout_width="80dp"
android:layout_height="50dp"
android:layout_marginBottom="90dp"
android:layout_alignParentTop="true"
android:background="#android:color/white"
android:textColor="#color/started_black"
/>
<TextView
android:id="#+id/countDownView"
android:layout_below="#+id/totalTimeView"
android:layout_centerHorizontal="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/white_circle"
android:textColor="#color/started_black"
android:gravity="center"
android:textSize="65sp" />
<ImageButton
android:id="#+id/settings"
android:layout_width="60dp"
android:layout_height="50dp"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:src="#drawable/ic_settings_black_24dp"
android:scaleType="fitXY"
/>
<ImageButton
android:id="#+id/startButton"
android:background="#drawable/button_selector"
android:layout_width="360dp"
android:layout_height="70dp"
android:layout_alignParentBottom="true"
android:layout_centerInParent="true"
android:layout_marginBottom="60dp" />
<ToggleButton
android:id="#+id/toggleSwitch"
android:background="#drawable/toggle_selector"
android:layout_centerInParent="true"
android:layout_below="#+id/countDownView"
android:layout_marginTop="40dp"
android:layout_width="300dp"
android:layout_height="50dp" />
</RelativeLayout>
Currently it displays everything correctly on Nexus 5X, but the layout gets messed up when used in a device with a different screen size. To ensure that doesn't happen, I added the line
android:layout_below="#id/toggleSwitch"
to
<ImageButton
android:id="#+id/startButton"
android:background="#drawable/button_selector"
android:layout_width="360dp"
android:layout_height="70dp"
android:layout_alignParentBottom="true"
android:layout_below="#id/toggleSwitch"
android:layout_centerInParent="true"
android:layout_marginBottom="60dp" />
However, this messes up the sizing of the start button, why is this happening? How do I fix this? Thank you in advance.

It's because you tell your layout that the button is going to fill the space available in between the bottom of"#id/toggleSwitch (that's what below does) and the bottom of your parent layout (because you specified android:layout_alignParentBottom="true")
Instead, you can define a blank view filling the space between your toggle switch and your button, so it won't mess up you button height:
<ToggleButton
android:id="#+id/toggleSwitch"
android:background="#drawable/toggle_selector"
android:layout_centerInParent="true"
android:layout_below="#+id/countDownView"
android:layout_marginTop="40dp"
android:layout_width="300dp"
android:layout_height="50dp" />
<View
android:layout_width="1dp"
android:layout_height="1dp"
android:background="#android:color/transparent"
android:layout_below="#id/toggleSwitch"
android:layout_above="#+id/startButton"/>
<ImageButton
android:id="#id/startButton"
android:background="#drawable/button_selector"
android:layout_width="360dp"
android:layout_height="70dp"
android:layout_alignParentBottom="true"
android:layout_centerInParent="true"
android:layout_marginBottom="60dp" />
Depending on what you are trying to achieve, you may have to adjust the code. But if you want to fill a vertical blank space with the available vertical space (Which I understand you're trying to do to adapt you layout for different phones), that's one way to do it. Alternatively, you could use a LinearLayout for the bottom of your screen and use the layout_weight attribute, but the above solution is probably cleaner if you want to keep your current layout implementation.

Overlap views in horizontal LinearLayout

I need to design a layout with five ImageViews in horizontal orientation.
I can reach my idea with a basic LinearLayout, but I want a design pattern like the following image:
Note: All ImageViews are in oval design.
Any ideas?

you can overlap items in a LinearLayout using negative margins, but they won't stack in that order.
you could use a RelativeLayout instead. you'd lay out the items from outside to inside to achieve the desired stacking order.
here's an example with a fixed width:
<RelativeLayout android:layout_width="150dp" android:layout_height="wrap_content">
<ImageView
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_alignParentLeft="true" android:layout_centerVertical="true" />
<ImageView
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_alignParentRight="true" android:layout_centerVertical="true" />
<ImageView
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_alignParentLeft="true" android:layout_centerVertical="true"
android:layout_marginLeft="25dp" />
<ImageView
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_alignParentRight="true" android:layout_centerVertical="true"
android:layout_marginRight="25dp" />
<ImageView
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_centerHorizontal="true" android:layout_centerVertical="true" />
</RelativeLayout>
if you don't have a fixed-width container, you'll have to calculate the margins in code with this approach.
of course, if you don't have a fixed width, you'll need code of some sort anyway as there's nothing built into android that's really meant for this sort of thing.

You can use a RelativeLayout for this task. Here's an example:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/img1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="-18dp" />
<ImageView
android:id="#+id/img2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/img1"
android:layout_marginRight="-18dp" />
<ImageView
android:id="#+id/img5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/img4"
android:layout_marginRight="-18dp"/>
<ImageView
android:id="#+id/img4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/img3"
android:layout_marginRight="-18dp" />
<ImageView
android:id="#+id/img3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/img2"
android:layout_marginRight="-18dp" />
</RelativeLayout>
Note that here, the last ImageView is the one that will be on top of all others.

You are looking for developing a Carousel kind of widgets. You can refer any Carousel implementation in android. Many are available, you can refer one here
https://code.google.com/p/carousel-layout-android/

Adjusting the size of an ImageButton in Android

Is there any way to do this? I have tried padding the image and setting the width/height of the view, but neither seems to work. Here is an example:
<ImageButton
android:id="#+id/search"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/search_small"
android:paddingTop="4sp"
android:paddingBottom="4sp"
android:paddingLeft="6sp"
android:paddingRight="6sp"
android:layout_marginRight="10sp"
android:layout_marginTop="6sp"
android:layout_marginBottom="6sp"
android:layout_alignParentRight="true"
/>
I want the button to be wider than it is tall, but it is coming out the other way round.

Just had a play to try and understand your problem.
Seems ImageButton is a composite view which has a few pre-set values. Such as some sort of margin which you cannot override with the XML. If you cannot change your image to match what you want to happen then you are better to create your own composite view.
Here is my example of a composite view you can make yourself:
<FrameLayout android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button android:id="#+id/saveSearchButton"
android:layout_width="50dp"
android:layout_height="50dp" />
<ImageView android:layout_width="45dp"
android:layout_height="45dp"
android:scaleType="fitXY"
android:src="#drawable/ic_menu_save"
android:layout_gravity="center"/>
</FrameLayout>
<FrameLayout android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button android:id="#+id/clearSearchButton"
android:layout_width="50dp"
android:layout_height="50dp" />
<ImageView android:layout_width="45dp"
android:layout_height="45dp"
android:scaleType="fitXY"
android:src="#drawable/ic_menu_close_clear_cancel"
android:layout_gravity="center"/>
</FrameLayout>
And the original buttons:
<ImageButton android:id="#+id/imageButton1"
android:src="#drawable/ic_menu_save"
android:layout_height="45dp" android:layout_width="45dp"/>
<ImageButton android:id="#+id/imageButton2"
android:src="#drawable/ic_menu_close_clear_cancel"
android:layout_height="45dp"
android:layout_width="45dp"/>
Here we can see custom image/button composite followed by the build in ImageButton as part of the SDK:

Set android:background instead of android:src to set the image on the button. This will adjust the image to your button's size. Then adjust the padding after.

You shouldn't use sp as a size dimension - dp should be used as it will help your view scale directly with different screen density and resolutions. See Here for dimensions.
padding will push other elements away from your view boundary. margin will push the contents of your view inward from the your boundary (ie would squash the available space for your picture) . The boundary is specified by height and width. Without more information I would guess you are being confused by your margins - delete them and experiment.
Also useful to you: android:scaleType="fitXY" makes the image stretch to match both the X and Y dimensions that are available to it. It helps you to see the canvas available to your image. Once you feel the area is large enough for a correctly scaled image change the scale type to centerInside. See Here for all scale types.

I use minWidth and minHeight attributes, combined with a fitXY scale type and wrapping its content to modulate the shape of my button.
<ImageButton
android:id="#+id/fooButton"
android:background="#drawable/play_button"
android:backgroundTint="#00000000"
android:minWidth="200"
android:minHeight="100"
android:scaleType="fitXY"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="playStuff"
/>

Can you explain your question more widely so that we can more understood.
As per my understanding You want to set your ImageButton Height/Width. But it doesn't work is it? I want to ask you that, if you write any specific height/width then also it doesn't work?
I copied your code in my files and I changed the height/width manually then it will work.
Please explain your question.
Thanks.

I finished the layout following Graeme's answer. Four "imageButton" fix the bottom, same width, changeable image size. thanks!
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:background="#color/#000"
android:weightSum="100" >
<FrameLayout
android:id="#+id/flBottom1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="25"
>
<Button
android:id="#+id/ibBottom1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/detail_tab_bg_selector"/>
<ImageView
android:layout_width="32dp"
android:layout_height="32dp"
android:scaleType="fitXY"
android:src="#drawable/icon_home_48_48"
android:layout_gravity="center_horizontal"
android:layout_marginTop="5dp"
/>
<TextView
android:id="#+id/tvBottom1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_gravity="center_horizontal"
android:layout_marginTop="35dp"
android:text="#string/bailty_text_home"
style="#style/bailtyTextBottom"
/>
</FrameLayout>
<FrameLayout
android:id="#+id/flBottom2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="25"
>
<Button
android:id="#+id/ibBottom2"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/detail_tab_bg_selector"/>
<ImageView
android:layout_width="32dp"
android:layout_height="32dp"
android:scaleType="fitXY"
android:src="#drawable/icon_compose_48_48"
android:layout_gravity="center_horizontal"
/>
<TextView
android:id="#+id/tvBottom2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_gravity="center_horizontal"
android:layout_marginTop="35dp"
android:text="#string/bailty_text_comment"
style="#style/bailtyTextBottom"
/>
</FrameLayout>
<FrameLayout
android:id="#+id/flBottom3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="25"
>
<Button
android:id="#+id/ibBottom3"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/detail_tab_bg_selector"/>
<ImageView
android:layout_width="32dp"
android:layout_height="32dp"
android:scaleType="fitXY"
android:src="#drawable/icon_search_48_48"
android:layout_gravity="center_horizontal"
/>
<TextView
android:id="#+id/tvBottom3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_gravity="center_horizontal"
android:layout_marginTop="35dp"
android:text="#string/bailty_text_search"
style="#style/bailtyTextBottom"
/>
</FrameLayout>
<FrameLayout
android:id="#+id/flBottom4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="25"
>
<Button
android:id="#+id/ibBottom4"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/detail_tab_bg_selector"/>
<ImageView
android:layout_width="32dp"
android:layout_height="32dp"
android:scaleType="fitXY"
android:src="#drawable/icon_barcode_48_48"
android:layout_gravity="center_horizontal"
/>
<TextView
android:id="#+id/tvBottom4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_gravity="center_horizontal"
android:layout_marginTop="35dp"
android:text="#string/bailty_text_scan_again"
style="#style/bailtyTextBottom"
/>
</FrameLayout>
</LinearLayout>

Android Density Problem

Now please consider my below code of android layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<RelativeLayout
android:id="#+id/RelativeLayout01"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/default1"
android:id="#+id/default1"
android:layout_gravity="center"
android:scaleType="fitXY">
</ImageView>
<ImageView
android:layout_marginTop="19dp"
android:layout_width="180dp"
android:layout_height="45dp"
android:src="#drawable/fc_postyour_best_score_bg"
android:id="#+id/postscore"
android:layout_alignParentRight="true"
android:scaleType="fitXY">
</ImageView>
<ImageButton
android:layout_marginTop="22dp"
android:layout_width="35dp"
android:layout_height="35dp"
android:background="#drawable/fctwitterup"
android:layout_marginLeft="7dp"
android:id="#+id/twitter"
android:layout_alignRight="#id/postscore"
android:scaleType="fitXY">
</ImageButton>
<ImageButton
android:layout_marginTop="22dp"
android:layout_width="35dp"
android:layout_height="35dp"
android:background="#drawable/fcfacebookdown"
android:id="#+id/fb"
android:layout_toLeftOf="#id/twitter">
</ImageButton>
<ImageButton
android:layout_width="160dp"
android:layout_height="40dp"
android:background="#drawable/fsremove_ads_down"
android:id="#+id/fsremove_ads_down"
android:layout_below="#id/postscore"
android:layout_alignParentRight="true"
android:layout_marginBottom="3dp">
</ImageButton>
<ToggleButton
android:id="#+id/fsvibrate_on"
android:layout_width="135dip"
android:layout_height="35dip"
android:textOff=""
android:textOn=""
android:layout_below="#+id/fsremove_ads_down"
android:layout_alignParentRight="true"
android:background="#drawable/fsvibrate_on">
</ToggleButton>
<ImageButton
android:layout_width="210dp"
android:layout_height="60dp"
android:background="#drawable/fcplaydown"
android:id="#+id/fcplaydown"
android:layout_centerInParent="true">
</ImageButton>
<ToggleButton
android:id="#+id/fcsoundondown"
android:layout_width="35dp"
android:layout_height="35dp"
android:textOff=""
android:textOn=""
android:layout_below="#+id/fcplaydown"
android:background="#drawable/fcsoundondown">
</ToggleButton>
</RelativeLayout>
</LinearLayout>
I have problems:
. I have use dp for setting height,margin,width etc. but it varies as devices get change what should I take care for unique layout setting

You should look over the net and read more about proportional UI in android. Different devices - different resolutions (not mandatory, but in most cases), so how do you want to have same UI on different devices, when you're using static measures. And your RelativeLayout, it is such a mess! Here is an other post, which explains the basic about proportions. Proportional width of elements in LinearLayout
It applies for RelativeLayout also!

dont use + on id property when setting layout_below
android:layout_below="#+id/fcplaydown" --> android:layout_below="#id/fcplaydown"
Using dp or dip is best option. Images sometimes represent problems if no height and width in dp is defined

Use Linear Layout for those images you want to show one below the other. Hope this works.

android can android:gravity do this?

Searched all day and came up with a poor solution i think.
i want three ImageButton placed on the right sida of the screen.
Not centered but just above center position..
With the code below i get the result i want but,
If the user have a bigger screen they will not have this position right?
I have tried the android:gravityall day and all i can do with it is
to center the three buttons very nicely.
What should i use to make the three buttons always stay at the positions that
they are on the image belove.
i have the button image in 3 different sizes in hdpi,mdpi,xhdpi folder.
<RelativeLayout
android:id="#+id/rightRelativeLayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
>
<ImageButton
android:id="#+id/btn_A"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="100dp"
android:text="A"
android:src="#drawable/drawer_1"
android:background="#android:color/transparent"
android:layout_alignParentRight="true"
/>
<ImageButton
android:id="#+id/btn_B"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="B"
android:src="#drawable/drawer_1"
android:background="#android:color/transparent"
android:layout_alignParentRight="true"
android:layout_below="#+id/btn_A"
/>
<ImageButton
android:id="#+id/btn_C"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="C"
android:src="#drawable/drawer_1"
android:background="#android:color/transparent"
android:layout_alignParentRight="true"
android:layout_below="#+id/btn_B"
/>
</RelativeLayout>
Picture of the three buttons placed on the right side, and my daughter of course.

One option would be to put all three buttons within a LinearLayout (for simplicity's sake) and then set the layout of this container programmatically.
You can see the size of the screen using getResources().getDisplayMetrics().heightPizels and then set the top margin accordingly.

You could add a LinearLayout inside the RelativeLayout, and then use the following properties on the LinearLayout:
android:layout_alignParentRight="true"
android:layout_gravity="center_vertical"
EDIT: Ok, I've done some testing and found a way of doing what you want without the use of styling it programatically, here's the xml:
<RelativeLayout
android:id="#+id/rightRelativeLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginBottom="80dip"
>
<LinearLayout
android:orientation="vertical"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true">
<ImageButton
android:id="#+id/btn_A"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="A"
android:src="#drawable/icon"
android:background="#android:color/transparent"
/>
<ImageButton
android:id="#+id/btn_B"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="B"
android:src="#drawable/icon"
android:background="#android:color/transparent"
/>
<ImageButton
android:id="#+id/btn_C"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="C"
android:src="#drawable/icon"
android:background="#android:color/transparent"
/>
</LinearLayout>
</RelativeLayout>