I'm trying to ensure that keyboard navigation works properly on my app and all view elements are focusable when users hit the 'Tab' key or 'Up/Down' arrow keys. However, the AppBarLayout seems to trap keyboard focus. I'm running my app on an emulator with a keyboard configured. A sample layout is as below:
<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"
tools:context=".MainActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/search_fragment_app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FFFFFF"
android:orientation="vertical"
android:scrollbars="horizontal"
android:focusable="true"
android:nextFocusDown="#id/recycler_view">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="8dp"
android:text="Sample text 1"
android:focusable="true"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="8dp"
android:text="Sample text 2"
android:focusable="true"/>
</LinearLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:focusable="true"
app:layout_constraintTop_toBottomOf="#layout/content_main"
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</android.support.constraint.ConstraintLayout>
Hitting the Tab key or the Up/Down arrows does not switch the focus over to the recycler view and the focus is stuck within the AppBarLayout. Setting the nextFocusDown attribute on the textviews and setting the view elements to remain focusable does not work either. Here is the image. What do I need to do to make this layout accessible?
I think you need to call
findViewById(R.id.search_fragment_app_bar).setTouchscreenBlocksFocus(false);
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
findViewById(R.id.search_fragment_app_bar).setKeyboardNavigationCluster(false);
}
setTouchscreenBlocksFocus
setKeyboardNavigationCluster
The way to release keyboard focus from AppBarLayout is to hook an actual device (NOT the emulator) to a keyboard and hit the keys Cmd+Tab (for Mac OS users) or Windows+Tab (for Windows users).
Related
The structure of my layout file: Coordinator layout - NestedScrollView - Coordinator Layout - objects that i want to be able to scroll
My TextInputLayout with TextInputEditText is at the bottom of the screen and when filled, extends out of bounds of the screen. When I collapse the keyboard it’s still not scrollable.
Note: I don’t want to set maxLines to Edittext and make it scrollable itself. I want it to scroll with other elements.
However, if I put, for example, TextView at the bottom of the screen and it doesn’t fit, the page is scrollable. Any ideas?
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fillViewport="true"
>
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!--other items i want to scroll-->
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/descriptionLayout"
android:layout_width="348dp"
android:layout_height="200dp"
android:layout_gravity="center_horizontal"
android:layout_marginTop="545dp"
android:ems="16"
android:fontFamily="#font/montserrat"
android:hint="Add image description (optional)"
android:inputType="textMultiLine|textAutoCorrect"
app:counterEnabled="true"
app:counterMaxLength="256"
app:boxBackgroundColor="#color/white"
app:srcCompat="#drawable/ic_round_cloud_upload_24"
android:textColor="#68B2A0"
android:textColorHint="#68B2A0"
app:hintTextColor="#68B2A0"
app:layout_anchor="#id/titleLayout"
app:boxStrokeErrorColor="#F75010"
app:boxStrokeColor="#68B2A0"
app:boxStrokeWidth="2dp"
app:errorIconTint="#color/error"
app:errorTextColor="#color/error"
app:layout_anchorGravity="center|bottom"
app:counterOverflowTextColor="#color/error"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
app:counterTextColor="#color/main_green"
>
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/descriptionTxt"
android:ems="16"
android:textSize="18sp"
android:textColor="#68B2A0"
android:fontFamily="#font/montserrat"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:maxLines="7"
/>
</com.google.android.material.textfield.TextInputLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
</androidx.core.widget.NestedScrollView>
<!--bottom app bar-->
</androidx.coordinatorlayout.widget.CoordinatorLayout>
This is because you hard set android:layout_marginTop="545dp". Try never to do that. Also i think use costaint layour in youre case is better. Just change <androidx.coordinatorlayout.widget.CoordinatorLayout> inside nested scroll view to <androidx.constraintlayout.widget.ConstraintLayout> and add this atributes:
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent
If you need to show nested view in fullscteen, just chaange android:layout_height="wrap_content" to android:layout_height="match_parent"
I have currently a problem with a recycler view and a floating action button in my android app. The button always jumps to the right top of the page when I start the app.
The RecyclerView and the Button are inside a fragment. Currently I am using a ConstraintLayout to say the Button should always appear at the right end of the screen. However, I also tried it with a RelativeLayout and CoordinatorLayout with anchor and gravity attributes. In Android Studio, the layout shows it correct, with the button at the bottom right side of the screen. As soon as I start the app on my phone, it appears on the top right side of the screen...
Layout preview:
When I start the app on my phone:
Here's my Code I am using right now for the 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"
android:id="#+id/fragment_bucketlist"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:background="#color/colorPrimary">
<android.support.v7.widget.RecyclerView
android:id="#+id/rv_bucketList"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab_addToBucketList"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"/>
</android.support.constraint.ConstraintLayout>
Thanks in advance for helping!
Try using the recyclerview and fab button within a CoordinatorLayout.
The attribute app:layout_anchorGravity: will specify how an object should be positioned relative to an anchor, on both the X and Y axes, within its parent’s bounds.
<android.support.design.widget.CoordinatorLayout
android:id="#+id/fragment_bucketlist"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorPrimary">
<android.support.v7.widget.RecyclerView
android:id="#+id/rv_bucketList"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/floating_action_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:scaleType="center"
android:src="#drawable/android_floating_action_button_icon"
app:layout_anchor="#id/rv_bucketList"
app:layout_anchorGravity="bottom|right|end"
app:borderWidth="1dp"
app:elevation="10dp" />
</android.support.design.widget.CoordinatorLayout>
I solved the problem using a RelativeLayout. There was a problem that the Floating Action Button always showed up on the bottom edge and "stucked" at the bottom navigation bar (HUAWEI devices). The attribute app:useCompatPadding="true" solved the issue.
Here is the updated code:
<?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"
android:id="#+id/fragment_bucketlist"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:background="#color/colorPrimary">
<android.support.v7.widget.RecyclerView
android:id="#+id/rv_bucketList"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab_addToBucketList"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_edit"
app:useCompatPadding="true"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true" />
</RelativeLayout>
I'm trying to implement the following design on Android.
I know that to have the button at that position I should have two constraint layout; one for whole change password form and one for change password form without the Save button and then set the Save button's Top and Bottom constraint to the second ConstraintLayout.
But when I do this, the button goes behind the form, and therein lies the problem:
Here is my XML:
<android.support.design.widget.CoordinatorLayout 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"
tools:context=".ChangePasswordActivity">
<include
android:id="#+id/changePasswordBar"
layout="#layout/top_bar_full"></include>
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.constraint.ConstraintLayout
android:id="#+id/changePasswordCTL"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/activities_constraint_top_bottom"
android:layout_marginEnd="#dimen/activities_constraint_start_end"
android:layout_marginStart="#dimen/activities_constraint_start_end"
android:layout_marginTop="#dimen/activities_constraint_top_bottom"
android:background="#drawable/radius_background_exchange"
android:elevation="5dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
// some EditText and TextView views here
</android.support.constraint.ConstraintLayout>
<br.com.simplepass.loading_button_lib.customViews.CircularProgressButton
android:id="#+id/changePasswordBT"
style="#style/customButton"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="32dp"
android:layout_marginStart="32dp"
android:layout_marginTop="8dp"
android:fontFamily="#font/sans_web_medium"
android:text="#string/finish"
android:textAllCaps="false"
android:textColor="#android:color/white"
android:textSize="#dimen/signinup_button_font_size"
app:initialCornerAngle="5dp"
app:layout_constraintBottom_toBottomOf="#+id/changePasswordCTL"
app:layout_constraintEnd_toEndOf="#+id/changePasswordCTL"
app:layout_constraintStart_toStartOf="#+id/changePasswordCTL"
app:layout_constraintTop_toBottomOf="#+id/changePasswordCTL"
app:spinning_bar_color="#android:color/white"
app:spinning_bar_padding="6dp"
app:spinning_bar_width="4dp" />
</android.support.constraint.ConstraintLayout>
</android.support.design.widget.CoordinatorLayout>
When elevation isn't in the picture, views that are defined later in the XML file will draw "on top" of views defined earlier. However, your password form has android:elevation="5dp", and this will override the normal drawing order.
To fix, add elevation to the button as well. android:elevation="5dp" should be enough, since then they're at the same elevation and the normal rules should apply. But you could give it more elevation to guarantee that it always draws on top of the password form.
There is a 5dp elevation on the form and no elevation on the button, so it is partially obscured. Increase the button elevation to at least 5dp.
android:elevation="5dp"
You could achieve such design by using a CoordinatorLayout.
Example:
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<ImageView
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="180dp"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
android:background="#color/primary" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_camera"
app:layout_anchor="#id/header"
app:layout_anchorGravity="bottom|center_horizontal" />
</android.support.design.widget.CoordinatorLayout>
just use the following to anchor the layout of your button to the layout of your library view:
app:layout_anchor= "id_of_password_form_layout"
Some of my floating action buttons don't remain where I want, and I cannot understand why.
The first is how they should be (and actually sometimes it works), the other two images show how they behave sometimes... and I cannot find a "pattern" in this behavior.
This is the layout (only one half):
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/lay_attivita_edit_ubicazioni"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingLeft="#dimen/list_padding_lateral"
android:paddingRight="#dimen/list_padding_lateral">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical"
android:id="#+id/container_attivita_edit_origini">
<TextView
style="#style/FieldLabel"
android:layout_marginTop="20dp"
android:text="#string/attivita_edit_origini" />
<ListView
style="#style/ListView"
android:id="#+id/list_attivita_edit_origini"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="vertical"
android:fadeScrollbars="false"
android:background="#drawable/border_rectangle" />
</LinearLayout>
</LinearLayout>
<android.support.design.widget.FloatingActionButton
style="#style/FloatingActionButton.Small"
android:id="#+id/fab_attivita_edit_ubicazioni_edit_origini"
app:layout_anchor="#id/list_attivita_edit_origini"
app:layout_anchorGravity="top|right|end" />
</android.support.design.widget.CoordinatorLayout>
I tried also to se anchor and anchorGravity programmatically but the result is the same. It could happen because depending on some logic one of the two sections could not be visible, in case I make them invisible at the end of OnCreateView.
It doesn't depend on the visibility of the "anchor list" because the fab move even if I always leave both the lists visible.
I tried also to change programmatically anchor and anchorId of the fab at every change of visibility of them or of their lists, nothing.
CoordinatorLayout.LayoutParams editOrigineFabParams = (CoordinatorLayout.LayoutParams)editOrigineFab.LayoutParameters;
editOrigineFabParams.AnchorId = Resource.Id.list_attivita_edit_origini;
editOrigineFabParams.AnchorGravity = (int)(GravityFlags.Top | GravityFlags.Right | GravityFlags.End);
editOrigineFab.LayoutParameters = editOrigineFabParams;
With the same conditions/code sometimes they work and sometimes they don't. It looks like a bug in Android. I tried with Android 7.0 and 7.1, Xamarin.Android.Support.Compat.25.3.1.
Anyone who had a similar problem or who has an idea of what could be the reason?
Use FAB by james montemagno.
Add FAB by james montemagno from nuget to your project.
https://www.nuget.org/packages/Refractored.FloatingActionButton/
<Refractored.Fab.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:layout_margin="16dp"
android:src="#drawable/ic_action_content_new"
app:app_colorNormal="#color/primary"
app:app_colorPressed="#color/primary_pressed"
app:app_colorRipple="#color/ripple" />
use layout_gravity for positioning .
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:src="#drawable/ic_edit"
android:layout_marginRight="15dp"
android:layout_marginBottom="15dp" / >
In my android app, in my profile edit page, when I start the activity, the first edittext field is focused (blinking cursor), and the keyboard gets displayed.
How can I keep it being focused on startup (blinking cursor) but prevent the keyboard from showing up? If that is not possible, then just not focus the edittext on startup.
Thanks.
<EditText
android:id="#+id/textinput_firstname"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:inputType="textPersonName"
android:text="test" />
Just add this line of code in your onCreate(...) method
getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_STATE_HIDDEN);
This is probably happening for EditText for most users, all you have to do is, just go to the layout file and set the layout's view groups attributes as follows:
android:focusable="true"
android:focusableInTouchMode="true"
For Example.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:background="#color/colorPrimary"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:focusable="true"
android:focusableInTouchMode="true">
<EditText
android:layout_width="match_parent"
android:layout_height="41dp"
/>
</LinearLayout>
Note: you have to set the attributes for the first view in the layout
no matter what it is This will set the default focus to false;