Develop Reference

Overlapping a button on an image

I want to overlap 10 buttons on an image. I am using RelativeLayout to do the same but as a result, the position of the buttons changes in different devices. So, can someone tell me a workaround for that? This is the xml file for this activity:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/exercise1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="5dp"
tools:context="nmss.example.com.coach.Exercise1">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/humanbody"
android:layout_marginStart="20dp"/>
<Button
android:id="#+id/btn_neck"
android:layout_width="wrap_content"
android:layout_height="35dp"
android:layout_marginStart="145dp"
android:layout_marginTop="62dp"
android:text="Neck"
android:textSize="12sp" />
<Button
android:id="#+id/btn_shoulder"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="35dp"
android:layout_marginTop="75dp"
android:text="Shoulder"
android:textSize="12sp"/>
<Button
android:id="#+id/btn_biceps"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="25dp"
android:layout_marginTop="135dp"
android:text="Biceps"
android:textSize="12sp"/>
<Button
android:id="#+id/btn_forearm"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="3dp"
android:layout_marginTop="195dp"
android:text="Forearm"
android:textSize="12sp"/>
<Button
android:id="#+id/btn_quads"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="68dp"
android:layout_marginTop="315dp"
android:text="Quads"
android:textSize="12sp"/>
<Button
android:id="#+id/btn_chest"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="145dp"
android:layout_marginTop="100dp"
android:text="Chest"
android:textSize="12sp"/>
<Button
android:id="#+id/btn_abs"
android:layout_width="65dp"
android:layout_height="wrap_content"
android:layout_marginStart="150dp"
android:layout_marginTop="160dp"
android:text="Abs"
android:textSize="12sp"/>
<Button
android:id="#+id/btn_triceps"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="246dp"
android:layout_marginTop="125dp"
android:text="Triceps"
android:textSize="12sp" />
<Button
android:id="#+id/btn_mid_back"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="215dp"
android:layout_marginTop="175dp"
android:text="Middle back"
android:textSize="12sp"/>
<Button
android:id="#+id/btn_calves"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="210dp"
android:layout_marginTop="400dp"
android:text="Calves"
android:textSize="12sp"/>
</RelativeLayout>
This is the view in Android Studio

Just use LinearLayout instead of RelativeLayout.
Try to arrange your image buttons on top,bottom,right and left using the percentages.
You also need to create different Layouts Folders in your res folder for all devices and use the dimensions accordingly.

Never hard code the sizes like this, 25dp,
Add this link to your dependencies, to get the dimensions for every screen.
compile 'com.intuit.sdp:sdp-android:1.0.4'
Its uses is like this,
android:layout_marginTop="#dimen/_110sdp"
After writing, #dimen/...Ctrl+Space, you can see the value of dimensions from 1dp to 600dp. Try it, its very useful.

How to allow view to expand without pushing othe views off screen

I have a horizontal layout with two views in it: an EditText that will show a chosen path, and a "Browse" Button to the right of the EditText.
I want the EditText to expand as required, but not to the extent that it pushes the Button off the screen.
Here is my current xml:
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/path_view">
<EditText android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:id="#+id/folder_edittext"
android:layout_marginTop="20dp"
android:layout_marginLeft="20dp"
android:hint="Folder"/>
<Button android:layout_height="wrap_content"
android:layout_width="60dp"
android:id="#+id/browse_button"
android:text="..."
android:layout_marginTop="20dp"
android:layout_marginLeft="20dp"/>
</LinearLayout>
I have tried all types of layout, I have tried using toLeftOf, toRightOf and everything I can think of, I think I now need help if I am to get this working.

You can achieve this using layout weights:
<LinearLayout
android:layout_width="match_content"
android:layout_height="wrap_content"
android:id="#+id/path_view">
<EditText android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_weight="1"
android:id="#+id/folder_edittext"
android:layout_marginTop="20dp"
android:layout_marginLeft="20dp"
android:hint="Folder"/>
<Button android:layout_height="wrap_content"
android:layout_width="60dp"
android:id="#+id/browse_button"
android:text="..."
android:layout_marginTop="20dp"
android:layout_marginLeft="20dp"/>
</LinearLayout>
This xml can be interpreted as saying: "let the EditText take up all the horizontal room that is not filled by other views" (in this case, the only other view is the Button).

Try with RelativeLayout:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/path_view">
<EditText android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:id="#+id/folder_edittext"
android:layout_marginTop="20dp"
android:layout_marginLeft="20dp"
android:hint="Folder"
android:layout_toLeftOf="#+id/browse_button"
android:layout_alignParentLeft="true" />
<Button android:layout_height="wrap_content"
android:layout_width="60dp"
android:id="#+id/browse_button"
android:text="..."
android:layout_marginTop="20dp"
android:layout_marginLeft="20dp"
android:layout_alignParentRight="true" />
</RelativeLayout>

Buttons shrinking when adding them to onClick?

I added 3 buttons to a Linear Layout, and assign to them an onClick listener in my activity, Two of them shrink and wrap only the text included when running the code,
and the third one shrinks after clicking on it :
The buttons i'm using:
The code i'm using in XML :
<LinearLayout
android:id="#+id/bottomButtons"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="horizontal" >
<Button
android:id="#+id/LivingRoom"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/ac_button_active"
android:text="Living Room"
android:textSize="20dp"
android:textColor="#00CCCC"
android:layout_marginTop="3dp"
android:layout_marginLeft="3dp"
android:layout_marginBottom="3dp"
android:layout_marginRight="3dp"
android:tag="pressed" />
<Button
android:id="#+id/NoAC"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/ac_button_inactive"
android:text="No AC"
android:textSize="20dp"
android:textColor="#00CCCC"
android:layout_marginTop="3dp"
android:layout_marginLeft="3dp"
android:layout_marginBottom="3dp"
android:layout_marginRight="3dp"
android:tag="transparent"/>
<Button
android:id="#+id/office"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/ac_button_inactive"
android:text="Office"
android:textSize="20dp"
android:textColor="#00CCCC"
android:layout_marginTop="3dp"
android:layout_marginLeft="3dp"
android:layout_marginBottom="3dp"
android:layout_marginRight="3dp"
android:tag="transparent"/>

when ever you use 9-patch images as background, they will be shrinked/adjusted to fit exactly to the Button size. Button size depends on the Text size and it's width.
so use paddings for Button to increase it's size along with margins if you need.
<Button
.......
android:paddingBottom="5dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingTop="5dp"
.......... />

limit a view to the left/right of center in android

Is there a way to specify that a view should lie strictly to the left of the center (or strictly to the right of the center)? I have two textviews, one for LOGIN and one for REGISTER. I have them as children of RelativeLayout. No matter what I do I can't get them to behave. The one configuration that works in the Graphical Layout of eclipse, only shows the registration button on a real device. Here it is
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/login_bckg"
android:padding="10dip"
tools:context=".LoginActivity" >
...
<View
android:id="#+id/center_btns"
android:layout_width="1dp"
android:layout_height="20dp"
android:layout_below="#id/text_fields"
android:layout_centerHorizontal="true" />
<TextView
android:id="#+id/login_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#id/text_fields"
android:layout_marginBottom="10dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_toLeftOf="#id/center_btns"
android:background="#drawable/btn_bkg"
android:clickable="true"
android:gravity="center"
android:onClick="login"
android:padding="10dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:text="Login"
android:textColor="#FFFFFF"
android:textSize="16sp"
android:textStyle="bold" />
<TextView
android:id="#+id/register_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#id/text_fields"
android:layout_marginBottom="10dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_toRightOf="#id/center_btns"
android:background="#drawable/btn_bkg"
android:clickable="true"
android:gravity="center"
android:onClick="register"
android:padding="10dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:text="Register"
android:textColor="#FFFFFF"
android:textSize="16sp"
android:textStyle="bold" />
...
</RelativeLayout>
If I set them as children of a horizontal linearLayout, how do I specify their relationship to get it to work? I already tried that and no avail.

I wish I could post this as a comment but I don't quite have the rep... Anyway, to clarify, do you want the items to be right next to each other on the same line? If so the LinearLayout should work just fine...
<LinearLayout
...android:orientation="horizontal"
android:gravity="center">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
/>
Should work just fine. If not you may try playing with weights depending on which one you want to take up more space. For weights to work you will need to see the width of both to fill_parent.

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>