I'm trying to add accessibility support ( Screen reader ) for a screen similar to below
Button 1 & Button 2 are part of a single fragment and TextView is part of a different child fragment.
When navigating with the screen reader on the focus moves from
Button 1 > TextView
When swiping left from TextView the focus doesn't reach Button 2. Instead, the focus is received again by Button 1.
How can I make sure the accessibility focus is correctly received by Button 2.
Layout of parent fragment
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/button1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:focusableInTouchMode="true"
android:text="Button 1" />
<android.support.design.widget.CoordinatorLayout
android:id="#+id/rootLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/button_container"
android:overScrollMode="never">
</android.support.design.widget.CoordinatorLayout>
<FrameLayout
android:id="#+id/button_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:clickable="true"
android:focusable="true"
android:gravity="center">
<Button
android:id="#+id/button2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:importantForAccessibility="yes"
android:text="Button 2" />
</FrameLayout>
</RelativeLayout>
Layout for child fragment
<?xml version="1.0" encoding="utf-8"?>
<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">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
android:importantForAccessibility="yes"/>
</android.support.constraint.ConstraintLayout>
Note: If this layout is tested on most devices the focus will come to Button 2 without extra work. But that's not the case in some samsung devices (s8,s9)
I tried the following approach
Identify when TextView is in focus in accessibility mode
Identify the touch on the screen and identify swipe right
Programmatically get focus on Button 2 by firing AccessibilityEvent.TYPE_VIEW_FOCUSED
I was not able to accurately identify the swipe right gesture in accessibility mode.
Related
I have an activity which has a fragment. Inside that fragment, there are 5 fragmnets inside ViewPager. Each fragment has either more than 30 input fields including EditTexts, custom Dropdowns and Date Pickers or nested ViewPagers with fragments having same amount of input fields.
The problem is; when user taps on any EditText to input data, soft keyboard gets visible and when it is completely visible, the app freezes for around 2 seconds. When user presses back button to hide soft keyboard, keyboard gets off from screen and screen area which is underneath soft keyboard becomes white and app freezes again for same amount of time. This happens every time. Here is activity configuration from manifest:
<activity
android:name=".activities.HomeActivity"
android:launchMode="singleTask"
android:screenOrientation="portrait"
android:windowSoftInputMode="adjustPan|adjustResize" />
I have tried different combinations for android:windowSoftInputMode nothing worked. Although this does not happen in other activities with same manifest configuration and with less number of fields. With so many input fields, its very annoying for user that app freezes after inputting data in textfields. Can anyone suggest me workaround for this?
I have found the solution. In most of the layouts, the views were aligned vertical to each other inside RelativeLayout using android:layout_below property like:
<?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">
<LinearLayout
android:id="#+id/layout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<!--nested form view containers-->
</LinearLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/layout2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/layout1"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<!--nested form view containers-->
</LinearLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/layout3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/layout2"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!--nested form view containers-->
</RelativeLayout>
</LinearLayout>
</RelativeLayout>
I replaced root RelativeLayouts with vertical oriented LinearLayouts and it did the magic trick like this:
<?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:id="#+id/layout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<!--nested form view containers-->
</LinearLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/layout2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<!--nested form view containers-->
</LinearLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/layout3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!--nested form view containers-->
</RelativeLayout>
</LinearLayout>
</LinearLayout>
I am still looking for some technical details on how it impacts keyboard visibility states. Will update here if I find something.
I will need to hands-on debug to find the issue, but what I think I will do is:
Check whether this is actually because of those many fragments and input controls. Can you try with only 1 fragment instead of 5 fragments and see if the speed improves? If yes, then try to display a fragment at once (ex: if you change from tab 1 to tab 2, explicitly remove fragment 1 from the pager view hierarchy and explicitly add fragment 2 to the pager view hierarchy). If after you simplify your controls, you still see the freeze, then that might not be because of too many controls.
Check whether there is offending control(s).Maybe you have a control or two that unexpectedly do a routine that heavily taxed your resources. If from point #1 you can find a fragment that significantly slowing down your app when it gets displayed, you might want to check further into that fragment and controls inside.
I have a dialog fragment that contains linear layout that involves a titleText above a RecyclerView, and at the very bottom, there's a button below the recyclerView.
Since a recyclerView expands or collapses based on the number of items the adapter sets, the button sometimes gets truncated and no longer appears to be on screen, since the recyclerView just covers the entire screen.
My question is, is there a way to set the maximum height of the recyclerView without ever hiding the button underneath. I also don't want to just give the view a random height just in case the recyclerView contains no items, and it would just be a blank section.
Please let me know if you've ever run into this issue, and how you resolved this. Thanks!
UPDATED
You can achieve this easily using layout weights. Here's an example:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Title"
android:textSize="21sp"/>
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="30dp">
</android.support.v7.widget.RecyclerView>
</LinearLayout>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:text="Submit"/>
</FrameLayout>
The Title and RecyclerView will wrap content according to contents and button will always take up bottom place.
I suggest using RelativeLayout as it handles the positioning of views for cases like yours, so that you can actually focus on main design.
<?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">
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:text="Some title" />
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/title"
android:layout_above="#+id/button"/>
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:gravity="center"/>
</RelativeLayout>
Above XML code is the skeleton code for what you need. you can add margins and dimensions to control the spacing. But in any case (until you provide negative margins) your views will never overlap each other.
Main trick of using RelativeLayout is the ability to use XML tags like
android:layout_below or android:layout_above or android:layout_start
or android:layout_end which perfectly aligns your view the way you
want.
I'm using scrollview to scroll my view up when soft keyboard open. But it's make more than required space between button and keyboard.
Can we remove this large space.
Here is my xml code block.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/widget32"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ScrollView android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="#+id/searchText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/searchBtn"
android:layout_centerVertical="true"
android:layout_marginLeft="30dp"
android:layout_marginRight="30dp"
android:layout_marginBottom="20dp"
android:hint="#string/search_hint"
android:inputType="number"
android:maxLength="10" />
<Button
android:id="#+id/searchBtn"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_marginLeft="30dp"
android:layout_marginRight="30dp"
android:background="#339933"
android:padding="20dp"
android:text="#string/search_button_text"
android:textColor="#FFFFFF"
android:textSize="20sp"
android:textStyle="bold" />
</RelativeLayout>
</ScrollView>
</RelativeLayout>
To align the click button with the software keyboard, it should be at the layouts bottom.
You should have the click button within the root layout, which should have the click button aligned to bottom, either with linearlayouts gravity or relativelayouts layout_alignParentBottom
So basically you define the layout as follows:
<RelativeLayout>
<Button
android:layout_alignParentBottom="true">
</Button>
</RelativeLayout>
And ta-da! the button is right on top of the software keyboard!
The real problem..
As it turns out in the comments the real problem here is to align the button to the keyboard only when it is visible, which can simply be achieved by having two invidual buttons that visibilitys are toggled based on the keyboard state
So first we define a layout that has two buttons, one for the software keyboard state and one for the "regular" state
<RelativeLayout>
<ScrollView>
<LinearLayout>
<!-- ...... -->
<Button
android:id="#+id/regular_button">
</Button>
</LinearLayout>
</ScrollView>
<Button
android:id="#+id/keyboard_aligned_button"
android:layout_alignParentBottom="true">
</Button>
</RelativeLayout>
and now we just hook the keyboard state to the visibility of the buttons, so we need in some way to keep track of the keyboard state, which is explained in many places
and when the keyboard is set to be visible we setVisibility of the regular button to be GONE, and keyboard aligned button to VISIBLE.
After a keyboard is gone visibilities are inversed
Our app's main content is a RecylerView of CardView's. For signup we require more than just a username/password to create an account so we decided to make the signup flow out of CardView's to match the user experience once they sign up.
To do that I have a single Activity that animates fragments in from the bottom and existing fragments out the top to emulate scrolling. This fake scrolling occurs when the user enters data and hits next to advance. This works pretty well except for one case. When we have a EditText for input the keyboard comes up and covers the 'next' button on the bottom of the screen.
In our user testing we've noticed a high percentage of users trying to scroll the card up to get to the next button instead of dismissing the keyboard.
I've spent a lot of time unsuccessfully trying to get the CardView to scroll up to reveal the button and I'm out of ideas and looking for new ones.
The signup Activity layout only contains a FrameLayout that I load Fragments into. Each fragment that gets loaded has a CardView for the root layout.
In the manifest I have set the activity's windowsSoftInputMode to adjustResize, adjustPan with little success.
activity_signup.xml
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/signUpContent"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
simplified fragment_enter_code.xml
<android.support.v7.widget.CardView
style="#style/CardViewStyle.SignUp"
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="wrap_content"
app:cardCornerRadius="25dp"
app:cardElevation="2dp"
app:cardUseCompatPadding="true"
app:contentPadding="8dp">
<EditText
android:id="#+id/codeEditText"
style="#style/HintedEditText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Code"
android:inputType="text"/>
<Button
style="#style/NextButton"
android:id="#+id/nextButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:enabled="false"
android:text="#string/next"/>
</android.support.v7.widget.CardView>
When I tried putting the CardView in a ScrollView the cardview layout (with fillViewport true), I get a scrollbar but the card doesn't scroll and the cardview layout gets messed up.
Does anyone know the windowSoftInputMode's well enough to point me in the right direction? Or is the CardView just not going to scroll outside of a Container that is design to hold them?
It feels like the solution to this is in manipulating the activity's view not the fragments.
I ended up creating a new app to just play around with this issue and noticed that if I had a layout that didn't contain a CardView whose root layout was a ScrollView it didn't scroll unless the activities windowSoftInputMode is set to adjustResize and then it will scroll.
I then made a layout with a <ScrollView><CardView><content...></CardView></ScrollView> and the size of the CardView was always the default row size for a card and wouldn't match_parent. I solved that with fillViewPort="true" on the ScrollView but when the keyboard came up it wouldn't scroll.
Turns out the secret sauce was to put a FrameLayout (or anyother layout) in between the CardView and the ScrollView.
You still have to account for the resize of the Layout to prevent your view elements not stacking over each other but Once you do that you now get the view above the soft keyboard to scroll and the ability to reach the rest of the UI with a CardView.
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:fillViewport="true">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:cardCornerRadius="35dp"
app:cardElevation="2dp"
app:cardUseCompatPadding="true"
app:contentPadding="8dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="200dp"
android:src="#drawable/common_ic_googleplayservices"/>
<EditText
android:id="#+id/input"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="50dp"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_below="#id/image"
android:hint="Input"
android:inputType="text"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/input"
android:orientation="vertical"
android:gravity="bottom|center_horizontal">
<Button
android:id="#+id/nextButton"
android:layout_width="match_parent"
android:layout_height="48dp"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:enabled="false"
android:text="Next"/>
</LinearLayout>
</RelativeLayout>
</android.support.v7.widget.CardView>
</FrameLayout>
</ScrollView>
How I get notified when the keyboard is going up?
I has a FrameLayout and it doesn't get resized when it's goes up, so I need to translate the screen myself.
This is my actual layout XML
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout android:orientation="vertical"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="match_parent"
android:layout_weight="1">
<br.view.image.ScrollableImage
android:id="#+id/image01" android:layout_width="match_parent"
android:layout_height="match_parent" />
<br.view.TopBarView android:id="#+id/topBar"
android:layout_width="match_parent" android:layout_height="wrap_content" />
<br.view.BottomBarView
android:id="#+id/bottomBar" android:layout_gravity="bottom"
android:layout_width="match_parent" android:layout_height="wrap_content" />
</FrameLayout>
From inside the BottomBar I open a PopupWindow wich a EditText and a Button.
When touch the EditText, the soft keyboard just overlay the bottom of the screen covering even the popup window.
See this SO question Android: which event fires when on screen keyboard appears?