Fade out last few lines of a TextView - android

I've been researching all over, I was unable to find a proper answer.
I also can't achieve this on my own, so please help me out
I have a InfoWindowDialog view I'm creating, which has a TextView, that has a certain maxHeight.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin">
<TextView
android:id="#+id/txt_desc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="LONG_TEXT_WHICH_HAS_A_FEW_LINES..."
android:maxHeight="50dp"/>
</RelativeLayout>
And I want to achieve something similar to the last few lines of this example:
I have tried a solution mentioned Fade bottom of a textview android
By placing android:requiresFadingEdge="vertical" and android:fadingEdgeLength="32dp" and had no results.

There are a few solutions to this. The easiest is to add an UI element. Add an overlay graphic at the bottom of your view that has some sort of transparency, e.g. 50%. This will achieve what you are asking.
Others options to consider:
1) Track the last line of text, break it up, and add 50% transparency to it.
2) Track the last line of text, break it up, and change the color to a different gray. This gives the impression of transparency
3) If using scrollview, they have fading edge features.
<ScrollView android:requiresFadingEdge="vertical">
and in your code, you can do the following
ScrollView scroll = findById(); scroll.setFadingEdgeLength(150);
OR in your XML use android:fadingEdgeLength="150dp". Cheers!

Related

Approaches for implementing Android animation that re-apportions view

I have a LinearLayout that contains a couple of views. It doesn't have to be LinearLayout-based - this is negotiable - but it provides this simple example.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/left"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#f00"
android:orientation="horizontal"/>
<LinearLayout
android:id="#+id/right"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#ff0"
android:orientation="horizontal"/>
</LinearLayout>
This is rendered as follows:
What I want to do is produce an animation sequence that slides out the yellow view, off the right of the screen, whilst simultaneously enlarging the red view to fill the space left behind.
It strikes me that there are a few ways to do this:
Weight-Based Animation
I can change the layout weight - specifically, iteratively reduce the yellow view's weight to zero. This will do the job as far as the red view is concerned. However if the yellow view has content in it, it will be squashed as it resizes down. It also doesn't run very smoothly.
This is almost acceptable in some contexts, because I can fade out the yellow view and its content to an alpha of zero, and then clear the empty space. Still not that smooth, but no squashing. However when I need the content to stay visible while moving, it ceases to be appropriate anyway.
Translation Animation
I can slide out the yellow view, a bit like this. However the vacated space is left behind, as you might expect. It does run perfectly smoothly.
A combination of the above?
I haven't tried this yet. I guess I could slide out the view whilst simultaneously reducing the weight of the empty space. I don't know if this is actually feasible, i.e. whether the weight change would affect the animated slide, or whether the two can be coherently run at once, or whether it will operate smoothly anyway.
Or, of course, something entirely different.
Any suggestions please?

Android fixed background image in scrollview while scrolling

I have a situation where I need a scrollview to have a background image that shouldn't scroll along with it's parent when moving. Before any of you suggest me the links for setting background image and this that, I have already tried and it's not working.
The whole story goes like: I have an activity with fragments which have their own backgrounds with some input fields. When focusing over input fields, keyboard appears and background image squeezes. For that I put an image on background of scrollview that fixed my issue of squeezing background but raised another concern that background Image should stay static while scrolling the parent scrollview.
The second solution any of you may suggest is setting background of my activity rather playing with scrollview. That's right, but for that I had to make a style element with background of theme which appears odd while transitioning different fragments plus it adds overhead when I have a lot of code and fragments to move forward and back.
That's the point where I am stuck. I have gone through links below, if you just need to know that I tried it or not.
link1
link2
link3
... and so on
below is the layout I am using for my fragments (it's all being done programmatically)
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/top_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<ScrollView
android:id="#+id/scrollView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
android:scrollbars="none" >
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/backgroundView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:contentDescription="#string/app_name"
android:scaleType="fitXY" />
<LinearLayout
android:id="#+id/parent_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
</LinearLayout>
</FrameLayout>
</ScrollView>
</LinearLayout>
So if you guys have any better solution keeping in mind the situation I have, will be warmly welcomed. Thank you
None of the above works for me with some reason but this things works.
getWindow().setBackgroundDrawableResource(R.mipmap.img_reg_bg);
put it in oncreate method hope it will help.
If I guess right you try to fix your hotfix to get it working propperly. If I'm right you sould go back to scratch and do it without your scrollview.
If you have a look at following Link:
http://developer.android.com/guide/topics/manifest/activity-element.html#wsoft
you'll see softkeyboard mode can be adjusted. "adjustPan" should solve your problem.
"adjustPan"
The activity's main window is not resized to make room for the soft keyboard. Rather, the contents of the window are automatically panned so that the current focus is never obscured by the keyboard and users can always see what they are typing. This is generally less desirable than resizing, because the user may need to close the soft keyboard to get at and interact with obscured parts of the window.
Add someimgage to your drawable folderes, like drawable-mdpi, drawable-hdpi.
In your LinearLayout "#+id/top_layout" add attribute:
android:background="#drawable/someimage"

Android Centering the content

I'm a total beginner in Android layout, but I want to center the content vertically and horizontally.
So this book I'm reading says this:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:background="#color/background"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:padding="30dip"
android:orientation="horizontal" >
<LinearLayout
android:orientation="vertical"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:layout_gravity="center" >
...component.. etc...
This works and I think i get it, except Eclipse says:
This linearlayout or its parent is useless; transfer the background
attribute to the other view
But I do not understand this?
This linearlayout or its parent is useless; transfer the background
attribute to the other view
means that you can manage the entire layout by the parent it self, you are unnecessarily adding another LinearLayout which can degrade the layout performance
You can use android:gravity="center" instead of android:layout_gravity="center" which a child supplies to its parent.
Solution
you can combine your linear layouts as
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:background="#color/background"
android:orientation="vertical"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:gravity="center"
android:padding="30dip"
>
add android:background parameter in both LinearLayout
This linearlayout or its parent is useless; transfer the background
attribute to the other view
This is a warning triggered when any Layout has only one child which is also a Layout. In your case LinearLayout. In these cases one of other can be removed without any problems. It is recommended to remove these redundant layouts. It is.. as it says just a warning, it wont cause any exception, but if you remove that redundant layout that will help improve overall performance
You should share your full code so that everyone get the whole scenario of your problem. Any way you can follow three way to do the things.
Approach One :
android:layout_centerInParent="true"
Above code will make your layout center horizontally and vertically.
Approach two :
And if you want to do individually.(May be needs sometimes)
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
Approach three :
android:gravity="center" (Though I see you have used. May be you have missed any point inside code).
Hope this will help you. Happy coding.

Making Android not clip the view while animating (simple flip-clock-like widget)

I'm implementing a simple flip-clock / counter / ticker widget which will consist of several instances of a following "digit" widget:
It's a digit placed on top of a background image. The digit is supposed to animate every second by sliding up and revealing next digit. During the animation both digits should stay "within" the background's boundary.
I'm trying to achieve this behavior by having a TextView with 2 lines - one digit per line - and animating this TextView's position upwards, until the next digit is fully visible. And then I will reset TextViews position and replace both digits at the same time, so that it's impossible to notice. Then I will repeat the process and make it look like the animation never ends.
Here you can see an intermediate state of the animation, when part of zero and part of nine is visible. I "mocked" it in the Graphical Layout editor of Eclipse, by setting the layout_marginTop property to a negative value.
Here's the layout file (the mentioned attribute is normally not there).
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="20dp"
android:layout_height="38dp"
android:background="#drawable/background_countdown_normal_grey"
android:clipChildren="false" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipChildren="false"
android:paddingBottom="5dp"
android:paddingTop="5dp" >
<TextView
android:id="#+id/textview_countdown_digit"
style="#style/TextView.CountdownDigit"
android:layout_marginTop="-12dp"
android:text="0\n9" />
</LinearLayout>
</LinearLayout>
I tried two solutions. By using ViewPropertyAnimator on either translateY or y, I get a smooth animation, but the original clipping of the TextView does not change during animation, so in effect the second digit is never visible. As you can see, I tried clipChildren property, but it doesn't seem to change anything.
My second approach was to use ValueAnimator with a custom Evaluator, which modifies the topMargin of LayoutParams on the TextView. It works, but the animation is very choppy even on high-end devices.
So my question is, how to avoid view clipping during animation and make so in an efficient way? Is there a better approach?
I found an alternative solution in which I use a ScrollView instead. My layout looks like this:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/scrollview_countdown_digit"
android:layout_width="20dp"
android:layout_height="38dp"
android:background="#drawable/background_countdown_normal_grey"
android:paddingBottom="5dp"
android:paddingTop="5dp"
android:scrollbars="none" >
<TextView
android:id="#+id/textview_countdown_digit1"
style="#style/TextView.CountdownDigit"
android:text="0\n9" />
</ScrollView>
I animate using ObjectAnimator by scrollY property. Works well so far.
I also tried having 2 TextViews intsead of one (in my initial layout), but it did not change the fact of clipping.

Adding bottom margin to ListView last element

I need to add to add ListView with complicated items background: different for even/odd and rounded corners at the top and bottom. It looks like this:
I have implemented all this stuff via level-list, but there is one more thing I want to do.
Now the bottom item is near the bottom of the screen. It is better to add some space.
I don't want to add bottom margin to ListView, I need margin only for last item.
The ways I see to do this:
Footer
A kind of hack – add footer with empty TextView to ListView. But footers are quite unstable things, they usually disappear after notifyDataSetChanged and there is no way to get them back
Image with transparent pixels
I asked designer to add transparent pixels to bottom background resource. Unfortunately, in this case vertical centering is completely broken.
For example, there is 9patch like this:
And layout like this:
<?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"
>
<!-- View with background with transparent pixels on bottom -->
<LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content"
android:id="#+id/item"
android:background="#drawable/some_bgr"
android:padding="10dp"
>
<TextView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1"
android:text="Title"
android:layout_gravity="center"
android:textSize="18sp"
/>
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content"
android:text="Detail"
android:layout_gravity="center"
android:textSize="18sp"
/>
</LinearLayout>
<!-- Just for marking place took by view -->
<FrameLayout android:layout_width="match_parent" android:layout_height="match_parent"
android:layout_below="#id/item"
android:background="#88ff55"
/>
</RelativeLayout>
The result:
As you see, centering is not working. Unfortunately.
(BTW, if specify this 9patch as background for TextView, centering works good. If you know any article, explaining this, please let me know.)
Add bottom margin to last item in Adapter implementation
That should work, but for unknown reason I still can't get it work.
I don't like this way, because I don't like to modify dimensions in code.
So
There is already imaginary way – construct some XML drawable with particular bitmap and margin. According to drawables concept it should be possible, but I can't find implementation. May be somebody knows?
Any other ideas?
In your ListView, set a paddingBottom and clipToPadding="false".
<ListView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="8dp"
android:clipToPadding="false"
android:scrollbarStyle="outsideOverlay"/>
This also works for RecyclerView.
Only use android:scrollbarStyle="outsideOverlay" if you want the scroll bar to not overflow into the padded area.
add an empty footer in your list like this:
TextView empty = new TextView(this);
empty.setHeight(150);
listview.addFooterView(empty);
you can also do it from code if you want, for example here I react to
to EditText different situations:
if(s.toString().length()>0)
{
contacts_lv.setClipToPadding(false);
contacts_lv.setPadding(0,0,0,270*screenDensity);
}
else
{
contacts_lv.setClipToPadding(true);
contacts_lv.setPadding(0,0,0,0);
}
Clocksmith's answer is the best and pretty clever. You can also create an empty footer view.
Add these two lines in your listView XML code:
android:transcriptMode="alwaysScroll"
android:stackFromBottom="true"
Another solution might be that you make a mock view with certain height.
In your adapter in getViewCount return 2.
In getCount return yourData.size+1.
In getViewType check if the element is last element return 2;
Use this type in getView to populate the mockview.
I guess you want to add margin only to last item:
So you can do in this manner, in your getview method the index of the list item and check if its the last item, then progrmatically add margin to the view.

Categories

Resources