I started writing a super-simple text adventure game a few months ago, and I am just now getting back to it. But after looking at the layout, I now think it's really ugly.
I'm really new to this whole XML layout format, and I was wondering if someone could take a look at this for me and let me know if there's a better, more attractive way of writing this layout.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent" android:layout_height="fill_parent">
<TableLayout android:stretchColumns="*"
android:layout_height="wrap_content"
android:id="#+id/tableLayout1"
android:layout_width="fill_parent">
<TableRow
android:layout_height="wrap_content"
android:id="#+id/tableRow1"
android:layout_weight="1"
android:layout_width="fill_parent"
android:gravity="center">
<TextView android:text=""
android:id="#+id/introText"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_marginLeft="2dip"
android:layout_marginRight="2dip"
android:layout_marginTop="2dip"
android:layout_marginBottom="2dip">
</TextView>
</TableRow>
<TableRow
android:layout_height="wrap_content"
android:id="#+id/tableRow1"
android:layout_weight="1"
android:layout_width="fill_parent"
android:gravity="center">
<TextView android:text="navigationText"
android:id="#+id/navigationText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="2dip"/>
<TextView android:text="actionText"
android:id="#+id/actionText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="2dip"/>
<TextView android:text="encounterText"
android:id="#+id/encounterText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="2dip"
android:layout_marginBottom="1dip"/>
</TableRow>
</TableLayout>
<TableLayout android:stretchColumns="*"
android:layout_height="wrap_content"
android:id="#+id/tableLayout1"
android:layout_width="fill_parent">
<TableRow
android:layout_height="wrap_content"
android:id="#+id/tableRow1a"
android:layout_weight="1"
android:layout_width="fill_parent"
android:gravity="left">
<TextView android:text="characterInfo"
android:id="#+id/charText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="2dip">
</TextView>
<TextView android:text="" android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</TextView>
<Button android:text="North"
android:id="#+id/btnNorth"
android:layout_height="wrap_content"
android:layout_width="fill_parent" android:layout_margin="2dip">
</Button>
</TableRow>
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/tableRow2"
android:gravity="left">
<TextView android:text="statsText"
android:id="#+id/statsText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxLines="5"
android:layout_margin="2dip">
</TextView>
<Button android:text="West"
android:id="#+id/btnWest"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="32dip" android:layout_marginRight="2dip"
android:layout_marginTop="2dip" android:layout_marginBottom="2dip">
</Button>
<Button
android:text="i"
android:id="#+id/btnInventory"
android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_marginLeft="10dip"
android:layout_marginRight="10dip" android:layout_marginTop="2dip"
android:layout_marginBottom="2dip">
</Button>
<Button
android:text="East"
android:id="#+id/btnEast"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="2dip" android:layout_marginRight="32dip"
android:layout_marginTop="2dip" android:layout_marginBottom="2dip">
</Button>
</TableRow>
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/tableRow3"
android:gravity="left">
<TextView android:text="itemsText"
android:id="#+id/itemsText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="2dip">
</TextView>
<TextView android:text="" android:id="#+id/textView2"
android:layout_width="wrap_content" android:layout_height="wrap_content"></TextView>
<Button android:text="South"
android:id="#+id/btnSouth"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="2dip">
</Button>
</TableRow>
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/tableRow4"
android:gravity="center">
<TextView android:text="" android:id="#+id/textView3"
android:layout_width="wrap_content" android:layout_height="wrap_content"></TextView>
<Button android:text="Attack" android:id="#+id/btnFight"
android:layout_height="wrap_content" android:layout_width="wrap_content"
android:layout_marginLeft="15dip" android:layout_marginRight="10dip"
android:layout_marginTop="2dip"></Button>
<Button android:text="Flee" android:id="#+id/btnRun"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_marginLeft="10dip" android:layout_marginRight="10dip"
android:layout_marginTop="2dip"></Button>
<Button android:text="Search" android:id="#+id/btnSearch"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_marginLeft="10dip" android:layout_marginRight="15dip"
android:layout_marginTop="2dip"></Button>
</TableRow>
</TableLayout>
</LinearLayout>
If you're just looking to make your layout more manageable, there are a number of simple solutions I can think of. They mostly require zero to little design change.
You can add XML comments to separate logical sections, as ugly as they may be
You could divide your layout into separate included layouts
You can use fragments (using the Fragment Compatibility Package available through the SDK updater if necessary) to fragment your Activity into separate UI components which would have their own layout files. This is the only solution that would require moving your java code around, but I highly recommend it; it makes UI components highly reusable.
Assuming you're looking to make the code look better, the latest version of the ADT Plugin for Eclipse has an XML layout code formatter that reformats your code to the generally accepted Android style. I find the code it produces looks pretty nice (at least as nice as XML can look).
So I'm guessing you mean make the code look better, right? You've asked a general question so the best I can do is give you a general answer. What you should probably do is combine some of these layout elements together into what are called CompoundControls. This will allow you to factor out a bunch of the code in to smaller xml layout files. You'll be basically just creating your own composite widgets that you can then place in your main layout using less code. Plus, you can reuse the widgets in multiple places.
If what you are writing is a game, you should really consider using a Canvas instead of trying to design a complex layout from Android components. I suggest this page as a way to get started:
http://developer.android.com/guide/topics/graphics/2d-graphics.html
Naturally, since your project is text-based, you'd be primarily interested in the primitives and functions that draw text, like drawText() in the Canvas class:
http://developer.android.com/reference/android/graphics/Canvas.html
Related
I would like to ask, how can I fix the layout on different screens?
When I run the application, the layout as shown in the XML is different from the layout that my devices is shown.
nonetheless,
the layout on a galaxy Ace 2 and the layout on a samsung note , is also different.
May I know why is this so, and how can I fixed it?
I wanted my layout to look like this
However, my layout always look like this
I'm currently using table layout and linear layout.
I've tried other layout too, but none matches my needs.
Can someone help me?
green color represent textview
red color represent edittext
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:orientation="vertical"
android:layout_height="fill_parent"
tools:context=".MainActivity"
android:background="#drawable/background">
<TableLayout
android:id="#+id/tableLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:stretchColumns="1" >
<TableRow
android:id="#+id/tableRow1"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/datetxtview"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Date:"
android:textColor="#99FFFF"
android:textSize="18sp"
android:textStyle="bold" />
</TableRow>
<TableRow
android:id="#+id/tableRow2"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<EditText
android:id="#+id/date"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:clickable="false"
android:cursorVisible="false"
android:focusable="false"
android:focusableInTouchMode="false"
android:hint="DD/MM/YYYY"
android:inputType="date"
android:textColor="#FFFFFF"
android:textColorHint="#0099FF"
android:textSize="12sp" />
</TableRow>
<TableRow
android:id="#+id/tableRow3"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/fuelpricetxtview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Fuel Price ($):"
android:textColor="#99FFFF"
android:textSize="18sp"
android:textStyle="bold" />
</TableRow>
<TableRow
android:id="#+id/tableRow4"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<EditText
android:id="#+id/fuelprice"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:hint="Enter the price"
android:textColor="#FFFFFF"
android:textColorHint="#0099FF"
android:textSize="15sp" />
</TableRow>
<TableRow
android:id="#+id/tableRow5"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/fuelpumptxtview"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Fuel Pump (litre):"
android:textColor="#99FFFF"
android:textSize="18sp"
android:textStyle="bold" />
</TableRow>
<TableRow
android:id="#+id/tableRow6"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<EditText
android:id="#+id/fuelpump"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:hint="Enter the number of litres pump"
android:textColorHint="#0099FF"
android:textColor="#FFFFFF"
android:textSize="15sp" />
</TableRow>
<TableRow
android:id="#+id/tableRow7"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/totalcosttxtview"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Total Cost ($):"
android:textColor="#99FFFF"
android:textSize="18sp"
android:textStyle="bold" />
</TableRow>
<TableRow
android:id="#+id/tableRow8"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/tcost"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textColor="#FFFFFF"
android:textSize="15sp" />
</TableRow>
<TableRow
android:id="#+id/tableRow9"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/odometertxtview"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Current Odometer (mileage):"
android:textColor="#99FFFF"
android:textSize="18sp"
android:textStyle="bold"
/>
</TableRow>
<TableRow
android:id="#+id/tableRow10"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<EditText
android:id="#+id/odometer"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:ems="10"
android:textColor="#FFFFFF"
android:textSize="15sp"
android:hint="Enter your current odometer"
android:textColorHint="#0099FF"/>
</TableRow>
<TableRow
android:id="#+id/tableRow12"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/fctxtview"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Fuel Consumption:"
android:textColor="#99FFFF"
android:textSize="18sp"
android:textStyle="bold" />
</TableRow>
<TableRow
android:id="#+id/tableRow13"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/fcon"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textColor="#FFFFFF"
android:textSize="15sp" />
</TableRow>
</TableLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="horizontal"
android:weightSum="90">
<Button
android:id="#+id/saveBTN"
style="#style/ButtonInside"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:paddingTop="100dp"
android:text="Save"
android:layout_weight="45"/>
<Button
android:id="#+id/cancelBTN"
style="#style/ButtonInside"
android:layout_width="0dp"
android:layout_weight="45"
android:layout_height="wrap_content"
android:paddingTop="100dp"
android:text="Cancel" />
</LinearLayout>
</RelativeLayout>
As a user, you've probably noticed that the screen and specs of your devices are different from one another (a lot) :
Galaxy note : 800 x 1280 (1.6 aspect ratio) - 5.3 inch, 285 ppi
galaxy Ace 2 : 480 x 800 (1.6666... aspect ratio) - 3.8 inch , 246 ppi
and that's not the only 2 different android devices out there. there are thousands...
you need to think how to handle them all using elegant solutions.
if you insist that both devices would make the components stretch in size, set the rows to have equal weights . i think you can still use TableLayout, since it extends from LinearLayout, but if you can't, you'll need to have more job.
However, if you do that, smaller devices would have tiny components and make them all squeeze into their small screen, while larger devices (even tablets) would have huge UI components.
I suggest you watch some Google IO lectures regarding UI design and how to handle different screens. there are also many links about it, such as:
http://developer.android.com/design/style/metrics-grids.html
http://developer.android.com/training/multiscreen/index.html
http://android-developers.blogspot.co.il/2011/07/new-tools-for-managing-screen-sizes.html
http://developer.android.com/design/style/devices-displays.html
http://developer.android.com/design/videos/index.html
Designing for Android isn't like designing for iOS devices - there are thousands of different screen configurations available, whereas with iOS, there are under ten.
You can consider it as being similar to designing a website, with responsiveness in mind; the designer does not know how the screen will look for the client, so they must consider size buckets, and craft a layout which can re-flow according to the device it's displayed on.
You can specify qualifiers on your resource directories which work like media queries for websites (e.g. layout-sw600dp which will only be used when the device it's being run on has a shortest width of 600 density independent pixels).
See Android Developer - designing for multiple screens.
i have a couple list items. one works, the other one doesn't, and they both look fairly identical. this really should be a game of "spot the difference" in the XML files but i can't, for the life of me, figure out what's wrong. one of the list items is perfect and the other refuses to justify some of the Views on the right side of the layout, as indicated in the xml. here's what they each look like with code included.
^ list_view_item_2.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:minHeight="?android:attr/listPreferredItemHeight"
android:padding="5dp">
<TextView
android:id="#+id/item_text_product"
android:textSize="20sp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_width="0dp"/>
<TableLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TableRow>
<TextView
android:id="#+id/item_text_total"
android:gravity="right"
android:textStyle="bold"
android:layout_span="2"
android:layout_height="wrap_content"
android:layout_width="wrap_content"/>
</TableRow>
<TableRow>
<TextView
android:id="#+id/item_text_units"
android:gravity="right"
android:textStyle="bold"
android:layout_height="wrap_content"
android:layout_width="wrap_content"/>
<TextView
android:id="#+id/item_text_uom"
android:gravity="right"
android:textStyle="bold"
android:layout_height="wrap_content"
android:layout_width="wrap_content"/>
</TableRow>
<TableRow>
<TextView
android:id="#+id/text_acog"
android:text="COG:"
android:gravity="right"
android:textStyle="bold"
android:layout_height="wrap_content"
android:layout_width="wrap_content"/>
<TextView
android:id="#+id/item_text_acog"
android:paddingLeft="1sp"
android:gravity="right"
android:textStyle="bold"
android:layout_height="wrap_content"
android:layout_width="wrap_content"/>
</TableRow>
</TableLayout>
</LinearLayout>
This next layout is the one that works.
^ inventory_child_item.xml:
and the code looks identical, for the most part...
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:minHeight="?android:attr/listPreferredItemHeight"
android:padding="5dp">
<TextView
android:id="#+id/ici_site"
android:textSize="20sp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_width="0dp"/>
<TableLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TableRow>
<TextView
android:id="#+id/ici_units"
android:gravity="right"
android:textStyle="bold"
android:layout_height="wrap_content"
android:layout_width="wrap_content"/>
<TextView
android:id="#+id/ici_uom"
android:paddingLeft="1sp"
android:gravity="right"
android:textStyle="bold"
android:layout_height="wrap_content"
android:layout_width="wrap_content"/>
</TableRow>
<TableRow>
<TextView
android:id="#+id/ici_total"
android:gravity="right"
android:textStyle="bold"
android:layout_span="2"
android:layout_height="wrap_content"
android:layout_width="wrap_content"/>
</TableRow>
<TableRow>
<TextView
android:id="#+id/ici_price"
android:gravity="right"
android:textStyle="bold"
android:layout_span="2"
android:layout_height="wrap_content"
android:layout_width="wrap_content"/>
</TableRow>
</TableLayout>
</LinearLayout>
You need to set match_parent to ListView
like:
android:layout_width="match_parent"
MoonlightCheese,
The only difference I can find in your code is: in the layout that works, your TextView named #+id/ici_uom has a padding of 1sp. For no logical reason can I figure out why this one line would cause any discrepancy as it should not. You will probably be likely to change this value or even add it to the other list and see no difference in behavior. As a result, I am inclined to believe that there is something different with the ListViews themselves or their relationships to their parents.
I say this because it is an absolute fact that your list items are justifying to the right. It seems that the width is off on a per element basis. The fill_parent in the LinearLayout should be the indicator. I would reanalyze the lists themselves and potentially how you are populating the views.
Without your parent markups, it is hard to say exactly what is happening and why. This is because we have no idea how you are using the ListViews, if there are more than one, if one is a ListActivity and the other is not, or even how they are nested.
Based on the difference in appearance, I assume that you have two ListViews and in order to further help you, we would need the markup for them and their parents. Without the markup, that is where I would tell you to look.
Hope this helps,
FuzzicalLogic
I think the gravity on the textviews doesn't mean anything in your case, because the layout_width is wrap_content, which means, the textview will be as big as your text is. What if you try adding android:layout_gravity="right" to your TableLayout.
I am designing an app in xml android. I have been using lots of drawable resources. The thing is, when i test the design in an emulator of size 800x800 it runs fine. but as i decrease the size of the emulator to 500x500 the design starts breaking out. Its not completely in the same position. I have used a lot of layout_margin attributes. please tell if there is any other way by which my design runs fine irrespective of size of the emulator!?
a snip of my code is:
<ImageView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/containers"
android:src="#drawable/containers"
android:paddingTop="42px"
android:paddingLeft="3px">
</ImageView>
<TextView android:textColor="#000000"
android:paddingLeft="20px"
android:paddingTop="58px"
android:layout_width="wrap_content"
android:id="#+id/current_loc"
android:text="#string/current_loc"
android:layout_height="wrap_content">
</TextView>
<TextView android:textColor="#000000"
android:paddingLeft="20px"
android:paddingTop="109px"
android:layout_width="wrap_content"
android:id="#+id/current_loc"
android:text="#string/at"
android:layout_height="wrap_content">
</TextView>
<Button android:text="#string/time"
android:textColor="#000000"
android:id="#+id/pickTime"
android:layout_height="50px"
android:layout_width="120px"
android:layout_marginTop="100px"
android:layout_marginLeft="40px">
</Button>
<Button android:text="#string/date"
android:textColor="#000000"
android:id="#+id/pickDate"
android:layout_height="50px"
android:layout_marginTop="100px"
android:layout_marginLeft="160px"
android:layout_width="100px">
</Button>
<TextView android:textColor="#000000"
android:layout_marginLeft="260px"
android:id="#+id/to"
android:layout_marginTop="110px"
android:layout_width="wrap_content"
android:text="#string/to"
android:layout_height="wrap_content">
</TextView>
<EditText android:textColor="#000000"
android:id="#+id/editText2"
android:layout_marginTop="97px"
android:layout_marginLeft="280px"
android:layout_height="60px"
android:layout_width="190px"
android:hint="#string/dest"
android:textSize="20px"
android:singleLine="True">
</EditText>
<TextView android:textColor="#000000"
android:paddingLeft="20px"
android:id="#+id/thereare"
android:paddingTop="180px"
android:layout_width="wrap_content"
android:text="#string/ihave"
android:layout_height="wrap_content">
</TextView>
<EditText android:textColor="#000000"
android:id="#+id/num1"
android:layout_marginTop="169px"
android:layout_height="55px"
android:layout_width="50px"
android:layout_marginLeft="85px"
android:hint="2"></EditText>
<TextView android:textColor="#000000"
android:paddingLeft="140px"
android:id="#+id/female"
android:paddingTop="180px"
android:layout_width="wrap_content"
android:text="#string/female"
android:layout_height="wrap_content">
</TextView>
<TextView android:textColor="#000000"
android:paddingLeft="210px"
android:id="#+id/and"
android:paddingTop="180px"
android:layout_width="wrap_content"
android:text="#string/and"
android:layout_height="wrap_content">
</TextView>
To make xml design works properly on any screen device, wrap your widget around RelativeLayout and change you measurement unit from px to dp. With dp unit you will get relative measurement that change depends on the screen resolution.
For more info, refer to this link http://developer.android.com/guide/practices/screens_support.html
You should try to get rid of specifying sizes in pixels. Instead you can use dip and layout_weights
You can specify different layout .xml files for different screen resolutions, to avoid your problem. Read carefully the guidelines that Android Developers site gives here
try using this code now may be it would be helpful for u
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="#8B8989" android:orientation="vertical">
write down your XML in betweenthis code
</LinearLayout>
I am trying to make a relativeLayout with three textViews in a column on the left and two buttons next to each other on the right. The problem is, when the first textView is short "i.e. 3 or 4 characters" the textViews below get wrapped whenever they are longer then the first textView. I don't want this and want them to go all the way to the buttons if possible. I know I'm probably missing a parameter or something similar. Can anybody help me?
<LinearLayout android:id="#+id/LinearLayout02" android:orientation="vertical" android:layout_height="fill_parent" android:layout_width="fill_parent">
<RelativeLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:id="#+id/RelativeLayout_class1" android:visibility="visible">
<TextView android:layout_width="wrap_content" android:text="#+id/TextView01" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:id="#+id/TextView_class1_name" android:textColor="#color/Button_Text1"></TextView>
<TextView android:layout_width="wrap_content" android:text="#+id/TextView01" android:layout_below="#+id/TextView_class1_name" android:layout_height="wrap_content" android:layout_alignLeft="#+id/TextView_class1_name" android:layout_alignRight="#+id/TextView_class1_name" android:id="#+id/TextView_class1_building" android:textColor="#color/Button_Text1"> </TextView>
<TextView android:text="#+id/TextView01" android:layout_below="#+id/TextView_class1_building" android:layout_alignLeft="#+id/TextView_class1_building" android:layout_alignRight="#+id/TextView_class1_building" android:id="#+id/TextView_class1_room" android:textColor="#color/Button_Text1" android:layout_height="wrap_content" android:width="0dip" android:layout_width="wrap_content"></TextView>
<Button android:layout_alignParentRight="true" android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="#+id/Button_class1_map" android:minHeight="#dimen/button_small_size" android:minWidth="#dimen/button_small_size" android:maxHeight="#dimen/button_small_size" android:maxWidth="#dimen/button_small_size" android:text="#string/text_map" android:layout_centerVertical="true"></Button>
<Button android:layout_toLeftOf="#+id/Button_class1_map" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignTop="#+id/Button_class1_map" android:layout_alignBottom="#+id/Button_class1_map" android:id="#+id/Button_class1_edit" android:minHeight="#dimen/button_small_size" android:minWidth="#dimen/button_small_size" android:maxHeight="#dimen/button_small_size" android:maxWidth="#dimen/button_small_size" android:text="#string/text_edit" android:layout_centerVertical="true"></Button>
</RelativeLayout>
</LinearLayout>
Why not just use a table layout? It might be a little easier to design because you are talking about columns and rows. The problem with relative is that its going to change based on the others, if you don't want this to happen then using a table layout with x rows and y columns will be a lot easier.
Along with this, using table layout allows you to specific zeroing-in in a particular column or having a particular element consume more than one column.
I have experienced something similar when creating a home screen widget. As widgets have limited options, a TableLayout could not be used. I reverted to something that translates as follows to your situation:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal" >
<LinearLayout
android:id="#+id/RelativeLayout_class1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right"
android:orientation="vertical"
android:visibility="visible" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="short" >
</TextView>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="shrt" >
</TextView>
<TextView
android:id="#+id/TextView_class1_room"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="quite a bit longer" >
</TextView>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:visibility="visible" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button 1" >
</Button>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button 2" >
</Button>
</LinearLayout>
</LinearLayout>
I'm developing an Android application.
I have this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="200px"
android:orientation="vertical">
<TextView
android:id="#+id/gameTitle"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:focusable="false"
android:focusableInTouchMode="false"
android:gravity="left"
android:layout_margin="5px"
android:text="aaaaa"/>
<TextView
android:id="#+id/gameDescription"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:focusable="false"
android:focusableInTouchMode="false"
android:gravity="left"
android:layout_margin="5px"
android:typeface="sans"
android:textSize="16sp"
android:textStyle="bold"
android:text="dddddd"/>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/ButtonsTable"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TableRow
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<Button
android:text="#string/yes"
android:id="#+id/playGame"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<Button
android:text="#string/no"
android:id="#+id/noPlayGame"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</TableRow>
</TableLayout>
</LinearLayout>
I want to put playGame button in the left side of the center, and noPlayGame button in the right side of the center.
Now, both appear aligned to the left of the TableRow.
How can I do this?
Thank you.
EDIT: I've added the complete layout and the modifications suggested by Ashay.
2nd EDIT: THE SOLUTIONI've added to TableLayout the following: android:stretchColumns="0,1". Now the buttons are center aligned but they fill their entiry column!!!
I hope this helps:
<TableRow
android:id="#+id/tableRow1"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_width="wrap_content">
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="#string/stringtxt1"></Button>
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:text="#string/stringtxt2"
android:layout_height="wrap_content"
android:layout_gravity="center|center_horizontal"></Button>
</TableRow>
I posted my code, I hope that will help others users to resolve theirs problems (center content). I wanted to center two buttons in table row, here is my code, which solve this problem:
we indicate which columns will be stretched in prop android:strechColumns="a,b.." using comma-delimited list
<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/buttonGroup"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:stretchColumns="0,1" >
<TableRow>
<Button
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/button1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/button1Name"
android:layout_gravity="right"/>
<Button
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/button2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/button2Name"
android:layout_gravity="left"/>
</TableRow>
</TableLayout>
I hope that it will help. Sorry for my english :/
For centering a single button on a single row:
<TableRow android:id="#+id/rowNameHere"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:gravity="center">
<Button android:id="#+id/btnDoStuff"
android:text="Do Stuff" />
</TableRow>
After reviewing the above answers, I grabbed a few things from each answer and this worked for me.
I added two dummy textviews to align my button in the center.
<TableRow>
<TextView
android:text=""
android:layout_weight=".25"
android:layout_width="0dip"
/>
<Button
android:id="#+id/buttonSignIn"
android:text="Log In"
android:layout_height="wrap_content"
android:layout_weight=".50"
android:layout_width="0dip"
/>
<TextView
android:text=""
android:layout_weight=".25"
android:layout_width="0dip"
/>
</TableRow>
Remove this line <TableRow android:layout_gravity="center">
And give android:fill_containt in table row for both height & width
EDITED ANSWER:
Well, I'm so sorry for the last posts spelling mistake
Through XML it seems impossible for TableLayout. You need to set this UI in code in oncreate.
In your java file you can set those by using below.
playGame.setWidth(ScreenWidth()/2-var);
noPlayGame.setWidth(ScreenWidth()/2-var);
here var can be used to set the distance between these 2 buttons like 10 or 30.
Also, your xml will get change as follows:
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/ButtonsTable"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TableRow
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:gravity="center">
<Button
android:text="yes"
android:id="#+id/playGame"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"/>
<Button
android:text="no"
android:id="#+id/noPlayGame"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"/>
</TableRow>
</TableLayout>
The method ScreenWidth() can be used for getting width of the screen through these methods
private int ScreenWidth() {
DisplayMetrics dm=new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(dm);
String width=""+dm.widthPixels;
return Integer.parseInt(width);
}