Im new to Xamarin, i'm seeing tutorials like the ones here:
https://learn.microsoft.com/en-us/xamarin/android/get-started/hello-android/hello-android-quickstart?tabs=vswin
and the axml designer is supposed to "snap" controls to the border of the other controls you have listed, but mine isn't working this way. It's just piling them all on top of each other. Any clue how to remedy this? I've searched for a while but it seems like no one else is having this issue.
For example, they're all just being placed at the top left corner of the pane and even when placed 'correctly' at the bottom of another control, they're just snapping up to the top left corner.
Edit: Sharing XML
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:minWidth="25px"
android:minHeight="25px"
tools:gridSpec="1|8|#0093eeff|K:#ee8700ff:16,l:72,l:16,r|S:#83ee00ff:16,0,l:16,56,l:16,0,r">
<TextView
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minWidth="25px"
android:minHeight="25px"
android:id="#+id/textView1"
android:layout_toLeftOf="#id/textView1"
android:layout_toRightOf="#id/editText1" />
<TextView
android:text="Text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/PhoneNumberText"
android:id="#+id/textView2" />
<Button
android:text="Translate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/PhoneNumberText"
android:id="#+id/TranslateButton"
android:layout_above="#id/PhoneNumberText" />
<EditText
android:layout_height="wrap_content"
android:layout_below="#id/PhoneNumberText"
android:id="#+id/PhoneNumberText"
android:layout_toLeftOf="#id/textView1"
android:layout_marginTop="0.0dp"
android:layout_marginBottom="0.0dp"
android:text="1-855-xamarin"
android:layout_width="wrap_content" />
</RelativeLayout>
Xamarin Controls piling on top of each other
Your .axml has several errors.
In your textView2:
<TextView
...
android:id="#+id/textView1"
android:layout_toLeftOf="#id/textView1"
android:layout_toRightOf="#id/editText1" />
//I didn't find where you define the id -- editText1
And please note: Circular dependencies cannot exist in RelativeLayout
What is the layout you want to achieve?
Something like the image you post in the above link?
If so, you could modify your layout file to:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:text="Enter a Phoneword:"
android:textAppearance="?android:attr/textAppearanceLarge"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/textView1" />
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/PhoneNumberText"
android:text="1-855-XAMARIN" />
<Button
android:text="Translate"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/TranslateButton" />
<TextView
android:textAppearance="?android:attr/textAppearanceLarge"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/TranslatedPhoneWord" />
</LinearLayout>
I had the same issue and resolved reading the notes in the tutorial:
Newer releases of Visual Studio contain a slightly different app
template.
Instead of activity_main.axml, the layout is in content_main.axml.
The default layout will be a RelativeLayout. For the rest of the steps on this page to work you should change the <RelativeLayout> tag
to and add another attribute
android:orientation="vertical" to the LinearLayout opening tag.
Making those changes fixed my problem
Related
What I'm Trying to do
At the moment I'm creating a design for my Activity, which has different kind of "boxes" in it. Every of those "boxes", has diffrent informations in it. I created the design by hand on a piece of paper, but I won't get the idea down in my .xml!!
Question
On the bottom of this post you'll find a copyed "box" which I'd like to create for my app. Please help me to realize this, because I really don't get how to do this in my XML! I'm working with Android 4.0 (ICS).
Something like this should work:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TextView
android:id="#+id/box_title"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Box Title" />
<LinearLayout
android:id="#+id/box_content"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal" >
<LinearLayout
android:id="#+id/box_content"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical" >
<TextView
android:id="#+id/box_content_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hans Max" />
<TextView
android:id="#+id/box_content_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Maxiburger 12" />
<TextView
android:id="#+id/box_content_3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="8002, Muster" />
</LinearLayout>
<ImageButton
android:id="#+id/box_button"
android:layout_weight="5"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
</LinearLayout>
</LinearLayout>
I give you the pseudo layout:
<RelativeLayout>
<TextView
full width
id:infobox/>
<Button
layoutParentRight
below infobox/>
<TextView
layout_below infobox
toLeftOf button/>
// repeat the textView above and always below the previous one
</RelativeLayout>
With LinearLayouts:
<LinearLayout>
<TextView infobox/>
<LinearLayout>
<LinearLayout>
<TextView />
<TextView />
<TextView />
</LinearLayout>
<Button/>
</LinearLayout>
</LinearLayout>
As you see it is much more complex and bloated. As I always get confused by horizontal/vertical orientation I leave this to you to find out :)
Just experiment and if you can't get it to work, update your answer with the layout you tried.
I can't find a solution for that. I managed to solve the problem of NOT overlapping the scrollview with my button+textview at the bottom, but I still can't manage to have the scrollview starting from the top of the screen rather than from just above my button.
Note that even the bottom linearlayout (button+textview) isn't exactly what I wanted. I can't find a way to have everything positioned correctly.
Eclipse is not helping either, since the text view of the xml keeps changing under my mouse, making it extremely annoying. I had to open an external editor to edit it.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/RelativeLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center|top" >
<LinearLayout
android:id="#+id/LinearLayout2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true" >
<TextView
android:id="#+id/text_phrase"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:text="#string/play" />
</LinearLayout>
<ScrollView
android:id="#+id/scrollView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/LinearLayout2"
android:layout_alignParentLeft="true"
android:layout_marginBottom="18dp" >
<LinearLayout
android:id="#+id/layout_player_checkboxes"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="top"
android:orientation="vertical" >
<CheckBox
android:id="#+id/checkBox1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="CheckBox" />
</LinearLayout>
</ScrollView>
if you add android:layout_alignParentTop="true" and android:layout_weight="1" to your scrollview while leaving the rest of what you have already, it should start at the top and fill the screen below until it comes to linearlayout2. (Same applies if you decide to switch to a listview as rajesh.adhi suggested)
Oh, you seem to be missing a </RelativeLayout> there too.
I am attempting to create some modular UI elements as described at Android Developers - Creating Reusable UI Components, unfortunately I'm not getting the desired result.
The article states:
you can override all the layout parameters. This means that any android:layout_* attribute can be used with the tag.
My XML code looks like this (relevant parts):
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<include android:id="#+id/radio_group"
layout="#layout/radio_buttons"
android:layout_marginTop="75dp"
/>
<include android:id="#+id/player_group"
layout="#layout/player_buttons"
android:layout_alignParentBottom="true"
/>
<EditText android:id="#+id/text_field"
android:singleLine="true"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:hint="Enter Your Login ID:"
android:layout_below="#id/player_group"
/>
Here is the first of the included layouts:
<RadioGroup
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/radio_group"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:layout_marginTop="20dp"
android:layout_marginLeft="20dp"
android:layout_marginBottom="20dp"
>
<RadioButton android:id="#+id/radio01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Song #1"
android:paddingLeft="45dp"
/>
[two more identical buttons]
<TextView android:id="#+id/choice"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="you have selected:"/>
</RadioGroup>
and the other:
<?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">
<Button android:text="btn01"
android:id="#+id/Button01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
/>
<Button android:text="#+id/Button02"
android:id="#+id/Button02"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
/>
<Button android:text="Start Playing"
android:id="#+id/startPlayerBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:onClick="doClick"
/>
</LinearLayout>
Unfortunately - this results in all the included UI elements bunched together on top of each other at the top of the screen. The EditText element aligns correctly, but none of the included elements will respond to any overrided attributes. I have tried a number of different ones with the same non-results.
Note: I also tried putting an android:layout_alignParentBottom="true" parameter into the included layouts thinking that it might need to be in there for it to be overridden, but got the same non-result.
also - the marginTop param doesn't do anything either.
So - any idea what I'm doing wrong?? This is driving me crazy!
Note: there was a question asked a little while ago about how to style included layouts, the answer was a reference to the page on Reusable UI Components. Just want to say that I have read that question and the answer and it hasn't helped.
There is a bug when using include where included layouts are not positioned correctly unless you specify values for android:layout_width and android:layout_height. Try this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<include android:id="#+id/radio_group"
layout="#layout/radio_buttons"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="75dp"
/>
<include android:id="#+id/player_group"
layout="#layout/player_buttons"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/radio_group"
/>
<EditText android:id="#+id/text_field"
android:singleLine="true"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:hint="Enter Your Login ID:"
android:layout_below="#id/player_group"
/>
Hi everyone i've been trying to make this work for quite a while and i feel stuck, i found a component on web wich is pretty nice, it allows me top to bottom sliding, the default sample is pretty easy the bar goes on top and the goes down:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<Button
android:id="#+id/button_open"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="#string/open"
android:layout_centerInParent="true"
android:visibility="gone" />
<TextView android:layout_height="wrap_content" android:textAppearance="?android:attr/textAppearanceMedium" android:layout_width="wrap_content"
android:text="#string/default_feed_detail" android:id="#+id/txtDetailNews" ></TextView>
<it.sephiroth.demo.slider.widget.MultiDirectionSlidingDrawer
xmlns:my="http://schemas.android.com/apk/res/it.sephiroth.demo.slider"
android:id="#+id/drawer"
my:direction="topToBottom"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
my:handle="#+id/handle"
my:content="#+id/content">
<include
android:id="#id/content"
layout="#layout/pen_content" />
<ImageView
android:id="#id/handle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/sliding_drawer_handle_bottom" />
</it.sephiroth.demo.slider.widget.MultiDirectionSlidingDrawer>
</RelativeLayout>
And it renders like this quite nicely:
But now i want to have a header image between the text and between then the custom slidingdrawer it just not render the text
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="fill_parent">
<Button android:id="#+id/button_open" android:layout_width="100dp"
android:layout_height="wrap_content" android:text="#string/open"
android:layout_centerInParent="true" android:visibility="gone" />
<ImageView android:id="#+id/header" android:src="#drawable/header"
android:layout_height="wrap_content" android:layout_width="wrap_content"></ImageView>
<it.sephiroth.demo.slider.widget.MultiDirectionSlidingDrawer
xmlns:my="http://schemas.android.com/apk/res/it.sephiroth.demo.slider"
android:layout_below="#id/header"
android:id="#+id/drawer" my:direction="topToBottom"
android:layout_width="fill_parent" android:layout_height="wrap_content"
my:handle="#+id/handle" my:content="#+id/content">
<include android:id="#id/content" layout="#layout/pen_content" />
<ImageView android:id="#id/handle" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:src="#drawable/sliding_drawer_handle_bottom" />
</it.sephiroth.demo.slider.widget.MultiDirectionSlidingDrawer>
<TextView android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:layout_below="#id/drawer"
android:layout_width="wrap_content" android:text="#string/default_feed_detail"
android:id="#+id/txtDetailNews"></TextView>
</RelativeLayout>
and now the text is gone.... any suggestion with Relative Layout, or If anyone has an idea or component so it can be done easly that would be great too thanks!!
Edit
I found something interesting with the hierarchyviewer using the following layout to arrange the components:
<it.sephiroth.demo.slider.widget.MultiDirectionSlidingDrawer
xmlns:my="http://schemas.android.com/apk/res/it.sephiroth.demo.slider"
android:layout_above="#id/txtDetailNews"
android:id="#+id/drawer" my:direction="topToBottom"
android:layout_width="fill_parent" android:layout_height="wrap_content"
my:handle="#+id/handle" my:content="#+id/content">
<include android:id="#id/content" layout="#layout/pen_content" />
<ImageView android:id="#id/handle" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:src="#drawable/sliding_drawer_handle_bottom" />
</it.sephiroth.demo.slider.widget.MultiDirectionSlidingDrawer>
it seems that the components that are inside the Drawer are being render and take all the space as shown here:
First off, you really need to proof-read your questions. You would probably have had more response by now if you had fixed some very basic grammar mistakes and added a few clarifications to what you wrote.
Here are a couple things to try: move the TextView above the sliding drawer in the XML, as you did in the first layout. Leave the android:layout_below="#id/drawer" attribute- but if it does not work, try removing that.
Try that, we'll go from there.
Try: android:layout_alignWithParentIfMissing="#id/header" on the last TextView.
Well i had to do a little workaround with this since the content on the background took the space, and the Textview was giving up its space what i did was the following:
I place the TextView after the header imageView with a paddingTop of a 100dip.
android:layout_width="wrap_content" android:text="#string/default_feed_detail"
android:id="#+id/txtDetailNews" android:layout_alignWithParentIfMissing="#id/header" ></TextView>
Then on the MultiDirectionalSlidingDrawer i set the content with a android:layout_above="#id/txtDetailNews"
And that pretty much solve the problem rendered the sliding between the Content and the header, Thank you all for helping me out... Specially Nathan Fig you earn those 50 man (y)
A custom Dialog box with a RelativeLayout contains a Button widget that won't change its margins, regardless of direction. Here's the xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="match_parent"
android:orientation="horizontal" android:background="#99000000">
<TextView android:id="#+id/dialogtitle" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:text="Some text" />
<TextView android:id="#+id/dialogtext" android:layout_width="300dp"
android:layout_height="wrap_content" android:textSize="15dp"
android:layout_alignParentLeft="true" android:layout_below="#id/dialogtitle"
android:paddingLeft="8dp" />
<Button android:id="#+id/dialogbuttoninfo" android:layout_width="80dp"
android:layout_height="wrap_content" android:text="Doesn't care about margins"
android:layout_alignParentRight="true" android:layout_marginLeft="128dp" />
</RelativeLayout>
Padding works but only moves the text inside the button. Any suggestions?
This seems crappy but have you tried putting it all in a LinearLayout instead? or perhaps removing android:orientation="horizontal". I dont think RelativeLayout cares about orientation from what I've seen. Also I think, but might be wrong, that if you do a LinearLayout then you won't need to have android:layout_alignParentLeft="true" in there either.
After cleaning it up a bit (sorry but its so hard to read when its compressed as it was in the question) you also didn't state where the last TextView , dialogbuttoninfo was supposed to be relative to everything else, I think you have to do that for Relative layouts to behave properly, I've had some squirrely things happen.
<?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"
android:background="#99000000">
<TextView
android:id="#+id/dialogtitle"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Some text" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<TextView
android:id="#+id/dialogtext"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:textSize="15dp"
android:layout_alignParentLeft="true"
android:paddingLeft="8dp" />
<Button
android:id="#+id/dialogbuttoninfo"
android:layout_width="80dp"
android:layout_height="wrap_content"
android:text="Doesn't care about margins"
android:layout_alignParentRight="true"
android:layout_marginLeft="128dp" />
</LinearLayout>
</LinearLayout>
You may need to align the left of the button against something before the margin has real meaning.