android swapping two views using animation when click on imagebutton - android

I have seen the questions in the stack over flow, even I tried,
Android Translate Animation like Swapping Two Views
But nothing worked for my scenario, I want to swap swap_above linear layout and swap_below linear layouts when click on swap image button. If possible I would like to apply animation for swap imagebutton also, when the views are being swapped.
Thank you,
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:id="#+id/from"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center_vertical"
android:orientation="vertical"
android:paddingBottom="25dp"
android:paddingLeft="25dp"
android:paddingRight="25dp"
android:paddingTop="15dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="From"
android:textStyle="bold" />
<LinearLayout
android:id="#+id/swap_above"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:id="#+id/from_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:orientation="horizontal">
<TextView
android:id="#+id/from_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableLeft="#drawable/seek_thumb_pressed"
android:drawablePadding="5dp"
android:text="BANGALORE"
android:textSize="20dp" />
<TextView
android:id="#+id/from_place"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:text=" (BLR)"
android:textSize="15dp" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:gravity="center_vertical"
android:orientation="horizontal">
<View
android:layout_width="0dp"
android:layout_height="0.5dp"
android:layout_marginLeft="20dp"
android:layout_weight="1"
android:background="#FFF" />
<View
android:layout_width="60dp"
android:layout_height="0dp" />
</LinearLayout>
<LinearLayout
android:id="#+id/to"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center_vertical"
android:orientation="vertical"
android:paddingBottom="25dp"
android:paddingLeft="25dp"
android:paddingRight="25dp"
android:paddingTop="15dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="To"
android:textStyle="bold" />
<LinearLayout
android:id="#+id/swap_below"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:id="#+id/to_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:orientation="horizontal">
<TextView
android:id="#+id/to_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableLeft="#drawable/seek_thumb_normal"
android:drawablePadding="5dp"
android:text="Hyderabad"
android:textSize="20dp" />
<TextView
android:id="#+id/to_place"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:text=" (HYD)"
android:textSize="15dp" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
<ImageButton
android:id="#+id/swap"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_gravity="center_vertical|end"
android:background="?android:attr/selectableItemBackground"
android:src="#drawable/seek_thumb_disabled" />
</FrameLayout>
</LinearLayout>

First - set the below xml attributes for each target view's parent which may be blocking the animation :
android:clipChildren="false"
android:clipToPadding="false"
You need to set this attributes at 3 places in your case.
Read more about clipChildren & clipToPadding here -
http://developer.android.com/reference/android/view/ViewGroup.html#attr_android:clipChildren
http://developer.android.com/reference/android/view/ViewGroup.html#attr_android:clipToPadding
If your minSDK >=12
Use this for swap animation :
findViewById(R.id.swap).setOnClickListener(new View.OnClickListener() {
boolean isAnimating;
#Override
public void onClick(View v) {
if(isAnimating)
return;
isAnimating=true;
View v1 = findViewById(R.id.swap_above);
View v2 = findViewById(R.id.swap_below);
float x1, y1, x2, y2;
x1 = getRelativeX(v1);//Use v1.getX() if v1 & v2 have same parent
y1 = getRelativeY(v1);//Use v1.getY() if v1 & v2 have same parent
x2 = getRelativeX(v2);//Use v2.getX() if v1 & v2 have same parent
y2 = getRelativeY(v2);//Use v2.getY() if v1 & v2 have same parent
float x_displacement = (x2-x1);
float y_displacement = (y2-y1);
v1.animate().xBy(x_displacement).yBy(y_displacement);
v2.animate().xBy(-x_displacement).yBy(-y_displacement);
long anim_duration = v1.animate().getDuration();
//Wait till animation is over to set isAnimating to false
//take 10 ms as buffer time to ensure proper functioning
//If you remove this timer & isAnimating variable, the animation will function improperly when user rapidly clicks on swap button
new CountDownTimer(anim_duration + 10, anim_duration + 10) {
#Override
public void onTick(long millisUntilFinished) {
}
#Override
public void onFinish() {
isAnimating=false;
}
}.start();
}
//returns x-pos relative to root layout
private float getRelativeX(View myView) {
if (myView.getParent() == myView.getRootView())
return myView.getX();
else
return myView.getX() + getRelativeX((View) myView.getParent());
}
//returns y-pos relative to root layout
private float getRelativeY(View myView) {
if (myView.getParent() == myView.getRootView())
return myView.getY();
else
return myView.getY() + getRelativeY((View) myView.getParent());
}
});
Read about View Property animator here -
http://developer.android.com/reference/android/view/ViewPropertyAnimator.html
http://developer.android.com/guide/topics/graphics/prop-animation.html
Also, you should try to minimize the number of views in your layout.
Read about layout optimization here -
http://developer.android.com/training/improving-layouts/optimizing-layout.html

Related

How do I synchronize scrollview positions of dynamic horizontal scroll views inside a container?

I have a parent container in one of my activities which make a call to it's child containers consisting of a horizontal scrollview as one of the objects.
Sort of like a recyclerview with row objects placed inside where there is a common row/item layout consisting of a horizontal scroll view.
My objective is to sync the positions of the horizontalscrollview such that, when i am scrolling horizontally on one of the objects from position 1 to position 2, all the other items containing horizontal scrollview get updated from position 1 to position 2.
Here's my main container code: (Activity code)
for (int index = 0; index < roomCount; index++) {
Room r2 = ((LobbyReservationRowView) container.getChildAt(index))
.getRoom();
// Log.d("Lobby", "sorting: " + r.getName() + ":" + r.isFree() +
// " -- " + r2.getName() + ":" + r2.isFree());
if (r.equals(r2)) {
Log.d("LobbyActivity", "duplicate room -- " + r.getEmail());
// XXX: minor logic error; same room
// someone else requested also an update, and we got rooms twice
container.removeViewAt(index);
container.addView(v, index);
added = true;
break;
} else if (roomCmp.compare(r, r2) < 0) {
container.addView(v, index);
added = true;
break;
}
}
if (!added) {
container.addView(v);
}
where container is the layout containing the following layout as it's child:( the above code iterates over this layout to generate subsequent rows)
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:orientation="vertical"
android:gravity="center_vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:background="#232527"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:layout_height="109dp">
<ImageView
android:id="#+id/roomDefaultIcon"
android:layout_width="116dp"
android:layout_height="82dp"
android:src="#drawable/75"
android:contentDescription="#string/default_room_icon_content_description" />
<LinearLayout
android:id="#+id/titleLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|center"
android:layout_toEndOf="#id/roomDefaultIcon"
android:layout_marginStart="16dp"
android:orientation="vertical">
<TextView
android:id="#+id/roomNameLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/white"
android:layout_marginTop="20dp"
android:textStyle="bold"
android:textSize="14sp"
android:text="#string/tech_room" />
<TextView
android:id="#+id/roomInfoLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/TextInfoColor"
android:visibility="gone"
android:text="(42 persons)" />
</LinearLayout>
<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/roomDefaultIcon"
android:id="#+id/horizontal_timebar_view"
android:fillViewport="true">
<com.roombooking.androidview.TimeBarView
android:id="#+id/mainTimeBarView"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:orientation="horizontal"
>
<Button android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button One"
android:visibility="invisible"/>
<Button android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button Two"
android:visibility="invisible"/>
<Button android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button Three"
android:visibility="invisible"/>
<Button android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button Four"
android:visibility="invisible"/>
</com.roombooking.androidview.TimeBarView>
</HorizontalScrollView>
</RelativeLayout>
</LinearLayout>
<ViewSwitcher
android:id="#+id/modeSwitcher"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:inAnimation="#animator/fadein"
android:outAnimation="#animator/fadeout">
<LinearLayout
android:id="#+id/normalMode"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginBottom="10dp"
android:layout_marginEnd="0dp"
android:layout_marginRight="0dp"
android:layout_marginTop="10dp"
android:orientation="horizontal"
android:visibility="visible"
android:weightSum="9" >
<Button
android:id="#+id/bookNowButton"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="3"
android:layout_marginStart="10dp"
android:background="#drawable/button_background"
android:focusable="true"
android:text="#string/book_now"
android:textColor="#android:color/white"
android:layout_marginLeft="10dp" />
<TextView
android:id="#+id/roomStatusLabel"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginLeft="20dp"
android:layout_marginStart="20dp"
android:layout_weight="5"
android:minWidth="100dp"
tools:text="<status>" />
<Button
android:id="#+id/calendarButton"
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_gravity="center_vertical|start"
android:background="#drawable/calendar_small_grey"
android:focusable="true" />
</LinearLayout>
<LinearLayout
android:id="#+id/bookingMode"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:gravity="center_vertical"
android:orientation="vertical"
android:paddingBottom="8dp">
<ImageButton
android:id="#+id/cancelButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|end"
android:layout_marginEnd="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp"
android:background="#drawable/close_button_states"
android:contentDescription="#string/cancel_reservation" />
<com.roombooking.android.view.CustomTimeSpanPicker2
android:id="#+id/timeSpanPicker2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginBottom="16dp" />
<AutoCompleteTextView
android:id="#+id/autoCompleteTextView1"
android:layout_width="230dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginBottom="10dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp"
android:completionHint="Your name"
android:completionThreshold="2"
android:hint="#string/hint_your_name"
android:imeOptions="actionDone"
android:inputType="textCapWords|textFilter"
android:lines="1"
android:maxLines="1"
android:textColor="#color/button_color"
android:textColorHint="#color/CalendarWeekTextColor"/>
<TextView
android:layout_gravity="center"
android:id="#+id/hintText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone"
android:text="#string/hintText"
android:textColor="#color/CalendarWeekTextColor"/>
<Button
android:id="#+id/reserveButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginBottom="10dp"
android:layout_marginTop="10dp"
android:background="#drawable/button_background"
android:focusable="true"
android:text="#string/button_reserve"
android:textColor="#android:color/white" />
<TextView
android:id="#+id/newRoomStatusLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|start"
android:layout_marginLeft="20dp"
android:layout_marginStart="20dp"
android:layout_weight="5"
android:textColor="#android:color/black"
android:minWidth="100dp"
/>
<Button
android:id="#+id/newCalendarButton"
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_gravity="center_vertical|end"
android:background="#drawable/calendar_small_grey"
android:focusable="true" />
</LinearLayout>
</ViewSwitcher>
</LinearLayout>
My point of focus is the HorizontalScrollView containing the timebar, which has positions 1 to 10. If I scroll to position 5 for example, the next subsequent rows should have the scrollbar position at 5 aswell, but I am not able to sync them. Any idea what could be missing from my code?
Just for reference , here's LobbyReservationRowView class code snippet:
public class LobbyReservationRowView extends FrameLayout implements
OnClickListener, OnItemClickListener, HorizontalScrollView.OnScrollChangeListener {
#BindView(R.id.horizontal_timebar_view)
HorizontalScrollView mHorizontalTimeBarView;
#Override
public void onScrollChange(View v, int scrollX, int scrollY, int oldScrollX, int oldScrollY) {
mHorizontalTimeBarView.scrollTo(mHorizontalTimeBarView.getScrollX(),0);
}
}
Happy to share the entire sample project if need be
You can achieve the synchronized scrolling with LiveData from Android Architecture Components. Declare an interface
interface LobbyReservationHSVListener{
void updateScrollPosition(int scrollX);
}
Declare a MutableLiveData variable and implement the LobbyReservationHSVListener in your activity like below:
public class HorizontalActivity extends AppCompatActivity implements
LobbyReservationHSVListener {
MutableLiveData<Integer> hsvPosition = new MutableLiveData<Integer>();
#Override
public void updateScrollPosition(int scrollX) {
hsvPosition.setValue(scrollX);
}
}
In onCreate in your activity start observing the MutableLiveData you declared. Whenever its value changes, loop through all children views of container and update their scroll positions.
hsvPosition.observe(this,new Observer<Integer>() {
#Override
public void onChanged(Integer integer) {
for(int i=0; i<container.getChildCount();i++){
HorizontalScrollView hsv = container.getChildAt(i).findViewById(R.id.horizontal_timebar_view);
hsv.smoothScrollTo(integer,0);
}
}
});
In your LobbyReservationRowView create a function to set the LobbyReservationHSVListener object and call updateScrollPosition whenever scroll changes.
public class LobbyReservationRowView extends FrameLayout implements
OnClickListener, OnItemClickListener, HorizontalScrollView.OnScrollChangeListener {
private LobbyReservationHSVListener hsvUpdateListener;
#BindView(R.id.horizontal_timebar_view)
HorizontalScrollView mHorizontalTimeBarView;
public void setHSVUpdateListener(LobbyReservationHSVListener hsvUpdateListener){
this.hsvUpdateListener = hsvUpdateListener;
}
#Override
public void onScrollChange(View v, int scrollX, int scrollY, int oldScrollX, int oldScrollY) {
hsvUpdateListener.updateScrollPosition(scrollX);
}
}
Don't forget to call setHSVUpdateListener(this) on your LobbyReservationRowView object whenever adding it to your container
You should get something like this:

Add labels above Seekbars steps with different font size, vertically aligned to seekbars thumb

I would like to create a Seekbar, above which there will be text label on each Seekbar step, what it should look like is shown in below image
this is the expected result, for which what i have done,
<RelativeLayout
android:id="#+id/layout_font_size"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/txtFont_size_hint"
style="#style/textStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/Aa" />
<LinearLayout
android:id="#+id/layout_seekbar_interval_holder"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/txtFont_size_hint"
android:layout_marginLeft="16dp"
android:layout_marginRight="#dimen/margin_16dp"
android:orientation="horizontal"
android:weightSum="5">
<TextView
android:id="#+id/txtSize_14"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:focusable="false"
android:gravity="center"
android:text="#string/setting_font_text"
android:textSize="#dimen/font_size_14" />
<TextView
android:id="#+id/txtSize_18"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:focusable="false"
android:gravity="center"
android:text="#string/setting_font_text"
android:textSize="#dimen/font_size_18sp" />
<TextView
android:id="#+id/txtSize_24"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:focusable="false"
android:gravity="center"
android:text="#string/setting_font_text"
android:textSize="#dimen/font_size_24sp" />
<TextView
android:id="#+id/textSize_30"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:focusable="false"
android:gravity="center"
android:text="#string/setting_font_text"
android:textSize="#dimen/font_size_30sp" />
<TextView
android:id="#+id/txtSize_36"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:focusable="false"
android:gravity="center"
android:text="#string/setting_font_text"
android:textSize="#dimen/font_size_36sp" />
</LinearLayout>
<SeekBar
android:id="#+id/seekBarSetting_font_size"
android:layout_width="match_parent"
android:layout_height="wrap_content" android:layout_below="#id/layout_seekbar_interval_holder"
android:layout_marginLeft="#dimen/margin_16dp"
android:layout_marginRight="#dimen/margin_16dp"
android:max="4"
android:theme="#style/seekBarYelloStyle" />
</RelativeLayout>
Output of this is
the Layout looks similar to what is expected but, while moving the seekbar thumb, the thumb is not vertically aligned with the TextView so the problem here is the seekbar thumb is not vertically aligend with the text indicating the steps of seekBar.
I had also tried calculating the exact position of TextView by dividing the seekbars width by steps (Here we have 5 steps but first one is on 0th position so i divided the total seekbar Width by 4 and then placed each text accordingly) but didn't got the expected solution.
I am bit confused here, and want a simple solution as soon as possible.
P.S: ScreenShot of output of view created dynamically is also attached for reference
layout for this :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="android.sample.MainActivity">
<TextView
android:id="#+id/txtFont_size_hint"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Sizes"/>
<LinearLayout
android:id="#+id/ll"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp"
android:weightSum="5">
<LinearLayout
android:id="#+id/ll"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="5">
<TextView
android:id="#+id/txtSize1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="#string/setting_font_text"
android:textSize="15sp"/>
<TextView
android:id="#+id/txtSize_18"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="#string/setting_font_text"
android:textSize="20sp"/>
<TextView
android:id="#+id/txtSize_24"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:focusable="false"
android:gravity="center"
android:text="#string/setting_font_text"
android:textSize="25sp"/>
<TextView
android:id="#+id/textSize_30"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:focusable="false"
android:gravity="center"
android:text="#string/setting_font_text"
android:textSize="30sp"/>
<TextView
android:id="#+id/txtSize_36"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:focusable="false"
android:gravity="center"
android:text="#string/setting_font_text"
android:textSize="35sp"/>
</LinearLayout>
<SeekBar
android:id="#+id/seekBarSetting_font_size"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:max="4"/>
Now what i have done is aligned the width of Seekbar till the center of the last TextView which in this case is txtSize_36
and have set the ems as android:max="4" so there are five possible values(you can change this to as much as you want)
Code for Activity is :
public class MainActivity extends AppCompatActivity {
SeekBar seekBar;
private LinearLayout bar, ll;
TextView txtSize_14, txtSize_36;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
seekBar = (SeekBar) findViewById(R.id.seekBarSetting_font_size);
txtSize_14 = (TextView) findViewById(R.id.txtSize1);
txtSize_36 = (TextView) findViewById(R.id.txtSize_36);
ll = (LinearLayout) findViewById(R.id.ll);
}
float density;
#Override
protected void onResume() {
super.onResume();
ViewTreeObserver vto = ll.getViewTreeObserver();
//****old code (may not work on all orientations)****
/*vto.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
#Override
public void onGlobalLayout() {
if (Build.VERSION.SDK_INT < Build.VERSION_CODES.JELLY_BEAN) {
ll.getViewTreeObserver().removeGlobalOnLayoutListener(this);
} else {
ll.getViewTreeObserver().removeOnGlobalLayoutListener(this);
}
int width = ll.getMeasuredWidth();
int height = ll.getMeasuredHeight();
ViewGroup.LayoutParams params = seekBar.getLayoutParams();
density = getResources().getDisplayMetrics().density;
int newwidth = (int) (txtSize_14.getLeft() / density);
newwidth = newwidth+ (txtSize_36.getLeft() + txtSize_36.getRight()) / 2;
params.width = newwidth;
seekBar.setLayoutParams(params);
}
});*/
//****new code (should work on all orientations)****
vto.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
#Override
public void onGlobalLayout() {
if (Build.VERSION.SDK_INT < Build.VERSION_CODES.JELLY_BEAN) {
ll.getViewTreeObserver().removeGlobalOnLayoutListener(this);
} else {
ll.getViewTreeObserver().removeOnGlobalLayoutListener(this);
}
seekBar.setPadding(15, 0, 15, 0);
seekBar.setX(((txtSize_14.getLeft() + txtSize_14.getRight()) / 2) - 15);
ViewGroup.LayoutParams params = seekBar.getLayoutParams();
int centerwidth = ((txtSize_36.getLeft() + txtSize_36.getRight()) / 2) - ((txtSize_14.getLeft() + txtSize_14.getRight()) / 2) + 15;
params.width = centerwidth;
seekBar.setLayoutParams(params);
}
});
}
}
Here is screenshot for reference (I have clubbed for all positions of seekbar):
Frankly speaking it took me a while to sort this out using XML only.
The first and last label are differently positioned than the others....
In case you will change the size of the thumb from 15dp - you must also change the margin of first and last TextView and size of Spaces (margin + Space = thumb size)
preview
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:paddingRight="0dp"
android:paddingLeft="0dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:paddingLeft="0dp">
<TextView
android:text="7 days"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textColor="#color/colorPrimaryBackground"
android:gravity="left|center"
android:textSize="#dimen/textSize_smallest"
android:layout_weight="0.5"
android:layout_marginLeft="5dp"/>
<Space
android:layout_width="10dp"
android:layout_height="match_parent"/>
<TextView
android:text="1 month"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textColor="#color/colorPrimaryBackground"
android:gravity="center"
android:textSize="#dimen/textSize_smallest"
android:layout_weight="1"
android:layout_marginRight="0dp"
android:id="#+id/textView" />
<TextView
android:text="3 months"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textColor="#color/colorPrimaryBackground"
android:gravity="center"
android:textSize="#dimen/textSize_smallest"
android:layout_weight="1"
android:layout_marginRight="0dp"/>
<TextView
android:text="1 year"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textColor="#color/colorPrimaryBackground"
android:gravity="center"
android:textSize="#dimen/textSize_smallest"
android:layout_weight="1"
android:layout_marginLeft="0dp"/>
<TextView
android:text="3 years"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textColor="#color/colorPrimaryBackground"
android:gravity="center"
android:textSize="#dimen/textSize_smallest"
android:layout_weight="1"
android:layout_marginLeft="0dp"/>
<Space
android:layout_width="10dp"
android:layout_height="match_parent"/>
<TextView
android:text="5 years"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textColor="#color/colorPrimaryBackground"
android:gravity="right|center"
android:textSize="#dimen/textSize_smallest"
android:layout_weight="0.5"
android:layout_marginRight="5dp"/>
</LinearLayout>
</RelativeLayout>

Android ListView onScroll Fires Multiple Times

I have two views in my fragment. In the first view, I have a linear layout, which holds some controls and in the second view, I have a listview.
I want the linear layout in the first view to be collapsed / expand when I scroll up / down listview.
I tried to handle scroll up / down events of listview in the OnScrollListener and collapse / expand the listview.
But there is a problem with the onScroll method,i.e, when I scroll the listview, it fires many times when I scroll the listview one time. So expanding and collapsing process of linear layout is going crazy.
Here is - what is happening on the screen.
https://www.youtube.com/watch?v=U7KNwS6JlUk
What am I doing wrong?
What is the best way to handle scrol up / down events of listview and collapse / expand linear layout?
My Layout
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.training.mehmetyilmaz.mywallet.TransactionsActivity.TransactionsFragment"
android:orientation="vertical">
<LinearLayout
android:id="#+id/transactions_filter_linear_layout"
android:layout_width="match_parent"
android:layout_height="160dp"
android:orientation="vertical"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:background="#color/blue">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="horizontal"
>
<LinearLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:orientation="vertical"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="#string/account_type_label"
android:textSize="#dimen/transactions_filter_text"
android:textColor="#color/white"
/>
<RadioGroup
android:id="#+id/transactions_account_type_radio_group"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<RadioButton
android:id="#+id/transactions_rd_cash"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="#string/cash"
android:checked="true"
android:textSize="#dimen/transactions_filter_text"
android:textColor="#color/white"
android:buttonTint="#color/white" />
<RadioButton
android:id="#+id/transactions_rd_bank"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="#string/bank"
android:textSize="#dimen/transactions_filter_text"
android:textColor="#color/white"
android:buttonTint="#color/white"
/>
</RadioGroup>
</LinearLayout><!-- Money Add Type-->
<LinearLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:orientation="vertical"
>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/currency_label"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textSize="#dimen/transactions_filter_text"
android:textColor="#color/white"
/>
<Spinner
android:id="#+id/transactions_spinner_currency"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:entries="#array/entry_currency"
android:layout_gravity="right"
android:gravity="right|end"
android:textSize="#dimen/transactions_filter_text"
android:textColor="#color/white"
style="#style/DropDownColor"
android:background="#drawable/abc_spinner_mtrl_am_alpha"
>
</Spinner>
</LinearLayout><!-- Currency -->
</LinearLayout><!-- First Line-->
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#color/cyan_ligth"
android:layout_marginTop="1dp"
android:layout_marginBottom="1dp"
>
</View>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_weight="1"
android:layout_marginTop="5dp"
>
<LinearLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:orientation="vertical"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="#string/money_type_label"
android:textSize="#dimen/transactions_filter_text"
android:textColor="#color/white"
/>
<RadioGroup
android:id="#+id/transactions_money_type_radio_group"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<RadioButton
android:id="#+id/transactions_rd_add"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="#string/add"
android:textSize="#dimen/transactions_filter_text"
android:textColor="#color/white"
android:buttonTint="#color/white" />
<RadioButton
android:id="#+id/transactions_rd_sub"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="#string/subtract"
android:textSize="#dimen/transactions_filter_text"
android:textColor="#color/white"
android:buttonTint="#color/white" />
</RadioGroup>
</LinearLayout><!-- Money Type-->
<LinearLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:orientation="vertical"
>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/entry_date_label_all_dates"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textSize="#dimen/transactions_filter_text"
android:textColor="#color/white"
/>
<Spinner
android:id="#+id/transactions_spinner_date"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:entries="#array/entry_date"
android:layout_gravity="right"
android:gravity="right|end"
android:textSize="#dimen/transactions_filter_text"
style="#style/DropDownColor"
android:background="#drawable/abc_spinner_mtrl_am_alpha">
</Spinner>
</LinearLayout><!-- Date -->
</LinearLayout><!-- Second Line -->
</LinearLayout><!-- Filter -->
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<com.training.mehmetyilmaz.mywallet.ScrollDetectingListView
android:layout_width="match_parent"
android:layout_height="320dp"
android:id="#+id/transactions_list_view"
></com.training.mehmetyilmaz.mywallet.ScrollDetectingListView>
<TextView
android:layout_width="match_parent"
android:layout_height="50dp"
android:id="#+id/transactions_total_textView"
android:text="#string/total"
android:paddingLeft="20dp"
android:paddingRight="20dp"
android:paddingBottom="5dp"
android:paddingTop="5dp"
android:textSize="#dimen/abc_text_size_medium_material"
android:background="#color/green"
android:textColor="#color/white"
android:gravity="center"
android:layout_alignParentBottom="true"
/>
</RelativeLayout>
</LinearLayout>
OnScrollListener
mTransactionListView.setOnScrollListener(new AbsListView.OnScrollListener() {
#Override
public void onScrollStateChanged(AbsListView view, int scrollState) {
//Log.d("Scroll State", "State : " + scrollState);
}
private int mInitialScroll = 0;
#Override
public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {
Log.d("Scroll", "Called");
int scrolledOffset = mTransactionListView.getVerticalScrollOffset();
if (scrolledOffset != mInitialScroll) {
boolean scrollUp = (scrolledOffset - mInitialScroll) < 0;
if (scrollUp) {
Log.d("Scroll", "Up");
expand(mTransactionsFilterLinearLayout);
} else {
Log.d("Scroll", "Down");
collapse(mTransactionsFilterLinearLayout);
}
mInitialScroll = scrolledOffset;
}
}
});
I think the solution is not possible with the classic ListView of Android SDK.
I found a custom ListView called Android-ObservableScrollView and implemented it in my project and the result is success.
You can find it from here
https://github.com/ksoichiro/Android-ObservableScrollView/
try setting a booolean value like this as global.
boolean flag = true;
then
if (scrollUp) {
if(flag == false){
Log.d("Scroll", "Up");
expand(mTransactionsFilterLinearLayout);
}
flag = true;
} else {
if(flag == true){
Log.d("Scroll", "Down");
collapse(mTransactionsFilterLinearLayout);
}
flag = false;
}

View Visibility is not working on ACTION_MOVE

I am working on MultiDirectionSlidingDrawer motion events. I have a problem on Action_Move.
I am unable to set Visible or Gone layouts on Action_Move.
I have handle with two buttons. When I drag click on first button it should show the first view also the same for second button.
slidingDrawer.setOnTouchListener(new OnTouchListener() {
#Override
public boolean onTouch(View view, MotionEvent event) {
if (event.getAction() == MotionEvent.ACTION_MOVE) {
int width = getActivity().getWindowManager()
.getDefaultDisplay().getWidth();
width = width / 2;
if (event.getX() < width) {
System.out.println("Visible view 1");
view1.setVisibility(View.VISIBLE);
view2.setVisibility(View.GONE);
}else{
System.out.println("Visible view 2");
view1.setVisibility(View.GONE);
view2.setVisibility(View.VISIBLE);
}
}
}
}
My xml view :
<com.myproject.widget.MultiDirectionSlidingDrawer
xmlns:my="http://schemas.android.com/apk/res/com.lesmobilizers.chronoresto"
android:id="#+id/drawer"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:content="#+id/content"
app:direction="topToBottom"
app:handle="#+id/handle" >
<LinearLayout
android:id="#+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/view1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/gray"
android:orientation="vertical"
android:visibility="gone" />
<LinearLayout
android:id="#+id/view2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/black"
android:orientation="vertical" />
</LinearLayout>
<LinearLayout
android:id="#+id/handle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/menufiche_content"
android:layout_marginTop="-24dp"
android:background="#drawable/btn_restaurant_pannel_switch_close"
android:orientation="horizontal"
android:weightSum="2" >
<LinearLayout
android:id="#+id/lt_menu"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:layout_weight="1"
android:gravity="center"
android:orientation="horizontal" >
<com.myproject.widget.FontCustomTextView
android:id="#+id/menutext"
style="#style/font_button_bold"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawablePadding="5dp"
android:drawableRight="#drawable/img_arrow_down"
android:text="Menu "
android:textColor="#color/gray"
android:textSize="17sp" />
</LinearLayout>
<LinearLayout
android:id="#+id/lt_fiche"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:layout_weight="1"
android:gravity="center"
android:orientation="horizontal" >
<com.myproject.widget.FontCustomTextView
android:id="#+id/fichetxt"
style="#style/font_button_bold"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawablePadding="5dp"
android:drawableRight="#drawable/img_arrow_down"
android:text="Fiche "
android:textColor="#color/gray"
android:textSize="17sp" />
</LinearLayout>
</LinearLayout>
</com.myproject.widget.MultiDirectionSlidingDrawer>
System.out are working fine. But the thing is view1, view2 Visibilities are not working as my code says.
I hope you are getting my problem. I need your suggestion about Action_Move.

Slide In View Animation

I want a relative layout to slide into a screen.
At the moment I set the layout to be below a layout that takes up the whole screen
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:animateLayoutChanges="true"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/ghostIv"
android:src="#drawable/results_ghost"
android:visibility="gone"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"/>
<ImageView
android:id="#+id/ghostShadowIv"
android:visibility="gone"
android:src="#drawable/results_ghost_shadow"
android:layout_centerHorizontal="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/ghostIv"/>
<TextView
android:id="#+id/noFilterTv"
android:textStyle="bold"
android:gravity="center_horizontal"
android:textColor="#color/LightTextGrey"
android:visibility="gone"
android:text="#string/no_filters"
android:paddingLeft="50dp"
android:paddingRight="50dp"
android:layout_centerHorizontal="true"
android:layout_below="#+id/ghostShadowIv"
android:layout_height="wrap_content"
android:layout_width="wrap_content"/>
<com.allryder.android.ui.views.ScheduleView
android:visibility="invisible"
android:background="#color/White"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/scheduleView"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"/>
<View
android:id="#+id/shadowV"
android:visibility="gone"
android:layout_above="#+id/ratingRl"
android:layout_height="4dp"
android:layout_width="match_parent"
android:background="#drawable/bottom_shadow"/>
<RelativeLayout
android:id="#+id/ratingRl"
android:layout_below="#+id/scheduleView"
android:background="#color/White"
android:clickable="true"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TextView
android:background="#drawable/time_view_selector"
android:padding="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:id="#+id/ratePromptTv"
android:layout_toLeftOf="#+id/closeRatingIv"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:gravity="center|left"
android:text="#string/rate_prompt"/>
<ImageView
android:background="#drawable/time_view_selector"
android:padding="10dp"
android:clickable="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/ratePromptTv"
android:layout_alignBottom="#+id/ratePromptTv"
android:id="#+id/closeRatingIv"
android:layout_centerVertical="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:src="#drawable/search_clear"/>
</RelativeLayout>
</RelativeLayout>
</FrameLayout>
<fragment android:id="#+id/filters_drawer"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="end"
android:name="com.allryder.android.ui.fragments.FiltersDrawerFragment"/>
Then make this call
ratingRl.animate().translationY(- ratingRl.getHeight());
But it doesn't slide into the screen. If the view is in the screen to start off with, the view does animate. What is the problem?
ratingRl.animate().translationY(- ratingRl.getHeight()).setDuration(300).start();
I have done similar task in my recent project.
background = (RelativeLayout) findViewById(R.id.slidingBackground);
positionOffScreen(background);
private void positionOffScreen(View v){
View myView = v;
int amountOffscreen = (int)(getScreenWidth());
boolean offscreen = true;
int xOffset = (offscreen) ? amountOffscreen : 0;
RelativeLayout.LayoutParams rlParams = (RelativeLayout.LayoutParams)myView.getLayoutParams();
rlParams.setMargins(-1*xOffset, 0, xOffset, 0);
myView.setLayoutParams(rlParams);
}
protected float getScreenWidth() {
DisplayMetrics displaymetrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(displaymetrics);
return (float) displaymetrics.widthPixels;
}
When you want to start animation call this method
private void startAnimation(int duration){
TranslateAnimation a = new TranslateAnimation(Animation.ABSOLUTE,0,Animation.ABSOLUTE,getScreenWidth(),Animation.ABSOLUTE,0,Animation.ABSOLUTE,0);
a.setDuration(duration);
a.setFillAfter(false);
background.startAnimation(a);
}
When you want to interrupt animation
background.clearAnimation();
Here is layout example. The sliding view has to be placed on RelativeLayout.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/background" >
<RelativeLayout
android:id="#+id/slidingBackground"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#64000000"
android:orientation="vertical" >
</RelativeLayout>
...
And this is the app link where I use this sliding view.

Categories

Resources