I am trying to find a way to implement a standing table for a sports app (like NBA Game Time standings), with a fixed header, fixed first column and a footer. I searched a bit on how to get it, but the best shot was this project (https://github.com/InQBarna/TableFixHeaders) but it uses its own view instead of Recycler of GridView. Do anyone knows something like this or knows how I can start with it (Adapter or LayoutManager)?
Edit (adding images)
After testing and searching a lot, I implemented by my own, combining a ListView with inner HorizontalScrollViews.
First, I extended HorizontalScrollView to report me the scroll event, adding a listener:
public class MyHorizontalScrollView extends HorizontalScrollView {
private OnScrollListener listener;
#Override
protected void onScrollChanged(int l, int t, int oldl, int oldt) {
super.onScrollChanged(l, t, oldl, oldt);
if (listener != null) listener.onScroll(this, l, t);
}
public void setOnScrollListener(OnScrollListener listener) {
this.listener = listener;
}
public interface OnScrollListener {
void onScroll(HorizontalScrollView view, int x, int y);
}
}
Then, I created my layout with a LinearLayout, containing my header and a ListView for my Activity (or Fragment, if it's your need).
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include
android:id="#+id/header"
layout="#layout/header" />
<ListView
android:id="#+id/list"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
Each item of my list is a LinearLayout, with a TextView (the fixed column) and a HorizontalScrollView. The layout of both header and lines are the following:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
style="?android:attr/textAppearanceMedium"
android:background="#f00"
android:minWidth="40dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<View
android:layout_width="1px"
android:layout_height="match_parent"
android:background="#android:color/black" />
<net.rafaeltoledo.example.MyHorizontalScrollView
android:id="#+id/scroll"
android:scrollbars="none"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="horizontal">
<!-- Childs, or columns -->
</LinearLayout>
</net.rafaeltoledo.example.MyHorizontalScrollView>
</LinearLayout>
The trick is to scroll all With a help of a EventBus (I used the GreenRobot's one) to fire the horizontal scroll event and move all scrollers as one. My event object contains the same data from the listener class (maybe I can use the listener object itself?)
public static class Event {
private final int x;
private final int y;
private final HorizontalScrollView view;
public Event(HorizontalScrollView view, int x, int y) {
this.x = x;
this.y = y;
this.view = view;
}
public int getX() {
return x;
}
public int getY() {
return y;
}
public HorizontalScrollView getView() {
return view;
}
}
The list adapter class receives a listener to set in the HorizontalScrollView of each item.
public static class Adapter extends BaseAdapter {
private final Context context;
private MyHorizontalScrollView.OnScrollListener listener;
public Adapter(Context context, MyHorizontalScrollView.OnScrollListener listener) {
this.context = context;
this.listener = listener;
}
#Override
public int getCount() {
return 30;
}
#Override
public Object getItem(int position) {
return new Object();
}
#Override
public long getItemId(int position) {
return position;
}
#Override
public View getView(int position, View convertView, ViewGroup parent) {
if (convertView == null) {
convertView = LayoutInflater.from(getContext()).inflate(R.layout.header, parent, false);
MyHorizontalScrollView scroll = (MyHorizontalScrollView) convertView.findViewById(R.id.scroll);
scroll.setOnScrollListener(listener);
}
return convertView;
}
public Context getContext() {
return context;
}
}
Before continue, I registered MyHorizontalScrollView to EventBus, adding EventBus.getDefault().register(this) to each version of constructor, and added the receiver method to it:
public void onEventMainThread(MainActivity.Event event) {
if (!event.getView().equals(this)) scrollTo(event.getX(), event.getY());
}
that will scroll to the received position, if was not itself that fired the scroll event.
And finally, I setted up everything in the onCreate() method of my Activity:
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.list);
MyHorizontalScrollView.OnScrollListener listener = new MyHorizontalScrollView.OnScrollListener() {
#Override
public void onScroll(HorizontalScrollView view, int x, int y) {
Log.d("Scroll Event", String.format("Fired! %d %d", x, y));
EventBus.getDefault().post(new Event(view, x, y));
}
};
ListView listView = (ListView) findViewById(R.id.list);
ViewGroup header = (ViewGroup) findViewById(R.id.header);
header.getChildAt(0).setBackgroundColor(Color.WHITE);
header.setBackgroundColor(Color.BLUE);
((MyHorizontalScrollView) header.findViewById(R.id.scroll)).setOnScrollListener(listener);
listView.setAdapter(new Adapter(this, listener));
listView.addFooterView(getLayoutInflater().inflate(R.layout.footer, listView, false));
}
(Please ignore some weird coloring, it's for better viewing what's happening).
And ta-daa, here is the desired result!
You can implement a layout like that like this:
<LinearLayout
...
android:orientation="vertical">
<TextView
... />
<com.example.TableHeaderView
... />
<RecyclerView
... />
</LinearLayout>
Only the RecyclerView will scroll, leaving your title text view and table header at the top of the screen.
From your images I would suggest considering using a library such as StickyGridHeaders. It extends GridView and can have custom 'header' views.
Alternatives are StickyListHeaders or HeaderListView but focus more on the ListView
Edit:
On further investigation, the example provided in this tutorial seems to match your requirements
Related
I want to build a complex layout using recyclerview android. In the layout, I want to have a camera button to the top left fixed and a recyclerview wrapped around it with gallery images. I have checked flexbox layout manager for recyclerview but it doesn't seem to match my use-case.
I want the header to be non-repeating and not to scroll with other items vertically. Here's the layout for the header:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/shareLayout"
android:layout_width="185dp"
android:layout_height="135dp"
android:layout_below="#id/trendingToolbar"
android:background="#color/black">
<ImageView
android:id="#+id/cameraShareIV"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
app:srcCompat="#drawable/camera_white" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/cameraShareIV"
android:layout_centerHorizontal="true">
<TextView
android:id="#+id/infoTxt"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginLeft="20dp"
android:gravity="center_horizontal"
android:text="#string/share_pic_video"
android:textColor="#android:color/white"
android:textSize="13sp"
android:textStyle="bold" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/infoTxt"
android:layout_marginLeft="16dp"
android:text="#string/share_timeout_txt"
android:textColor="#color/colorPrimaryDark"
android:textSize="11sp"
android:textStyle="bold" />
</RelativeLayout>
and in my activity, here's the XML:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="base.android.com.thumbsapp.UI.Fragments.TrendingFragment">
<include layout="#layout/trending_toolbar"
android:id="#+id/trendingToolbar"/>
<android.support.v7.widget.RecyclerView
android:id="#+id/trendingRV"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/trendingToolbar"/>
Previously, I had the header inside the activity XML but had no way to wrap a recyclerview around it. So, I have decide to use an adapter like below:
public class TrendingAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {
private static final String TAG = TrendingAdapter.class.getSimpleName();
private Context context;
private List<Trending> itemList;
private static final int HEADER = 0;
private static final int ITEMS = 1;
#Override
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View v;
switch (viewType){
case HEADER:
v = LayoutInflater.from(parent.getContext()).inflate(R.layout.trending_header, parent, false);
return new TrendingHeaderViewHolder(v);
case ITEMS:
v = LayoutInflater.from(parent.getContext()).inflate(R.layout.trending_items_layout, parent, false);
return new TrendingItemsViewHolder(v);
}
return null;
}
#Override
public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
Trending tr = itemList.get(position);
if (holder instanceof TrendingHeaderViewHolder){
((TrendingHeaderViewHolder) holder).cameraShareIV.setOnClickListener( view -> {
// TODO: 4/2/2018 select image from gallery
});
} else if (holder instanceof TrendingItemsViewHolder){
// TODO: 4/2/2018 populate gallery items here with picasso
}
}
#Override
public int getItemCount() {
return itemList.size();
}
#Override
public int getItemViewType(int position) {
return super.getItemViewType(position);
}
}
I'm confused how to make the header stick and also what to do for getItemViewType method.
Is this the right way to approach this?
Can anyone help out? Thanks.
For this lay out i suggest better option is use this header view
https://github.com/edubarr/header-decor
To make things simple i suggest you to look into this library
In your XML Place RecylerView into StickyHeaderView,choose horizontal or vertical orientation for your RecylerView
<tellh.com.stickyheaderview_rv.StickyHeaderView
android:id="#+id/stickyHeaderView"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white"
android:scrollbars="vertical" />
</tellh.com.stickyheaderview_rv.StickyHeaderView>
Create data bean class for each item type in RecyclerView. They should extend DataBean. Override the method
public boolean shouldSticky() to decide whether the item view should be suspended on the top.
public class User extends DataBean {
private String login;
private int id;
private String avatar_url;
private boolean shouldSticky;
#Override
public int getItemLayoutId(StickyHeaderViewAdapter adapter) {
return R.layout.item_user;
}
public void setShouldSticky(boolean shouldSticky) {
this.shouldSticky = shouldSticky;
}
// Decide whether the item view should be suspended on the top.
#Override
public boolean shouldSticky() {
return shouldSticky;
}
}
public class ItemHeader extends DataBean {
private String prefix;
#Override
public int getItemLayoutId(StickyHeaderViewAdapter adapter) {
return R.layout.header;
}
#Override
public boolean shouldSticky() {
return true;
}
}
Create ViewBinder to bind different type views with specific data beans. As you see, provideViewHolder(View itemView) corresponds for onCreateViewHolder in RecyclerView, and bindView corresponds for onBindViewHolder in RecyclerView.
public class ItemHeaderViewBinder extends ViewBinder<ItemHeader, ItemHeaderViewBinder.ViewHolder> {
#Override
public ViewHolder provideViewHolder(View itemView) {
return new ViewHolder(itemView);
}
#Override
public void bindView(StickyHeaderViewAdapter adapter, ViewHolder holder, int position, ItemHeader entity) {
holder.tvPrefix.setText(entity.getPrefix());
}
#Override
public int getItemLayoutId(StickyHeaderViewAdapter adapter) {
return R.layout.header;
}
static class ViewHolder extends ViewBinder.ViewHolder {
TextView tvPrefix;
public ViewHolder(View rootView) {
super(rootView);
this.tvPrefix = (TextView) rootView.findViewById(R.id.tv_prefix);
}
}
}
Instantiate StickyHeaderViewAdapter for RecyclerView and register ViewBinders for each item types.
rv = (RecyclerView) findViewById(R.id.recyclerView);
rv.setLayoutManager(new LinearLayoutManager(this));
List<DataBean> userList = new ArrayList<>();
adapter = new StickyHeaderViewAdapter(userList)
.RegisterItemType(new UserItemViewBinder())
.RegisterItemType(new ItemHeaderViewBinder());
rv.setAdapter(adapter);
I want to show a ViewPager with all the days of the week with a preview of the following and previous item of the current one.
I've tried a lot of solutions suggested from stackoverflow but none of them is working. I don't wont to use fragments in the ViewPager so I've used a PagerAdapter.
See this image:
My starting point is:
activity_main.xml
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="Choose a day of the week:" />
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/weekOfTheDayPager"/>
MainActivity.java
public class MainActivity extends AppCompatActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
setUpAdapter();
}
private void setUpAdapter() {
ViewPager _mViewPager = (ViewPager) findViewById(R.id.weekOfTheDayPager);
final String[] daysOfTheWeek = {"Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"};
final Context myContext = getBaseContext();
_mViewPager.setAdapter(new PagerAdapter() {
#Override
public int getCount() {
return daysOfTheWeek.length;
}
#Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
#Override
public Object instantiateItem(ViewGroup collection, int position) {
LayoutInflater inflater = LayoutInflater.from(myContext);
ViewGroup layout = (ViewGroup) inflater.inflate(R.layout.dayoftheweeklayout, collection, false);
((TextView) layout.findViewById(R.id.dayOfTheWeekTextView)).setText(daysOfTheWeek[position]);
collection.addView(layout);
return layout;
}
#Override
public void destroyItem(ViewGroup collection, int position, Object view) {
collection.removeView((View) view);
}
});
}}
and finally the layout for the ViewPager item:
dayoftheweeklayout.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="#+id/dayOfTheWeekTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Sunday"
android:layout_gravity="center_horizontal"/>
</FrameLayout>
Any suggestion will be appreciated.
So it looks like you want a carousel view.
Here's the recipe:
First, in order to show pages to the side in ViewPager, you need to provide some padding on the sides and then set clipToPadding to false:
<android.support.v4.view.ViewPager
android:id="#+id/weekOfTheDayPager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipToPadding="false"
android:paddingEnd="#dimen/view_pager_padding"
android:paddingLeft="#dimen/view_pager_padding"
android:paddingRight="#dimen/view_pager_padding"
android:paddingStart="#dimen/view_pager_padding"/>
Next, you need to override getPageWidth in your PagerAdapter to tell the ViewPager that you want to display three pages at a time:
#Override
public float getPageWidth(int position) {
return 1F / 3F;
}
Then you need to tell the ViewPager to use a custom PageTransformer:
viewPager.setPageTransformer(false, new MyPageTransformer());
...
public static class MyPageTransformer implements ViewPager.PageTransformer {
private ArgbEvaluator mColorFade = new ArgbEvaluator();
#Override
public void transformPage(View page, float position) {
// position is 0 when page is centered (current)
// -1 when page is all the way to the left
// +1 when page is all the way to right
// Here's an example of how you might morph the color
int color = mColorFade(Math.abs(position), Color.RED, Color.GRAY);
TextView tv = (TextView) page.findViewById(R.id.dayOfTheWeekTextView);
tv.setTextColor(color);
}
}
There's probably something I forgot, but search SO for "android viewpager carousel" and you will find an answer in there somewhere.
first of all, sorry if this a stupid question. I'm not being lazy.
So, the problem is, im trying to implement CardView/RecyclerView in an Android app. I made it, but the problem is that the cards are spaced one from another, and i don't know how to fix it. I explored the code but everything seems to be fine.
The code :
RecyclerView
<android.support.v7.widget.RecyclerView
android:id="#+id/collapsing_recyclerview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="vertical"
android:padding="#dimen/activity_horizontal_margin">
</android.support.v7.widget.RecyclerView>
CardView item
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.CardView
android:id="#+id/card_view"
card_view:cardBackgroundColor="#color/colorAccent"
android:layout_gravity="center"
android:layout_width="fill_parent"
android:layout_height="100dp"
android:layout_margin="5dp"
card_view:cardCornerRadius="2dp">
<TextView
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="New Text"
android:id="#+id/cardview.name" />
</android.support.v7.widget.CardView>
</LinearLayout>
Adapter :
public class MyRecyclerViewAdapter extends RecyclerView
.Adapter<MyRecyclerViewAdapter
.DataObjectHolder> {
private static String LOG_TAG = "MyRecyclerViewAdapter";
private ArrayList<CardViewItem> mDataset;
private static MyClickListener myClickListener;
public static class DataObjectHolder extends RecyclerView.ViewHolder
implements View
.OnClickListener {
TextView label;
public DataObjectHolder(View itemView) {
super(itemView);
label = (TextView) itemView.findViewById(R.id.cardview_name);
Log.i(LOG_TAG, "Adding Listener");
itemView.setOnClickListener(this);
}
#Override
public void onClick(View v) {
myClickListener.onItemClick(getAdapterPosition(), v);
}
}
public void setOnItemClickListener(MyClickListener myClickListener) {
this.myClickListener = myClickListener;
}
public MyRecyclerViewAdapter(ArrayList<CardViewItem> myDataset) {
mDataset = myDataset;
}
#Override
public DataObjectHolder onCreateViewHolder(ViewGroup parent,
int viewType) {
View view = LayoutInflater.from(parent.getContext())
.inflate(R.layout.example_card_view, parent, false);
DataObjectHolder dataObjectHolder = new DataObjectHolder(view);
return dataObjectHolder;
}
#Override
public void onBindViewHolder(DataObjectHolder holder, int position) {
holder.label.setText(mDataset.get(position).getName());;
}
public void addItem(CardViewItem dataObj, int index) {
mDataset.add(index, dataObj);
notifyItemInserted(index);
}
public void deleteItem(int index) {
mDataset.remove(index);
notifyItemRemoved(index);
}
#Override
public int getItemCount() {
return mDataset.size();
}
public interface MyClickListener {
public void onItemClick(int position, View v);
}
}
Hope you guys can help me. Thanks!
EDIT: So, i found the answer. The coulprit was the android:layout_height="match_parent"
in my cardview item. I change it for "wrap_content" and fixed the problem. Thanks for the help guys! :)
Have you tried ItemDecoration with your RecyclerView ? That's usefull for customize your divider in a RecyclerView
You can look that :
My custom ItemDecoration use getItemOffsets() like this :
public class MyItemDecoration extends RecyclerView.ItemDecoration {
private final int decorationHeight;
private Context context;
public MyItemDecoration(Context context) {
this.context = context;
decorationHeight = context.getResources().getDimensionPixelSize(R.dimen.decoration_height);
}
#Override
public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
super.getItemOffsets(outRect, view, parent, state);
if (parent != null && view != null) {
int itemPosition = parent.getChildAdapterPosition(view);
int totalCount = parent.getAdapter().getItemCount();
if (itemPosition >= 0 && itemPosition < totalCount - 1) {
outRect.bottom = decorationHeight;
}
}
}
}
Then you can set your R.dimen.decoration_height to the value what you want.
And in my activity, when I instantiate my RecyclerListView I need to do this :
myList.addItemDecoration(MyItemDecoration(this))
myList.setLayoutManager(LinearLayoutManager(this))
myList.setAdapter(adapter)
I hope this will help you
Remove this line from your CardView item .xml
android:layout_margin="5dp"
You probably wanted it to be padding instead of margin
In order to create spacings in between items, we could use RecyclerView's ItemDecorator's:
addItemDecoration(object : RecyclerView.ItemDecoration() {
override fun getItemOffsets(
outRect: Rect,
view: View,
parent: RecyclerView,
state: RecyclerView.State,
) {
super.getItemOffsets(outRect, view, parent, state)
if (parent.getChildAdapterPosition(view) > 0) {
outRect.top = 8.dp // Change this value with anything you want. Remember that you need to convert integers to pixels if you are working with dps :)
}
}
})
A few things to have in consideration given the code I pasted:
You don't really need to call super.getItemOffsets but I chose to, because I want to extend the behavior defined by the base class. If the library got an update doing more logic behind the scenes, we would miss it.
As an alternative to adding top spacing to the Rect, you could also add bottom spacing, but the logic related to getting the last item of the adapter is more complex, so this might be slightly better.
I used an extension property to convert a simple integer to dps: 8.dp. Something like this might work:
val Int.dp: Int
get() = (this * Resources.getSystem().displayMetrics.density + 0.5f).toInt()
// Extension function works too, but invoking it would become something like 8.dp()
CardView by default adds padding. Try using CardView attribute card_view:contentPadding but set the negative values for the attribute like this
card_view:contentPadding="-3"
I've been using Android-ObservableScrollView Library (https://github.com/ksoichiro/Android-ObservableScrollView) to implement a header (a Relative Layout) that disappears when a listView is scrolled. This listView is embedded within a viewPager to accumulate Tab functionality. Here's a screenshot of my layout:
I've implemented the below code to animate and hide the header successfully.
fragment_profile.xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:id="#+id/profile_header"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<!--Header Layout Code-->
</RelativeLayout>
<RelativeLayout
android:id="#+id/profile_tab_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/profile_header"
>
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="20dp"
android:layout_alignParentTop="true"
android:background="#color/background"
app:tabTextColor="#color/rosso_corsa"
app:tabSelectedTextColor="#color/rosso_corsa"
app:tabIndicatorColor="#color/rosso_corsa"
app:tabIndicatorHeight="2dp"
/>
<android.support.v4.view.ViewPager
android:id="#+id/tab_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/tab_layout"
/>
</RelativeLayout>
</RelativeLayout>
fragment_profile_posts_tab.xml: (This is the fragment that gets loaded into the viewPager)
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:id="#+id/profile_posts_tab"
>
<com.github.ksoichiro.android.observablescrollview.ObservableListView
android:id="#android:id/list"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</FrameLayout>
ProfilePostsTabFragment.java:
public class ProfilePostsTabFragment extends android.support.v4.app.ListFragment implements ObservableScrollViewCallbacks {
private RelativeLayout profileHeader;
private RelativeLayout profileTabLayout;
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_profile_posts_tab, container, false);
ObservableListView listView = (ObservableListView) view.findViewById(android.R.id.list);
listView.setScrollViewCallbacks(this);
return view;
}
#Override
public void onScrollChanged(int scrollY, boolean firstScroll, boolean dragging) {
}
#Override
public void onDownMotionEvent() {
}
#Override
public void onUpOrCancelMotionEvent(ScrollState scrollState) {
if (scrollState == ScrollState.UP) {
if (profileHeaderIsShown()) {
hideProfileHeader();
}
} else if (scrollState == ScrollState.DOWN) {
if (profileHeaderIsHidden()) {
showProfileHeader();
}
}
}
private boolean profileHeaderIsShown() {
// Toolbar is 0 in Y-axis, so we can say it's shown.
return profileHeader.getTranslationY() == 0;
}
private boolean profileHeaderIsHidden() {
// Toolbar is outside of the screen and absolute Y matches the height of it.
// So we can say it's hidden.
return profileHeader.getTranslationY() == -profileHeader.getHeight();
}
private void showProfileHeader() {
moveProfileHeader(0);
}
private void hideProfileHeader() {
moveProfileHeader(-profileHeader.getHeight());
}
private void moveProfileHeader(float toTranslationY) {
// Check the current translationY
if (profileHeader.getTranslationY() == toTranslationY) {
return;
}
ValueAnimator animator = ValueAnimator.ofFloat(profileHeader.getTranslationY(), toTranslationY).setDuration(200);
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
#Override
public void onAnimationUpdate(ValueAnimator animation) {
float translationY = (float) animation.getAnimatedValue();
profileHeader.setTranslationY(translationY);
profileTabLayout.setTranslationY(translationY);
RelativeLayout.LayoutParams lp = (RelativeLayout.LayoutParams) profileTabLayout.getLayoutParams();
lp.height = getContainerHeight();
profileTabLayout.setLayoutParams(lp);
profileTabLayout.requestLayout();
}
});
animator.start();
}
private int getContainerHeight() {
return (getActivity().findViewById(R.id.fragment_container)).getHeight();
}
#Override
public void onActivityCreated(Bundle savedInstanceState) {
super.onActivityCreated(savedInstanceState);
//Setting Values to the String passed - Tutorial stuff
String[] values = new String[] { "Iron Man", "Captain America", "Thor",
"Hulk", "Black Widow", "Spider Man", "Scarlet Witch", "Black Panther",
"War Machine", "Bucky" };
this.profileHeader = (RelativeLayout) getActivity().findViewById(R.id.profile_header);
this.profileTabLayout = (RelativeLayout) getActivity().findViewById(R.id.profile_tab_layout);
//Hooking up our custom array adaptor
NotificationsArrayAdapter adapter = new NotificationsArrayAdapter(getActivity(), values);
setListAdapter(adapter);
}
#Override
public void onListItemClick(ListView l, View v, int position, long id) {
// TODO implement some logic
String item = (String) getListAdapter().getItem(position);
Toast.makeText(getActivity(), item + " selected", Toast.LENGTH_LONG).show();
}
}
My problem is this: I get this weird space at the bottom when the header is hidden (when scrolled up on the ObservableListView object).
How can I get rid of it and make my tab layout fill the screen when the header layout is hidden? I tried everything from trying to resize the viewPager, tabs to the listView but nothing seems to work. Thanks in advance.
Try using linearlayout with orientation vertical in the fragment_profile.xml. Replace all relativelayout with linearlayout
I have a grid view in my application and i need to scroll it horizontally.I have tried changing the gridview to gallery.But then only one row is available,but i need different rows as in a grid view.So basically what i need is a gridview that can be scrolled horizontally.Is there any efficient way to do this?Thanks in advance.
Regards
Anu
Hi,Thanks for the reply.i have tried using a Gallery and implement an adapter that provides a multirow view in its getView method.
My java file is:
public class Gridview extends Activity
{
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
Gallery g = (Gallery) findViewById(R.id.gallery);
g.setAdapter(new GridAdapter(this));
g.setOnItemClickListener(new OnItemClickListener() {
public void onItemClick(AdapterView parent, View v, int position, long id) {
Toast.makeText(Gridview.this, "" + position, Toast.LENGTH_SHORT).show();
}
});
}
public class GridAdapter extends BaseAdapter {
int mGalleryItemBackground;
private Context mContext;
private Integer[] mImageIds = {
R.drawable.icon,
R.drawable.icon,
R.drawable.icon,
R.drawable.icon,
R.drawable.icon,
R.drawable.icon,
R.drawable.icon,
};
public GridAdapter(Context c) {
mContext = c;
TypedArray a = obtainStyledAttributes(R.styleable.HelloGallery);
mGalleryItemBackground = a.getResourceId(
R.styleable.HelloGallery_android_galleryItemBackground, 0);
a.recycle();
}
public int getCount() {
return mImageIds.length;
}
public Object getItem(int position) {
return position;
}
public long getItemId(int position) {
return position;
}
public View getView(int position, View convertView, ViewGroup parent) {
View v;
if(convertView==null)
{
LayoutInflater li = getLayoutInflater();
v = li.inflate(R.layout.icon, null);
ImageView iv = (ImageView)v.findViewById(R.id.icon_image);
iv.setImageResource(R.drawable.icon);
}
else
{
v = convertView;
}
return v;
}
}
}
main.xml is :
<?xml version="1.0" encoding="utf-8"?>
<Gallery xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/gallery"
android:layout_width="fill_parent"
android:layout_height="wrap_content"/>
icon.xml is:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/linearlayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<ImageView
android:id="#+id/icon_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
</ImageView>
</LinearLayout>
The output i got is : http://www.4shared.com/photo/MzUcmzel/device.html
But this is not i need actually.i want the icons in different rows.Any help is appreciated.
I think your best bet is to use a Gallery and implement an adapter that provides a multirow view in its getView method. See Hello Gallery and look at the ImageAdapter implementation within.
Instead of the ImageView that getView returns in that example, you can, for example, inflate your own custom layout, for example a LinearLayout with vertical orientation.
You might consider a TableLayout inside a HorizontalScrollView, but the disadvantage there is that everything will be in memory at once, making it difficult to scale to lots of items. The Gallery recycles Views and offers some resource advantages.
I have already posted this answer here and here, but these questions are
identical...
There is a nice solution in Android from now on : HorizontalGridView.
1. Gradle dependency
dependencies {
compile 'com.android.support:leanback-v17:23.1.0'
}
2. Add it in your layout
your_activity.xml
<!-- your stuff before... -->
<android.support.v17.leanback.widget.HorizontalGridView
android:layout_width="wrap_content"
android:layout_height="80dp"
android:id="#+id/gridView"
/>
<!-- your stuff after... -->
3. Layout grid element
Create a layout for your grid element ( grid_element.xml ). I have created a simple one with only one button in it.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="#+id/button" />
</LinearLayout>
4. Create an adapter
Highly inspired by this link : https://gist.github.com/gabrielemariotti/4c189fb1124df4556058
public class GridElementAdapter extends RecyclerView.Adapter<GridElementAdapter.SimpleViewHolder>{
private Context context;
private List<String> elements;
public GridElementAdapter(Context context){
this.context = context;
this.elements = new ArrayList<String>();
// Fill dummy list
for(int i = 0; i < 40 ; i++){
this.elements.add(i, "Position : " + i);
}
}
public static class SimpleViewHolder extends RecyclerView.ViewHolder {
public final Button button;
public SimpleViewHolder(View view) {
super(view);
button = (Button) view.findViewById(R.id.button);
}
}
#Override
public SimpleViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
final View view = LayoutInflater.from(this.context).inflate(R.layout.grid_element, parent, false);
return new SimpleViewHolder(view);
}
#Override
public void onBindViewHolder(SimpleViewHolder holder, final int position) {
holder.button.setText(elements.get(position));
holder.button.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
Toast.makeText(context, "Position =" + position, Toast.LENGTH_SHORT).show();
}
});
}
#Override
public long getItemId(int position) {
return position;
}
#Override
public int getItemCount() {
return this.elements.size();
}
}
5. Initialize it in your activity :
private HorizontalGridView horizontalGridView;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.your_activity);
horizontalGridView = (HorizontalGridView) findViewById(R.id.gridView);
GridElementAdapter adapter = new GridElementAdapter(this);
horizontalGridView.setAdapter(adapter);
}
True about using a Gallery or ListView re: re-using views. But if your list is not too long, you can try a TableLayout with a ViewFlipper. Here's a summary of possible options/solutions.
This post might get help you out what you wanted to achieve
Scroll like Shelf View
how about using a viewPager :
http://developer.android.com/reference/android/support/v4/view/ViewPager.html
?
Try to wrap it in HorizontalScrollView