I have a problem while placing the buttons in my xml file.
Now what I want is that the "ok" button at the bottom should come below the mileage edit text that is at the second last strip. I am using a scroll view before the button. Also I am using a single image as a background.
How is it possible that all my buttons in my application only come on the second last strip (gray color)? The rest of the layout should come in between (i.e. between top gray strip and the bottom gray strip).
I tried using margin_top or margin_bottom in 'dp' but its not coming properly plus on every other phone the layout of button changes. Here is my code (.xml file):
<?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"
android:background="#drawable/menu"
android:padding="10dp">
<ScrollView
android:id="#+id/scv"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="105dp"
android:layout_marginBottom="105dp" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<EditText
android:id="#+id/editText1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:ems="10"
android:hint="Year"
android:inputType="date" />
<Spinner
android:id="#+id/spinner1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/editText1"
android:layout_alignRight="#+id/editText1"
android:layout_below="#+id/editText1"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp" />
<Spinner
android:id="#+id/spinner2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/spinner1"
android:layout_alignRight="#+id/spinner1"
android:layout_below="#+id/spinner1"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp" />
<Spinner
android:id="#+id/spinner3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/spinner2"
android:layout_alignRight="#+id/spinner2"
android:layout_below="#+id/spinner2"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp" />
<EditText
android:id="#+id/editText2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/spinner3"
android:layout_below="#+id/spinner3"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:ems="10"
android:hint="Mileage"
android:inputType="number" />
</RelativeLayout>
</ScrollView>
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="10dp"
android:text="OK" />
</RelativeLayout>
You should never use a single image for your complete layout on Android. That just doesn't run very well as you have so many different screen sizes.
I'd recommend you cut the graphic out in portions and make it stretch so it will fit depending on the screen size. It's not really possible to help you much more based on the poorly copy paste of your own code and the lack of visualization of what you want the graphic to look like.
For your button xml, try
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/scv"
android:layout_centerHorizontal="true"
android:text="OK" />
You can add android:layout_marginTop="5sp" changing the value if necessary.
This will place your button below your scrollview.
Related
I have an app which is supposed to work on different layouts of phone and tablets.
On my phone it uses a vertical layout and uses all the screen while on my tablet it stays tiny instead of using the whole screen.
I used a relative layout but referring to fill_parent for widths thinking that this was the right way to use all the parent's space (the whole screen).
Here is my code:
<?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"
android:background="#bbbbbb" >
<!-- Parte1 -->
<TextView
android:id="#+id/textView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:text="Distanza Km m Gare"
android:textAppearance="?android:attr/textAppearanceLarge" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:layout_alignParentLeft="true"
android:layout_below="#+id/textView1"
android:onClick="OnClickButton1"
android:text="#string/calcola" />
<EditText
android:id="#+id/editText1_1"
android:layout_width="#dimen/single_textEdit"
android:layout_height="50dp"
android:layout_marginLeft="10dp"
android:background="#fff123"
android:inputType="numberDecimal"
android:singleLine="true"
android:textSize="40sp"
android:gravity="center"
android:imeOptions="actionDone"
android:layout_toRightOf="#+id/button1"
android:nextFocusDown="#+id/editText1_2"
android:layout_below="#+id/textView1"/>
<EditText
android:id="#+id/editText1_2"
android:layout_width="#dimen/double_textEdit"
android:layout_height="50dp"
android:layout_below="#+id/textView1"
android:layout_marginLeft="10dp"
android:background="#fff123"
android:layout_toRightOf="#+id/editText1_1"
android:gravity="center"
android:inputType="numberDecimal"
android:nextFocusDown="#+id/editText2_1"
android:singleLine="true"
android:textSize="40sp" />
<Spinner
android:id="#+id/gare_spinner"
android:layout_width="fill_parent"
android:layout_below="#+id/textView1"
android:layout_height="50dp"
android:layout_marginLeft="10dp"
android:background="#layout/border"
android:gravity="center_vertical|center_horizontal"
android:dropDownSelector="#drawable/ic_launcher"
android:layout_toRightOf="#+id/editText1_2" />
....
Make a new layout folder. Your normal folder is just called layout, but make a second one called layout-sw600dp. This is for screen width of 600 pixels, so basically for tablets. You can make the exact same xml layouts and just give them different dimensions in here.
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
I have a linear layout with some EditText and Buttons. And when running the app on smaller screens, the layout gets cut off (not all elements are displayed). I've added <supports-screens ...> in manifest, but it's still not working. Is there a way to display all elements?
Edit: Code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:id="#+id/textView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textStyle="bold"
android:text="#string/tx" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/tx1"
android:textAppearance="?android:attr/textAppearanceMedium" />
<EditText
android:id="#+id/editText1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:hint="#string/ed1"
android:inputType="number" >
<requestFocus />
</EditText>
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/tx2"
android:textAppearance="?android:attr/textAppearanceMedium" />
<EditText
android:id="#+id/editText2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/ed2"
android:inputType="textCapCharacters|textAutoCorrect"
android:ems="10" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/tx3"
android:textAppearance="?android:attr/textAppearanceMedium" />
<EditText
android:id="#+id/editText3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/ed3"
android:inputType="textCapCharacters|textAutoCorrect"
android:ems="10" />
<RadioGroup
android:id="#+id/radioGroup1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<RadioButton
android:id="#+id/radio1"
android:layout_width="304dp"
android:layout_height="wrap_content"
android:checked="true"
android:text="#string/radioTX1" />
<RadioButton
android:id="#+id/radio2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/radioTX2" />
<RadioButton
android:id="#+id/radio3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/radioTX3" />
</RadioGroup>
<Button
android:id="#+id/button1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:onClick="doSomething"
android:text="#string/bt1" />
You should make sure to make your layouts as flexible as possible. This includes using things like RelativeLayouts, and things like layout_weight. You can also preview your layouts in the android layout editor by changing the screen size ... this ensures that it will behave as expected on smaller (or larger) screen sizes.
The mindset should be similar to web developers making responsive layouts. Some great documentation/guidance from Google can be found here:
http://developer.android.com/training/multiscreen/screensizes.html
Well, if there isn't enough space to show all this on a small screen, then you should put this all these inside a ScrollView so that the user can scroll the page. Android won't add a ScrollView automatically for you.
You can do this for all sizes of screen (shouldn't hurt anyone even if they have a bigger screen) or only for the smaller screens.
So here is my XML. I am trying to fill the whole screen and when I view it in Eclipse, it fills the whole screen. However, when I open it on my phone, everything is smaller and there are views overlaying. I don't know what's going on.
<?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/front"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:text="Front"
android:textAppearance="?android:attr/textAppearanceMedium" />
<EditText
android:id="#+id/frontInput"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_below="#+id/front"
android:ems="10" >
<requestFocus />
</EditText>
<TextView
android:id="#+id/back"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/frontInput"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:text="Back"
android:textAppearance="?android:attr/textAppearanceMedium" />
<EditText
android:id="#+id/backInput"
android:layout_width="fill_parent"
android:layout_height="200dp"
android:layout_alignParentLeft="true"
android:layout_below="#+id/back"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:ems="10"
android:inputType="textMultiLine" />
<TextView
android:id="#+id/background"
android:layout_width="wrap_content"
android:layout_marginLeft="5dp"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/backInput"
android:layout_marginTop="44dp"
android:text="Background"
android:textAppearance="?android:attr/textAppearanceMedium" />
<Spinner
android:id="#+id/colors_spinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/backInput"
android:layout_marginLeft="30dp"
android:layout_marginTop="22dp"
android:layout_toRightOf="#+id/background"
/>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/colors_spinner" >
<Button
android:id="#+id/save"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Save" />
<Button
android:id="#+id/cancel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Cancel" />
</LinearLayout>
</RelativeLayout>
this is what it looks in Eclipse.
But I get this:
Another thing is that when I open the keyboard my view does not rezise so you can see everything but smaller so you can see what you are typing etc... I have added the android:windowSoftInputMode="adjustResize" for the specific activity but nothing is happening... Any ideas? Thanks guys...
If you use adjustResize it will resize everything to fit as best it can. The other option is adjustPan, which will scroll the window so that the focused EditText will be in the view and the caret visibile. Other than that there's no real way to control things.
In your case you have some exact heights in there, so it won't work well with a resize, since you can't shrink an exact height.
Also, never trust how things look in Eclipse. Its an attempt to lay things out that shares no code with how Android really does things, it should be viewed as an estimate. Real layouts may end up looking significantly different, especially for complex layouts.
I'm having problems adding a button to my app using relative layout.When I use the graphical layout tool it shows up when i drag and drop the button but when I compile and run the apk on the emulator only the original 'sms' button is there.The new button should of been to the left of the 'sms' button
and here's the code from the xml file
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FF000000" >
<EditText
android:id="#+id/edit_message_input"
android:layout_width="match_parent"
android:layout_height="100dp"
android:hint="#string/edit_message_input"
android:inputType="textMultiLine"
android:background="#ff000000"
android:textColor="#CCCCCC"
/>
<Button
android:id="#+id/button2"
android:layout_width="150dp"
android:layout_height="40dp"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="36dp"
android:text="#string/translate_to_english"
android:onClick="sendToEnglish"
android:background="#CCCCCC"
/>
<Button
android:id="#+id/button1"
android:layout_width="150dp"
android:layout_height="40dp"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:text="#string/translate_to_text"
android:onClick="sendToText"
android:background="#CCCCCC" />
<EditText
android:id="#+id/editText1"
android:layout_width="wrap_content"
android:layout_height="100dp"
android:layout_above="#+id/button3"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_marginBottom="31dp"
android:ems="10"
android:hint="#string/edit_message_output"
android:inputType="textMultiLine"
android:background="#ff000000"
android:textColor="#CCCCCC" />
<Button
android:id="#+id/button3"
android:layout_width="150dp"
android:layout_height="40dp"
android:layout_alignParentBottom="true"
android:layout_alignRight="#+id/button2"
android:layout_marginRight="22dp"
android:background="#CCCCCC"
android:onClick="sendSMS"
android:text="#string/send_as_sms" />
<!-- test save button -->
<Button
android:id="#+id/save_word_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:background="#cccccc"
android:text="#string/save_word" />
</RelativeLayout>
Any help or pointers much appreciated!
Don't assume what ever you design in XML layout will looks nice in every device, because there are wide range of android devices out in market.
Don't take fixed height/width layout if you want to support multiple screens.
android:layout_width="150dp"
android:layout_height="40dp"
Instead, you can mention "wrap_content" or "fill_parent".
To be honest, I suggest you head over to the android developer docs and spend some time reading the recommendations on designing interfaces.
Two particularly useful sections are:
http://developer.android.com/design/style/metrics-grids.html
and
http://developer.android.com/guide/topics/ui/layout/relative.html
http://developer.android.com/reference/android/widget/RelativeLayout.LayoutParams.html
You have a number of fixed dimensions in your xml and conflicting alignment attributes which appear to be causing a few problems.