Android create edit text animation like Chrome - android

Chrome recently updated on Android. I believe to version 38 maybe?
The new tab search box translates into the Url Address box. I'm not quite sure how it does this.
This was a couple version older but found a post from: http://www.omgchrome.com/google-chrome-android-material-design-beta/ describing the details behind it:
http://i.imgur.com/FvCJ21k.gif
Any help would be appreciated. And I know this isn't an L Preview only thing, because its currently my production version of Chrome running on the latest version of KitKat 4.4.4.

From my observation, I might only give you idea what is used and idea about the math
Search EditText is set below the Google logo, both of them are wrapped inside some ScrollView, probably kind of ObservableScrollView.
Shrinking and lengthening of EditText is done by the amount of pixels (percentage) scrolled with respect to the Google Logo. Hence, is the logo faded-out/in.
Lengthening and shrinking is changing its right coordinate.
When the logo view is off screen, the EditText is set as custom view in the actionbar.
Returning to appropriate place is probably done if the logo is scrolled >= 50% it returns to the ActionBar/Toolbar, otherwise it is returned to its starting position.
Worth mentioning is that the EditText is not clickable during the scroll, so it could be ViewOverlay just for animating purposes.
I'm just doing the guesswork here.
Also do some reading on monitoring the scrollviews for such purposes here.

Related

Android Studio 2.2 Gridlayout not working

I can understand maybe Android Studio 2.2 is different but I feel like it's not working at all with GridLayout, I'm watching thenewboston tutorial 17 for GridLayout, and when he makes it wrap around content then drag the buttons into it, it shows a bit of information over the mouse about where the button is going to be placed (Then shows green bars to indicate where the button is), mine doesn't do that and also it doesn't work at all. I'll include a gif of what I'm talking about.
Also, how do you enable the tooltips for the palette? and no I'm not talking about the quick docs but the mouse hover tip over the palette items.
Here is a gif https://gyazo.com/8a2bc1919f3d117238b7f52be11a2316
And also the error codes that pop up, one of them says view requires API Level 14 (Current min 9):<.GridLayout/>
And the other says
This Gridlayout view is useless (no children, no background, no id, no style)
Regarding dropping the button on the Grid... just drop the button on the GridLayout on the component tree (bottom left). Once you have the first item there you can use the grid as you'd normally expect it to work by moving the buttons around.
I realize that this question is a tad old, but also that it comes up quickly in a google search, so I hope that my solution can be of help to some one.
I was going through this same tutorial, and while I was never able to figure out if it's possible to enable the green lines or drag and drop properly into a GridLayout, I did find how to do it explicitly in the XML file.
In the tag for your button, simply add:
android:layout_row="X"
android:layout_column="X"
where x is any (positive) integer number from top to bottom for the row value, and left to right for the column value.
A less than ideal solution I know, but hopefully some one will benefit from this.

Can this PageAdapter behaviour be achieved in iOS?

On Twitter for Android there is a bar at the top of the display where the user can swipe left and right between three different screens: Home, Discover and Activity (see image 1).
As they do so, the small blue line moves in real time to underneath the name of the screen that has been selected (see image 2).
When the user scrolls downwards, the entire bar collapses to the size of the blue line and it remains that way until the user scrolls up again.
Can this be achieved in xCode, ideally in Storyboard? If not, what is the best alternative?
Apologies for the massive images...
I have built this as an ios feature before (also an android dev so I know where you are coming from).
Here is the DIY way;
Use a UIScrollView and with the pagingEnabled property set to YES. Typically a UIPageControl is used along with it.
Here is a Library that does it for you;
https://github.com/monsieurje/ICViewPager
Hope this has answered all your problems.

ListView SectionIndexer's box is transparent

In my app I'm using a listview with a section indexer that displays the letter of the current selection. It's fine on a lot of devices, but when I use my app on a Galaxy Tab running Android 3.2 the letter is displayed without the little box. I don't know how to make it appear or change the color of this letter.
I tried to use android:textColorPrimary but I didn't find how to use it and I find no sample.
To see my problem, below is a screenshot. If you look carefully, the letter G is in white above the second element of the list.
This is kind of a strange answer, because I fixed it, but I'm not sure why. When I set FastScrollEnable = true later than in the contructor of my derived ListView I get this behaviour aswell. Although, my letter is almost completly off the screen.
I'll probably get downvotes for this answer, but it saved me after 6 hours of prodding around. I noticed it when I removed my prototype code from our main classes to change the FastScrollEnable from outside.

Is there a workaround for the Android browser bug with CSS-Position and clickable areas?

When you have some clickable content like <a>, <input> or <area> and before this you have an absolutely positioned element with a bigger z-index, there is the wrong behavior of 'click-through'.
I click on the area where the clickable element is behind the front element. In other browsers there is the right behavior that the click does not go through the front element. But only in Android Browser you can click through the front element and activate the element behind. This is a known bug and you cannot avoid it. It's even in newer versions (I test on 2.3.3 in the official Android emulator).
There are some workarounds described in some forums but none of them worked for me.
I tried to put an <iframe> or an <a> between front and back
I tried to change the DOM so maybe the browsers state is refreshed
I tried to have the back elements be positioned as well
None worked
I'm especially having problems with the image map's area elements.
Has anyone had the same issue and managed to work around it?
I'm specifically interested in solutions which are tested against image maps.
I am wondering about a few things here. First, what is the purpose of having an overlaid image and using the image maps? I see you're including jQuery - can you use the hover event with jQuery to change the orientation of the images and do the swap? What about attaching to the click event for the image map, and checking to see if the lightbox is open. If it is, then return false;.
Just trying to think out loud. Sometimes another take on it can be helpful.
This is a quick blindfolded reply, so let me know if I should expand/fix it further. The general idea being a CSS class for both the hover and focus events that disables pointer interaction.
yourElementClass:focus, yourElementClass:hover {
pointer-events: none;
}
Actually I've managed to avoid it by moving the objects below to let them be not visible.
But in cases similar to yours the only workaround that actually works is to manage all the clicks in jquery (especially the ones on the background) and to bind/unbind the clicks events on needs.
there are also some things that could help on some version/mobiles (but do not solve the problem)
the above item has background:rgba(0,0,0,0.1);
you should put a gif or png as background of the above element (as well as the background color as point 1)
using thouchstart instead of click as bind event sometimes helps.
the actual version of android/browser are not affected with this bug (or at least it never happen to me) but it could be nice to know the affected versions. If someone has a list.

Android ListView alpha scroller for quickly scrolling long list

The Contacts app shows a button on the side of the screen that acts as a little thumb to allow you to quickly scroll the big list. I have a very long list that would benefit from this navigation behavior, but can't find any documentation as to how to enable it.
Is it a behavior that's built into the SDK, or must I write it myself?
Yes, it is included in the sdk. See here:
http://developer.android.com/reference/android/widget/AbsListView.html#attr_android:fastScrollEnabled
just set this property. If you want to further enhance this like the contacts that shows the letters for the section you are in you can use this.
http://developer.android.com/reference/android/widget/SectionIndexer.html

Categories

Resources