I don't know if you guys use this type of layout for most times but it drives me crazy.
for example when I put a button in the middle of screen and then put a textview near button suddenly IDE reorders them and textview goes on top and button on right.
it can make problems when using too many elements on screen.
since that time I use linear layout but it also has some limitations.
Thanks, I'm new into android development (4 days starting to learn) so I hope you guys can help me.
I rarely use RelativeLayout to be the main layout of a activity. It is recommended to use LinearLayout and set android:weightSum so your app could have a larger support for the screens. As you know there's a huge variety of devices running Android with different screen sizes. Use RelativeLayout only if you want that view in that specific place with that fixed size.
See this example of using LinearLayouts to create a activity with many elements, as your refered:
<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:baselineAligned="false"
android:padding="#dimen/padding_small"
android:weightSum="3"
tools:ignore="HardcodedText" >
<LinearLayout
android:id="#+id/picker_time_hour"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical" >
<TextView
android:id="#+id/picker_time_hour_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/hours"
android:textAppearance="?android:attr/textAppearanceMedium" />
<Button
android:id="#+id/picker_time_hour_up"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/padding_medium"
android:layout_marginRight="#dimen/padding_medium"
android:gravity="center"
android:text="+" />
<EditText
android:id="#+id/picker_time_hour_value"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/padding_medium"
android:layout_marginRight="#dimen/padding_medium"
android:gravity="center"
android:inputType="number" />
<Button
android:id="#+id/picker_time_hour_down"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/padding_medium"
android:layout_marginRight="#dimen/padding_medium"
android:gravity="center"
android:text="-" />
</LinearLayout>
<LinearLayout
android:id="#+id/picker_time_minute"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical" >
<TextView
android:id="#+id/picker_time_minute_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/minutes"
android:textAppearance="?android:attr/textAppearanceMedium" />
<Button
android:id="#+id/picker_time_minute_up"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/padding_medium"
android:layout_marginRight="#dimen/padding_medium"
android:gravity="center"
android:text="+" />
<EditText
android:id="#+id/picker_time_minute_value"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/padding_medium"
android:layout_marginRight="#dimen/padding_medium"
android:gravity="center"
android:inputType="number" />
<Button
android:id="#+id/picker_time_minute_down"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/padding_medium"
android:layout_marginRight="#dimen/padding_medium"
android:gravity="center"
android:text="-" />
</LinearLayout>
<LinearLayout
android:id="#+id/picker_time_second"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical" >
<TextView
android:id="#+id/picker_time_second_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/seconds"
android:textAppearance="?android:attr/textAppearanceMedium" />
<Button
android:id="#+id/picker_time_second_up"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/padding_medium"
android:layout_marginRight="#dimen/padding_medium"
android:gravity="center"
android:text="+" />
<EditText
android:id="#+id/picker_time_second_value"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/padding_medium"
android:layout_marginRight="#dimen/padding_medium"
android:gravity="center"
android:inputType="number" />
<Button
android:id="#+id/picker_time_second_down"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/padding_medium"
android:layout_marginRight="#dimen/padding_medium"
android:gravity="center"
android:text="-" />
</LinearLayout>
</LinearLayout>
And the result is:
As you can see my opinion is that you should use LinearLayouts, but read this topic, it can also help you choosing.
To my experience, you should not use the eclipse drag&drop ui builder. It will cause only confusion and problems. It's not yet mature enough (even if it has made a great progress in the last years).
Especially as a beginner, you should work directly with the xml. This will give you a much better understanding of the layouting mechanisms. I don't know a single android developer, who is seriously working with the ide builder.
Relative Layout has proven the most often used Layout for me. Besides the fact that is really customizable (although maybe is less straightforward than LinearLayout) it is also quite "fast". "Fast" means that there is a certain overhead when you use nested LinearLayouts,that you can avoid by using a RelativeLayout. Specifically:
Sticking to the basic features is unfortunately not the most efficient
way to create user interfaces. A common example is the abuse of
LinearLayout, which leads to a proliferation of views in the view
hierarchy. Every view — or worse, every layout manager — that you add
to your application comes at a cost: initialization, layout and
drawing become slower. The layout pass can be especially expensive
when you nest several LinearLayout that use the weight parameter,
which requires the child to be measured twice.
Related
In my case, I have a HorizontalScrollView. What I need to achieve is that HorizontalScrollView should be scollable until a specific child. (By child I mean view lying inside HorizontalScrollView.) User should not be able to scroll the rest of it. My current minimum SDK is 21. So that I cannot use HorizontalScrollView.setOnScrollChange() method. It is available for API level 23+.
Searched the net for some time but could not find solutions suitable for my case.
How can I achieve this? Any suggestions would greatly help.
The reason for doing this is to achieve an affect where scrollbar stops from scrolling at a specified location. See the picture below.
You can kind of fake the sugested behaviour by adding a ScrollView which fills up half the screen and adding static elements right next to it.
below is a pseudo layout on how it can be done:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="1">
<ScrollView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".5">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#FF0000">
<!-- Scrollable Items here -->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="item1"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="item2"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="item3"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="item4"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="item5"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="item6"/>
</LinearLayout>
</ScrollView>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".5"
android:orientation="horizontal"
android:background="#00FF00">
<!-- Unscrollable Items here -->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="item1"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="item2"/>
</LinearLayout>
</LinearLayout>
the important part is weightSum=1 and the layout_weights of .5 with a respective width of 0 . You can adjust them to your needs of course.
I made a custom row layout xml file for a ListView so I could design each row to look how I want, but I'm having trouble actually designing the UI in this xml file. I'm trying to make the the activity ultimately look like this:
As you can see there is a listView with rows, each consisting of a game with a textView as a title, two buttons, and an imageView as the background. I've been doing a lot of research through Google's UI documentation but I can't figure out how to get the elements to appear on top of each other like this while have the row scale perfectly to different screen sizes. The furthest I've gotten is using a FrameLayout to place the different views on top of each other, but from here I cannot place the views in the correct position relative to each other. Any advice on how to do this or where I can find out how to do this?
XML so far (terrible I know):
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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"
android:orientation="horizontal">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|center_horizontal">
<ImageView
android:id="#+id/gameImageID"
android:layout_width="340dp"
android:layout_height="160dp"
android:scaleType="centerCrop"
app:srcCompat="#drawable/overwatch" />
<TextView
android:id="#+id/gameNameID"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_gravity="center_horizontal"
android:layout_marginTop="15dp"
android:text="TextView" />
<Button
android:id="#+id/btnJoinLobby"
android:layout_width="88dp"
android:layout_height="wrap_content"
android:onClick="myClickHandlerJoin"
android:text="Join Lobby"
android:layout_gravity="center_horizontal"
android:layout_marginTop="15dp" />
<Button
android:id="#+id/btnCreateLobby"
android:layout_width="102dp"
android:layout_height="wrap_content"
android:onClick="myClickHandlerCreate"
android:text="Create Lobby"
android:layout_gravity="center_horizontal"
android:layout_marginTop="15dp"
android:layout_toEndOf="#+id/gameNameID" />
</RelativeLayout>
Sure that is no problem. Just use weight to handle spacing and you don't need the frame layout just use relative as a root.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|center_horizontal">
<ImageView
android:id="#+id/gameImageID"
android:layout_width="match_parent"
android:layout_height="160dp"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:scaleType="centerCrop"
app:srcCompat="#drawable/overwatch" />
<TextView
android:id="#+id/gameNameID"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_gravity="center_horizontal"
android:layout_marginTop="15dp"
android:text="TextView" />
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:weightSum="2">
<RelativeLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content">
<Button
android:id="#+id/btnJoinLobby"
android:layout_width="102dp"
android:layout_height="wrap_content"
android:onClick="myClickHandlerJoin"
android:text="Join Lobby"
android:layout_centerHorizontal="true"
android:layout_marginTop="15dp" />
</RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content">
<Button
android:id="#+id/btnCreateLobby"
android:layout_width="102dp"
android:layout_height="wrap_content"
android:onClick="myClickHandlerCreate"
android:text="Create Lobby"
android:layout_centerHorizontal="true"
android:layout_marginTop="15dp" />
</RelativeLayout>
</LinearLayout>
</RelativeLayout>
You could also just use two nested Relative Layouts with gravity bottom left and bottom right and hold your buttons in there and align buttons to right with margins from side. Also don't use the "endOF" aligning as that will force a left alignment and make larger gaps on the right side of the screen even if you make it look good for one phone it will look bad on another. Aesthetics matter.
Or you could just float your buttons to the bottom left and bottom right with margins from side and make both set to match_parent so they fill the space but use padding to shrink the button look inside the space, but this can get messy. So I prefer the implementation above although some people won't like the extra layouts. It's just a matter of opinion though as the performance diff of using extra nested layouts is so tiny that no one can actually argue performance with a straight face haha.
<RelativeLayout
android:layout_width="340dp"
android:layout_height="160dp"
android:scaleType="centerCrop"
android:background="#drawable/overwatch" >
<TextView
android:id="#+id/gameNameID"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_gravity="center_horizontal"
android:layout_marginTop="15dp"
android:text="TextView" />
<Button
android:id="#+id/btnJoinLobby"
android:layout_width="88dp"
android:layout_height="wrap_content"
android:onClick="myClickHandlerJoin"
android:text="Join Lobby"
android:layout_gravity="center_horizontal"
android:layout_marginBottom="15dp" />
<Button
android:id="#+id/btnCreateLobby"
android:layout_width="102dp"
android:layout_height="wrap_content"
android:onClick="myClickHandlerCreate"
android:text="Create Lobby"
android:layout_gravity="center_horizontal"
android:layout_marginBottom="15dp"
android:layout_toEndOf="#+id/btnJoinLobby" />
</RelativeLayout>
Try this. And let me know if that helps.
I'm trying to define layout for listview item that looks like attached image (made in Photoshop). What layout(s) should I use?
i propose a LinearLayoutwith horizontal orientation first, and inside a RelativeLayoutto place other views from left / top to right / bottom using attributes : layout_alignParentTop, layout_alignParentBottom, layout_alignParentLeft, layout_alignParentRight etc ...
I would suggest using a RelativeLayout for this. Otherwise, you may up with too much nesting. I'm not going to write the layout but you should look through the RelativeLayout Docs and see all the possible properties you can give Views. You may possibly end up with child LinearLayouts also and that's ok. But I would use RelativeLayout for the parent.
If you are undecided a good thing to do is to draw it out really quick in xml how you think each might go and see with ViewGroup seems like the most efficient. Sometimes its hard to say until you get going on it by either writing the xml code or at least some pseudocode.
You only need to play now with paddings and margins.
<?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" >
<LinearLayout
android:id="#+id/gray_layout"
android:layout_width="40dp"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#888888"
android:layout_alignParentLeft="true"
android:gravity="center_vertical">
<TextView android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="AUG"/>
<TextView android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="18"/>
<TextView android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="2011"/>
</LinearLayout>
<View
android:id="#+id/divider"
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="#000088"
android:layout_toRightOf="#id/gray_layout"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="30dp"/>
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#id/divider"
android:text="Title"
android:layout_marginBottom="5dp"
android:layout_alignBottom="#id/divider"/>
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignRight="#id/divider"
android:text="18. aug 23:49"
android:layout_marginBottom="5dp"
android:layout_alignBottom="#id/divider"/>
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#id/divider"
android:text="Short msg"
android:layout_marginTop="10dp"
android:layout_alignTop="#id/divider"/>
<ImageView
android:id="#+id/info_button"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:background="#ff0000"/>
<ImageView
android:id="#+id/arrow_button"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_above="#id/info_button"
android:layout_toLeftOf="#id/info_button"
android:background="#00ff00"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#id/arrow_button"
android:layout_toLeftOf="#id/info_button"
android:layout_alignLeft="#id/arrow_button"
android:gravity="center_horizontal"
android:text="30" />
</RelativeLayout>
You can nest multiple LinearLayouts with different orientation to achieve this.
I used relativelayout and here is what I've got. I can't get the image to fill the section I want. I don't know how to fix it. I've heard something about using layout weight, is that some thing I should use?
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#drawable/background">
<ImageView
android:id="#+id/imagehome"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_margin="10dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_above="#+id/tvtitle1"
android:src="#drawable/one" />
<TextView
android:id="#+id/tvtitle1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:text="Voted Best Dentist five years running by"
android:textSize="16dp"
android:textColor="#9D4F1B"
android:layout_above="#+id/tvtitle2"
android:layout_centerHorizontal="true"
android:layout_marginBottom="6dp"/>
<TextView
android:id="#+id/tvtitle2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:text="The Oakland Tribune"
android:textSize="16dp"
android:textColor="#9D4F1B"
android:layout_above="#+id/tvhome"
android:layout_centerHorizontal="true"
android:layout_marginBottom="15dp"/>
<TextView
android:id="#+id/tvhome"
android:layout_width="280dp"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:text=" You'll be cared for by our highly trained staff of dental professionals,energized to work as a team while providing the highest quality of care for your dental health. We offer complete dentistry for the entire family at a single location. "
android:textColor="#4C2016"
android:textSize="15dp"
android:layout_centerHorizontal="true"
android:layout_above="#+id/special"
android:layout_marginBottom="25dp" />
<Button
android:id="#+id/special"
android:layout_width="120dp"
android:layout_height="40dp"
android:background="#drawable/cc"
android:text="Specials"
android:textColor="#F6E6C6"
android:textSize="17dp"
android:textStyle="bold"
android:layout_centerHorizontal="true"
android:layout_above="#+id/tvbutton"
android:layout_marginBottom="15dp" />
<TextView
android:id="#+id/tvbutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="App provided by Bay Area Dental Marketing"
android:layout_centerHorizontal="true"
android:textSize="10dp"
android:layout_alignParentBottom="true" />
</RelativeLayout>
on the xml file,
and on the device
It got better but it'snot there yet!
Not sure how much flexibility you have but the best solution would be to remove the text and image from the background and add them as views instead. As you have experienced unless each piece is added as a view it is nearly impossible to guarantee it will look correct on all devices.
When working with multiple screen sizes, I have found it best practice to either (a) use RelativeLayout, or (b) set a LinearLayout inside a ScrollView.
Use RelativeLayout so you won't have to specify the pixels.
Alternativley if you are doing that for one particular phone select corresponding screen size in the XML designer in Eclipse. Yet, using RelativeLayout guarantees it will work on all the phones
Even using the suggested answers above you may still run into problem on different size screens. The best solution I can think of is to create separate image resources for the background and foreground then add an image view with the foreground image as the source.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="#drawable/background" >
<!-- This method makes this layout redundant, dont need this anymore
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="23dip"
android:layout_marginRight="15dip"
android:layout_marginTop="255dip"
android:orientation="vertical" >-->
<!-- put the foreground image in an imageview -->
<ImageView android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:src="#drawable/foregroundImage"/>
<TextView
android:layout_width="276dp"
android:layout_height="132dp"
android:textSize="15dp"
android:gravity="center_vertical"
android:text="some text"
android:textColor="#4C2016"/>
<Button
android:id="#+id/special"
android:layout_width="131dp"
android:layout_height="40dp"
android:background="#drawable/cc"
android:layout_marginTop="20dip"
android:layout_marginLeft="75dip"
android:textSize="17dp"
android:textStyle="bold"
android:text="Specials"
android:textColor="#F6E6C6" />
</LinearLayout>
I'm trying to make my layouts more landscape friendly, and a common pattern I have is to add a LinearLayout with some buttons (e.g. OK | Cancel) and just set a value for layout_weight so that the space is evenly distributed. The problem is that when you use a phone or (especially) a tablet in landscape mode, you end up with humongous buttons that look ridiculous. I tried setting maxWidth on the buttons and on the linear layout but to no avail. What would be the easiest way to achieve this? Namely, setting a maximum horizontal size for the view so that it does not grow to the whole width. I tried a bunch of different things, but none worked.
Here's a sample layout:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingTop="6dp"
android:paddingBottom="6dp">
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:enabled="false"
android:textStyle="bold"
android:text="#string/button1" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/button2" />
</LinearLayout>
Note: I know I can create a new layout file for landscape and do magic there. I want to keep the specialized layout files to a minimum, and I would hope this does not require them.
After messing around quite a bit with relative layouts, I stumbled upon this answer, which is what I ended up using.
I don't have Eclipse here to test it, but I would use a RelativeLayout instead, something like:
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
>
<View
android:id="#+id/centerView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
/>
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#id/centerView"
android:enabled="false"
android:textStyle="bold"
android:text="#string/button1"
/>
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/centerView"
android:text="#string/button2"
/>
</RelativeLayout>
As I said, I can't test it right now, but you can work around this idea.
On a side note, unless your layout is very simple, I usually create separate layouts for landscape. It's a little more work, but you can optimize the views much better that way. Specially, if you plan to support larger screens.
<RelativeLayout
android:id="#+id/rlMain"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="12dp"
android:layout_marginRight="12dp">
<View
android:id="#+id/vCenter"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_centerHorizontal="true"
android:layout_marginRight="5dp"
android:layout_marginLeft="5dp"/>
<Button
android:id="#+id/btnOne"
android:layout_width="wrap_content"
android:layout_height="40dp"
android:layout_toLeftOf="#id/vCenter"
<!--Change this for different widths-->
android:minWidth="200dp"/>
<Button
android:id="#+id/btnTwo"
android:layout_width="wrap_content"
android:layout_height="40dp"
android:layout_toRightOf="#id/vCenter"
<!--Change this for different widths-->
android:minWidth="200dp"/>
</RelativeLayout>