I am trying out a simple layout exercise but am struggling to get even a simple layout to work.
In the designer it is as follows:
But when run, the output on an emulator or real phone is:
The Xml markup is as follows:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.hceng.myapplication.MainActivity"
tools:layout_editor_absoluteY="81dp"
tools:layout_editor_absoluteX="0dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="E-mail:"
tools:layout_editor_absoluteY="52dp"
tools:layout_editor_absoluteX="18dp" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Click Me!"
tools:layout_editor_absoluteX="148dp"
tools:layout_editor_absoluteY="96dp" />
<EditText
android:id="#+id/editText"
android:layout_width="266dp"
android:layout_height="36dp"
android:ems="10"
android:inputType="textEmailAddress"
tools:layout_editor_absoluteX="66dp"
tools:layout_editor_absoluteY="41dp" />
</android.support.constraint.ConstraintLayout>
I am new to this markup language, but I thought it seems simple enough with absolute positioning throughout. In any case, the layout seen in the designer is what I want. Why is the above not working?
According to the documentation
When you drop a view into the Layout Editor, it stays where you leave it even if it has no constraints. However, this is only to make editing easier; if a view has no constraints when you run your layout on a device, it is drawn at position [0,0] (the top-left corner).
This is the reason why you see layout correctly in editor but not on the emulator.
You can try this, if not bound to ConstraintLayout
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.example.hceng.myapplication.MainActivity">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:gravity="center">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/email_tv"
android:text="E-mail:" />
<EditText
android:id="#+id/editText"
android:layout_width="266dp"
android:layout_height="36dp"
android:ems="10"
android:layout_toRightOf="#+id/email_tv"
android:inputType="textEmailAddress" />
</RelativeLayout>
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Click Me!"
android:gravity="center" />
</LinearLayout>
Constraint layout has some limitations but I am not sure if colour is one of them.
First
You could try changing the constraint layout to maybe coordinator layout or relative layout.
If that fails
Maybe, the target SDK version in your Android Manifest is too high, if the target version is higher than phone version, it reverts to defaults. So you could try doing placing a lower target version.
Related
I just started using android studio and I inserted a button and text field. In preview panel looks ok but when I run the app the layout it's different.
This is the xml code:
<android.support.constraint.ConstraintLayout 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:paddingBottom="16dp"
android:paddingTop="16dp"
android:paddingLeft="16dp"
android:paddingRight="16dp"
tools:context="com.example.alexander.myapplication.MainActivity">
<TextView
android:id="#+id/message"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
tools:ignore="HardcodedText" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
tools:layout_editor_absoluteX="119dp"
tools:layout_editor_absoluteY="222dp"
tools:ignore="HardcodedText,MissingConstraints"
android:onClick="buttonClicked"
/>
This is how it looks like
Thank you!
Look at the lines:
tools:layout_editor_absoluteX="119dp"
tools:layout_editor_absoluteY="222dp"
What they say is that you placed the button in an absolute position BUT only in the editor preview.
The button doesn't have real placement values when the app actually running (notice the "editor" prefix in the parameters name).
You need to define actual values in the editor.
Check out this guide on the Android developers site:
Build a Responsive UI with ConstraintLayout
I just solved the problem by setting the layout to RelativeLayout.
enter image description here
please see the pic. How can I fix this error? I tried installing a couple other devices, checked some function for hardware vs software graphics. TIA
<android.support.constraint.ConstraintLayout 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"
tools:context="haroonahmad.berkeleysucksapp.MainActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Berkeley Admisions"
android:textSize="24sp"
tools:layout_editor_absoluteY="88dp"
tools:layout_editor_absoluteX="88dp" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0"
tools:layout_editor_absoluteX="16dp"
tools:layout_editor_absoluteY="335dp" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0"
tools:layout_editor_absoluteX="268dp"
tools:layout_editor_absoluteY="335dp" />
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Points: 0"
tools:layout_editor_absoluteX="163dp"
tools:layout_editor_absoluteY="415dp" />
<RelativeLayout
android:layout_width="0dp"
android:layout_height="495dp"
tools:layout_editor_absoluteY="8dp"
tools:layout_editor_absoluteX="8dp">
</RelativeLayout>
edit: sorry i'm a completely new to adding code, didn't realize I could only add to the first post.
I tried changing the ConstraintLayout in both places to RelativeLayout, didn't work. then tried right clicking on the resource file and changed the layout and layoutvertical to RelativeLayout, and still didn't work. thanks for any further suggestions
You're probably using a root layout that does not match the alignments you're setting in other views. Try using RelativeLayout as root layout.
Maybe if you post your XML layout, it is easier for us to identify the problem.
OK I fixed it by changing the whole text before xmlns to RelativeLayout. thanks for the tip!
I'm creating a custom view to use with android.widget.Toast.setView(), but no matter how I size the view, everything seems to be laid out using "wrap_content" as the layout width setting.
For example, whether I set the view's root layout (LinearLayout in my case) width to 'match_parent' or specify a static size such as "500dp" I get the same result at runtime ... the toast simply wraps the content.
My layout XML is:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/toast_container"
android:orientation="horizontal"
android:layout_width="500dp"
android:layout_height="wrap_content"
android:padding="16dp"
android:background="#drawable/toast_bg">
<ImageView
android:id="#+id/toastIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:src="#drawable/toast_icon" />
<TextView
android:id="#+id/toastMsg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="sample toast message"/>
</LinearLayout>
I suspect that Android (I'm running in an API 19 Kit-Kat platform) is forcing toast views to be 'wrap_content.' Is that so?
I'm sure someone is going to suggest I look at the source code in the AOSP. If I had the code handy, I would do that.
I am doing like this in my app and it works for defined width.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toast_container"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="16dp"
>
<RelativeLayout
android:layout_width="800dp"
android:layout_height="wrap_content"
android:background="#drawable/toast_bg">
<ImageView
android:id="#+id/toastIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:src="#drawable/toast_icon" />
<TextView
android:id="#+id/toastMsg"
android:layout_toRightOf="#+id/toastIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="sample toast message"/>
</RelativeLayout>
I set the width of the RelativeLayout and it works for me. Try this.
Right now my Log In button is wider than my app name text because it uses fixed padding of the relative layout, but I want it to automatically widen to line up with the left and right edges of the app name text. Is there any way to programmatically do this?
I want it to look the same on all devices. I'm afraid that if I just hard-code my own margins, it will look right on my device, but might not look right on other devices if they render the fonts differently.
Thanks!
layout.xml:
<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="match_parent"
android:animateLayoutChanges="true"
android:background="#drawable/back_image"
android:padding="20dp" >
<TextView
android:id="#+id/AppNameTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="#dimen/margin_top"
android:fontFamily="Arial"
android:text="#string/app_title"
android:textColor="#color/white"
android:textSize="#dimen/text_size" />
<com.timey.widget.Button
android:id="#+id/signInButton"
android:layout_width="match_parent"
android:layout_height="65dp"
android:background="#color/green"
android:fontFamily="Arial"
android:text="#string/sign_in"
android:textColor="#color/white"
android:textSize="30sp" />
</RelativeLayout>
Mockup with red dash lines illustrating how I want the sides of the app name to line up with the sides of my log-in button:
I am not entirely sure if this would help, but let me give it a try.
<?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="vertical" >
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="App\nTitle" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignLeft="#id/title"
android:layout_alignRight="#id/title"
android:layout_below="#id/title"
android:text="Log In" />
</RelativeLayout>
However, the button would be just as wide as the textview, it may not be wide enough to display its own text.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/hello_world" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button2" />
</LinearLayout>
The first button will take as much space it will need. Then the next button(or what ever your case) will take as much space as it's parent (linear layout) will take which on the other side will wrap the content i.e. the width of first button. So both the buttons will take same width. You can use this to any other components.
Update1
Key to the success
1. A container with wrap_content
2. First component should have wrap_content
3. Second component should have match_content
Update2
for RelativeLayout use layout_alignLeft="#+id/button1" and layout_alignRight="#+id/button1"
It will align to the left and right of the first component i.e. button1 here.
This is my .xml file where I have used two scrollview,in Input Edittext and onether in output TextView. What is wrong here...It is not working in android device.
Another problem is that when I turn my device it only shows the input text area. The output text area goes down.I want to see the half screen of input and half screen of output area.
How to fix it??
Thanks
<?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" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="35dp"
android:orientation="horizontal" >
<Button
android:id="#+id/test"
android:layout_width="60dp"
android:layout_height="38dp"
android:text="#string/test" />
<Button
android:id="#+id/rdf"
android:layout_width="60dp"
android:layout_height="38dp"
android:text="#string/rdf" />
<Button
android:id="#+id/load"
android:layout_width="75dp"
android:layout_height="38dp"
android:text="#string/load" />
<Button
android:id="#+id/clear"
android:layout_width="60dp"
android:layout_height="38dp"
android:text="#string/clear" />
<Button
android:id="#+id/close"
android:layout_width="fill_parent"
android:layout_height="38dp"
android:text="#string/close" />
</LinearLayout>
<ScrollView
android:id="#+id/scrollView1"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<EditText
android:id="#+id/input"
android:layout_width="0dp"
android:layout_height="175dp"
android:layout_weight="1"
android:background="#fff"
android:ems="10"
android:gravity="top|left"
android:textSize="14dp"
android:inputType="textMultiLine" >
<requestFocus />
</EditText>
</LinearLayout>
</ScrollView>
<Button
android:id="#+id/run"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/run" />
<ScrollView
android:id="#+id/scrollView2"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/output"
android:layout_width="match_parent"
android:layout_height="225dp"
android:background="#fff"
android:text="#string/output"
android:textColor="#1e90ff" />
</LinearLayout>
</ScrollView>
</LinearLayout>
Try setting layout_weight=1 and layout_height=0dp for the two scroll views instead of their
contents.
What is wrong here...It is not working in android device.
That's pretty vague. What were your expectations? What isn't working? In other words, please be a little more specific.
However, based on the layout code given, here are some recommendations:
Avoid hardcoding the size of views. You cannot make assumptions about screen size with the large variety of screen sizes, densities and devices out there. Also, even if you're able to make the layout look nice in portrait mode, it'll probably be not even close to that in landscape.
If you're going to put just a single View in a ScrollView, there's no need to wrap it in a ViewGroup container; just set the View directly, without nesting it again and added an extra layer of complexity to the view hierarchy.
There's no need to wrap a TextView or EditText with a ScrollView, as both views are scrollable by itself.
Regarding your second question: you can prevent Android from extracting all UI components when there's little layout estate left with the keyboard popped up. You'll need to set the IME_FLAG_NO_EXTRACT_UI flag on the EditText, or in xml: android:imeOptions="flagNoExtractUi".
I do like to point out that there's a reason Android has this behaviour by default. In most cases it hardly makes sense to force a tiny part of the UI to be visible, even more as whatever is being typed by the user is probably what really matters.