android layout boxes overflow - android

I have this code
<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/shape"
android:gravity="top" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center" >
<ImageButton
android:id="#+id/imageButton1"
android:layout_width="100dp"
android:layout_height="100dp"
android:background="#null"
android:onClick="btnCat1"
android:src="#drawable/ic_launcher" >
</ImageButton>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/imageButton1"
android:layout_centerInParent="true"
android:clickable="false"
android:text="#string/hello_world" />
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center" >
<ImageButton
android:id="#+id/imageButton1"
android:layout_width="100dp"
android:layout_height="100dp"
android:background="#null"
android:onClick="btnCat1"
android:src="#drawable/ic_launcher" >
</ImageButton>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/imageButton1"
android:layout_centerInParent="true"
android:clickable="false"
android:text="#string/hello_world" />
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center" >
<ImageButton
android:id="#+id/imageButton1"
android:layout_width="100dp"
android:layout_height="100dp"
android:background="#null"
android:onClick="btnCat1"
android:src="#drawable/ic_launcher" >
</ImageButton>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/imageButton1"
android:layout_centerInParent="true"
android:clickable="false"
android:text="#string/hello_world" />
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center" >
<ImageButton
android:id="#+id/imageButton1"
android:layout_width="100dp"
android:layout_height="100dp"
android:background="#null"
android:onClick="btnCat1"
android:src="#drawable/ic_launcher" >
</ImageButton>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/imageButton1"
android:layout_centerInParent="true"
android:clickable="false"
android:text="#string/hello_world" />
</RelativeLayout>
</LinearLayout>
There are 4 groups of an image and text, but if I open it on small resolution I can see only 3 boxes. How can I set them to show on next line?
edit: it should looks like this example

It looks like you may be trying to replicate the behavior of a GridView. You could accomplish switching from 2 to 4 columns based on the size of the view using a GridView.
Another alternative that may work for you, depending on your targeted versions, is to specify a different layout file to be used when less screen space is available (check table 2 "smallestWidth" row): Providing Alternative Resources. You would use this approach by specifying a folder such as "res/layout-sw600dp/" and putting an identically named layout file in that folder. In each of the layout files then explicitly layout your files with the number of columns desired.
If you are targeting devices that don't recognize the "sw" resource modifier, you could simulate this manually in your code by specifying a layout file to inflate by name, and simply pick a larger or smaller one based on the screen size (which is of course available to you when the app is running).
Let me know if you would like elaboration on a specific approach.

You've set a constant width (100dp) for each element. It won't fit on the screen which has width lower then 400dp. One way to fix this is to use a horizontal scroll view.
Replace top RelativeLayout with the following.
<HorizontalScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
If you wish to have different layout on different screens, like on your attached drawing, simply use two different layout xmls as described here.

Related

How to make my layout fit in all screens

I have gone through many relative answers on stockoverflow and link's such as Supporting Different Screens or Screen Compatibility Mode
I have created the following relative layout and I am trying to make it look alike in all android screens.
My images fit perfect for 4.8 inch phones but when I try to use a 2.8 inch display or something like like that, some buttons go on top of others, and they do not shrink.
Does anyone have any suggestion how to improve that?
And preferably without increasing the size of my app.
Thanks in advance!
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:mm="http://millennialmedia.com/android/schema"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/background"
tools:context=".MainActivity" >
<ImageButton
android:id="#+id/Switch_off"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:onClick="someMethod"
android:background="#drawable/switch_off"/>
<ImageView
android:id="#+id/warning_shot"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:background="#drawable/more"
android:onClick="someMethod" />
<ImageView
android:id="#+id/imageViewBatteryState"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_below="#+id/Switch_off"
/>
<ImageView
android:id="#+id/sh"
android:layout_width="147dp"
android:layout_height="54dp"
android:layout_below="#+id/Switch_off"
android:layout_centerHorizontal="true"
android:background="#drawable/me"/>
<ImageView
android:id="#+id/sit"
android:layout_width="100dp"
android:layout_height="50dp"
android:layout_below="#+id/Switch_off"
android:layout_centerHorizontal="true"
/>
<TextView
android:id="#+id/textViewBatteryInfo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#ffffff"
android:textSize="12sp"
android:textStyle="bold"
android:typeface="monospace"
android:layout_alignBottom="#+id/sit"
android:layout_centerHorizontal="true"/>
</RelativeLayout>
I will suggest you to use LinearLayout instead of Relativelayout specially for the issue :
My images fit perfect for 4.8 inch phones but when I try to use a 2.8
inch display or something like like that, some buttons go on top of
others, and they do not shrink.
Because When you give orientation to Linearlayout then Its child will never get on top of each other for any resolution or screen size.
And If you give them Weight then Views will be in fix position for Each and Every device.
For example Put below Xml in your project and Check this out in Any resolution, It will give the same Result.
XML:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:mm="http://millennialmedia.com/android/schema"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
tools:context=".MainActivity" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button 1" />
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button 2" />
<Button
android:id="#+id/button3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button 3" />
</LinearLayout>
</LinearLayout>

How to implement correct UI for several screens in android

Here i am trying to handle different screens ,These are several screens i am trying to handle ,Here if i adjust for one screen remaining screens getting error ,not getting what is problem
here is
Here is my code
<?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"
android:background="#drawable/transactionpagebg" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="160dp"
android:gravity="center"
android:paddingLeft="50dp"
android:text="Current Meter Reading"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#android:color/white" />
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:gravity="center"
android:orientation="horizontal" >
<EditText
android:id="#+id/editText1"
android:layout_width="130dp"
android:layout_height="wrap_content"
android:inputType="number" />
<Spinner
android:id="#+id/spinner1"
android:layout_width="150dp"
android:layout_height="50dp" />
</LinearLayout>
<AbsoluteLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<Button
android:id="#+id/saveButton"
android:layout_width="113px"
android:layout_height="wrap_content"
android:layout_x="61dp"
android:layout_y="330dp"
android:background="#drawable/savebutton" />
<Button
android:id="#+id/settingsButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_x="208dp"
android:layout_y="330dp"
android:background="#drawable/settingbutton" />
</AbsoluteLayout>
</RelativeLayout>
to do as it need to be, you need to have support for different screen sizes you need to have different layouts, and also some changes in your manifest file...
check this question How to support different screen size in android
and this link http://developer.android.com/guide/practices/screens_support.html
There are many ways to make each view look right on various screens. However, I have found two methods are working best for me (at the moment):
To get the views to dynamically set their screen positions, wrap the widgets in a LinearLayout (LL), and put those LLs in a single LL. Set the weight of the inner LL to 1, and they will space themselves equally within the parent LL. This works for horizontal and vertical layouts. The distance between the widgets gets adjusted automatically by the OS.
create different dimens.xml folders/files for the different screen sizes (small, medium, large) and further differentiate them by density of needed (mdpi, hdpi, xhdpi, etc.). This way you can set margins, paddings, font sizes, for each size/density to get what you want.
EDIT: I see you put "TRANSACTION" in the background drawable? You can't do that! You need to create an image with just the text, and put it in an ImageView at the top of the layout. That way, you can set its position and size as needed for different screens, and make the other widgets adjust their positions relative to that image.
Even better would be to find a free font (ttf file) you can use that matches what you want, and put it in a TextView.
Here is a quick example of your layout with the ideas I mentioned. You would put the margins and font sizes in a dimens.xml file, so that you can adjust them.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#0000ee"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/hh"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="36dp"
android:orientation="vertical" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginBottom="36dp"
android:text="TRANSACTION"
android:textColor="#ffffff"
android:textSize="28sp" />
<TextView
android:id="#+id/test_textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="Current Meter Reading"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#android:color/white" />
</LinearLayout>
<LinearLayout
android:id="#+id/test_linearLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_weight="1"
android:gravity="center"
android:orientation="horizontal" >
<EditText
android:id="#+id/test_editText1"
android:layout_width="130dp"
android:layout_height="wrap_content"
android:layout_marginRight="24dp"
android:background="#ffffff"
android:inputType="number" />
<Spinner
android:id="#+id/test_spinner1"
android:layout_width="150dp"
android:layout_height="50dp"
android:background="#999999" />
</LinearLayout>
<LinearLayout
android:id="#+id/LinearLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_weight="1" >
<Button
android:id="#+id/test_saveButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="24dp"
android:text="Save" />
<Button
android:id="#+id/test_settingsButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>

How to define two different layouts for the layouts in the same category but slightly different inches?

I am testing my layout in eclipse's graphical layout. There are 5.4in FWVGA(480x854,mdpi) and 5.1in WVGA(480x800,mdpi) screens available to view in the graphical layout. If I am correct they both fall into large screen category, therefore I've put the layout xml into layout-large folder. And I've put my images into drawable-large-mdpi folder. But the image buttons are slightly off in 5.1in WVGA as you can see in the screenshots below. First is 5.1in, the second screenshot is 5.4'' and the correct one.
My second question which is similar to the above goes like this. I've done new layout for the Nexus 7 and put it into layout-sw600dp folder, and images to the drawable-tvdpi. Then I viewed this layout in the 7in tablet (1024x600,mdpi). And the image buttons are slightly off than it should look. The same way as in the first question.
I understand that the reason is probably because 5.1in and 5.4in isn't exactly the same even though they fall into the same category and I should have 2 different layouts for them. So how I should go about it? How can I have two different layouts? Or is there better solution, as I don't want to create a layout for each screen size that exist on the market.
Here is xml file:
<?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"
android:background="#drawable/wall4_cabinetclosed" android:orientation="vertical">
<RelativeLayout android:id="#+id/frames_layout"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_marginLeft="73dp" android:layout_marginTop="57dp">
<ImageView android:id="#+id/fire_frame"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_alignParentLeft="true" android:layout_alignParentTop="true"
android:background="#drawable/small_fire_icon" />
<ImageView android:id="#+id/water_frame"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_alignTop="#+id/fire_frame" android:layout_marginLeft="75dp"
android:layout_toRightOf="#+id/fire_frame" android:background="#drawable/small_water_icon" />
<ImageView android:id="#+id/earth_frame"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_below="#+id/fire_frame" android:layout_marginTop="71dp"
android:layout_toLeftOf="#+id/water_frame" android:background="#drawable/small_earth_icon" />
<ImageView android:id="#+id/wind_frame"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_alignLeft="#+id/water_frame" android:layout_alignTop="#+id/earth_frame"
android:background ="#drawable/small_wind_icon" />
</RelativeLayout>
<ImageView android:id="#+id/zoomed_image"
android:layout_width="wrap_content" android:layout_height="wrap_content" />
<Button android:id="#+id/frames" android:layout_width="210dp"
android:layout_height="220dp" android:layout_alignParentLeft="true"
android:layout_alignParentTop="true" android:layout_marginLeft="55dp"
android:layout_marginTop="30dp" android:onClick="zoomFrames"
android:background="#android:color/transparent"/>
<Button android:id="#+id/blue" android:layout_width="115dp"
android:layout_height="70dp" android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true" android:layout_marginLeft="220dp"
android:onClick="zoomImage"
android:background="#android:color/transparent"/>
<Button android:id="#+id/white" android:layout_width="85dp"
android:layout_height="50dp" android:layout_alignParentRight="true"
android:layout_alignParentTop="true" android:layout_marginRight="420dp"
android:layout_marginTop="420dp" android:onClick="zoomImage"
android:visibility="invisible"
android:background="#android:color/transparent"/>
<ImageView
android:id="#+id/fireplace"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="311dp"
android:layout_marginLeft="67dp"
android:background="#drawable/fire"
/>
<ImageButton
android:id="#+id/water_room"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="310dp"
android:layout_marginLeft="90dp"
android:background="#drawable/view_water_room"
android:onClick="finishFireRoom"
android:visibility="gone"
/>
<ImageView android:id="#+id/frames_zoomed_image"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:background="#drawable/frames_zoomed" android:onClick="hideZoomedFrames"
android:visibility="gone"/>
<RelativeLayout android:id="#+id/frameZoomedLayout"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_marginTop="113dp" android:layout_marginLeft="145dp"
android:visibility="gone"
>
<ImageButton android:id="#+id/fire_icon"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:background="#drawable/fire_icon" android:onClick="changeIcon" />
<ImageButton android:id="#+id/water_icon"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_alignBottom="#+id/fire_icon" android:layout_toRightOf="#+id/fire_icon"
android:background="#drawable/water_icon" android:layout_marginLeft="147dp" android:onClick="changeIcon"/>
<ImageButton android:id="#+id/earth_icon"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_below="#+id/fire_icon" android:layout_marginTop="140dp"
android:layout_toLeftOf="#+id/water_icon" android:background="#drawable/earth_icon" android:onClick="changeIcon"/>
<ImageButton android:id="#+id/wind_icon"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_alignLeft="#+id/water_icon" android:layout_alignTop="#+id/earth_icon"
android:background="#drawable/wind_icon" android:onClick="changeIcon"/>
</RelativeLayout>
</RelativeLayout>
in 3rd step set all ur device specific like screen, language etc all. and ur done

Android: Images button layout vertically that will fit all screen sizes

I'm having problems with my layout I want to arrange the image buttons vertically and I want it to have the same look for different screen sizes here is a print screen http://flic.kr/p/fwEZn1
<?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"
android:background="#drawable/chalk"
android:gravity="center|fill_vertical"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="1000dp"
android:layout_height="wrap_content"
android:layout_marginTop="104dp" >
<ImageButton
android:id="#+id/m"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="62dp"
android:layout_weight="1.30"
android:background="#android:color/transparent"
android:contentDescription="exam schedule button"
android:onClick="ex"
android:src="#drawable/exam" />
<ImageButton
android:id="#+id/cl"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="60dp"
android:background="#android:color/transparent"
android:contentDescription="classes button"
android:onClick="cl"
android:src="#drawable/list1" />
<ImageButton
android:id="#+id/lec"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.24"
android:background="#android:color/transparent"
android:contentDescription="lecture section button"
android:onClick="lc"
android:src="#drawable/sylla" />
<ImageButton
android:id="#+id/gr"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="20dp"
android:layout_weight="3.36"
android:background="#android:color/transparent"
android:contentDescription="group button"
android:onClick="gr"
android:src="#drawable/group" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="1000dp"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/linearLayout1"
android:layout_marginTop="123dp" >
<ImageButton
android:id="#+id/kl"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="74dp"
android:layout_weight="0.69"
android:background="#android:color/transparent"
android:contentDescription="calendar button"
android:onClick="kl"
android:src="#drawable/calendar" />
<ImageButton
android:id="#+id/d"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignTop="#+id/pd"
android:layout_marginRight="84dp"
android:layout_weight="0.38"
android:background="#android:color/transparent"
android:contentDescription="Schedule button"
android:onClick="sk"
android:src="#drawable/sked" />
<ImageButton
android:id="#+id/pd"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/button1"
android:layout_alignTop="#+id/an"
android:layout_weight="0.16"
android:background="#android:color/transparent"
android:contentDescription="podcast button"
android:onClick="pd"
android:src="#drawable/podcast" />
<ImageButton
android:id="#+id/an"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/kl"
android:layout_marginLeft="60dp"
android:layout_toRightOf="#+id/kl"
android:layout_weight=".92"
android:background="#android:color/transparent"
android:contentDescription="announcement button"
android:onClick="an"
android:src="#drawable/announce" />
</LinearLayout>
<ImageButton
android:id="#+id/button1"
android:layout_width="53dp"
android:layout_height="40dp"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_marginBottom="106dp"
android:layout_marginLeft="342dp"
android:layout_weight="0.38"
android:background="#android:color/transparent"
android:contentDescription="logout button"
android:onClick="logout"
android:src="#drawable/logout"
android:text="Logout" />
</RelativeLayout>
So basically I want to fix the arrangement of the images button. How can I do this? Do I need to resize images per drawable folder?
There is a simple solution. I see you want the layout to look the same in all screen sizes, but you are using hard coded values for layout_height,margin,padding etc. For this purpose use the dimens.xml in the values folder. Specify the values for all screens, create these folders in your resource folder:
values-small
values-normal(The default values folder is values-normal)
values-large
values-xlarge(You can use values-sw600 for tablets after Android 3.2)
In all of these folders create dimens.xml where you specify the margin,height,width,padding etc in dp, you can even specify the font size. Hope this helps!
Did You mean the same Size for all screen sizes when You say "look"? A possible way to do this, would be to set to ImageButton in Your xml:
scaleType="centerInside"
and set all weights from Your image buttons to 1
layout_weight="1"
And if You want to set every button vertical, declare in Your LinearLayout
android:orientation="vertical"
And by the way, it is allways a good practise to set different images for every drawable to fit in multiple screens.

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>

Categories

Resources