Develop Reference

React Native: Resize custom UI component

I've built a very simple native Android UI component and I want to update the size of its child view when a button from my react native project is clicked. To be more precise, when this button is clicked then I send a command to my SimpleViewManager which in turn calls the resizeLayout() of my custom view.
I can verify that the resizeLayout() is properly called but the layout is not resized until I rotate the phone. Obviously, changing the device's orientation triggers the draw() of my custom view but so does the invalidate() which I explicitly call.
Other layout changes like changing the background color instead of resizing it work fine.
My custom component looks like this:
public class CustomComponent extends RelativeLayout {
public CustomComponent(Context context) {
super(context);
init();
}
public CustomComponent(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public CustomComponent(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
private void init() {
inflate(getContext(), R.layout.simple_layout, this);
}
public void resizeLayout(){
LinearLayout childLayout = (LinearLayout) findViewById(R.id.child_layout);
RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) childLayout.getLayoutParams();
layoutParams.height = 50;
layoutParams.width= 50;
childLayout.setLayoutParams(layoutParams);
invalidate();
}
}
and the simple_layout.xml looks like this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/root_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/child_layout"
android:layout_width="100dp"
android:layout_height="50dp"
android:background="#ffee11"/>
</RelativeLayout>
Any help would be greatly appreciated.

After a couple of days of searching, I finally found the answer in this old reported issue in React Native's repo.
This solution is the same as the ones used in ReactPicker.java and ReactToolbar.java. I had to put the following code in my CustomComponent and after that there is no need to even call requestLayout() or invalidate(). The changes are propagated as soon as I update my layout's LayoutParams.
#Override
public void requestLayout() {
super.requestLayout();
// The spinner relies on a measure + layout pass happening after it calls requestLayout().
// Without this, the widget never actually changes the selection and doesn't call the
// appropriate listeners. Since we override onLayout in our ViewGroups, a layout pass never
// happens after a call to requestLayout, so we simulate one here.
post(measureAndLayout);
}
private final Runnable measureAndLayout = new Runnable() {
#Override
public void run() {
measure(MeasureSpec.makeMeasureSpec(getWidth(), MeasureSpec.EXACTLY),
MeasureSpec.makeMeasureSpec(getHeight(), MeasureSpec.EXACTLY));
layout(getLeft(), getTop(), getRight(), getBottom());
}
};

Try running
requestLayout();
instead of invalidate.
This post also has some good information on view lifecycle.
Usage of forceLayout(), requestLayout() and invalidate()
I would also recommend changing your root element in your view xml to
<merge>
that way your CustomComponent class doesn't have a RelativeLayout as its immediate child, unless that's what you were going for.

Automatically disable HorizontalScrollView when content small enough

I use a HorizontalScrollView to contain a bunch of dynamic TextView elements. They are dropped into a LinearLayout container that is the only child of the scroll view:
<HorizontalScrollView android:id="#+id/outline_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollbars="none"
android:requiresFadingEdge="horizontal"
android:fadingEdgeLength="16dp">
<LinearLayout android:id="#+id/outline"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</HorizontalScrollView>
This is to ensure that if (and only if) there's more text than the available width can show, the user can scroll horizontally through the texts.
BUT: in many, many cases, the texts are short enough to be shown on screen. The LinearLayout container with id outline thus fits completely within the HorizontalScrollView.
Problem is: horizontal swipe gestures are still caught but should not be, because the whole thing is within a ViewPager which itself would like to handle the horizontal swipes!
I am looking for a solution that enables this HorizontalScrollView's scrolling only if the room for the contents is too limited.

In order to prevent the HorizontalScrollView from scroll, you have to override the onTouchEvent method to return false. That led me to create my own HSV like so:
public class MyHorizontalScrollView extends HorizontalScrollView{
boolean tooSmall = true;
public MyHorizontalScrollView(Context context) {
super(context);
}
public MyHorizontalScrollView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public MyHorizontalScrollView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
public void setTooSmall(boolean tooSmall){
this.tooSmall = tooSmall;
}
#Override
public boolean onTouchEvent(MotionEvent ev) {
if(tooSmall)
return false;
else
return super.onTouchEvent(ev);
}
}
Then, after you replace your HSV with this custom view, you need monitor the size of your LinearLayout(R.id.outline) to see if it is smaller or larger than your HSV. Adding this snippet helped me achieve that goal.
ll = (LinearLayout) view.findViewById(R.id.outline);
hsv = (MyHorizontalScrollView) view.findViewById(R.id.outline_container);
ll.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
#Override
public void onGlobalLayout() {
Log.d("widths", ll.getWidth() + " : " + hsv.getWidth());
hsv.setTooSmall(ll.getWidth() < hsv.getWidth());
}
});

Android bringToFront causes flicker

I am animating three views that are stacked on top of each other. When I tap one that is not the front view, one or two views will slide up or down to uncover the tapped view, bring the tapped view to front, and then return everything to their original position. Most of these work fine. Only when I bring a view to front that I just animated away I get a noticeable flicker.
I have read at least a hundred posts but none contains the solution.
I am posting this to consolidate every suggested solution in one place and to hopefully find a solution.
I know that the animation does not animate the view itself, but just an image. The view stays at its original position. It is definitely related to that. It only happens when bringing a view to front that just moved.
Moving the view to the animation end position before starting the animation or after the animation is finished does not help one bit.
It also is not related to the AnimationListener.onAnimationEnd bug, since I derived my own views and intercept onAnimationEnd there.
I am using Animation.setFillAfter and Animation.setFillEnabled to keep the final image at the animation end location.
I tried using Animation.setZAdjustment but that one only works for entire screens, not views within a screen.
From what I have learned I suspect that the problem is bringToFront() itself, which does a removeChild()/addChild() on the parent view. Maybe the removeChild causes the redraw showing the view without the removed child briefly.
So my questions: Does anyone see anything I missed that could fix this?
Does Android maybe have a command to temporarily stop drawing and resume drawing later. Something like a setUpdateScreen(false) / setUpdateScreen(true) pair?
That would allow me to skip the flicker stage.
Minimal code to demo the effect follows. Tap white to see red move up and back down behind white without flicker (white comes to front but does not move). Then tap red to see red move back up from behind white and the flicker when it is brought to front just before it slides back down over white. Weird thing is that the same thing does not always happen when using blue instead of red.
MainActivity.java
package com.example.testapp;
import com.example.testapp.ImagePanel.AnimationEndListener;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.TranslateAnimation;
public class MainActivity extends Activity
{
private static final int ANIMATION_TIME = 1000;
private ImagePanel mRed;
private ImagePanel mWhite;
private ImagePanel mBlue;
private int mFrontPanelId;
private void animate(final ImagePanel panel, final int yFrom, final int yTo,
final AnimationEndListener animationListener)
{
final TranslateAnimation anim = new TranslateAnimation(0, 0, 0, 0, 0, yFrom, 0, yTo);
anim.setDuration(ANIMATION_TIME);
anim.setFillAfter(true);
anim.setFillEnabled(true);
if (animationListener != null)
{
panel.setAnimListener(animationListener);
}
panel.startAnimation(anim);
}
public void onClick(final View v)
{
final int panelId = v.getId();
if (mFrontPanelId == panelId)
{
return;
}
final ImagePanel panel = (ImagePanel) v;
final int yTop = mWhite.getTop() - mRed.getBottom();
final int yBot = mWhite.getBottom() - mBlue.getTop();
final boolean moveRed = panelId == R.id.red || mFrontPanelId == R.id.red;
final boolean moveBlue = panelId == R.id.blue || mFrontPanelId == R.id.blue;
animate(mBlue, 0, moveBlue ? yBot : 0, null);
animate(mRed, 0, moveRed ? yTop : 0, new AnimationEndListener()
{
public void onBegin()
{
}
public void onEnd()
{
// make sure middle panel always stays visible
if (moveRed && moveBlue)
{
mWhite.bringToFront();
}
panel.bringToFront();
animate(mBlue, moveBlue ? yBot : 0, 0, null);
animate(mRed, moveRed ? yTop : 0, 0, new AnimationEndListener()
{
public void onBegin()
{
}
public void onEnd()
{
}
});
mFrontPanelId = panelId;
}
});
}
#Override
public void onCreate(final Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mRed = (ImagePanel) findViewById(R.id.red);
mWhite = (ImagePanel) findViewById(R.id.white);
mBlue = (ImagePanel) findViewById(R.id.blue);
mFrontPanelId = R.id.red;
}
}
ImagePanel.java
package com.example.testapp;
import android.content.Context;
import android.util.AttributeSet;
import android.widget.ImageView;
public class ImagePanel extends ImageView
{
public interface AnimationEndListener
{
public void onBegin();
public void onEnd();
}
private AnimationEndListener mAnim = null;
public ImagePanel(final Context context)
{
super(context);
}
public ImagePanel(final Context context, final AttributeSet attrs)
{
super(context, attrs);
}
public ImagePanel(final Context context, final AttributeSet attrs, final int defStyle)
{
super(context, attrs, defStyle);
}
#Override
protected void onAnimationEnd()
{
super.onAnimationEnd();
clearAnimation();
if (mAnim != null)
{
final AnimationEndListener anim = mAnim;
mAnim = null;
anim.onEnd();
}
}
#Override
protected void onAnimationStart()
{
super.onAnimationStart();
if (mAnim != null)
{
mAnim.onBegin();
}
}
public void setAnimListener(final AnimationEndListener anim)
{
mAnim = anim;
}
}
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/main"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<com.example.testapp.ImagePanel
android:id="#+id/blue"
android:layout_width="300dp"
android:layout_height="300dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:background="#000080"
android:src="#drawable/testpattern"
android:onClick="onClick" />
<com.example.testapp.ImagePanel
android:id="#+id/white"
android:layout_width="300dp"
android:layout_height="300dp"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:background="#808080"
android:src="#drawable/testpattern"
android:onClick="onClick" />
<com.example.testapp.ImagePanel
android:id="#+id/red"
android:layout_width="300dp"
android:layout_height="300dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:adjustViewBounds="true"
android:background="#800000"
android:src="#drawable/testpattern"
android:onClick="onClick" />
</RelativeLayout>
testpattern.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval" >
<gradient
android:startColor="#00000000"
android:endColor="#ffffffff" />
</shape>

Do you need all the images be visible at any time? you can set their visibility as invisible so they will not disturb you. you make them visible again once you need them.

Try calling animation.cancel() in onAnimationEnd. I remember a while back I had a similar issue with animation flickering after executing code in onAnimationEndand that did the trick.

I was observing the same problems when calling bringToFront() during an animation.
I could solve my problem by using setChildrenDrawingOrderEnabled(boolean enabled) and getChildDrawingOrder(int childCount, int i) on the ViewGroup that contained the children I was animating.

Disable All Touch Screen Interactions While Animation

I wish to disable all the touch screen interactions while an animation is being displayed.
I don't wish to use the setClickable() method on the buttons at the start or end of the animation because there are a large number of buttons. Any suggestions?

In your Activity, you can override onTouchEvent and always return true; to indicate you are handling the touch events.
You can find the documentation for that function there.
Edit Here is one way you can disable touch over the whole screen instead of handling every view one by one... First change your current layout like this:
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
< .... put your current layout here ... />
<TouchBlackHoleView
android:id="#+id/black_hole"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
</FrameLayout>
And then define your custom view with something like this:
public class TouchBlackHoleView extends View {
private boolean touch_disabled=true;
#Override
public boolean onTouchEvent(MotionEvent e) {
return touch_disabled;
}
public disable_touch(boolean b) {
touch_disabled=b;
}
}
Then, in the activity, you can disable the touch with
(TouchBlackHoleView) black_hole = findViewById(R.id.black_hole);
black_hole.disable_touch(true);
And enable it back with
black_hole.disable_touch(false);

Easy way to implement that is add transaperent layout over it (add it in your xml fill parent height and width).
In the animation start: transaparentlayout.setClickable(true);
In the animation end: transaparentlayout.setClickable(false);

answer to this issue
for (int i = 1; i < layout.getChildCount(); i++) {
TableRow row = (TableRow) layout.getChildAt(i);
row.setClickable(false);
selected all the rows of the table layout which had all the views and disabled them

Eventually I took as a basic answer of #Matthieu and make it work such way. I decide to publish my answer because it take me maybe 30 min to understood why I got error.
XML
<...your path to this view and in the end --> .TouchBlackHoleView
android:id="#+id/blackHole"
android:layout_width="match_parent"
android:layout_height="match_parent" />
Class
public class TouchBlackHoleView extends View {
private boolean touchDisable = false;
public TouchBlackHoleView(Context context) {
super(context);
}
public TouchBlackHoleView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public TouchBlackHoleView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
#Override
public boolean onTouchEvent(MotionEvent event) {
return touchDisable;
}
public void disableTouch(boolean value){
touchDisable = value;
}
}
Using
blackHole = (TouchBlackHoleView) findViewById(R.id.blackHole);
blackHole.disableTouch(true);
Enjoy

Android - Scrolling text in main activity (marquee_forever) gets initialized when internal fragment changes

I'm facing a strange problem with a "ticker" (a horizontal auto-scrolling text).
My application uses fragments. Lots of them. It's based on a single activity, with an action bar, a fragment container and a bottom ticker.
Ticker is scrolling correctly, from left to right, but every time i change fragment, my ticker gets initialized again (current horizontal scrolling is lost and it starts from the beginning again, but no-one is telling him to do that!).
I'm using actionbarsherlock (works like a charm! thank you Jake Wharton!!) for compatibility mode.
Here's some code :
MAIN ACTIVITY LAYOUT :
<?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"
android:orientation="vertical"
android:id="#+id/mainRelative" >
<LinearLayout
android:id="#+id/mainFragmentContainer"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:layout_alignParentTop="true"
android:layout_above="#+id/tickerView1" >
</LinearLayout>
<my.app.views.TickerView
android:id="#+id/tickerView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true">
</my.app.views.TickerView>
</RelativeLayout>
TICKERVIEW CLASS
public class TickerView extends TextView {
private Context context;
public TickerView(Context context) {
super(context);
initialize();
// TODO Auto-generated constructor stub
}
public TickerView(Context context, AttributeSet attrs) {
super(context, attrs);
initialize();
// TODO Auto-generated constructor stub
}
public TickerView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
initialize();
// TODO Auto-generated constructor stub
}
public void initialize() {
context = getContext();
String s;
setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT));
setMarqueeRepeatLimit(-1);
setFocusable(true);
setFocusableInTouchMode(true);
setHorizontallyScrolling(true);
setSingleLine();
setEllipsize(TruncateAt.MARQUEE);
setSelected(true);
setText("sdghaskjghaskgjashgkasjghaksjhgaksjghakjshgkajsghaksjghaksjgh");
}
}
#Override
protected void onFocusChanged(boolean focused, int direction, Rect previouslyFocusedRect) {
Log.d("DEBUG", "ON FOCUS CHANGED");
if (focused)
super.onFocusChanged(focused, direction, previouslyFocusedRect);
}
#Override
public void onWindowFocusChanged(boolean focused) {
Log.d("DEBUG", "ON WINDOW FOCUS CHANGED" + (focused ? "FOCUSED" : "NOT FOCUSED"));
if (focused)
super.onWindowFocusChanged(focused);
}
#Override
public boolean isFocused() {
return true;
}
I've also tried the xml-based solution (setting up a layout file with correct attributes for scrolling text and extending my widget from LinearLayout), but i had same results.
Any ideas? thanks!

I know this isn't an answer but what version of ABS are you using? Is it 3.5 or 4? The tab text scrolls fine for me in 3.5 but I am having serious issues with it in version 4.
Have you tried setSelected(false)? It probably won't solve your problem but your code looks fine.