How to prevent elements overlapping in android XML Constraint Layout?

21 views Asked by At

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.

0

There are 0 answers