Soft keyboard covering EditText Fields android - android-layout

I have number of Edit Texts in the layout file, the soft keyboard is covering some of the Edit texts. I want whole Edit texts should scroll up if user clicks on first edit text so that all the fields should be visible at a time. I tried adding ScroolView,isScrollContainer,orientation:vertical, requestFocus, android:imeOptions="flagNoFullscreen" in xml file and android:windowSoftInputMode="adjustPan|adjustResize" is added in Manifest. But not getting expected results.
here is my xml file
<?xml version="1.0" encoding="utf-8"?>
<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:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:background="#drawable/register_back"
tools:context="com.example.RegisterActivity">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/registerFieldsRL"
android:layout_marginTop="40dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/header"
android:text="Register"
android:textAllCaps="true"
android:textColor="#646b99"
android:textSize="18dp"
android:gravity="center"
android:layout_centerHorizontal="true" />
<EditText
android:id="#+id/nameET"
android:hint="Enter Your Name"
android:layout_below="#+id/header"
style="#style/editTextStyle"
android:layout_marginTop="10dp"
android:singleLine="true"/>
<EditText
android:id="#+id/emailET"
android:hint="Enter Your Email Id"
android:layout_below="#+id/nameET"
style="#style/editTextStyle"
android:layout_marginTop="5dp"
android:singleLine="true"/>
<EditText
android:id="#+id/mobileET"
android:hint="Enter Your Mobile Number"
android:layout_below="#+id/emailET"
style="#style/editTextStyle"
android:layout_marginTop="5dp"
android:singleLine="true"/>
<EditText
android:id="#+id/passwordET"
android:hint="Enter Password"
android:layout_below="#+id/mobileET"
style="#style/editTextStyle"
android:layout_marginTop="5dp"
android:singleLine="true"/>
<EditText
android:id="#+id/confrm_passwordET"
android:hint="Re-enter Password"
android:layout_below="#+id/passwordET"
style="#style/editTextStyle"
android:layout_marginTop="5dp"
android:singleLine="true"/>
<Button
android:layout_width="200dp"
android:layout_height="40dp"
android:id="#+id/logon_button"
android:text="Logon"
android:gravity="center"
android:layout_centerHorizontal="true"
android:layout_below="#+id/confrm_passwordET"
android:layout_marginTop="7dp"
android:background="#db96a3"
android:textColor="#e8d3c1"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/social_loginsRL"
android:layout_alignParentBottom="true"
android:layout_marginBottom="30dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/social_login_header"
android:text="- OR LOGIN WITH -"
android:layout_centerHorizontal="true"
android:textColor="#646b99"
android:textSize="18dp"/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_below="#+id/social_login_header"
android:layout_marginTop="10dp">
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/facebook_button"
android:background="#drawable/fbbutton"
android:layout_toLeftOf="#+id/social_login_split_view"/>
<View
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_centerHorizontal="true"
android:id="#+id/social_login_split_view"></View>
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/gmail_button"
android:background="#drawable/gmailbutton"
android:layout_toRightOf="#+id/social_login_split_view" />
</RelativeLayout>
</RelativeLayout>
and here is my Style code
<style name="editTextStyle">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:background">#drawable/edittext_background</item>
<item name="android:gravity">center_horizontal</item>
<item name="android:backgroundTint">#e8d3c1</item>
<item name="android:textColor">#646b99</item>
</style>
and this is my Drawable file
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/patient_details_et_background"/>
<item>
<shape>
<stroke
android:width="1dp"
android:color="#d4c6c1" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
</selector>

Tara, from what i understand from your question, (maybe i am wrong) that you want all edit text's in your layout to scroll up and be in focus whenever u receive a click on any of the EditText's?
Lets say you have 10 EditText's in your layout, and user clicks the 1st one, if all the EditText's scroll up, the item on which the user clicked also moves from focus. This would not be good for the user, as they wont be able to edit on the actual field on which they clicked.
As for the problem, i would say to put all your EditText's inside a ScrollView and put a attribute, android:fillViewport="true" on the scroll view. This will not solve the problem, but you will be able to see the full length and items inside the scroll view on the preview pane.
The soft keyword will cover some area of the screen once it pop's up, but you should be make sure that the user can scroll across each view in your layout.

Related

Expandable/Collapsible TableRow in Android

I want to build an expandable/collapsible TableRow. I have two rows and I want an expandable or collapsible button (like a small 'v') on the second row. Upon clicking the button, I want to expand the 2nd row with some other views. I am very new to android development, and I am not sure how to achieve this. This is what I currently have.
<?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:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#4B0082">
<TableLayout
android:id="#+id/table_layout"
android:layout_width="370.0dp"
android:layout_height="350.0dp"
android:layout_centerInParent="true"
android:layout_marginLeft="#dimen/activity_horizontal_margin"
android:layout_marginStart="#dimen/activity_horizontal_margin"
android:layout_marginTop="#dimen/activity_vertical_margin">
<TableRow
android:background="#drawable/top_table_row_appearance">
<TextView
android:text="HNL"
android:padding="8dp"
android:textColor="#android:color/black"
android:textSize="15dp"/>
<TextView
android:text="LAS"
android:padding="8dp"
android:textColor="#android:color/black"
android:textSize="15dp"/>
</TableRow>
<TableRow
android:layout_marginBottom="5dp"
android:layout_weight=""
android:background="#drawable/tail_table_row_appearance">
<ImageView
android:id="#+id/image1"
android:src="#mipmap/ic_child_friendly_black_24dp"/>
<!--I want a collapsible button here. When I click it, this row should expand itself showing additional hidden views-->
</TableRow>
</TableLayout>
<android.support.design.widget.BottomNavigationView
android:id="#+id/navigation"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="0dp"
android:layout_marginStart="0dp"
android:background="?android:attr/windowBackground"
android:layout_alignParentBottom="true"
app:menu="#menu/navigation" />
</RelativeLayout>

How do I load two fragments vertically in the same layout?

I am making an app for my university's SafeWalk program and I am trying to make an activity that will display a map fragment with a button bar below it with emergency call buttons. The problem I am running in to is that when I load the following layout file, only the map fragment is displayed, and not the buttons along the bottom.
Note: I am also using a navigation drawer in this layout so I have included that code in case it is conflicting.
I have tried changing the layout_width and layout_height values of the two parent FrameLayouts
and I only can obtain one of two results, a full page of map, or a full page of my buttons (stretched to the top). I can attach the layout for the CallButtonFragment if necessary, but it is a horizontal linear layout with the button bar style containing two buttons.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:orientation="vertical" >
<!-- The main content view -->
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true" >
<fragment
android:id="#+id/map"
android:name="com.google.android.gms.maps.MapFragment"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</FrameLayout>
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_below="#+id/content_frame" >
<fragment
android:id="#+id/titles"
android:name="edu.purdue.SafeWalk.CallButtonFragment"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</FrameLayout>
</RelativeLayout>
<!-- The navigation drawer -->
<ListView
android:id="#+id/left_drawer"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#111"
android:choiceMode="singleChoice"
android:divider="#android:color/transparent"
android:dividerHeight="0dp" />
Following the suggestion of Android-er-naut below, I have this result:
(It is an improvement, but the buttons need to be a bit larger and fit the width of the screen.)
How about this -
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!-- The main content view -->
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1" >
<fragment
android:id="#+id/map"
android:name="com.google.android.gms.maps.MapFragment"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</FrameLayout>
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1" >
<fragment
android:id="#+id/titles"
android:name="edu.purdue.SafeWalk.CallButtonFragment"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</FrameLayout>
</LinearLayout>

is there such layout options in android that take the rest space in parent container?

I wanna do such a layout in android, i can't figure it out.
one button on top, one button at bottom, and a listview take the rest center area, how to make the listview take the rest area? is this possible if parent container is vertical LinearLayout?
thanks
What i have done in my project is
<?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="fill_parent"
android:orientation="vertical" >
<Button
android:id="#+id/task_title"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:text="#string/tasks" />
<ListView
android:id="#id/android:list"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/task_title"
android:layout_above="#+id/add_button">
<!-- Preview: listitem=#layout/task_list_item -->
</ListView>
<TextView
android:id="#id/android:empty"
android:text="#string/no_tasks"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical|center_horizontal"
android:layout_below="#id/task_title"
android:layout_above="#id/add_button"/>
<Button
android:id="#id/add_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="#string/plus_sign" />
<Button
android:id="#+id/remove_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_toRightOf="#id/add_button"
android:text="#string/remove_task" />
</RelativeLayout>
With relative layout you can simply do it, the key layout properties are android:layout_alignParentBottom="true" , android:layout_alignParentTop="true"

no background when ListView doesn't fill screen on different phone

I have an app that I am putting together and I have a background on it. There is a header on top and a ListView in the middle. When I have a list in the middle that isn't at least as big as the screen it just shows gray not the background of the parent layout. The weird thing is that this doesn't happen on my older phone, the background fills the whole screen even if the list doesn't. Here is the xml:
<?xml version="1.0" encoding="utf-8"?>
<!-- This is the xml for HomeActivity, more information in HomeActivity.java -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/common_aboutLayout"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/bg">
<!-- This is the header on the top of the home screen -->
<LinearLayout android:id="#+id/dynamicBanner"
android:layout_height="wrap_content"
android:gravity="center"
android:background="#drawable/header"
android:layout_width="fill_parent">
<!-- This is the temp pop-up on start -->
<TextView android:text="#+id/TextView01"
android:id="#+id/titleText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|center_horizontal"
android:textColor="#FFFFFF"
android:visibility="invisible"
android:textStyle="bold"
android:typeface="sans"
android:ellipsize="end"
android:textSize="18sp"
android:gravity="center_vertical|center_horizontal">
</TextView>
</LinearLayout>
<!-- This is the layout of the list of ringtones. -->
<ListView android:id="#+id/homeListView"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1">
</ListView>
<LinearLayout android:id="#+id/adLayout"
android:layout_width="fill_parent"
android:layout_height="0dp">
<com.admob.android.ads.AdView android:id="#+id/ad"
admob:textColor="#FFFFFF"
admob:keywords="Android application"
android:layout_width="fill_parent"
android:layout_gravity="bottom|center"
admob:backgroundColor="#666666"
admob:refreshInterval="30"
android:layout_height="0dp" />
</LinearLayout>
</LinearLayout>
The TextView is just a temp thing when the window first opens.
Just looking for some help, Thanks.
put All views in RelativeLayout.then put this admob layout and add a tag to plcae this to bottom of layout
like
android:layout_alignParentBottom="true"
<LinearLayout android:id="#+id/adLayout"
android:layout_width="fill_parent"
android:layout_height="0dp">
<com.admob.android.ads.AdView android:id="#+id/ad"
admob:textColor="#FFFFFF"
admob:keywords="Android application"
android:layout_width="fill_parent"
android:layout_gravity="bottom|center"
admob:backgroundColor="#666666"
admob:refreshInterval="30"
android:layout_height="0dp" />
</LinearLayout>
and then Header part inside the relative layout
android:layout_alignParentTop="true"
and the put the ListView and
android:layout_above="#+id/adLayout"
android:layout_below=HEADERVIEW

Layout display problem on whenever i have to scroll

i want to display two buttons at the bottom of my activity screen, but each time i populate the screen with views that makes me scroll, the two buttons at the bottom of my screen disappears. when there is no need to scroll the buttons display fine.
please help
thanks.
Layout code
?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:id="#+id/lin_layout_list_view"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:isScrollContainer="true"
android:paddingLeft="8dp"
android:paddingRight="8dp">
<ListView android:id="#+id/android:list"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
</LinearLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="2px"
android:layout_gravity="bottom"
>
<TableLayout
android:layout_below="#id/lin_layout_list_view"
android:layout_alignParentBottom="true"
android:gravity="bottom"
android:layout_width ="fill_parent"
android:layout_height="wrap_content"
android:stretchColumns="0,1">
<TableRow
android:orientation="horizontal">
<Button android:id="#+id/ws_button_back"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" Back "
/>
<Button android:id="#+id/ws_button_ok"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" Ok "/>
</TableRow>
</TableLayout>
</RelativeLayout>
</LinearLayout>
Wrap the buttons along with the scrollable content(e.g:-Listview) in a scrollview and then display the content.

Resources