Android: Ensuring EditText boxes fit horizontally across screen? - android

I am trying to allign 3 EditText boxes across the screen horizontally in my activity so that the user is able to enter data.
Currently the code that I am implementing doesnt allow the 3 boxes to fit on the screen. Only 1 box and half of the other are visible
How can I adjust my current code so that all 3 Edittext boxes are visible to the user?
Note: The button and textView at the bottom of the layout are also currently not visible, eventhough they should be under the 3 horizontally alligned Edittext boxes.
Current 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" >
<TextView
android:id="#+id/tvSearchDate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" Enter Date to search..."
android:textSize="15dp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<EditText
android:id="#+id/etEnterSpecificyear"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="10"
android:hint="" >
</EditText>
<TextView
android:layout_width="3dp"
android:layout_height="wrap_content"
android:layout_weight="1"
/>
<EditText
android:id="#+id/etEnterSpecificMonth"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="10"
android:hint="" >
</EditText>
<TextView
android:layout_width="3dp"
android:layout_height="wrap_content"
android:layout_weight="1"
/>
<EditText
android:id="#+id/etEnterSpecificDay"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="10"
android:hint="" >
</EditText>
</LinearLayout>
<Button
android:id="#+id/btnSearchDate"
android:layout_width="85dp"
android:layout_height="50dp"
android:layout_gravity="center"
android:text="Submit"
/>
<TextView
android:id="#+id/tvSearchResultsDate"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:ellipsize="marquee"
android:focusable="true"
android:focusableInTouchMode="true"
android:marqueeRepeatLimit="marquee_forever"
android:maxLines="30"
android:minLines="5"
android:scrollbars="vertical"
android:text=" Results..."
android:textSize="15dp" />
</LinearLayout>


For each of your edittext make this:
<EditText
android:id="#+id/etEnterSpecificyear"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_marginLeft="2dp"
android:layout_marginRight="2dp"
android:hint="" >
</EditText>
And delete the TextView's that are in between the EditText's


Your issue is that you are using android:ems="10" in EditText properties. This one makes the minimum width of the EditText to be exact ten "M" characters. If this is your requirement I would suggest to use android:orientation="vertical" in the parent LinearLayout. So your final layout will look like:
<?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/tvSearchDate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" Enter Date to search..."
android:textSize="15dp"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<EditText
android:id="#+id/etEnterSpecificyear"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="10"
android:hint="">
</EditText>
<EditText
android:id="#+id/etEnterSpecificMonth"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="10"
android:hint="">
</EditText>
<EditText
android:id="#+id/etEnterSpecificDay"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="10"
android:hint="">
</EditText>
</LinearLayout>
<Button
android:id="#+id/btnSearchDate"
android:layout_width="85dp"
android:layout_height="50dp"
android:layout_gravity="center"
android:text="Submit"
/>
<TextView
android:id="#+id/tvSearchResultsDate"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:ellipsize="marquee"
android:focusable="true"
android:focusableInTouchMode="true"
android:marqueeRepeatLimit="marquee_forever"
android:maxLines="30"
android:minLines="5"
android:scrollbars="vertical"
android:text=" Results..."
android:textSize="15dp"/>
</LinearLayout>

Related

EditText position within a Layout shifting

I have the following requirement:
i> Consider a layout tab_container of height 40 dp.
ii> The layout is divided into two equal individual parts in a
horizontal manner.
iii>Within each individual layout , there is a TextView and EditText
The issue , for example , I enter a value 3 on edit_text_1 and then tap on edit_text_2 and enter 222, both the layouts shifts a bit (right or left) .
This issue occurs when value is entered on edit_text_2 and edit_text_1 is tapped.
<LinearLayout
android:id="#+id/tab_container"
android:layout_width="fill_parent"
android:layout_height="40dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="5dp"
android:gravity="center_horizontal"
android:orientation="horizontal"
android:weightSum="2" >
<LinearLayout
android:id="#+id/linear_layout_1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal"
android:weightSum="1" >
<TextView
android:id="#+id/txt_view_1"
style="#style/button_text_style_white_hdpi"
android:layout_width="0dp"
android:layout_height="40dp"
android:layout_weight="0.6"
android:gravity="center"
android:text="Sample"
android:textSize="14sp"
continental:typeface="roboto_bold" />
<EditText
android:id="#+id/edit_text_1"
android:layout_width="0dp"
android:layout_height="30dp"
android:layout_marginLeft="5dp"
android:layout_weight="0.4"
android:background="#color/White"
android:gravity="center_vertical"
android:inputType="number"
android:maxLength="3"
android:textColor="#android:color/black"
android:textIsSelectable="false"
android:textSize="14sp" >
<requestFocus />
</EditText>
</LinearLayout>
<LinearLayout
android:id="#+id/linear_layout_2"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal"
android:weightSum="1" >
<TextView
android:id="#+id/txt_view_2"
style="#style/button_text_style_white_hdpi"
android:layout_width="0dp"
android:layout_height="40dp"
android:layout_weight="0.6"
android:gravity="center"
android:text="Sample2"
android:textSize="14sp"
/>
<EditText
android:id="#+id/edit_text_2"
android:layout_width="0dp"
android:layout_height="30dp"
android:layout_marginLeft="5dp"
android:layout_weight="0.4"
android:background="#color/White"
android:gravity="center_vertical"
android:inputType="number"
android:maxLength="3"
android:textColor="#android:color/black"
android:textIsSelectable="false"
android:textSize="14sp" >
<requestFocus />
</EditText>
</LinearLayout>
</LinearLayout>
Any suggestions will be helpful.

How do I align a button with the bottom of an EditText in an Android layout?

With my layout, I would like the EditTexts to fill all of the horizontal space on their row, but leave the remaining space for a button to its right.
I would also like the buttons to be aligned to the bottom of the EditText that is on its row.
Currently, the buttons are not aligned to the bottom of their EditText, and I would like to know how I can achieve this.
Here is a screenshot:
And here is my XML:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="12dp"
android:layout_marginRight="12dp" >
<LinearLayout
android:id="#+id/nameLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="#+id/nameEditText"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_marginBottom="5dp"
android:ems="8"
android:textSize="15sp"
android:hint="enter name" />
<ImageButton
android:id="#+id/micNameButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:src="#drawable/ic_mic" />
</LinearLayout>
<LinearLayout
android:id="#+id/editLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/nameLayout">
<EditText
android:id="#+id/notesEditText"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:ems="8"
android:textSize="15sp"
android:hint="enter notes" />
<ImageButton
android:id="#+id/micNotesButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:src="#drawable/ic_mic" />
</LinearLayout>
</RelativeLayout>

Try keeping your margin attributes in the LinearLayout, and not in the actual EditText or ImageButton. And set the gravity of the layout to bottom.
(Edit: Also notice that I added android:orientation="horizontal" to the LinearLayouts. You should always have an orientation when child views use layout_weight)
It should look something like this:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="12dp"
android:layout_marginRight="12dp" >
<LinearLayout
android:id="#+id/nameLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_orientation="horizontal"
android:layout_marginTop="10dp"
android:layout_marginBottom="5dp"
android:gravity="bottom" >
<EditText
android:id="#+id/nameEditText"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:ems="8"
android:textSize="15sp"
android:hint="enter name" />
<ImageButton
android:id="#+id/micNameButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:src="#drawable/ic_mic" />
</LinearLayout>
<LinearLayout
android:id="#+id/editLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_orientation="horizontal"
android:layout_marginTop="10dp"
android:layout_marginBottom="5dp"
android:gravity="bottom"
android:layout_below="#+id/nameLayout">
<EditText
android:id="#+id/notesEditText"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:ems="8"
android:textSize="15sp"
android:hint="enter notes" />
<ImageButton
android:id="#+id/micNotesButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:src="#drawable/ic_mic" />
</LinearLayout>
</RelativeLayout>

making Multiple EditText's scroll inside scrollview

I am trying to make the edittext's scroll in case the view doesn't them all. The user should be able to scroll the edittexts when keyboard is on or off.
I have tried multiple combinations of linearLayout and ScrollView but it doesn't seem to be working.
Can someone please check what is wrong with it?
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#FFFFFF"
android:orientation="vertical" >
<TextView
android:id="#+id/description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|center_horizontal"
android:layout_marginTop="50dp"
android:text="Details"
android:textColor="#EB8024"
android:textSize="30sp" />
<EditText
android:id="#+id/name"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="40dp"
android:background="#drawable/theme_textfield_activated_holo_light"
android:ems="10"
android:hint="URI"
android:inputType="text" />
<EditText
android:id="#+id/ip_addr"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
android:background="#drawable/theme_textfield_activated_holo_light"
android:ems="10"
android:hint="IP Address"
android:inputType="text" />
<EditText
android:id="#+id/port"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
android:background="#drawable/theme_textfield_activated_holo_light"
android:ems="10"
android:hint="Port"
android:inputType="text" />
<EditText
android:id="#+id/app_name"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
android:background="#drawable/theme_textfield_activated_holo_light"
android:ems="10"
android:hint="Application Name"
android:inputType="text" />
<EditText
android:id="#+id/string"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
android:background="#drawable/theme_textfield_activated_holo_light"
android:ems="10"
android:hint="Nick Names"
android:inputType="text" />
<Button
android:id="#+id/submit"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|center_horizontal"
android:layout_marginTop="20dp"
android:background="#drawable/theme_btn_default_disabled_focused_holo_light"
android:onClick="onClickNext"
android:text="Next"
android:textColor="#EB8024"
android:textSize="30sp" />
</LinearLayout>
</ScrollView>

Make your ScrollView fill the viewport and match parent's height instead of wrapping content.
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">

Android keyboard overlap edittext when gravity set to "center"

I just want to know if you have already encounter this issue in edittext when you set the gravity to "center" the keyboard overlap the edittext. Hope you could help me fix this problem.
I added my code below.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/img_splash"
android:gravity="bottom"
android:orientation="vertical"
android:paddingLeft="20dp"
android:paddingRight="20dp" >
<ScrollView
android:id="#+id/scrollView1"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<EditText
android:id="#+id/edit_username"
android:layout_width="fill_parent"
android:layout_height="50dp"
android:layout_marginBottom="13dp"
android:background="#drawable/img_textfield"
android:ems="10"
android:gravity="center_vertical|center_horizontal"
android:hint="Username"
android:imeOptions="actionNext"
android:maxLines="1"
android:singleLine="true"
android:textSize="18sp" />
<EditText
android:id="#+id/edit_password"
android:layout_width="fill_parent"
android:layout_height="50dp"
android:layout_marginBottom="28dp"
android:background="#drawable/img_textfield"
android:ems="10"
android:gravity="center_vertical|center_horizontal"
android:hint="Password"
android:inputType="textPassword"
android:maxLines="1"
android:singleLine="true"
android:textSize="18sp" />
</LinearLayout>
</ScrollView>
<Button
android:id="#+id/button_login"
android:layout_width="fill_parent"
android:layout_height="50dp"
android:layout_marginBottom="75dp"
android:background="#drawable/btn_login"
android:onClick="onClicked"
android:text="Login"
android:textColor="#color/white_pure"
android:textSize="18sp" />
</LinearLayout>

Try using
android:windowSoftInputMode="adjustResize|stateHidden" in manifest
Or put your view inside a scrollview
Source

Layout TextView Hint not always showing

I have 4 textview, all numbers. The first one "#" is the hint and it shows up on my 4.2 and 2.2. The next three are "Hours, Minutes, Seconds" respectively and the hint shows up on 4.2 but not 2.2. Here is my xml for the them.
First Textview has # and the next three will say Hour, Minute, Second.
<ScrollView
android:id="#+id/mainBodyScroll"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/calculateButton"
android:layout_alignParentLeft="true"
android:layout_below="#+id/perDistanceLayout"
android:fadeScrollbars="false"
android:paddingLeft="10dp"
android:paddingRight="10dp" >
<LinearLayout
android:id="#+id/mainBodyLinear"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/default_distance"
android:textAppearance="?android:attr/textAppearanceLarge" />
<LinearLayout
android:id="#+id/distanceEntryLinear"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="5dp" >
<EditText
android:id="#+id/distanceText"
android:layout_width="50dp"
android:layout_height="wrap_content"
android:ems="10"
android:hint="#string/default_number_hint"
android:inputType="number"
>
</EditText>
<Spinner
android:id="#+id/spinnerInput"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:entries="#array/spinner2_array" />
</LinearLayout>
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/default_in"
android:textAppearance="?android:attr/textAppearanceMedium" />
<LinearLayout
android:id="#+id/timeLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="5dp"
android:paddingRight="5dp" >
<EditText
android:id="#+id/hourText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight=".33"
android:ems="10"
android:gravity="center_vertical|center_horizontal"
android:hint="#string/default_hours"
android:inputType="number" />
<EditText
android:id="#+id/minuteText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight=".33"
android:ems="10"
android:gravity="center_vertical|center_horizontal"
android:hint="#string/default_minutes"
android:inputType="number" />
<EditText
android:id="#+id/secondText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight=".33"
android:ems="10"
android:gravity="center_vertical|center_horizontal"
android:hint="#string/default_seconds"
android:inputType="number" />
</LinearLayout>
<Button
android:id="#+id/paceclearButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_marginRight="5dp"
android:minHeight="32dip"
android:text="#string/default_clear"
android:textSize="12dp" />
</LinearLayout>
</ScrollView>

Somehow setting center_horizontal value in the android:gravity is causing issues in Android 2.2 in displaying the hint.
Remove center_horizontal from the value of android:gravity to display the hint.

Categories

Resources