Sergei Mikhailovskii
Sergei Mikhailovskii

Reputation: 2465

Why part of text is located behind the screen?

I have the following problem: part of the text in textview is located behind the screen

enter image description here

I don't understand why it happens as usually when I use wrap_content text has several lines and all of them are on the screen. I added android:layout_marginEnd="16dp" to all textviews but still the same problem happens. Here's the xml file with all this textviews:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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=".FilmDetailActivity">

    <ImageView
        android:id="@+id/avatar_imageview"
        android:layout_width="150dp"
        android:layout_height="250dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="16dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:ignore="ContentDescription" />

    <TextView
        android:id="@+id/title_textview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:layout_marginStart="16dp"
        android:layout_marginEnd="16dp"
        app:layout_constraintStart_toEndOf="@id/avatar_imageview"
        app:layout_constraintTop_toTopOf="parent"/>

    <TextView
        android:id="@+id/year_textview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:layout_marginStart="16dp"
        android:layout_marginEnd="16dp"
        android:text="@string/year"
        app:layout_constraintStart_toEndOf="@id/avatar_imageview"
        app:layout_constraintTop_toBottomOf="@id/title_textview"/>

    <TextView
        android:id="@+id/runtime_textview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:layout_marginStart="16dp"
        android:layout_marginEnd="16dp"
        android:text="@string/runtime"
        app:layout_constraintStart_toEndOf="@id/avatar_imageview"
        app:layout_constraintTop_toBottomOf="@id/year_textview"/>

    <TextView
        android:id="@+id/director_textview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:layout_marginStart="16dp"
        android:layout_marginEnd="16dp"
        android:text="@string/director"
        app:layout_constraintStart_toEndOf="@id/avatar_imageview"
        app:layout_constraintTop_toBottomOf="@id/runtime_textview"/>

    <TextView
        android:id="@+id/actors_textview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:layout_marginStart="16dp"
        android:layout_marginEnd="16dp"
        android:text="@string/actors"
        app:layout_constraintStart_toEndOf="@id/avatar_imageview"
        app:layout_constraintTop_toBottomOf="@id/director_textview"/>

    <TextView
        android:id="@+id/plot_textview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:layout_marginStart="16dp"
        android:layout_marginEnd="16dp"
        android:text="@string/plot"
        app:layout_constraintStart_toEndOf="@id/avatar_imageview"
        app:layout_constraintTop_toBottomOf="@id/actors_textview" />

    <TextView
        android:id="@+id/language_textview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:layout_marginStart="16dp"
        android:layout_marginEnd="16dp"
        android:text="@string/language"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/plot_textview" />

    <TextView
        android:id="@+id/country_textview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        android:text="@string/country"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/language_textview" />

    <TextView
        android:id="@+id/imdb_rating_textview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:layout_marginStart="16dp"
        android:layout_marginEnd="16dp"
        android:text="@string/imdb_rating"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/country_textview"/>

</android.support.constraint.ConstraintLayout>

So, why this problem is happens and how can I solve it?

UPD

When I added app:layout_constraintEnd_toEndOf="parent" to each TextView I faced with the following problem:

enter image description here

UPD 2

When I added app:layout_constraintHorizontal_bias="0" I found the same problem , which was before

enter image description here

Upvotes: 1

Views: 44

Answers (2)

theapache64
theapache64

Reputation: 11754

Add app:layout_constraintEnd_toEndOf="parent" (right-constraint) to TextView and setlayout_width to 0dp

Here's the updated version of your layout


<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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">

    <ImageView
        android:id="@+id/avatar_imageview"
        android:layout_width="150dp"
        android:layout_height="250dp"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="16dp"
        android:layout_marginRight="8dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:ignore="ContentDescription" />

    <TextView
        android:id="@+id/title_textview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="16dp"
        app:layout_constraintStart_toEndOf="@id/avatar_imageview"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/year_textview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        android:text="2017"
        app:layout_constraintStart_toEndOf="@id/avatar_imageview"
        app:layout_constraintTop_toBottomOf="@id/title_textview" />

    <TextView
        android:id="@+id/runtime_textview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        android:text="2 hours 1 minute"
        app:layout_constraintStart_toEndOf="@id/avatar_imageview"
        app:layout_constraintTop_toBottomOf="@id/year_textview" />

    <TextView
        android:id="@+id/director_textview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        android:text="Mr James Collon"
        app:layout_constraintStart_toEndOf="@id/avatar_imageview"
        app:layout_constraintTop_toBottomOf="@id/runtime_textview" />

    <TextView
        android:id="@+id/actors_textview"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/avatar_imageview"
        app:layout_constraintTop_toBottomOf="@id/director_textview" />

    <TextView
        android:id="@+id/plot_textview"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        android:text="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged."
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/avatar_imageview"
        app:layout_constraintTop_toBottomOf="@id/actors_textview" />

    <TextView
        android:id="@+id/language_textview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        android:text="English"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/plot_textview" />

    <TextView
        android:id="@+id/country_textview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        android:text="India"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/language_textview" />

    <TextView
        android:id="@+id/imdb_rating_textview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        android:text="7/10"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/country_textview" />

</android.support.constraint.ConstraintLayout>

NOTE:For the demo purpose,the fix has been made to only to the plot textview. Please do the same for other textviews also.

Upvotes: 1

solidogen
solidogen

Reputation: 649

Change layout_width="wrap_content" to layout_width="0dp" in your textviews.

Add app:layout_constraintEnd_toEndOf="parent" to your TextViews to make sure they fit inside the layout

Also, if your text aligns to center - add app:layout_constraintHorizontal_bias="0" to make it align to left side ("1" for align right)

Upvotes: 2

Related Questions