Joshua Majebi Joshua Majebi - 3 years ago 73
Android Question

RecyclerView content not using full width of fragment parent

So I have a recyclerview that is within a fragment and when the content is loaded into the recyclerview it does not occupy the full width of the screen. Weird thing is that i am using this code for another project practically the same and there are no issues.

The fragment layout is like this

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/windowBackground"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
tools:context="com.dishesteam.dishes.activities.HomeActivity">

<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/coordinator">

<android.support.v4.widget.SwipeRefreshLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/swipeContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="4dp"
android:paddingBottom="4dp"
app:layout_behavior="@string/appbar_scrolling_view_behavior">

<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="vertical"
android:id="@+id/latest_recycler">

</android.support.v7.widget.RecyclerView>

</android.support.v4.widget.SwipeRefreshLayout>

<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/add_dish_fab"
app:srcCompat="@drawable/ic_add_black_24dp"
app:fabSize="normal"
app:backgroundTint="@color/colorAccent"
android:clickable="true"
android:layout_margin="16dp"
android:layout_gravity="bottom|end"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"/>

</android.support.design.widget.CoordinatorLayout>

<ImageView
android:id="@+id/trending_img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="@drawable/ic_trending_up_black_24dp"
android:layout_centerInParent="true"/>

<TextView
android:layout_width="wrap_content"
android:layout_height="20dp"
android:text="Nothing here at the moment"
android:textSize="16sp"
android:id="@+id/empty_text"
android:layout_below="@+id/trending_img"
android:layout_centerHorizontal="true"
android:textColor="@color/ColorDarkGrey" />




The layout for the individual items of the recyceler is

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
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="wrap_content"
android:background="@color/textColorPrimary"
app:cardCornerRadius="4dp"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:layout_marginTop="4dp"
android:layout_marginBottom="4dp">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="8dp"
android:orientation="vertical">

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">

<de.hdodenhof.circleimageview.CircleImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:id="@+id/owner_image"
app:srcCompat="@drawable/ic_account_circle_black_24dp"
android:layout_alignParentStart="true"
android:layout_alignParentLeft="true"/>

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/owner_text"
android:textSize="14sp"
android:fontFamily="sans-serif"
android:layout_toRightOf="@+id/owner_image"
android:layout_marginLeft="3dp"
android:layout_marginRight="3dp"/>

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/post_date"
android:textSize="14sp"
android:fontFamily="sans-serif"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"/>

</RelativeLayout>

<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:srcCompat="@drawable/ic_cake_black_24dp"
android:id="@+id/first_dish_image"/>

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/dish_name"
android:textSize="16sp"
android:layout_marginBottom="4dp"
android:fontFamily="sans-serif"/>

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/dish_description"
android:textSize="14sp"
android:layout_marginBottom="8dp"
android:fontFamily="sans-serif"/>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="3">

<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:orientation="vertical"
android:layout_weight="1">

<android.support.v7.widget.AppCompatImageButton
android:layout_width="wrap_content"
android:layout_height="20dp"
android:layout_gravity="center"
app:srcCompat="@drawable/ic_favorite_black_24dp"
android:background="@android:color/transparent"
android:id="@+id/likes_btn"
android:layout_marginBottom="2dp"/>

<TextView
android:layout_width="wrap_content"
android:layout_height="20dp"
android:text="Favourite"
android:textSize="14sp"
android:layout_gravity="center"
android:id="@+id/likes_btn_text"
android:textColor="@color/ColorDarkGrey" />

</LinearLayout>

<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:orientation="vertical"
android:layout_weight="1">

<android.support.v7.widget.AppCompatImageButton
android:layout_width="wrap_content"
android:layout_height="20dp"
android:layout_gravity="center"
app:srcCompat="@drawable/ic_share_black_24dp"
android:background="@android:color/transparent"
android:id="@+id/share_btn"
android:layout_marginBottom="2dp"/>

<TextView
android:layout_width="wrap_content"
android:layout_height="20dp"
android:text="Share"
android:textSize="14sp"
android:layout_gravity="center"
android:id="@+id/share_btn_text"
android:textColor="@color/ColorDarkGrey" />

</LinearLayout>

<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:orientation="vertical"
android:layout_weight="1">

<android.support.v7.widget.AppCompatImageButton
android:layout_width="wrap_content"
android:layout_height="20dp"
android:layout_gravity="center"
app:srcCompat="@drawable/ic_chat_bubble_black_24dp"
android:background="@android:color/transparent"
android:id="@+id/comment_btn"
android:layout_marginBottom="2dp"/>

<TextView
android:layout_width="wrap_content"
android:layout_height="20dp"
android:text="Comment"
android:textSize="14sp"
android:layout_gravity="center"
android:id="@+id/comment_btn_text"
android:textColor="@color/ColorDarkGrey" />

</LinearLayout>

</LinearLayout>

</LinearLayout>




and my create view method in the fragment is the following,
I am refactoring my code to use butterknife for view initilization and events.

@BindView(R.id.empty_text)
TextView empty_text;

@BindView(R.id.trending_img)
ImageView trending_img;

private FloatingActionButton add_dish_fab;
private LatestDishesAdapter latestDishesAdapter;
private RecyclerView recycler_view;
private ArrayList<DishServer> dishes_list = new ArrayList<>();
private SwipeRefreshLayout swipeContainer;
private SharedPreferences sharedPreferences;

private EventBus eventBus = EventBus.getDefault();

public static LatestFragment newInstance() {
return new LatestFragment();
}

private Subscription subscription;

@Override
public void onCreate(Bundle savedInstanceState) {
sharedPreferences = PreferenceManager.getDefaultSharedPreferences(getActivity());
super.onCreate(savedInstanceState);
}

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
super.onCreateView(inflater, container, savedInstanceState);
View view = inflater.inflate(R.layout.fragment_latest, container, false);

ButterKnife.bind(this, view);

add_dish_fab = (FloatingActionButton) view.findViewById(R.id.add_dish_fab);
add_dish_fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Intent add_dish_activity = new Intent( getActivity(), AddDishActivity.class);
startActivity(add_dish_activity);
}
});

recycler_view = (RecyclerView) view.findViewById(R.id.latest_recycler);
recycler_view.setHasFixedSize(true);

LinearLayoutManager linearLayoutManager = new LinearLayoutManager(getActivity());

recycler_view.setLayoutManager(linearLayoutManager);

EndlessRecyclerViewScrollListener scrollListener = new EndlessRecyclerViewScrollListener(linearLayoutManager) {
@Override
public void onLoadMore(int page, int totalItemsCount, RecyclerView view) {
// Triggered only when new data needs to be appended to the list
// Add whatever code is needed to append new items to the bottom of the list
swipeContainer.setRefreshing(true);
getLatest(totalItemsCount+15);
}
};

recycler_view.addOnScrollListener(scrollListener);

latestDishesAdapter = new LatestDishesAdapter(dishes_list, new LatestDishClickListener() {
@Override
public void onShareClick(DishServer dishServer) {

}

@Override
public void onCommentClick(DishServer dishServer) {
Intent intent = new Intent(getActivity(), DishActivity.class);
intent.putExtra("Dish", dishServer.getDish());
intent.putExtra("show_comments", "show_comments");
startActivity(intent);
}

@Override
public void onLikeClick(DishServer dishServer) {
addFav(dishServer.getDish().get_id());
}

@Override
public void onViewDishClick() {

}

@Override
public void onProfileClick() {

}
});

recycler_view.setAdapter(latestDishesAdapter);

swipeContainer = (SwipeRefreshLayout) view.findViewById(R.id.swipeContainer);

swipeContainer.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {

@Override
public void onRefresh() {
getLatest(15);
}
});
return view;
}

@Override
public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
getLatest(15);
super.onViewCreated(view, savedInstanceState);
}


This is the result that does not occupy the full width of the screen

enter image description here

My Adapter code

private List<DishServer> content = new ArrayList<>();
private LatestDishClickListener latestDishClickListener;

public LatestDishesAdapter(List<DishServer> content, LatestDishClickListener latestDishClickListener) {
this.content = content;
this.latestDishClickListener = latestDishClickListener;
}

@Override
public LatestDishesViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.dish_item_layout, null);

return new LatestDishesViewHolder(view);
}

public void setLatestDishes_list(@Nullable List<DishServer> dishes) {
if(dishes==null){
return;
}
this.content.clear();
this.content.addAll(dishes);
notifyDataSetChanged();
}

public void addToDishes(DishServer dishServer){
if(dishServer==null){
return;
}

content.add(dishServer);
notifyDataSetChanged();
}

@Override
public void onBindViewHolder(LatestDishesViewHolder holder, int position) {
DishServer object = content.get(position);

holder.bind(object, this.latestDishClickListener, position);

}

@Override
public int getItemCount() {
return content.size();
}


}

ViewHolder Code -

private CircleImageView owner_image;
private TextView owner_text, post_date, dish_name, dish_description;
private ImageView dish_first_image;
private AppCompatImageButton likes_btn, share_btn, comments_btn;

public LatestDishesViewHolder(View itemView) {
super(itemView);
owner_image = (CircleImageView) itemView.findViewById(R.id.owner_image);
owner_text = (TextView) itemView.findViewById(R.id.owner_text);
post_date = (TextView) itemView.findViewById(R.id.post_date);
dish_name = (TextView)itemView.findViewById(R.id.dish_name);
dish_description = (TextView) itemView.findViewById(R.id.dish_description);
dish_first_image = (ImageView) itemView.findViewById(R.id.first_dish_image);

likes_btn = (AppCompatImageButton) itemView.findViewById(R.id.likes_btn);
share_btn = (AppCompatImageButton) itemView.findViewById(R.id.share_btn);
comments_btn = (AppCompatImageButton) itemView.findViewById(R.id.comment_btn);
}

public void bind(final DishServer dishServer, final LatestDishClickListener latestDishClickListener, int position){
if(dishServer.getOwner().getImage_url()!=null&&!dishServer.getOwner().getImage_url().isEmpty()){ //handle user image
Glide.with(itemView.getContext())
.load(R.string.image_base_url + dishServer.getOwner().getImage_url())
.placeholder(R.drawable.ic_account_circle_black_24dp)
.into(this.owner_image);
}

if(!dishServer.getOwner().getFirstname().isEmpty()){
owner_text.setText(dishServer.getOwner().getFirstname() +" "+dishServer.getOwner().getLastname());
}

dish_name.setText(dishServer.getDish().getName());
dish_description.setText(dishServer.getDish().getDescription());

if(!dishServer.getDish().getSteps().get(0).getImage().isEmpty()){ //handle user image
Glide.with(itemView.getContext())
.load(R.string.image_base_url + dishServer.getDish().getSteps().get(0).getImage())
.centerCrop()
.placeholder(R.drawable.ic_cake_black_24dp)
.into(this.dish_first_image);
}

likes_btn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
latestDishClickListener.onLikeClick(dishServer);
}
});

share_btn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
latestDishClickListener.onShareClick(dishServer);
}
});

comments_btn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
latestDishClickListener.onCommentClick(dishServer);
}
});
}

Answer Source

The problem is in your onCreateViewHolder

@Override
public LatestDishesViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.dish_item_layout, null);

return new LatestDishesViewHolder(view);
}

It is important here to not supply true, but do supply the parent:

View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.dish_item_layout, parent, false);

Supplying the parent View lets the inflater know what layoutParams to use

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download