Develop Reference

Android FlexBox Layout shows only fixed number of lines

I'm trying to build a word-to-word RTL language ebook application. The data for the ebook is stored in an Sqlite database. After vigorous searching I found Flexbox layout suitable to my need in order to display my data in my required format. The following link helped me out: Android GridLayout with dynamic number of columns per row But the issue is that if the data passed in the view is large, then partial data is being displayed. If the data passed is small, then i have no issues at all.
Here is the adapter code:
public class VerseAdapter extends RecyclerView.Adapter<VerseAdapter.ViewHolder> {
private List<verseItem> items;
private Context context;
wordsAdapter sAdapter;
GridLayoutManager layoutManager;
public VerseAdapter(List<verseItem> items, Context context) {
this.items = items;
this.context = context;
}
// This method is used to attach
// custom layout to the recycler view
#NonNull
#Override
public ViewHolder onCreateViewHolder(#NonNull ViewGroup parent, int viewType) {
View vw = LayoutInflater.from(parent.getContext()).inflate(R.layout.verse_row, parent, false);
return new ViewHolder(vw);
}
// This method is used to set the action
// to the widgets of our custom layout.
#Override
public void onBindViewHolder(#NonNull ViewHolder holder, int position) {
verseItem item = items.get(position);
ArrayList<wordsModel> models = new ArrayList<>(item.getWordsModelList());
String ayahnum = "" + item.getAyah();
holder.ayah.setText(ayahnum);
holder.verses_telugu.setText(item.getVerses_telugu());
// FlexboxLayoutManager code:
FlexboxLayoutManager layoutManager = new FlexboxLayoutManager(context);
layoutManager.setFlexDirection(FlexDirection.ROW_REVERSE);
layoutManager.setJustifyContent(JustifyContent.FLEX_START);
ViewHolder.wordsrecyclerView.setLayoutManager(layoutManager);
sAdapter = new wordsAdapter(models);
ViewHolder.wordsrecyclerView.setAdapter(sAdapter);
sAdapter.notifyItemChanged(position);
holder.setIsRecyclable(false);
}
#Override
public int getItemCount() {
return items.size();
}
#Override
public int getItemViewType(int position) {
return position;
}
#Override
public long getItemId(int position) {
return position;
}
static class ViewHolder extends RecyclerView.ViewHolder {
TextView ayah;
TextView verses_telugu;
public static RecyclerView wordsrecyclerView;
public ViewHolder(View itemView) {
super(itemView);
ayah = itemView.findViewById(R.id.ayah);
verses_telugu = itemView.findViewById(R.id.telugu_line);
wordsrecyclerView = itemView.findViewById(R.id.words_RV_id);
}
}
}
Here is my layout file:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/ayah"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:layout_margin="5dp"
android:textAlignment="viewStart"
android:textColor="#27A82C"
android:textSize="18sp"
android:textStyle="bold" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/words_RV_id"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/telugu_line"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:layout_margin="5dp"
android:textAlignment="textStart"
android:textSize="16sp"
android:textStyle="bold" />
</LinearLayout>
This is how the final result show actually look like:
This is how my app looks like:
Now if you notice from the screenshots, the data that i'm trying to display is same. But in my app, not all words are being displayed as you can notice.
Another thing i have noticed is for larger data if the screen orientation is vertical the maximum lines i can see is 10 and if it is horizontal i can see 6 lines at max. These number of lines are fixed for all the places where the data is large. If the data is smaller it is displayed in the exact number of lines required and as mentioned earlier I have no issues at all.
Hoping someone helps me out soon. Thanks in advance. (:

Layout view does not wrap content after scrolling

I am using a recycler view to show some data. When the app is launched it looks correct as follows with wrap content for height. After I scroll past the last item, I am able to keep scrolling and the data is no longer wrapped, looking like match parent instead for height. Scrolling back up, everything has changed to match parent for the height.
Using past references here, I have tried with ConstraintLayouts and switched height wrapping between the parent layout and the recyclerview itself. Both doesn't help. I am guessing this has to do more with the xml. Please advice.
This is what I expect to always get. This is what I current get when app launches, but changes after I scroll to last item.
When I scroll to last item this happens.
Now if I scroll back up, the height is no longer wrapped. Everything seems to have changed to match parent.
This is xml for the custom view I am using to inflate.
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/feed_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/feed_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="10dp"
android:paddingTop="5dp"
android:paddingRight="10dp"
android:textSize="18sp"
app:layout_constraintTop_toTopOf="parent"
tools:layout_editor_absoluteX="0dp"
tools:text="Test Title" />
<TextView
android:id="#+id/feed_description"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:textSize="12sp"
app:layout_constraintTop_toBottomOf="#+id/feed_title"
tools:layout_editor_absoluteX="0dp"
android:layout_below="#+id/feed_title"
tools:text="This is some random description for testing purposes. Other wise just typing on to create more stuff..." />
</RelativeLayout>
This is layout for the Recycler View which is placed on a Fragment activity.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:context=".fragment.CurrentFeedFragment">
<android.support.v7.widget.RecyclerView
android:id="#+id/current_recycler_view"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</RelativeLayout>
This is over at my FragmentActivity where I am loading the data for the RecyclerView.
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_current_feed, container, false);
initiateTestData();
loadDataToRecyclerView(view);
return view;
}
private void initiateTestData(){
testTitles = new ArrayList<>();
testDescriptions = new ArrayList<>();
for (int i = 5; i < 25; i++) {
testTitles.add("title " + i);
testDescriptions.add("This is some random description for testing purposes. Other wise just typing on to create more stuff... " + i);
Log.d(TAG, "initiateTestData: " + "title " + i);
}
}
private void loadDataToRecyclerView(View v){
Log.d(TAG, "loadDataToRecyclerView: " + testTitles.size());
RecyclerView recyclerView = v.findViewById(R.id.current_recycler_view);
recyclerView.setLayoutManager(new LinearLayoutManager(getActivity()));
FeedAdapter adapter = new FeedAdapter(testTitles, testDescriptions, getActivity());
recyclerView.setAdapter(adapter);
recyclerView.setItemAnimator(new DefaultItemAnimator());
}
Don't think this is relevant. But for reference, this is my adapter class.
public class FeedAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder>{
private static final String TAG = "FeedAdapter";
private List<String> titles;
private List<String> descriptions;
private Context context;
public FeedAdapter(List<String> titles, List<String> descriptions, Context context) {
this.titles = titles;
this.descriptions = descriptions;
this.context = context;
}
#NonNull
#Override
public RecyclerView.ViewHolder onCreateViewHolder(#NonNull ViewGroup viewGroup, int i) {
View view = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.custom_current_feed, viewGroup, false);
return new ViewHolder(view);
}
#Override
public void onBindViewHolder(#NonNull RecyclerView.ViewHolder viewHolder, int i) {
final ViewHolder holder = (ViewHolder) viewHolder;
holder.feedTitle.setText(titles.get(i));
holder.feedDescription.setText(descriptions.get(i));
holder.layout.setOnClickListener(v -> {
Log.d(TAG, "Clicked: " + titles.get(i));
Toast.makeText(context, titles.get(i), Toast.LENGTH_SHORT).show();
});
}
#Override
public int getItemCount() {
return titles.size();
}
public class ViewHolder extends RecyclerView.ViewHolder{
TextView feedTitle;
TextView feedDescription;
RelativeLayout layout;
public ViewHolder(#NonNull View itemView) {
super(itemView);
feedTitle = itemView.findViewById(R.id.feed_title);
feedDescription = itemView.findViewById(R.id.feed_description);
layout = itemView.findViewById(R.id.feed_layout);
}
}
}

Your recycler view height is wrap_content
And recycler view item height match_parent
I would think you'd want them the other way around.
The RV's height = match_parent, i.e. the recycler view occupies all available height.
The RV item's height = wrap_content, i.e. each item only as tall as it needs to be, so that multiple items can fit.

What changes do I need to make for a more complex view?

I am following the code from Android Developers:RecyclerView
, and I want a more complex layout for a single item in the RecyclerView (I want it to have an image, and 2 text views inside a RelativeLayout, rather than just a single TextView without any Layout parent.
The code works when my my_text_view.xml file contains just a TextView like so:
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/my_text_view"
android:layout_width="match_parent"
android:layout_height="28dp"
android:textSize="24sp"
tools:text="Hello John Doe" />
But when I try to change it to a more complex layout, that contains an ImageView and 2 TextViews under a RelativeLayout, like so:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="?android:attr/listPreferredItemHeight"
android:padding="6dip" >
<ImageView
android:id="#+id/icon"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_alignParentBottom="true"
android:layout_alignParentTop="true"
android:layout_marginRight="6dip"
android:contentDescription="TODO"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/secondLine"
android:layout_width="fill_parent"
android:layout_height="26dip"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_toRightOf="#id/icon"
android:ellipsize="marquee"
android:maxLines="1"
android:text="Description"
android:textSize="12sp" />
<TextView
android:id="#+id/firstLine"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_above="#id/secondLine"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_alignWithParentIfMissing="true"
android:layout_toRightOf="#id/icon"
android:gravity="center_vertical"
android:text="Example application"
android:textSize="16sp" />
</RelativeLayout>
Then the app will crash.
I really don't know where I should apply more changes, I am quite lost in their explanation on holders, and adapters, and layout managers. What exactly in their code should be changed? I basically copied their code if you need reference (And it worked, that's why I didn't copy their code here)
Edit: I believe the changes should be somewhere in this code, but I don't know where and how exactly
package com.example.lastlocation.recyclerviewer;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.ViewGroup;
import android.widget.LinearLayout;
import android.widget.TextView;
public class MyAdapter extends RecyclerView.Adapter<MyAdapter.MyViewHolder> {
private String[] mDataset;
// Provide a reference to the views for each data item
// Complex data items may need more than one view per item, and
// you provide access to all the views for a data item in a view holder
public static class MyViewHolder extends RecyclerView.ViewHolder {
// each data item is just a string in this case
public TextView mTextView;
public MyViewHolder(TextView v) {
super(v);
mTextView = v;
}
}
// Provide a suitable constructor (depends on the kind of dataset)
public MyAdapter(String[] myDataset) {
mDataset = myDataset;
}
// Create new views (invoked by the layout manager)
#Override
public MyAdapter.MyViewHolder onCreateViewHolder(ViewGroup parent,
int viewType) {
TextView v = (TextView) LayoutInflater.from(parent.getContext())
.inflate(R.layout.my_text_view, parent, false);
MyViewHolder vh = new MyViewHolder(v);
return vh;
}
// Replace the contents of a view (invoked by the layout manager)
#Override
public void onBindViewHolder(MyViewHolder holder, int position) {
// - get element from your dataset at this position
// - replace the contents of the view with that element
holder.mTextView.setText(mDataset[position]);
}
// Return the size of your dataset (invoked by the layout manager)
#Override
public int getItemCount() {
return mDataset.length;
}
}

If you modify the contents of the item view XML file, you will also have to modify your ViewHolder class and your Adapter's onCreateViewHolder() and onBindViewHolder() methods.
In your new version, you have a RelativeLayout, an ImageView, and two TextViews. You probably don't need to do anything to the RelativeLayout, so your ViewHolder will only have references to the ImageView and TextViews:
public static class MyViewHolder extends RecyclerView.ViewHolder {
public final ImageView icon;
public final TextView firstLine;
public final TextView secondLine;
public MyViewHolder(View itemView) {
super(itemView);
icon = itemView.findViewById(R.id.icon);
firstLine = itemView.findViewById(R.id.firstLine);
secondLine = itemView.findViewById(R.id.secondLine);
}
}
Your onCreateViewHolder() method doesn't need to change much. Mostly you just need to remove the cast, since now you're no longer inflating a TextView object:
#Override
public MyAdapter.MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View itemView = LayoutInflater.from(parent.getContext())
.inflate(R.layout.my_text_view, parent, false);
return new MyViewHolder(itemView);
}
Your onBindViewHolder() method needs to change to use the new views you've specified:
#Override
public void onBindViewHolder(MyViewHolder holder, int position) {
holder.icon.setImageResource(R.drawable.whatever);
holder.firstLine.setText("Hello");
holder.secondLine.setText("World");
}

RecyclerView with 100 items loading too slow

I have used RecyclerView several times before, but it is the first time that it is working too slow.
In this case, the items are represented by a simple LinearLayout with 3 views inside it:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:id="#+id/linearLayout"
android:orientation="horizontal"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/tvTicketNumber"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:gravity="center"
android:padding="8dp"/>
<EditText
android:id="#+id/etTotalSold"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:padding="8dp"
android:gravity="center" />
<TextView
android:id="#+id/tvSurplus"
android:layout_width="0dp"
android:layout_weight="1"
android:padding="8dp"
android:layout_height="match_parent"
android:gravity="center"/>
</LinearLayout>
The RecyclerView uses the previous layout in its adapter:
public class TicketAdapter extends RecyclerView.Adapter<TicketAdapter.ViewHolder> {
private ArrayList<Ticket> dataSet;
// Define references to the views for each data item
public static class ViewHolder extends RecyclerView.ViewHolder {
public TextView tvTicketNumber, tvSurplus;
public EditText etQuantity;
public ViewHolder(View v) {
super(v);
tvTicketNumber = (TextView) v.findViewById(R.id.tvTicketNumber);
etQuantity = (EditText) v.findViewById(R.id.etQuantity);
tvSurplus = (TextView) v.findViewById(R.id.tvSurplus);
}
}
public TicketAdapter() {
dataSet = new ArrayList<>();
}
public void setDataSet(ArrayList<Ticket> dataSet) {
this.dataSet = dataSet;
}
private String twoDigits(final int i) {
final String pre = (i<=9 ? "0" : "");
return pre + i;
}
#Override
public TicketAdapter.ViewHolder onCreateViewHolder(ViewGroup parent,
int viewType) {
View v = LayoutInflater.from(parent.getContext())
.inflate(R.layout.table_row, parent, false);
// set the view's size, margins, padding and layout parameters
return new ViewHolder(v);
}
// Replace the contents of a view (invoked by the layout manager)
#Override
public void onBindViewHolder(ViewHolder holder, int position) {
// get element from the data set
Ticket ticket = dataSet.get(position);
// replace the contents of the view with that element
holder.tvTicketNumber.setText(twoDigits(position));
holder.tvSurplus.setText("6");
}
#Override
public int getItemCount() {
return dataSet.size();
}
}
Before, I was using TableLayout with TableRows created programmatically, but I have read that layout have to be used for a defined number of rows in XML.
I have to load a list of 100 items in a fragment. But it takes approximately 4 seconds to load. For that reason I wrote some logic to show a progressBar and next hide it and show the scrollView (the recycler is within it).
The fragmentTransaction was still slow, so I moved the code to the onViewCreated method.
The transaction was still slow and I added an AsyncTask. With this last change, the transaction is faster, but the progressBar looks stopped all the time and the buttons can't be used (the onPostExecute is taking 4 seconds to load and show the recyclerView).
I want to show the animation of the progressBar, but the onPostExecute is executed in the UI thread and all the app is stopped for 4 seconds while the RecyclerView is loading.
Please give me some ideas. Before I have used items with images loaded from internet, and the RecyclerView was working faster. It is too strange.

Check Box listener on RecyclerView with DataBinding

im trying to populate a list of note/message with check box in the item view.
Ive tried set listener unto the checkbox. sadly upon check box click nothing happens.
if i set listener unto the parent view. its able to trigger onClick method. but this will be triggered each time user click the whole item in the list.
my objectives is more on setting listener for checkbox.
so ill know that user has selected note(s) from the list.
heres my code adapter class together with view holder inner class
public class BroadcastRVA extends RecyclerView.Adapter<BroadcastRVA.BroadcastVH>{
private Context mContext;
private ObservableArrayList<MNote> notes;
private LayoutInflater inflater;
public BroadcastRVA(Context mContext, ObservableArrayList<MNote> notes, LayoutInflater inflater) {
this.mContext = mContext;
this.notes = notes;
this.inflater = LayoutInflater.from(mContext);
}
#Override
public BroadcastRVA.BroadcastVH onCreateViewHolder(ViewGroup parent, int viewType) {
NoteListitemBinding binding = NoteListitemBinding.inflate(inflater);
View view = LayoutInflater.from(parent.getContext()).inflate(
R.layout.note_listitem, null);
BroadcastVH viewHolder = new BroadcastVH(binding, view);
// create a new view
return viewHolder;
}
#Override
public void onBindViewHolder(BroadcastVH holder, final int position) {
final MNote note = notes.get(position);
holder.cbox.setChecked(note.isSelected());
holder.cbox.setTag(note);
holder.vBinding.setNote(note);
holder.cbox.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
CheckBox cb = (CheckBox) v;
MNote note = (MNote) cb.getTag();
note.setIsSelected(cb.isChecked());
notes.get(position).setIsSelected(cb.isChecked());
Toast.makeText(
v.getContext(),
"Clicked on Checkbox: " + cb.getText() + " is "
+ cb.isChecked(), Toast.LENGTH_LONG).show();
}
});
}
public ObservableArrayList<MNote> getNotes() {
return notes;
}
/**
* Returns the total number of items in the data set hold by the adapter.
*
* #return The total number of items in this adapter.
*/
#Override
public int getItemCount() {
if (notes != null)
return notes.size();
else return 0;
}
public class BroadcastVH extends RecyclerView.ViewHolder {
NoteListitemBinding vBinding;
TextView uuid;
CheckBox cbox;
public BroadcastVH(NoteListitemBinding binding, View view) {
super(binding.getRoot());
this.vBinding = binding;
this.uuid = (TextView) view.findViewById(R.id._UUID);
this.cbox = (CheckBox) view.findViewById(R.id.deleteNote);
}
}
}
note_list_item.xml
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android">
<data>
<variable
name="note"
type="com.pbasolutions.android.model.MNote" />
</data>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="1">
<TableLayout android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<CheckBox
android:layout_width="30dp"
android:layout_height="wrap_content"
android:id="#+id/deleteNote"
android:clickable="true"/>
<TextView
android:layout_width="270dp"
android:layout_height="wrap_content"
android:id="#+id/textViewNote"
android:layout_column="1"
android:layout_marginLeft="5dp"
android:text="#{note.textMsgs}"
android:editable="false"
android:textSize="22sp"/>
<TableLayout android:layout_column="1">
<TableRow>
<TextView
android:layout_width="80dp"
android:layout_height="wrap_content"
android:id="#+id/textViewNoteDate"
android:layout_column="0"
android:text="#{note.date}"
android:editable="false"
android:textSize="15sp"/>
</TableRow>
</TableLayout>
<TextView
android:layout_width="270dp"
android:layout_height="wrap_content"
android:id="#+id/_UUID"
android:layout_marginLeft="5dp"
android:text="#{note._UUID}"
android:visibility="invisible"/>
</TableRow>
</TableLayout>
<View style="#style/Line" />
</LinearLayout>
</layout>

what is NoteListitemBinding ? generally speaking ,onClick method must be triggered when you click the checkbox,when you click the view,the viewgroup will receive the touch event first and then pass the event to its child but if the viewgroup prevent the event,the event will consumed,and child cannot get the event, its onClick method will not be triggered.

thanks to #ljl5241861 for mentioning on DataBinding, i realized there small silly mistake in my code.. in order to get the child view responds onClick in need to get the view from databinding.getRoot() not the recycler specific one item group view. after change the ViewHolder constructor, by getting the item view via binding.getRoot, i able to trigger the click listener.. hope this helps others as well!!
public BroadcastVH(NoteListitemBinding binding, View view) {
super(binding.getRoot());
this.vBinding = binding;
View bindView = binding.getRoot();
this.uuid = (TextView) bindView.findViewById(R.id._UUID);
this.cbox = (CheckBox) bindView.findViewById(R.id.deleteNote);
}