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.
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'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"/>
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
I have a fragment with a listview and an edittext.
When the edittext gains focus all the layout except the edittext turns black for one second.
If I hold the edittext clicked then the surrounding layout stays black until I scroll the list, or touch the screen, it only happens on Jelly Bean 4.1.2.
Here is my 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:background="#null"
android:orientation="vertical" >
<RelativeLayout
android:id="#+id/search_layout"
android:layout_width="fill_parent"
android:layout_height="49.33dp"
android:background="#color/grey">
<EditText
android:id="#+id/search_box"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_gravity="center"
android:layout_marginRight="5dp"
android:background="#drawable/searchbox"
android:drawableLeft="#drawable/search_icon"
android:ems="8"
android:hint="#string/search_hint"
android:maxLines="1"
android:padding="3dp"
android:paddingLeft="15dp"
android:paddingRight="25dp"
android:singleLine="true" />
</RelativeLayout>
<com.emilsjolander.components.stickylistheaders.StickyListHeadersListView
android:id="#+id/list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/search_layout"
android:divider="#color/light_blue"
android:dividerHeight="0.67dp" />
</RelativeLayout>
What can be the causes for that behavior ?
Add the following line to your listview(in xml) and try..
android:cacheColorHint="#00000000"
Hope it works!!
There is a very high possibility that a question similar to this has been asked earlier, but I couldn't figure out the related keywords to find the same.
I am making an application, and the layout I designed is:
<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"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context=".Scheduler" >
<EditText
android:id="#+id/addressee"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:hint="#string/addresseeHint"
android:inputType="number" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="2" >
<EditText
android:id="#+id/date"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:hint="#string/scheduleDate"
android:inputType="date" />
<EditText
android:id="#+id/time"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:hint="#string/scheduleTime"
android:inputType="time" />
</LinearLayout>
<EditText
android:id="#+id/smsText"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="top"
android:hint="#string/smsTextHint"
android:inputType="text" />
<Button
android:id="#+id/scheduleText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="onClick"
android:text="#string/scheduleTextButton" />
</LinearLayout>
The layout which appears is as below:
What I want will look something like this:
The problem is the Button at the bottom (id:scheduleText) disappears, reason being the layout_height parameter of the EditText set just above it is fill_parent. But I guess I can't provide any particular value to it as then the layout will look different on different devices ?
How can I fix this bug ?
Thanks
Hi your EditText has a height of fill parent which makes it fill the parent and the button won't be visible so make it like this:
<EditText
android:id="#+id/smsText"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="top"
android:hint="#string/smsTextHint"
android:inputType="text" />
UPDATE:
I updated the answer to extend the edit text and fill the screen but let space for the button as well. The trick is to use weight..