I am coming back to Android after a really long absence and it turns out, I've pretty much forgotten everything.
I want to a build a UI like this:
The buttons Item1 and Item2 trigger a move to another page, while the Perform Action button does an action in place. And the ad should be docked to the bottom of the screen.
What layout should I pick to achieve this UI?
I am targeting Android 2.2 (if that matters).
I believe going for a Relative Layout helps. May be this can help, although you might want to reshuffle things a bit.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/relativeLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="42dp"
android:text="#string/item1" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/button1"
android:layout_below="#+id/button1"
android:layout_marginTop="48dp"
android:text="#string/item2" />
<Button
android:id="#+id/button4"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="#string/ad_goes_here" />
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/button2"
android:layout_centerHorizontal="true"
android:layout_marginTop="62dp"
android:text="#string/perform_action" />
</RelativeLayout>
I think using Linear Layout is best
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<Button
android:id="#+id/btn1"
android:text="Item1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_gravity="center"
/>
<Button
android:id="#+id/btn2"
android:text="Item2"
android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_gravity="center"
/>
<Button
android:id="#+id/btn3"
android:text="Perform Action"
android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_gravity="center"
/>
<Button
android:id="#+id/btn4"
android:text="Ad Goes here"
android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_gravity="center"
/>
</LinearLayout>
You can use a LinearLayout with android:orientation="vertical". However there are many other layouts which are able to achieve your desired UI. I prefer to just stick to LinearLayout because I could just set it to either vertical or horizontal.
You can continue with relative layout in this layout you need to use list-view(simple) and drag button at below of listview. and at the bottom place your advertice sdk area will be stay
For more detail....
Related
I was thinking it would be something like android:layout_startOf"centerHoriztonal" or something like that but I have searched and couldn't find anything. If it helps I am trying to make a soundboard app where all the buttons can be the same size across multiple device screens.
try this xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/button1"
android:text="Here is button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
/>
<Button
android:id="#+id/button2"
android:text="Here is button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
/>
</RelativeLayout>
You can wrap the button(s) inside a horizontal LinearLayout and use layout_weight to divide the screen in half and then layout_alignParentLeft/layout_alignParentRight to align the buttons inside a RelativeLayout that takes up exactly half the screen width.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<RelativeLayout
android:layout_width="0px"
android:layout_height="wrap_content"
android:layout_weight="1">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:text="Button Text"
/>
</RelativeLayout>
<RelativeLayout
android:layout_width="0px"
android:layout_height="wrap_content"
android:layout_weight="1">
</RelativeLayout>
</LinearLayout>
Another way to do it is to create a dummy view object that is centered horizontally in the parent view, and align your buttons to the left or right of it:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:id="#+id/dummyview"
android:layout_width="0px"
android:layout_height="0px"
android:layout_centerHorizontal="true"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#id/dummyview"
android:text="Button Text"/>
</RelativeLayout>
Are you sure you want the same size of buttons in all devices? People try to avoid it and make make view elements flexible.
Anyways if you want to set same size just directly write in layout
android:layout_width = "#dimen/valueForButton"; //some absolute value
For starting at same point, just add all buttons inside LinearLayout and make some operations there, such as
android:layout_gravity = "center_horizontal";
Your layout must be something like this:
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:orientation="vertical" >
<Button
android:id="#+id/button1"
android:layout_width="#dimen/valueForButton"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button2"
android:layout_width="#dimen/valueForButton"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="#+id/button3"
android:layout_width="#dimen/valueForButton"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
I have the following code defined in my xml file, but I don't see the buttons getting displayed. I have read way too many posts, and pretty much tried all possible combinations, but no luck :( I'd really appreciate if someone could help me here.
<?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="vertical" >
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="100dp"
android:gravity="center"
android:text="#string/hello_world"
android:textSize="32sp" />
<EditText
android:id="#+id/editText1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:hint="#string/ad_desc"
android:inputType="text" />
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/phone" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/sms" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/maps" />
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/video" />
</LinearLayout>
I would like to see my App Name on top (Text view - #string/hello_world), right beneath it, a big box that allows me to EditText(#string/ad_desc), and beneath that, all my buttons. The button should be at the bottom, next to each other aligned in this manner - http://www.mkyong.com/android/android-linearlayout-example/ (Linear layout - Horizontal example), except I want my buttons to be at the bottom, and not at the top. Instead I see something else (Image attached)
Please feel free to ask me if you'd like me to attach anything else. I am new to Android programming, and this is totally beyond me on why it isn't working.
If you want to align your Buttons at the bottom then you are better off with a RelativeLayout as the root. Try changing it to the following and notice the properties
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="100dp"
android:text="#string/hello_world"
android:textSize="32sp" />
<EditText
android:id="#+id/editText1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="#string/ad_desc"
android:inputType="text"
androidi:layout_below="#id/textView2" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"/>
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/phone" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/sms" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/maps" />
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/video" />
</LinearLayout>
</RelativeLayout >
You may have to add some margin to the TextView and EditText for appropriate spacing but this should give you your TextView with the EditText below it and your Buttons in a horizontal LinearLayout aligned at the bottom of the screen.
Edit
Notice this property
androidi:layout_below="#id/textView2"
of the EditText and this property
android:layout_alignParentBottom="true"
Of the LinearLayout that I added.
The easiest thing is to create a new relative layout, and place the item that you need from the palette.
Or start to try and learn to make matrioska layout via xml ;)
http://developer.android.com/guide/topics/ui/declaring-layout.html
this my xml file of an activity. It works well except in the case of rotation. In my mobile, if AutoRotation is enabled, then the screen is also rotated. During rotation it doesn't show the Button named "Exit". I've tried to scroll to bottom, but I can't able to scroll.
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/scrollView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:scrollbars="none" >
<AbsoluteLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/ll_buttons"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical|center_horizontal"
android:layout_below="#+id/slogon"
android:layout_marginTop="50dip">
<ImageView
android:id="#+id/image1"
android:layout_width="match_parent"
android:layout_height="481dp"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:background="#drawable/ic_launcher" />
</LinearLayout>
<Button android:layout_height="wrap_content" android:textColor="#FF0000" android:textStyle="bold" android:id="#+id/button2" android:layout_width="wrap_content" android:text="EXISTINGFARMER" android:layout_x="161dip" android:layout_y="157dip"></Button>
<Button android:layout_height="wrap_content" android:textColor="#FF0000" android:textStyle="bold" android:id="#+id/button1" android:layout_width="wrap_content" android:text="NEW FARMER" android:layout_x="34dip" android:layout_y="157dip"></Button>
<Button android:layout_height="wrap_content" android:textColor="#FF0000" android:textStyle="bold" android:id="#+id/btn_exit" android:layout_width="100dip" android:text="EXIT" android:layout_x="105dip" android:layout_y="233dip"></Button>
<TextView android:layout_height="wrap_content" android:textStyle="bold" android:textSize="40dip" android:layout_width="wrap_content" android:textColor="#FFEA00" android:id="#+id/heading" android:text="S.V.Sugar Mills" android:layout_x="29dip" android:layout_y="14dip"></TextView>
<TextView
android:id="#+id/subheading"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_x="38dp"
android:layout_y="97dp"
android:text="The New and Old Farmer Details."
android:textColor="#0000A0"
android:textSize="15dip"
android:textStyle="bold" />
</AbsoluteLayout>
</ScrollView>
I didn't understand the mistake, I someone know how to scroll during rotation, please help help me. Thanks in advance
First of all you have to put your all the widgets in scrollview if you want to support scroll in portrait or landscape mode.
Please use scrollview . Scrollview supports only one direct child. So you need to take relative layout or linear layout as child of scrollview, put all your widget controll in that child layout.
Look here for scrollview tutorial.
I'm trying to implement a layout in android which consists of several TextViews and some buttons. I want one of the TextViews (which is a log of the game I'm implementing) to take up all available space it has, and be scrollable if there's too much text to display. However, I can't seem to get it to no overlay views below it when it expands - instead, it stop at the bottom of the screen:
In this screenshot, there's a "scoreboard" TextView, a "hand" TextView, a "log" TextView and a LinearLayout with several buttons. All TextViews have dynamic length, but the first two aren't supposed to take up more than a few lines. The Trouble is, that the log expands and covers the button below it (on the plus side, it is scrollable). Can you show me how to fix this?
Here's the layout XML:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/scoreboard"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:text="Scoreboard" />
<TextView
android:id="#+id/handinfo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/scoreboard"
android:text="Hand" />
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" >
<Button
android:id="#+id/stay"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:enabled="false"
android:text="Stay" />
<Button
android:id="#+id/leave"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:enabled="false"
android:text="Leave" />
<Button
android:id="#+id/pay"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:enabled="false"
android:text="Pay" />
<Button
android:id="#+id/payWithWild"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:enabled="false"
android:text="Pay Wild" />
<Button
android:id="#+id/dontPay"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:enabled="false"
android:text="Don't Pay" />
</LinearLayout>
<ScrollView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/handinfo" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/log"
android:text="" />
</ScrollView>
</RelativeLayout>
Add the following attributes to your ScrollView and it should fix the display:
android:layout_below="#id/handinfo"
android:layout_above="#id/linearLayout1"
I have a problem with centering text on buttons in a layout that I am working on. Please see the screenshot below (taken within eclipse's "Graphical Layout" tab):
I'm not sure what's causing this. I tried playing around with the individual layout properties of the buttons, but this has not had any effect. The following is my layout hierarchy:
LinearLayout (orientation is "vertical")
...
RelativeLayout
Button ("MM/DD/YYYY")
Button ("HH:MM")
TextView ("to")
Button ("MM/DD/YYYY")
Button ("HH:MM")
...
LinearLayout (orientation is "horizontal")
Button ("Close"; layout_weight is "1")
Button ("Reserve Room"; layout_weight is "1")
XML:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="1024dp"
android:layout_height="640dp"
android:orientation="vertical"
android:padding="10dp" >
...
<RelativeLayout
android:id="#+id/dateTimePickersLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Button
android:id="#+id/startingDateButton"
android:layout_width="244dp"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:text="#string/mm_dd_yyyy" />
<Button
android:id="#+id/endingTimeButton"
android:layout_width="244dp"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:text="#string/hh_mm" />
<Button
android:id="#+id/endingDateButton"
android:layout_width="244dp"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_toLeftOf="#+id/endingTimeButton"
android:text="#string/mm_dd_yyyy" />
<Button
android:id="#+id/startingTimeButton"
android:layout_width="244dp"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_toRightOf="#+id/startingDateButton"
android:text="#string/hh_mm" />
<TextView
android:id="#+id/toTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerInParent="true"
android:text="#string/to"
android:textSize="18dp" />
</RelativeLayout>
...
<LinearLayout
android:id="#+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:id="#+id/closeButton"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/close" />
<Button
android:id="#+id/reserveRoomButton"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/reserve_room" />
</LinearLayout>
</LinearLayout>
Anyone have any ideas what may be causing this?
Thank you for your help!
I ended up updating eclipse and that fixed the problem. I was extremely disappointed that restarting the IDE did not change anything, especially since the XML had not posed any problems for others. Thanks for the help, everyone!
Make sure the width of your buttons at the bottom is set to 0dp. Also make sure that their parent LinearLayout has a width set to match_parent.