I have a layout that animate as below
The txt_billion is shown dynamically, with android:animateLayoutChanges="true" (Layout code below).
Notice the Hundred is jumping (actually all are jumping, but the Hundred is just more obvious). How to prevent the text from jumping?
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:animateLayoutChanges="true"
android:orientation="horizontal">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:padding="8dp"
android:background="#9f9"
android:text="Hundreds" />
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:padding="8dp"
android:background="#f9f"
android:text="Thousands" />
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:padding="8dp"
android:background="#0ff"
android:text="Millions" />
<TextView
android:id="#+id/txt_billion"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:padding="8dp"
android:visibility="gone"
android:background="#ff0"
android:text="Billions" />
</LinearLayout>
You could get the code from https://github.com/elye/issue_horizontal_layout_animate to test out
Try to use Support Transitions instead animateLayoutChanges
First, remove android:animateLayoutChanges="true" from your XML file
After, add compile 'com.android.support:transition:25.4.0' to your app dependencies.
Then, add this line before change visibility (TransitionManager from android.support.transition package)
TransitionManager.beginDelayedTransition(parentOfAnimatedView);
For your code
public void clickMe(View view) {
TransitionManager.beginDelayedTransition((ViewGroup) billionText.getParent());
if (billionText.getVisibility() == View.GONE) {
billionText.setVisibility(View.VISIBLE);
} else {
billionText.setVisibility(View.GONE);
}
}
The problem is that animateLayoutChanges only affects subclasses of ViewGroup. TextView can't react to layout change animations, so the text jumps. There are two ways to fix it:
1) Wrap each TextView in a FrameLayout and put the weight on the FrameLayout. You'll also have to add android:animateLayoutChanges="true" to each, as well as calling getLayoutTransition().enableTransitionType(LayoutTransition.CHANGING) on each FrameLayout. This is kind of gross layout-wise, but it will allow you to keep using the transition animations.
2) Use a ValueAnimator and animate the weight of the (dis)appearing item. The animation may be a little choppier since it needs to lay out the LinearLayout on each frame, but it should still be passable. You'd also have to solve for text reflowing on the disappearing item, maybe by animating it fading out first and then animating the weight change.
Related
I am trying to align a TextInputLayout and 2 imageViews in a Linear layout with horizontal orientation. For some reason, I am having difficulties positioning them in a horizontal layout. This is what I have tried so far.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="3.0">
<android.support.design.widget.TextInputLayout
android:id="#+id/longDescriptionTextInputLayout"
style="#style/textfieldbox"
app:hintTextAppearance="#style/TextAppearence.App.TextInputLayout"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_marginTop="20dp">
<android.support.design.widget.TextInputEditText
android:id="#+id/longDescriptionTextInputEditText"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#null"
android:layout_weight="1"
android:drawablePadding="15dp"
android:textColor="#color/textInputEditTextColor"
android:drawableStart="#drawable/ic_attach_file_black_24dp"
android:drawableTint="#color/Gallery"
android:hint="#string/longDesc"
android:inputType="textEmailAddress"
tools:ignore="MissingPrefix,UnusedAttribute" />
</android.support.design.widget.TextInputLayout>
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:src="#drawable/ic_mic_black_24dp" />
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:src="#drawable/ic_volume_up_black_48dp"/>
</LinearLayout>
I am unable to figure out what I am doing wrong. Any help is appreciated. Attaching an image of the output. The white space in the front is the TextInputEditText.
There are two problems in your layout.
The first is that your TextInputEditText includes these two attributes:
android:layout_width="0dp"
android:layout_weight="1"
This is the generally-accepted pattern for using layout_weight, but weight only makes sense on direct children of the LinearLayout, and since this view is wrapped in a TextInputLayout they are not appropriate here. Change those to:
android:layout_width="match_parent"
The second problem is that you are specifying android:weightSum="3.0" on your LinearLayout, but its direct children only have weights that add up to 2.0. Either change the value of that attribute to 2.0 or delete the weightSum attr altogether (it really only causes problems).
While testing some designs for a LinearLayout for the elements in a ListView, I stumbled upon some weird behaviour. As you can see in the added code, I have three TextViews in a horizontal LinearLayout. I wanted to set the padding for one of these TextViews, but it seems that this value is also applied to the other TextViews as a margin of some sort (see pictures).
<?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="48dp">
<TextView
android:id="#+id/search_list_row_symbol"
android:layout_width="wrap_content"
android:layout_height="16dp"
android:paddingTop="0dp"
android:layout_marginTop="0dp"
android:textSize="16sp"
android:background="#android:color/holo_blue_light"
android:text="O"/>
<TextView
android:id="#+id/search_list_row_name"
android:layout_width="0dp"
android:layout_height="48dp"
android:layout_weight="1"
android:paddingTop="0dp"
android:layout_marginTop="0dp"
android:textSize="16sp"
android:background="#android:color/holo_red_light"
android:text="oxygen"/>
<TextView
android:id="#+id/search_list_row_number"
android:layout_width="wrap_content"
android:layout_height="20dp"
android:paddingTop="0dp"
android:layout_marginTop="0dp"
android:textSize="16sp"
android:background="#android:color/holo_green_light"
android:text="8"/>
</LinearLayout>
Set android:paddingTop="0dp" on all TextViews
Set android:paddingTop="16dp" only on first TextView
Do any of you know why the padding cannot be set independently on one of these TextViews?
The behavior seems correct as padding is applied to the content of a view - not to the view itself. However, the remaining child views following the padding from first child view seems erroneous.
As an alternate, I would suggest you to replace paddingTop with layout_marginTop and it should work fine.
Because you have given padding to only one text view. If you want all text view than you will have to keep all three within one LinearLayout and set property i.e setPadding() or setPaddingTop().
I think this might help you.
I am showing and hiding views on a particular actions using some animation, I used LayoutTransition and it seems to work fine except one thing, while the animation is going, the background of some TextViews changes and reset to the default white background!!
Following is the code I am using to apply animation after hide/show.
mRightTransitioner = new LayoutTransition();
mRightTransitioner.setDuration(1000);
vg_rightContainer.setLayoutTransition(mRightTransitioner);
Edited: even without animation i tried, same problem, the background resets once view's position changes
Edited: here how i declared the views in the XML
<LinearLayout
android:id="#+id/ll_req_reasonwrapper"
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_marginTop="10dp"
android:baselineAligned="false"
android:gravity="right"
android:orientation="horizontal"
android:visibility="gone" >
<EditText
android:id="#+id/et_req_reasons"
android:layout_width="400dp"
android:layout_height="match_parent"
android:background="#drawable/comments_textbox"
android:gravity="right|center_vertical"
android:inputType="text"
android:paddingRight="8dp" />
<TextView
android:layout_width="100dp"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:text="#string/str_req_preasons" />
</LinearLayout>
<LinearLayout
android:id="#+id/ll_req_timewrapper"
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_marginBottom="10dp"
android:layout_marginTop="10dp"
android:baselineAligned="false"
android:gravity="right"
android:orientation="horizontal"
android:visibility="gone" >
<LinearLayout
android:id="#+id/ll_req_endtimewrapper"
android:layout_width="wrap_content"
android:layout_height="match_parent" >
<TextView
android:id="#+id/ftv_req_endtime"
android:layout_width="100dp"
android:layout_height="match_parent"
android:background="#drawable/comments_textbox"
android:freezesText="true"
android:gravity="right|center_vertical"
android:inputType="numberDecimal"
android:paddingRight="8dp" />
<TextView
android:layout_width="100dp"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:text="#string/str_req_endtime" />
</LinearLayout>
<LinearLayout
android:id="#+id/ll_req_starttimewrapper"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginLeft="50dp" >
<TextView
android:id="#+id/ftv_req_starttime"
android:layout_width="100dp"
android:layout_height="match_parent"
android:background="#drawable/comments_textbox"
android:freezesText="true"
android:gravity="right|center_vertical"
android:inputType="numberDecimal"
android:paddingRight="8dp" />
<TextView
android:layout_width="100dp"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:text="#string/str_req_starttime" />
</LinearLayout>
</LinearLayout>
for instance: if i hide 'll_req_reasonwrapper', then the LinearLayout 'll_req_timewrapper' moves up, then the backgrounds of the textViews like 'ftv_req_starttime' becomes white!!
Please help.
Edited Answer:
if your are using linear layout then if the child is not being displayed, it is not going to be laid out and not going to be the part of the measurements ( as it looks like ). I recommend to use the RelativeLayout.
You can try
android:background="#null"
for your buttons. if your are using some custom class for button then add
.setBackgroundDrawable(new ColorDrawable(android.graphics.Color.TRANSPARENT));
for this specific views.
Need more code. The fact that disabling the LayoutTransition does not solve your issue, means that the animation is not the issue.
How do you reinstantiate child views or populate your view. Are you removing views with setVisibility(View.GONE) and then setting them back with setVisibility(View.VISIBLE)
OR
Are you removing childAt(i) and then dynamically adding custom views
I'm sorry I couldnt add a comment since I dont have the reputation for that but I think I am able to answer your question if you post more code.
I've run into a very annoying problem regarding ScrollView resizing, and I'm running out of possible solutions.
I have a FragmentPager containing several different Fragments, one of which has a ScrollView.
The Fragment with the ScrollView is made up of a Spinner and the ScrollView containing a LinearLayout with several rows of other Views (such as SeekBars, Buttons, Edittexts) in it.
Depending on which option is select in the Spinner, the ScrollView shows different views. To do so, some Views have their visibility turned to Gone, while others are turned to Visible.
This works great, except for the fact that the ScrollView does not seem to resize itself properly upon choosing a different option using the Spinner.
When the ScrollView is full of Views, and therefore scrollable, if the user selects an option which shows less Viewsthan required to fill the ViewPort the ScrollView still scrolls.
When the user then chooses the old option again, the ScrollView is now unable to scroll since it took on the size required for the previous option.
When the user then chooses the SAME option again, the ScrollView suddenly is scrollable, since it is now resized to the actual size required.
What is going on here? And better yet, how can I fix this annoying problem?
My layout:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/control_scroll"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#99000000"
android:fillViewport="true" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#DD000000"
android:gravity="bottom"
android:orientation="vertical" >
<TextView
android:id="#+id/lamp_choose_tv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="2dp"
android:paddingLeft="5dp"
android:text="#string/choose_lamp_text"
android:textColor="#FFFFFF"
android:textSize="14sp" />
</LinearLayout>
<Spinner
android:id="#+id/lamp_select_spinner"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:textColor="#FFFFFF" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#DD000000"
android:gravity="bottom"
android:orientation="vertical" >
<TextView
android:id="#+id/lamp_settings_tv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="2dp"
android:background="#44000000"
android:paddingLeft="5dp"
android:text="#string/lamp_settings_text"
android:textColor="#FFFFFF"
android:textSize="14sp" />
</LinearLayout>
<!-- Lamp name -->
<LinearLayout
android:id="#+id/naam_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="bottom"
android:paddingBottom="3dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingTop="3dp" >
<TextView
android:id="#+id/bridge_naam"
style="#style/ConfigText"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/config_lightname"
android:textColor="#FFFFFF"
android:textSize="16sp" />
<EditText
android:id="#+id/lamp_naam_input"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:background="#drawable/tasstextfield"
android:inputType="textNoSuggestions"
android:textColor="#FFFFFF" >
</EditText>
</LinearLayout>
<View
android:id="#+id/separator"
android:layout_width="fill_parent"
android:layout_height="0.5dp"
android:background="#android:color/black"
android:visibility="visible" />
<!-- Rest of the views -->
Things I already tried:
ForceLayout/requestLayout on the parent ScrollView
Invalidate the ScrollView
ForceLayout/requestLayout on the containing LinearLayout
Invalidating the LinearLayout
Invalidating all children of the ScrollView
ForceLayout/requestLayout on all children of the ScrollView
This might not be the most enjoyable solution, but it might work.
Use a handler to post a delayed message to refresh the view a second time, as if the user would choose the same option twice after having click on the refresh button.
// The code when the user wants to update the views
myButton.setOnClickListener(new OnClickListener{
#Override
public void onClick(View view) {
updateView();
Message m = Message.obtain();
m.what = UPDATE_TAG;
mHandler.sendMessageDelayed(msg, 200);
}
})
...
final int UPDATE_TAG = 1;
public void updateView() {
// Code where View.GONE and View.VISIBLE + invalidate is used.
}
Handler mHandler = new Handler {
#Override
public void handleMessage(Message input_msg) {
if(msg.what == UPDATE_TAG) {
updateView();
}
}
}
Try with this changes
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/control_scroll"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#99000000"
android:fillViewport="true" >
Quit the android:layout_weight="1"
I suppose that LinearLayout uses some kind of caching mechanism to avoid measuring childs every time. Or maybe I'm wrong.
However, you can try to use RelativeLayout instead of bunch of LinearLayout. This will solve your problem and also this will be much more efficient, since nested ViewGroups isn't good for performance.
You can go ahead and set the ScrollView height to "wrap_content" so that even if the child views change the ScrollView can adjust to the new setting
I'm having a problem with a LinearLayout in an app i'm working on. The linear layout is vertical. There are several items in the layout including a TextView, a vertical SeekBar, and an ImageView.
Whenever I update the textView (ie setText()) my layout rearranges. The ImageView goes from being at the bottom to being in the middle. Same thing happens if I replace the drawable in the ImageView.
I assume I have something wrong with how I am specifying my layout. This is the portion having problems:
<modrobotics.code.ui.BlockValueSliderView
android:id="#+id/sliderSix"
android:layout_width="0dp"
android:visibility="gone"
android:layout_height="fill_parent"
android:layout_marginBottom="-12dp"
android:layout_weight="1"
android:orientation="vertical" >
<TextView
android:id="#+id/BVLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center_horizontal"
android:paddingTop="12dp"
android:text="64"
android:textColor="#000"
android:textSize="20sp" >
</TextView>
<View
android:id="#+id/circle1"
android:layout_width="6dp"
android:layout_height="6dp"
android:layout_gravity="center"
android:layout_marginBottom="-6dp"
android:background="#drawable/circle"
android:gravity="center_horizontal"
android:padding="0dp" />
<LinearLayout
android:id="#+id/controlElementList12"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:padding="0dp" >
<modrobotics.code.ui.VerticalSeekBar
android:id="#+id/slider"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_gravity="bottom|center_horizontal"
android:layout_marginBottom="-20dp"
android:layout_weight="20"
android:padding="0dp"
android:progressDrawable="#drawable/seekbar_progress"
android:thumb="#drawable/seekbar_thumb"
android:thumbOffset="-1dp" />
<ImageView
android:id="#+id/logo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginBottom="-20dp"
android:layout_marginTop="-20dp"
android:layout_weight="1"
android:padding="0dp"
android:src="#drawable/on6" >
</ImageView>
</LinearLayout>
</modrobotics.code.ui.BlockValueSliderView>
EDIT:
I have tried the suggestions mentioned below to no avail. I have removed all negative margins, simplified the layout by removing unnecessary LinearLayout, gotten rid of GONE, fixed height for images etc... I'm starting to believe the problem is greater than just this.
I'm using a single Activity with a PageAdapter. It seems I'm not using PageAdapter correctly. startUpdate() is being called over and over again. Any static global variables I have seem be cleaned up or on separate threads some how. I believe these problems may all be linked. Perhaps I don't full understand the threading model when using a PageAdapter.
In 'modrobotics.code.ui.BlockValueSliderView' change the visiblity from GONE to INVISIBLE. It's possible that the layout elements will re-arrange whenever you change the visibility programatically from GONE to VISIBLE of this View because while the View is set to be GONE, it doesn't occupy any space in the layout and rest of the Views are placed in the layout just taking its space. If it's GONE, It behaves like it doesn't exist in the layout. Then, when you sets this view to be VISIBLE, it switches rest of the Views in the layout to prepare a space for itslef.
This turned out to be a problem related to the VerticalSeekBar implementation I was using.
I was rotating the thumb for the seekbar, and also calling bringToFront() on the seekbar. The combination of these two calls caused elements to be rearranged. Not to sure why, but removing these two lines of code fixed my problems.