I've been trying to create an app that would allow a user to enter timetable information but i'm getting stuck at the design part, the first "Edit Text" container is getting stuck behind the title header of the app and i'm not sure why. I'd like to make it so it's forced below the header (and the other containers are force below the one above it, like a stack)
Image showing problem
There is another container above the "Day of Week", you can just see the bottom part of it sticking out below the header. Here is my XML file:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:weightSum="1">
<EditText
android:id="#+id/ModuleCode"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/module_code"
android:inputType="text"
android:gravity="fill"
android:layout_gravity="bottom"
android:layout_weight="0.14"
/>
<EditText
android:id="#+id/DayOfWeek"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/day_of_week"
android:inputType="text" />
<EditText
android:id="#+id/StartTime"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/start_time"
android:visibility="gone"
android:inputType="text" />
<EditText
android:id="#+id/Duration"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/duration"
android:visibility="gone"
android:inputType="text" />
<EditText
android:id="#+id/SessionType"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/type_of_session"
android:visibility="gone"
android:inputType="text" />
<EditText
android:id="#+id/Room"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/room"
android:visibility="gone"
android:inputType="text" />
<ListView
android:id="#+id/myListView"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1.07" />
</LinearLayout>
I had the exact same problem, i just added a margin-top to the LinearLayout so it clears the header. for example:
note here i use a percentRelativeLayout, but this works with all layouts.
<?xml version="1.0" encoding="utf-8"?>
<android.support.percent.PercentRelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/background"
android:layout_marginTop="55dp"<--- this one!
android:padding="10dp">
it is because the action bar is added externally on top of the view
you could either remove the action bar and add it to your xml
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
android:minHeight="?attr/actionBarSize"
android:background="#298859"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:popupTheme="#style/ThemeOverlay.AppCompat.Light">
or simply as add a margin top to your first item
<EditText
android:id="#+id/ModuleCode"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/module_code"
android:inputType="text"
android:layout_marginTop="30dp"/>
Related
I'm creating an app that gets some values, you click in a button and it returns some other values and this views are distributed in 2 subLayouts of a bigger vertical LinearLayout like this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="10dp">
<RelativeLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal"
android:layout_weight="0.4">
<EditText
android:layout_width="70dp"
android:layout_height="wrap_content"
android:inputType="number"
android:id="#+id/number1" />
<EditText
android:layout_width="70dp"
android:layout_height="wrap_content"
android:inputType="number"
android:id="#+id/number2"
android:layout_below="#+id/number1" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Calc!"
android:id="#+id/calcButton"
android:layout_below="#+id/number2"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal"
android:layout_weight="0.6"
android:layout_alignParentBottom="true">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Answer"
android:id="#+id/Answer" />
</RelativeLayout>
</LinearLayout>
My problem is that when I click on my EditText and the keyboard appears the answer's TextView goes up with the keyboard and "overrides" my button (the entire RelativeLayout follows the keyboard), there's a way of setting the RelativeLayout fixed so that it stays where it is mean to be?
Here what is happening:
There's a way of fixing that RelativeLayout?
Try setting android:windowSoftInputMode="adjustPan" for the activity in Android Manifest file.
I'm new in the world of Android development, and I'm trying to learn how to getting started from here.
Now I've followed all steps until to put the Zip Code and the Number on the same line. I don't understand how can I manage this, if I drag and drop the Number control beside the TextView the IDE put the Number above the control or to the bottom. I don't know how to explain correctly, anyway, this is an image:
and this is the source code:
<?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">
<RelativeLayout
android:minWidth="25px"
android:minHeight="25px"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/relativeLayout1" />
<EditText
android:inputType="number"
android:layout_height="wrap_content"
android:id="#+id/ZipCodeEdit"
android:layout_centerVertical="true"
android:layout_marginLeft="10dp"
android:textSize="20sp"
android:layout_width="100sp"
android:textColor="#9933FF" />
<TextView
android:text="Zip Code: "
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/ZipCodeLabel"
android:layout_centerVertical="true"
android:layout_marginLeft="10dp"
android:textSize="20sp" />
</LinearLayout>
from the site should be like this:
what is wrong? Sorry if something is not clear, or if the category tag is wrong.
Try 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="fill_parent"
android:orientation="vertical" >
<RelativeLayout
android:id="#+id/relativeLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="25px"
android:minWidth="25px" >
<EditText
android:id="#+id/ZipCodeEdit"
android:layout_width="100sp"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="10dp"
android:inputType="number"
android:textColor="#9933FF"
android:textSize="20sp" />
<TextView
android:id="#+id/ZipCodeLabel"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="10dp"
android:layout_toRightOf="#+id/ZipCodeEdit"
android:text="Zip Code: "
android:textSize="20sp" />
</RelativeLayout>
</LinearLayout>
You should make proper use of LinearLayout, RelativeLayout, FrameLayout and TableLayout for the desired alignments.
Here is your solution.:
<?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">
<RelativeLayout
android:minWidth="25px"
android:minHeight="25px"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/relativeLayout1" >
<EditText
android:inputType="number"
android:layout_height="wrap_content"
android:id="#+id/ZipCodeEdit"
android:layout_centerVertical="true"
android:layout_marginLeft="10dp"
android:textSize="20sp"
android:layout_width="100sp"
android:textColor="#9933FF" />
<TextView
android:text="Zip Code: "
android:layout_width="match_parent"
android:layout_toRightOf="#+id/ZipCodeEdit"
android:layout_height="wrap_content"
android:id="#+id/ZipCodeLabel"
android:layout_centerVertical="true"
android:layout_marginLeft="10dp"
android:textSize="20sp" />
</RelativeLayout>
</LinearLayout>
What you were doing Wrong :
You are trying to align EditText and TextView one beside another inside RelativeLayout but you've closed the relative layiut right where it started.
that makes the EditText and TextView the child view of the LinearLayout(Vertical)
As the text views are behaving as the children of Linear vertical layout there is no use of RelativeLayout hence aligning both views one below another.
One more thing when you fix that and put both the text view within RelativeLayout you have to align one view in relation with the another.
In this case:
android:layout_toRightOf="#+id/ZipCodeEdit"
Let me know if any problem.
Happy Coding
You are using a vertical LinearLayout as the parent layout.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
Change android:orientation="vertical" to android:orientation="horizontal".
You can also remove the RelativeLayout as it's not really being used(nothing inside it).
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<EditText
android:inputType="number"
android:layout_height="wrap_content"
android:id="#+id/ZipCodeEdit"
android:layout_marginLeft="10dp"
android:textSize="20sp"
android:layout_width="100dp"
android:textColor="#9933FF" />
<TextView
android:text="Zip Code: "
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/ZipCodeLabel"
android:layout_marginLeft="10dp"
android:textSize="20sp" />
</LinearLayout>
This should fix your problem. I will explain if this works for you.
I have this simple activity in my android app but I don't know how to place my button so it appears at the same position on various screen sizes.
I want the button to always be placed at the bottom of the screen. The screenshot shown is from a phone screen. When displayed on a larger screen the button is higher up.
How can I fix this?
Thanks
See this screenshot
You can use RelativeLayout with this parameter (android:layout_alignParentBottom="true")
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="Click Me!"/>
</RelativeLayout>
You should use a RelativeLayout
If you have a RelativeLayout that fills the whole screen you should be able to use android:layout_alignParentBottom to move the button to the bottom of the screen.
If your button at the bottom doesn't show then probably the layout above it takes all the space. In this case you can put the button first in your layout file and position the rest of the layout above the views with android:layout_above.
Have a look a RelativeLayout. Use this ViewGroup and add a Button inside it with alignParentBottom
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
<Button
android:id="#+id/button_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:alignParentBottom="true"
android:text="HORAIRE"
android:layout_margins="<your_margin_in_dp>" />
</RelativeLayout>
Make footerButton.xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/footer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:gravity="center" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:text="HORAIRE"
android:textColor="#ffffff"
android:textSize="20sp" />
</RelativeLayout>
And add it in all your layout file like below line:
Android Activity_Layout
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<!-- Footer aligned to bottom -->
<include layout="#layout/footer" />
<!-- Content above footer -->
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="#id/footer"
android:layout_below="#id/header"
android:gravity="center">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Content goes here"
android:textColor="#FFFFFF"
android:textSize="20sp" />
</RelativeLayout>
</RelativeLayout>
Hope it will solve your problem
This is what I ended up doing. Thanks to everyone who posted, it helped me get in the right direction!
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:id="#+id/container"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:showIn="#layout/activity_main"
tools:context="xxxx.MainActivity"
android:orientation="vertical"
android:weightSum="1">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Dernières nouvelles Twitter"
android:id="#+id/textView"
android:textStyle="bold"
android:textSize="17dp"
android:paddingLeft="8dp"
android:paddingTop="6dp"
android:paddingRight="6dp"
android:paddingBottom="6dp"
android:layout_alignParentTop="true"/>
<ListView
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:id="#+id/listView_tweets"
android:layout_above="#+id/buttonDisplay"
android:choiceMode="none"
android:paddingTop="25dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Horaire"
android:layout_margin="5dp"
android:id="#+id/buttonDisplay"
android:onClick="buttonGotoDisplay"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"/>
</RelativeLayout>
I'm designing a simple login activity. I've used the following xml layout:
<?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" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical"
android:layout_gravity="center_vertical|center_horizontal"
android:gravity="center_vertical|center_horizontal"
android:layout_margin="15dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="My application title"
android:textSize="30sp"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2"
android:orientation="vertical"
android:layout_gravity="center_vertical|center_horizontal"
android:gravity="center_vertical"
android:layout_margin="15dp">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Username"/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Password"
android:layout_marginTop="15dp"/>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:text="Login"/>
</LinearLayout>
</LinearLayout>
And I've obtained this result:
But If the focus is on the first EditText I obtain this:
and If the focus is on the second EdiText the result is the follwoing:
Considering I've used the following line in the Manifest, for my activity:
android:windowSoftInputMode="adjustPan|adjustResize"
I want that when the virtual keyboard appears, the two edittext, the button and the textview are visible and correctly centered in the available screen.
What I have to change in my code?
NOTE: I've the same result If I remove the line in the manifest:
android:windowSoftInputMode="adjustPan|adjustResize"
You can replace the parent LinearLayout to a ScrollView :
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout ...>
....
....
</LinearLayout>
</ScrollView>
try this, it works for some of my apk !
Edit : sorry didn't see about center the text automaticaly, so with this you can adjust manually your editext to center with swipe your finger.. hope that will help
How can I format a header, a list, and an EditText so that the EditText is a fixed single line and always visible?
Here is my layout with only one list entry - EditText fills the rest of the screen which looks bad.
Here is the layout with several list entries - the soft keyboard hides the text being typed. I was typing in Wayne.
I have tried a various Linear and Relative layouts. Here is my current Layout:
<?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"
android:orientation="vertical" >
<TextView
android:id="#+id/select_child_header"
style="#style/headerStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:background="#color/start_blue"
android:text="Which child did you take a picture of?" />
<fragment
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/modchild_fragment"
android:name="com.chex.control.ChildList"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/select_child_header"
android:focusable="true"
android:focusableInTouchMode="true" >
</fragment>
<EditText
android:id="#+id/new_child"
style="#style/editTextStyle"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_below="#id/modchild_fragment"
android:hint="new child name"
android:inputType="text"
android:singleLine="true" />
</RelativeLayout>
I appreciate any advice on how to format this screen.
For this you have a two options one is In textview there is a tag called android:singleLine="true" if you do like this the text comes in a single line and it miss the some text and show some dots..
And another way is you have to decrease the fontsize.. by using this tag..android:textSize="3sp"
Try this way
<?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/select_child_header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:text="Which child did you take a picture of?" />
<fragment
android:id="#+id/modchild_fragment"
android:name="com.chex.control.ChildList"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:focusable="true"
android:focusableInTouchMode="true" >
</fragment>
<EditText
android:id="#+id/new_child"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_below="#id/modchild_fragment"
android:hint="new child name"
android:inputType="text"
android:singleLine="true" />
</LinearLayout>
Set
android:ellipsize=end
android:singleLine="true"
Change the order and positioning of your elements:
add first the header on top
add the bottom edittext
add the fragment in-between
Something like:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/select_child_header"
style="#style/headerStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:background="#color/start_blue"
android:text="Which child did you take a picture of?" />
<EditText
android:id="#+id/new_child"
style="#style/editTextStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:hint="new child name"
android:inputType="text"
android:singleLine="true" />
<fragment
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/modchild_fragment"
android:name="com.chex.control.ChildList"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/new_child"
android:layout_below="#id/select_child_header"
android:focusable="true"
android:focusableInTouchMode="true" >
</fragment>
</RelativeLayout>
Add
android:maxLines="1"
to your EditText, to get desired number of lines .
You can set the static height to the Fragment. So that if your list item say for example, one or more than 5 also, your edit text constitutes the bottom layer of fragment.
Also, you can set android:singleLine="true" property to edittext.