i've been scrounging the internet for a while now and have been unable to find s viable solution for my animation problem.
I have a list view where when you click on one of the items, more information animates from the bottom to give you a few lines of additional information. That is simply a linearlayout that i have inside the XML file im using for these list items, here:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:id="#+id/friendActivityList"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/friendInfo"
android:background="#color/grey"
android:orientation="vertical"
android:visibility="gone" >
<RelativeLayout
android:id="#+id/RelativeLayout04"
android:layout_width="match_parent"
android:layout_height="#dimen/freind_activity_list_height" >
<ImageView
android:id="#+id/ImageView04"
android:layout_width="wrap_content"
android:layout_height="25dp"
android:layout_margin="5dp"
android:src="#drawable/logo_d" />
<TextView
android:id="#+id/TextView04"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toRightOf="#+id/ImageView04"
android:text="TextView"
android:textColor="#color/black"
android:textSize="17dp" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/RelativeLayout03"
android:layout_width="match_parent"
android:layout_height="#dimen/freind_activity_list_height" >
<ImageView
android:id="#+id/ImageView03"
android:layout_width="wrap_content"
android:layout_height="25dp"
android:layout_margin="5dp"
android:src="#drawable/logo_d" />
<TextView
android:id="#+id/TextView03"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toRightOf="#+id/ImageView03"
android:text="TextView"
android:textColor="#color/black"
android:textSize="17dp" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/RelativeLayout02"
android:layout_width="match_parent"
android:layout_height="#dimen/freind_activity_list_height" >
<ImageView
android:id="#+id/ImageView02"
android:layout_width="wrap_content"
android:layout_height="25dp"
android:layout_margin="5dp"
android:src="#drawable/logo_d" />
<TextView
android:id="#+id/TextView02"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toRightOf="#+id/ImageView02"
android:text="TextView"
android:textColor="#color/black"
android:textSize="17dp" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/relativeLayout1"
android:layout_width="match_parent"
android:layout_height="#dimen/freind_activity_list_height" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="25dp"
android:layout_margin="5dp"
android:src="#drawable/logo_d" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toRightOf="#id/imageView1"
android:text="TextView"
android:textColor="#color/black"
android:textSize="17dp" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/RelativeLayout01"
android:layout_width="match_parent"
android:layout_height="#dimen/freind_activity_list_height">
<ImageView
android:id="#+id/ImageView01"
android:layout_width="wrap_content"
android:layout_height="25dp"
android:layout_margin="5dp"
android:src="#drawable/logo_d" />
<TextView
android:id="#+id/TextView01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toRightOf="#+id/ImageView01"
android:text="TextView"
android:textColor="#color/black"
android:textSize="17dp" />
</RelativeLayout>
</LinearLayout>
<RelativeLayout
android:id="#+id/friendInfo"
android:layout_width="wrap_content"
android:layout_height="60dp"
android:background="#drawable/bg_list_item_n" >
<ImageView android:id="#+id/imgCompany"
android:layout_marginLeft="5dp"
android:layout_centerVertical="true"
android:layout_width="60dp"
android:src="#drawable/ic_launcher"
android:scaleType="centerInside"
android:layout_alignParentLeft="true"
android:layout_height="50dp">
</ImageView>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="60dp"
android:layout_toRightOf="#id/imgCompany"
android:background="#android:color/transparent"
android:gravity="left|center"
android:orientation="vertical"
android:paddingLeft="5dp" >
<TextView android:id="#+id/lblCompanyName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/white"
android:textStyle="bold"
android:textSize="13dp"
android:text="Company Name">
</TextView>
<TextView android:id="#+id/lblReawrdDesc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/white"
android:textSize="13dp"
android:text="Reawrd Description">
</TextView>
<TextView android:id="#+id/lblScores"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/white"
android:textSize="13dp"
android:singleLine="true"
android:text="My Score: 13434 | Top Score: 344425">
</TextView>
</LinearLayout>
</RelativeLayout>
</RelativeLayout>
Most of this is just place holder information so that i can get the animation to work correctly. Here is the code that im using for the animation:
listviewFriends.setOnItemClickListener(new OnItemClickListener() {//this is the listView that im animating inside of
public void onItemClick(AdapterView<?> parent, View view,final int pos, long id) {
Log.v("ListItemClicked", "this position was clicked: "+pos);
if(friendInfoList != null){
friendInfoList.clearAnimation();//this is the new view that gets animated and is supposed to push everything below it out of the way
friendInfoList.setVisibility(View.GONE);
}
friendInfoList = (LinearLayout) view.findViewById(R.id.friendActivityList);
friendInfoList.setVisibility(View.VISIBLE);
friendInfoList.startAnimation(infoAnim);
}
});
infoAnim = new TranslateAnimation(0,0, -150, 0);//this is the animation im using
infoAnim.setDuration(1000);
infoAnim.setFillAfter(true);
No the result of this is that when i click on the list view item the entire space that the supposed-to-be-animated view takes up at the end is white while the view animates from the top down. The location is correct, but i want it to animate and push everything below it out of the way, instead it instantly pushes everything out of the way then animates to fill that space.
Any idea how i can get it to push everything out of the way during the animation instead of immediately? Is it even possible to achieve this effect? any help is greatly appreciated.
Also, I know how i can make it simply animate ontop of the other views, but i need it to actually push everything out of the way.
The trick with this is to create your own Animation subclass.
public class ExpandAnimation extends Animation
{
private int _targetHeight;
private View _view;
private boolean _down;
public ExpandAnimation(View view, int targetHeight)
{
_view = view;
_targetHeight = targetHeight;
}
#Override
protected void applyTransformation(float interpolatedTime, Transformation t)
{
int newHeight;
if(_down)
{
newHeight = (int) (_targetHeight * interpolatedTime);
}
else
{
newHeight = (int) (_targetHeight * (1 - interpolatedTime));
}
_view.getLayoutParams().height = newHeight;
_view.requestLayout();
}
public ExpandAnimation expand()
{
_down = true;
return this;
}
public ExpandAnimation collapse()
{
_down = false;
return this;
}
#Override
public void initialize(int width, int height, int parentWidth, int parentHeight)
{
super.initialize(width, height, parentWidth, parentHeight);
}
#Override
public boolean willChangeBounds()
{
return true;
}
}
Then you can apply that to your view that should expand:
public void togglePreview()
{
if(_expanded) _preview.startAnimation(_animation.collapse());
else _preview.startAnimation(_animation.expand());
_expanded = !_expanded;
getParent().requestLayout();
}
Related
trying to make showing LinarLayout from GONE state to VISIBLE with "roll down" animation. On this Layout exist TextView. Seems to all work fine but, a TextView not shown after animation.
What I do wrong?
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="gone"
android:id="#+id/ll_info">
<TextView
android:id="#+id/bayer_note"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
android:text="#string/buyer_note"/>
<RelativeLayout
android:id="#+id/button_continue"
android:layout_width="match_parent"
android:layout_height="54dp"
android:layout_centerHorizontal="true"
android:layout_marginLeft="#dimen/activity_horizontal_margin"
android:layout_marginRight="#dimen/activity_horizontal_margin"
android:background="#drawable/button_register"
android:drawableEnd="#drawable/ic_arrow_forward_white_24dp">
<TextView
android:id="#+id/btn_cont_caption"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:text="Войти"
android:textColor="#android:color/white"
android:textSize="20sp"
android:fontFamily="fonts/SF-UI-Display-Regular.ttf"
android:layout_centerInParent="true" />
<ImageView
android:layout_width="25dp"
android:layout_height="25dp"
android:id="#+id/imageView"
android:layout_centerVertical="true"
android:layout_alignParentEnd="false"
android:src="#drawable/ic_door"
android:layout_toRightOf="#+id/btn_cont_caption"
android:layout_marginLeft="10dp"
android:scaleType="fitCenter" />
</RelativeLayout>
</LinearLayout>
And animation code:
final LinearLayout ll_info = (LinearLayout)findViewById(R.id.ll_info);
class scaleAnimation extends Animation {
public LinearLayout ll;
public int newHeight;
public void scaleTopHeight(int height)
{
newHeight = height;
}
public void setLayout(LinearLayout layout) {
ll = layout;
}
}
final LinearLayout ll_info = (LinearLayout)findViewById(R.id.ll_info);
scaleAnimation h = new scaleAnimation() {
#Override
protected void applyTransformation(float interpolatedTime, Transformation t) {
ll.getLayoutParams().height = interpolatedTime == 1
? LinearLayout.LayoutParams.WRAP_CONTENT
: (int)(newHeight * interpolatedTime);
ll.requestLayout();
}
};
h.setDuration(300);
h.setLayout(ll_info);
ll_info.setVisibility(View.VISIBLE);
ll_info.measure(View.MeasureSpec.makeMeasureSpec(((LinearLayout)ll_info.getParent()).getWidth(), View.MeasureSpec.AT_MOST), View.MeasureSpec.makeMeasureSpec(((LinearLayout)ll_info.getParent()).getHeight(), View.MeasureSpec.AT_MOST));
h.scaleTopHeight(ll_info.getMeasuredHeight());
ll_info.getLayoutParams().height=1;
ll_info.startAnimation(h);
<RelativeLayout
android:id="#+id/button_continue"
android:layout_width="match_parent"
android:layout_height="54dp"
**android:layout_centerHorizontal="true"** /////
remove this
android:layout_marginLeft="#dimen/activity_horizontal_margin"
android:layout_marginRight="#dimen/activity_horizontal_margin"
android:background="#drawable/button_register"
android:drawableEnd="#drawable/ic_arrow_forward_white_24dp">
<TextView
android:id="#+id/btn_cont_caption"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:text="Войти"
android:textColor="#android:color/white"
android:textSize="20sp"
android:fontFamily="fonts/SF-UI-Display-Regular.ttf"
android:layout_centerInParent="true" />
<ImageView
android:layout_width="25dp"
android:layout_height="25dp"
android:id="#+id/imageView"
android:layout_centerVertical="true"
android:layout_alignParentEnd="false"
android:src="#drawable/ic_door"
android:layout_toRightOf="#+id/btn_cont_caption"
android:layout_marginLeft="10dp"
android:scaleType="fitCenter" />
</RelativeLayout>
i think this is your xml file issue ,your relativelayout in center_horizontal and all the childs are in center in parent.so textview hides over imageview. Try it and let me know.
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;
}
First let me give a short introduction and then show you what end goal looks:
So far I've added a scrolllistener to my listactivity, so that I can detect scrolling, though it does not give me any animation on android:animateLayoutChanges="true". So when i change the margin's of the view programmatically, it just does these changes instantly, and not that well, any help is most welcomed.
As you can see in my xml, i place the item I'm going to hide slowly first so other will be above it on the Z-axis.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:lector="http://schemas.android.com/apk/res-auto"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:animateLayoutChanges="true"
android:background="#color/background_greyish">
<LinearLayout
android:id="#+id/disappearingHeaderLabel"
android:layout_width="fill_parent"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_marginTop="60dp"
android:animateLayoutChanges="true"
android:layout_height="50dp"
android:background="#color/solid_white"
android:orientation="horizontal"
android:weightSum="7">
<TextView
android:id="#+id/ProductDetailLabel"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="5dip"
android:layout_marginLeft="15dp"
android:layout_marginRight="5dp"
android:layout_marginTop="10dip"
android:layout_weight="4"
android:singleLine="true"
android:text="PRODUKTER"
android:textColor="#color/solid_red"
android:textSize="20dp" />
<Button
android:id="#+id/priceChooserButton"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="15dp"
android:layout_marginTop="10dp"
android:layout_weight="3"
android:background="#drawable/buttonbackground"
android:clickable="true"
android:singleLine="true"
android:text="#string/retailprice"
android:textColor="#android:color/white"
android:textSize="15dp"
android:textStyle="bold" />
</LinearLayout>
<dk.myapp.mobile.views.PageHeaderView
android:id="#+id/header"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_width="fill_parent"
android:layout_height="wrap_content"></dk.myapp.mobile.views.PageHeaderView>
<LinearLayout
android:id="#+id/expandingListContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:animateLayoutChanges="true"
android:layout_alignParentLeft="true"
android:layout_marginTop="110dp"
android:layout_above="#+id/paginationBarContainer"
android:orientation="vertical">
<LinearLayout
android:id="#+id/headerLabel"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:background="#color/transparent"
android:orientation="horizontal"
android:weightSum="11">
<LinearLayout
android:layout_width="0dp"
android:layout_weight="3"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/sortAmountLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dip"
android:singleLine="false"
android:text="1354"
android:textColor="#color/solid_red"
android:textSize="15dp" />
<TextView
android:id="#+id/sortLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="5dip"
android:text="Produkter"
android:singleLine="true"
android:textColor="#color/solid_red"
android:textSize="15dp" />
</LinearLayout>
<Button
android:id="#+id/filterBtn"
android:layout_width="0dp"
android:layout_height="35dp"
android:layout_marginBottom="10dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="15dp"
android:layout_marginTop="10dp"
android:layout_weight="4"
android:background="#drawable/button_background_red"
android:clickable="true"
android:singleLine="true"
android:text="#string/retailprice"
android:textColor="#color/solid_white"
android:textSize="15dp"
android:textStyle="bold" />
<Spinner
android:id="#+id/sortSpinner"
android:layout_width="0dp"
android:layout_weight="4"
android:layout_height="35dp"
android:layout_marginBottom="10dp"
android:layout_marginTop="10dp"
android:background="#drawable/spinner_background"
android:drawSelectorOnTop="true"
android:focusable="false"
android:focusableInTouchMode="false"
android:prompt="#string/sort" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="1dip"
android:background="#color/divider_color"></LinearLayout>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<ListView
android:id="#+id/android:list"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:divider="#color/divider_color"
android:dividerHeight="1dip"
android:paddingLeft="15dip"
android:scrollbarStyle="outsideInset"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp" />
</LinearLayout>
</LinearLayout>
#Override
public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {
int marginRemoved = firstVisibleItem * 30;
if (marginRemoved > 110) {
marginRemoved = 110;
}
if (previousMarginRemoved != marginRemoved) {
previousMarginRemoved = marginRemoved;
LinearLayout disappearingHeaderContainer = (LinearLayout) findViewById(R.id.disappearingHeaderLabel);
RelativeLayout.LayoutParams disappearingHeaderContainerLayoutParams = (RelativeLayout.LayoutParams) disappearingHeaderContainer.getLayoutParams();
LinearLayout expandingListViewContainer = (LinearLayout) findViewById(R.id.expandingListContainer);
RelativeLayout.LayoutParams expandingListViewContainerParams = (RelativeLayout.LayoutParams) expandingListViewContainer.getLayoutParams();
if (disappearingHeaderStartMargin == -1 && expandingHeaderStartMargin == -1) {
disappearingHeaderStartMargin = disappearingHeaderContainerLayoutParams.topMargin;
expandingHeaderStartMargin = expandingListViewContainerParams.topMargin;
}
float disappearingHeaderTopMarginFloat = disappearingHeaderStartMargin - (marginRemoved * pixelDensity);
int disappearingHeaderTopMargin = Math.round(disappearingHeaderTopMarginFloat);
if (marginRemoved > 50) {
marginRemoved = 50;
}
float expandingContainerTopMarginFloat = expandingHeaderStartMargin - (marginRemoved * pixelDensity);
int expandingContainerTopMargin = Math.round(expandingContainerTopMarginFloat);
disappearingHeaderContainerLayoutParams.setMargins(disappearingHeaderContainerLayoutParams.leftMargin,
disappearingHeaderTopMargin,
disappearingHeaderContainerLayoutParams.rightMargin,
disappearingHeaderContainerLayoutParams.bottomMargin);
expandingListViewContainerParams.setMargins(expandingListViewContainerParams.leftMargin,
expandingContainerTopMargin,
expandingListViewContainerParams.rightMargin,
expandingListViewContainerParams.bottomMargin);
if ((lastChangeDate < System.currentTimeMillis()-100)) {
lastChangeDate = System.currentTimeMillis();
disappearingHeaderContainer.setLayoutParams(disappearingHeaderContainerLayoutParams);
expandingListViewContainer.setLayoutParams(expandingListViewContainerParams);
}
}
}
};
I had a Grid Layout inside a Horizontal Scroll View, I'm Trying to Implement a Custom Scroll bar for the Scroll View, So far i'm Able to customize the UI of scroll bar [thumb and seekbar] also set visibility permanent. But problem is i'm stuck at handling events on scroll bar of scrollview. Eg. If user clicks on scroll bar in between the ScrollView should scroll to 50% and so on..like click on 1st qurater scroll view should scroll by 25%.
It's pretty simple if i made my own seekbar and bind it to scroll view, also it provides me methods of it's own and click events and can create objects. But i want to do it using ScrollView's slider. How do i handle scroll view's scrollbar clicks, i can create object of ScrollView class. But How will it controll seekbar?? I do not have onseekbarchangelistner for Horizontall scroll view neither it return any achild view or scrollbar view. also it's seekbar not clickable.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context=".MainActivity" >
<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbarThumbHorizontal="#drawable/scrollbar_horizontal_thumb"
android:scrollbarTrackHorizontal="#drawable/scrollbar_horizontal_track"
android:visibility="visible"
android:fadeScrollbars="false"
android:id="#+id/scrollView">
<android.support.v7.widget.GridLayout
android:id="#+id/grid"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:columnCount="18"
android:orientation="horizontal"
android:rowCount="1" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/holo_blue_bright"
android:padding="10dp"
android:text="Hi"
android:textSize="16sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/darker_gray"
android:padding="10dp"
android:text="Hi"
android:textSize="16sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/holo_green_light"
android:padding="10dp"
android:text="Hi"
android:textSize="16sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/holo_blue_bright"
android:padding="10dp"
android:text="Hi"
android:textSize="16sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/darker_gray"
android:padding="10dp"
android:text="Hi"
android:textSize="16sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/holo_green_light"
android:padding="10dp"
android:text="Hi"
android:textSize="16sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/holo_blue_bright"
android:padding="10dp"
android:text="Hi"
android:textSize="16sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/darker_gray"
android:padding="10dp"
android:text="Hi"
android:textSize="16sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/holo_blue_bright"
android:padding="10dp"
android:text="Hi"
android:textSize="16sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/darker_gray"
android:padding="10dp"
android:text="Hi"
android:textSize="16sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/holo_green_light"
android:padding="10dp"
android:text="Hi"
android:textSize="16sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/holo_blue_bright"
android:padding="10dp"
android:text="Hi"
android:textSize="16sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/darker_gray"
android:padding="10dp"
android:text="Hi"
android:textSize="16sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/holo_green_light"
android:padding="10dp"
android:text="Hi"
android:textSize="16sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/holo_blue_bright"
android:padding="10dp"
android:text="Hi"
android:textSize="16sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/darker_gray"
android:padding="10dp"
android:text="Hi"
android:textSize="16sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/holo_green_light"
android:padding="10dp"
android:text="Hi"
android:textSize="16sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/holo_blue_bright"
android:padding="10dp"
android:text="Hi"
android:textSize="16sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/darker_gray"
android:padding="10dp"
android:text="Hi"
android:textSize="16sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/holo_green_light"
android:padding="10dp"
android:text="Hi"
android:textSize="16sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/holo_blue_bright"
android:padding="10dp"
android:text="Hi"
android:textSize="16sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/darker_gray"
android:padding="10dp"
android:text="Hi"
android:textSize="16sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/holo_green_light"
android:padding="10dp"
android:text="Hi"
android:textSize="16sp" />
</android.support.v7.widget.GridLayout>
</HorizontalScrollView>
</RelativeLayout>
Sorry For Posting this Answer too late:
What is to be done is : Extend a Horizontal Scroll view and override a method onScrollChanged and u get two coordinates x1 and x2. just pass x1 which is real time value indicates how much disance on x axis has been scrolled , to your seekbar setProgress(x1) method. Make sure u set seebar's max value first [setMax()] which is equal to the max scrollable length of scrollView.
public class mHorizontalScrollView extends HorizontalScrollView{
private float progress = 0.0f;
private SeekBar mSeekBar = null;
private MyActivityClass mObj = null;
private float xMax = 0.0f;
public mHorizontalScrollView(Context context, SeekBar sBar)
{
super(context);
mObj = (MyActivityClass) context; //or just use a Static reference
mSeekBar = sBar;
}
#Override
protected void onScrollChanged(int x, int y, int oldX, int oldY) {
// TODO Auto-generated method stub
int myX = x;
if(xMax == 0)
{
xMax = mObj.getMaxScrollWidth(); //Choose Your own Scrollable width or length
mSeekBar.setMax(Math.round(xMax));
}
mSeekBar.setProgress(myX);
super.onScrollChanged(x, y, oldX, oldY);
}
}
It Worked flawlessly. Now to Implement it reverse Scroll on scroll bar and HorizontallScroll View Should scroll in a proper Syncwith seekbar:
Use Below code in main Activity class :
seek_bar.setOnSeekBarChangeListener(new OnSeekBarChangeListener() {
#Override
public void onStopTrackingTouch(SeekBar seekBar)
{
}
#Override
public void onStartTrackingTouch(SeekBar seekBar)
{
}
#Override
public void onProgressChanged(SeekBar seekBar, int progress,
boolean fromUser) {
int currScrollPosX = progress;
mHSCV.scrollTo(progress , 0);
// mHSCV is object of mHorizontalScrollView Class
});
}
Regards.
I have a TabWidget with 5 tabs in it. Tabs : "One","Two","Three","Four","Five". The TabHost is in a HorizontalScrollView. Now I've one arrow (< and >) each on each side of the TabWidget to indicate that there are more tabs in that direction(which are currently not visible in view).
Now what I want to do is, if the first tab is not visible(in current view) then the arrow to left (<) should be visible and if the last tab is not visible(in current view) then the arrow to right should be visible and if both tabs are not visible(in current view) then both arrows should be visible. I tried doing it with:
if (horizontablscrollview.getLeft == 0)
{
arrowRight.setVisiblity(View.VISIBLE)
arrowLeft.setVisiblity(View.INVISIBLE)
}
else if( horizontablscrollview.getRight == 0)
{
arrowLeft.setVisiblity(View.VISIBLE)
arrowRight.setVisiblity(View.INVISIBLE)
}
else if ( horizontablscrollview.getRight == 0 && horizontablscrollview.getLeft == 0)
{
arrowRight.setVisiblity(View.VISIBLE)
arrowLeft.setVisiblity(View.VISIBLE)
}
But this doesn't work, my both tabs are invisible in the start:
my xml looks like this..
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#ffffff" >
<RelativeLayout
android:id="#+id/RL_Header"
android:layout_width="fill_parent"
android:layout_height="50dip"
android:layout_marginBottom="3dip"
android:background="#drawable/gradient" >
<ImageButton
android:id="#+id/btn_Home"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="3dp"
android:background="#android:color/transparent"
android:contentDescription="#string/description_home"
android:onClick="onHomeButtonClick"
android:src="#drawable/title_home" />
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="5dip"
android:layout_marginTop="5dip"
android:background="#android:color/transparent"
android:contentDescription="#string/description_about"
android:onClick="onClickAbout"
android:src="#drawable/title_about" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/FL_Tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/RL_Header" >
</RelativeLayout>
<RelativeLayout
android:id="#+id/FL_Tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/RL_Header" >
<TabHost
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#ffffff" >
<ImageView android:id="#+id/arrow_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/i_button"
android:layout_alignParentLeft="true"/>
<RelativeLayout
android:id="#+id/rl_tabs"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageView android:id="#+id/arrow_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/i_button"
android:layout_alignParentLeft="true"
android:visibility="invisible"/>
<ImageView android:id="#+id/arrow_Right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/i_button"
android:layout_alignParentRight="true"
android:visibility="invisible"/>
<HorizontalScrollView
android:id="#+id/my_scrollView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:fillViewport="true"
android:scrollbars="none"
android:layout_toRightOf="#+id/arrow_left"
android:layout_toLeftOf="#+id/arrow_Right">
<TabWidget
android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:tabStripEnabled="true"/>
</HorizontalScrollView>
</RelativeLayout>
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingTop="65dip" >
<RelativeLayout
android:id="#+id/myTabContent"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="50dip" >
<TableLayout
android:id="#+id/tabSubs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ffffff"
android:shrinkColumns="*"
android:stretchColumns="*" >
<TableRow
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="20dip"
android:layout_marginTop="20dip"
android:gravity="center_horizontal" >
<Button
android:id="#+id/btntestno1"
android:layout_weight="1"
android:gravity="center"
android:padding="20dip"
android:text="Test 1"
android:textColor="#000000" />
<Button
android:id="#+id/btntestno2"
android:layout_weight="1"
android:gravity="center"
android:padding="20dip"
android:text="Test 2"
android:textColor="#000000" />
</TableRow>
<TableRow
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="20dip"
android:gravity="center_horizontal" >
<Button
android:id="#+id/btntestno3"
android:layout_weight="1"
android:gravity="center"
android:padding="20dip"
android:text="Test 3"
android:textColor="#000000" />
<Button
android:id="#+id/btntestno4"
android:layout_weight="1"
android:gravity="center"
android:padding="20dip"
android:text="Test 4"
android:textColor="#000000" />
</TableRow>
<TableRow
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="20dip"
android:gravity="center_horizontal" >
<Button
android:id="#+id/btntestno5"
android:layout_weight="1"
android:gravity="center"
android:padding="20dip"
android:text="Test 5"
android:textColor="#000000" />
<Button
android:id="#+id/btntestno6"
android:layout_weight="1"
android:gravity="center"
android:padding="20dip"
android:text="Test 6"
android:textColor="#000000" />
</TableRow>
</TableLayout>
</RelativeLayout>
</FrameLayout>
</TabHost>
</RelativeLayout>
</RelativeLayout>
Any help would be greatly appreciated.
One solution would be to make you own HorizontalScrollView class and show the ImageViews based on the scroll(although I didn't tested that much the code below should work). Your layout will look like this:
//...
<RelativeLayout
android:id="#+id/rl_tabs"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageView android:id="#+id/arrow_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/i_button"
android:layout_alignParentLeft="true"
android:visibility="gone"/>
<ImageView android:id="#+id/arrow_Right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/i_button"
android:layout_alignParentRight="true"
/>
<com.your.package.here.SpecialScroll
android:id="#+id/my_scrollView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:fillViewport="true"
android:scrollbars="none" >
<TabWidget
android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:tabStripEnabled="true"/>
</com.your.package.here.SpecialScroll>
</RelativeLayout>
//...
The SpecialScroll class will look like this:
public class SpecialScroll extends HorizontalScrollView {
public interface PositionListener {
public void onLeftArrowRequired(boolean required);
public void onRightArrowRequired(boolean required);
public View implementScrolledView();
}
private PositionListener listener;
public void setPositionListener(PositionListener listener) {
this.listener = listener;
}
public SpecialScroll(Context context) {
super(context);
}
public SpecialScroll(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
public SpecialScroll(Context context, AttributeSet attrs) {
super(context, attrs);
}
#Override
protected void onScrollChanged(int l, int t, int oldl, int oldt) {
super.onScrollChanged(l, t, oldl, oldt);
if (l == 0) {
listener.onLeftArrowRequired(false);
} else {
listener.onLeftArrowRequired(true);
}
View v = listener.implementScrolledView();
Rect r = new Rect();
v.getDrawingRect(r);
if ((r.width() - l) == getWidth()) {
listener.onRightArrowRequired(false);
} else {
listener.onRightArrowRequired(true);
}
}
}
Then in your activity's onCreate method you'll do:
SpecialScroll hsv = (SpecialScroll) findViewById(R.id.my_scrollView);
hsv.setPositionListener(this); // I made the activity implement the SpecialScroll.PositionListener interface
and the activity's implementation of the PositionListener interface is:
#Override
public void onLeftArrowRequired(boolean required) {
if (required) {
((ImageView) findViewById(R.id.arrow_left))
.setVisibility(View.VISIBLE);
} else {
((ImageView) findViewById(R.id.arrow_left))
.setVisibility(View.GONE);
}
}
#Override
public void onRightArrowRequired(boolean required) {
if (required) {
((ImageView) findViewById(R.id.arrow_right))
.setVisibility(View.VISIBLE);
} else {
((ImageView) findViewById(R.id.arrow_right))
.setVisibility(View.GONE);
}
}
#Override
public View implementScrolledView() {
return findViewById(android.R.id.tabs);
}
This isn't an elegant solution, but you could display the left arrow if the x coordinate of the leftmost tab was less than zero and display the right tab if the rightmost tab's x plus its width was greater than the screen width.