So I am practicing on the android constraint layout, I have a project on android its more of dictionary. Word can have one or more meanings. When there are more words, they overlap. I have tried changing till gave up. Need your help guys. Here is the xml.
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_marginHorizontal="5dp"
android:layout_marginVertical="5dp"
android:paddingVertical="5dp"
android:id="@+id/item_layout"
android:paddingHorizontal="8dp"
android:layout_height="wrap_content">
<TextView
android:paddingHorizontal="6dp"
android:paddingVertical="4dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textStyle="bold"
android:fontFamily="serif"
android:textSize="24sp"
android:textColor="@color/black"
android:id="@+id/item_word"
android:gravity="start"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"/>
<androidx.constraintlayout.widget.Barrier
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="bottom"
android:id="@+id/bv1"
app:constraint_referenced_ids="item_word"/>
<androidx.constraintlayout.widget.Barrier
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="bottom"
android:id="@+id/item_bv2"
app:constraint_referenced_ids="item_meaning"/>
<androidx.constraintlayout.widget.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent=".20"
android:id="@+id/item_gv1"/>
<TextView
android:id="@+id/item_meaning"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="15sp"
android:singleLine="true"
android:ellipsize="marquee"
android:textStyle="italic"
android:marqueeRepeatLimit="marquee_forever"
android:layout_marginTop="5dp"
android:textColor="@color/black"
app:layout_constraintTop_toBottomOf="@id/bv1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="@id/item_gv1"
app:layout_constraintRight_toRightOf="@id/item_gv1"
app:layout_constraintLeft_toLeftOf="@id/item_gv1"/>
<TextView
android:id="@+id/item_word_meaning_1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textSize="19sp"
android:gravity="start|center_vertical"
android:fontFamily="serif"
android:maxLines="5"
android:textColor="@color/black"
android:ellipsize="none"
android:layout_marginTop="5dp"
android:layout_marginLeft="5dp"
android:layout_marginStart="5dp"
app:layout_constraintTop_toBottomOf="@id/item_bv2"
app:layout_constraintStart_toStartOf="@id/item_gv1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="@id/item_gv1"/>
</androidx.constraintlayout.widget.ConstraintLayout>
In this project I use recycleview, so here is the bindviewholder function of the adapter class words with meaning.
@Override
public void onBindViewHolder(@NonNull AdapterVH holder, int position) {
// get item at given position
WordWithMeaning item = wordWithMeaningList.get(position);
holder.word.setText(item.word.getWord());
List<MeaningEntity> meanings = item.meanings;
// binding meanings header and meanings to text view
if(meanings.size() > 0){
for(int i=0;i<meanings.size();i++){
TextView textView = new TextView(holder.itemView.getContext());
textView.setLayoutParams(new ViewGroup.LayoutParams(
ViewGroup.LayoutParams.MATCH_PARENT,
ViewGroup.LayoutParams.WRAP_CONTENT
));
textView.setText(meanings.get(i).getMeaning());
textView.setTextSize(19);
textView.setTextColor(ContextCompat.getColor(holder.itemView.getContext(), R.color.black));
textView.setGravity(Gravity.START | Gravity.CENTER_VERTICAL);
textView.setMaxLines(5);
textView.setEllipsize(null);
textView.setPadding(5, 5, 5, 5);
holder.itemLayout.addView(textView);
// Constraint setup for the added TextView
ConstraintSet constraintSet = new ConstraintSet();
constraintSet.clone(holder.itemLayout);
constraintSet.connect(textView.getId(), ConstraintSet.TOP, holder.wordOne.getId(), ConstraintSet.BOTTOM, 8);
constraintSet.connect(textView.getId(), ConstraintSet.START, holder.gv1.getId(), ConstraintSet.START);
constraintSet.connect(textView.getId(), ConstraintSet.END, holder.itemLayout.getId(), ConstraintSet.END);
constraintSet.applyTo(holder.itemLayout);
}
// for(MeaningEntity meaning: meanings){
// holder.headerOne.setText(R.string.meaning);
// holder.wordOne.setText(meaning.getMeaning());
// }
}
}
and finally the inner viewholder class in the adapter.
static class AdapterVH extends RecyclerView.ViewHolder{
TextView word, headerOne, wordOne;
Barrier bvOne, bvTwo;
Guideline gv1;
ConstraintLayout itemLayout;
public AdapterVH(@NonNull View itemView) {
super(itemView);
itemLayout = itemView.findViewById(R.id.item_layout);
word = itemView.findViewById(R.id.item_word);
headerOne = itemView.findViewById(R.id.item_meaning);
wordOne = itemView.findViewById(R.id.item_word_meaning_1);
bvOne = itemView.findViewById(R.id.bv1);
bvTwo = itemView.findViewById(R.id.item_bv2);
gv1 = itemView.findViewById(R.id.item_gv1);
}
}
A new meaning, whether be its header or the meaning itself should always come after the second barrier. The first meaning and the corresponding meaning header should be bellow the first barrier.
I expect is that if word meanings are more than one they should not overlap.