Recently, I've been working on a chat UI, in which I have some custom component, an EditText mainly, for the user to write the message on. The first image would be an example layout, not necessarily the one I'm using, but the concept is the same. The other two images, are the current state of the UI, and what I would like to achieve.
FYI, this is a Fragment, within an Activity, which has a BottomNavigation component. I make this clarification, because, should I just apply the windowSoftInputMode="adjustResize" I'm afraid the BottomNavigation component will also appear above the keyboard, as would the button.
So I'm guessing the question is: how do I tell the keyboard to stay below the entire EditText? Is this even possible? That's my main concern.
Thanks!
After going down the rabbit hole quite a bit, I basically found three approaches:
Using ViewTreeObserver.OnGlobalLayoutListener, mentioned in the question ADM provided above, which in turn, refers to this post here.
Taking advantage of this library, which for many, seemed to do the trick.
Finally, the one I've seen the least out there. For devices with API level 30, or above, you can use the following piece of code to listen to changes in keyboard visibility. It is described in full, with many other useful new things, here:
ViewCompat.setOnApplyWindowInsetsListener(view) { v, insets ->
val imeVisible = insets.isVisible(Type.ime())
// do something with imeVisible value
}
Related
Let's say we have a BottomNavigationBar with a FAB on top. When using this setup and showing a Snackbar, the Snackbar should appear above the BottomNavigationBar and push up/down the FAB while appearing/dismissing.
This is a common scenario for the use of CoordinatorLayout. Is it also possible to create this animation using the new MotionLayout?
There is an issue in the bug tracker, but it's already closed, because OP didn't clearly formulate the question (https://issuetracker.google.com/issues/112665540)
Problems I ran into while trying: We don't have access to the layout-id of the Snackbar. We also don't have access to the general xml of the Snackbar, so we cannot set its Constraints.
UPDATE: I understand that a piece of code would help as a starting point to answer this question. But what ever piece of code I came up with yet, was not useful at all. I pinpointed now the 2 main problems:
I do not know the layout-id of the Snackbar. Therefore I cannot use it in writing a Scene description.
Even if I could create a Scene description (e.g. State1: SnackBar visible, State2: Snackbar not visible). I'd have to trigger these Scene transitions by hand. That means that I would re-create my own Snackbar instead of using the original Snackbar as it is intended.
COMMENTS: #mikejonesguy Yes, in my opinion they are similar. Not the same, but similar. And MotionLayout does also have the job you described: to coordinate interactions among its subviews. Replace "coordinate" with "animate" and you'll see my point. Also have a look at the OnSwipe/OnClick handlers. MotionLayout is still very fresh, but I think it will replace CoordinatorLayout in the future the same way ConstraintLayout replaced RelativeLayout. Maybe I'm wrong, maybe not...time will tell.
CONCLUSION:
As far as I'm concerned, there seems to be no way (yet) to achieve what I want only by using MotionLayout. If it's possible one day, I'll update this question with a working example. Sorry for the impossible bounty... :)
You can design your layout files as if the snackbar is in your layout hierarchy. You need to make use of Constraintlayout's virtual helper objects. Virtual objects are invisible but they act as a regular view during measuring & layout, therefore their purpose is to help you create the exact positioning you want.
A snackbars default height is min 48dp and max 80dp. You are going to need this information.
I'm trying to design an app with a layout that will roughly look like this (don't mind the color):
How can I achieve something like that? I'm thinking of using a CardView for that bottom panel (I don't know what it's really called).
Furthermore, I want to hide it (animating it) when the use scrolls on the content. I have tried many codes but they won't work so I won't put them here anyway (like what's suggested here). Thanks for the help.
Whenever I have a question along the lines of "How do I do this neat UI thing I saw once?", I always start by checking out wasabeef's amazing UI library collection. In your case I might start by looking at bottomsheet or AndroidSweetSheet.
I'm writing an app using Titanium. I want to be able to automatically dismiss the keyboard anytime something outside of the text field is clicked. I have yet to find an elegant solution for this issue.
Couple things that I've thought about, but am still looking for a better solution:
Assign event listeners to basically everything else present in the view, and dismiss the keyboard (using textField.blur()). I want to avoid this since it results in a LOT of code just to dismiss the keyboard. Also, if I end up adding anything else to the view, I'll have to add a click listener to that object as well, so it's not very maintainable.
Create a large transparent view, and have it take up the entire screen. Place it directly beneath the text field and add to it one click listener on that which will dismiss the keyboard. This is a better solution than #1, but still isn't great because I've had a lot of trouble getting zIndexes to work properly. It's also inefficient for my purposes because I've got views with a specific width and height that encapsulate text fields. I've used these for the sake of code simplicity and I re-use them throughout my application.
I've tried adding a listener for the "blur" event for the text field but that doesn't seem to get fired appropriately.
That's about it. I'm sort of at a loss. The zIndexing also behaves strangely on the iPhone, and I haven't tried on Android yet. Also, as I mentioned above, many of the text fields I use are encapsulated within small views with set widths/heights-- so I think that will affect the functionality of Z-indexes.
So the root question is: What's the best way to dismiss a keyboard whenever anything outside the text field that's in focus is clicked?
If I'm correct the click event propagates through all views and windows therefore your #1 option could be modified to check for clicks on the bottom most layer (view or window), check for its source then decide what to do.
I have an app that runs fullscreen by using:
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,WindowManager.LayoutParams.FLAG_FULLSCREEN);
Because of this the layout, android:windowSoftInputMode="adjustResize" is not working properly, i.e. it dose not resize.
Is there any way to get over the problem?
FYI: This is an existing AOSP (Android Open Source Project) bug: http://code.google.com/p/android/issues/detail?id=5497
Ideally this bug would be fixed, but until then here are a couple thoughts of how it could be worked around. Since I have no idea what application scenario this pertains to, these may not be very applicable.
In agreement with my best interpretation of the previous answer, design your layout so that adjustPan works ok with it. The first thing I can think of here is not having any headers or footers that are intended to remain on screen when the keyboard is up.
Don't use FLAG_FULLSCREEN with a layout that can accept text input. Possibly it wouldn't be a big deal to show the status bar when accepting input. However, for something that views content with embedded input fields (like a web browser) that has a fullscreen mode, this doesn't make much sense at all.
Implement adjustResize-like behavior of your own. I'm not sure how well this would work, but possibly you could write a subclass of whichever class is causing the keyboard to be shown (ex: EditText) where you either track when the keyboard is shown or take over the calls to show and hide the keyboard (overriding at least onKeyUp and onTouchEvent). When shown, resize your content - possibly with a best guess of the softinput height, since users can install different soft input methods. I believe this would be technically difficult and not reasonable to attempt without extreme need.
Instead of android:windowSoftInputMode="adjustResize" you can try with android:windowSoftInputMode="adjustPan"
I'm taking my first steps in Android programming.
My application is to create entries in a database. For this task I have created a new Activity. All is fine - but I don't really like how it looks.
Currently, the emulator shows this:
I'd like to have something similar to the "New Contact" Activity:
Buttons at the bottom of the window, not directly below the other controls (I'll hopefully figure that out myself)
Buttons within a nice "box" like shown in the screenshot (what's the control hosting the buttons here?)
When soft-keyboard is displayed, the buttons should "move up". If there's not enough room, the entire area should be scrollable (I'll try and figure that out myself too)
Sample can be seen here:
Which control hosts the buttons in the above "New contact" screenshot? I'd like to use the same for my buttons.
One way to figure out what an existing activity does is to use hierarchyviewer and examine the activity's contents.
Another way to figure out what a native Android activity does is to look at the source code. In this case, it would appear that the buttons are inside of a horizontal LinearLayout with style="#android:style/ButtonBar" to give the silver sheen. That style, in turn, uses #android:drawable/bottom_bar as its background. That image can be found in your SDK installation -- go to the platform directory of your choice, then data/res/drawable-hdpi and data/res/drawable-mdpi for the two versions.
The contacts layout looks like a ListView sitting on top of some sort of RelativeLayout or LinearLayout housing the buttons. The silver background may simply have been set using android:background on the Layout itself (layouts are views).
I found that the commonsware books are excellent resources for getting started and have good examples for this type of layout.
Hey, this is a little late, and I know you've already got the silver bar you wanted, which is all good, but I've stumbled upon a really good guide on controlling the soft keyboard for best user experience. It covers, among other things, how to make the visible area resize to fit the button bar in the view while typing, which is done by specifying the activity in the manifest file like so:
<activity android:name=".MyActivity" android:windowSoftInputMode="resize" />
I really recommend reading it, it covers a lot more helpful stuff than just that. Hope that helps; I couldn't see that anyone else has answered that particular part of your question.
You can put them in LinearLayout and assign weight of 1 to each of the buttons.
Also if you own dev phone / or want to see UI of the application in emulator - there is a very cool tool call hierarchyviewer
http://developer.android.com/guide/developing/tools/hierarchy-viewer.html
and you can see how UI of app you like has been laydown.