CODEWITHSUNDEEP
androidxmlandroid-layoutlayoutandroid-constraintlayout
Richard
Richard

Reputation: 1117

Android Constraint Layout jumping to the right side of the screen

I am using Constraint Layout and trying to put things as shown at this picture:

enter image description here

The thing is when I start it up, the last 00 that is above the word stars jumps to the right side of the screen. And since they are all connected everything else follows. But the thing is in my opinion they should all depend on the element on their left but they all still follow the 00 above the word stars.

Since I have been trying to figure this out for quite some time I thought I had understood Constrain Layout incorrectly.

Here is the XML:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:fresco="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <com.facebook.drawee.view.SimpleDraweeView
        android:id="@+id/sdvProfilePic"
        android:layout_width="90dp"
        android:layout_height="90dp"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="16dp"
        fresco:actualImageScaleType="fitCenter"
        fresco:failureImage="@drawable/edit_profile_profile_default_image"
        fresco:failureImageScaleType="fitCenter"
        fresco:layout_constraintEnd_toEndOf="parent"
        fresco:layout_constraintStart_toStartOf="parent"
        fresco:layout_constraintTop_toTopOf="parent"
        fresco:placeholderImage="@drawable/edit_profile_profile_default_image"
        fresco:placeholderImageScaleType="fitCenter"
        fresco:roundAsCircle="true"
        fresco:roundedCornerRadius="0.5dp" />

    <TextView
        android:id="@+id/llPostsCount"
        android:layout_width="wrap_content"
        android:layout_height="26dp"
        android:layout_marginStart="84dp"
        android:layout_marginTop="16dp"
        android:text="@string/_00_text"
        android:textColor="@color/balck282828"
        android:textSize="18sp"
        android:textStyle="bold"
        fresco:layout_constraintStart_toStartOf="parent"
        fresco:layout_constraintTop_toBottomOf="@+id/sdvProfilePic" />

    <TextView
        android:id="@+id/textView4"
        android:layout_width="40dp"
        android:layout_height="19dp"
        android:layout_marginStart="76dp"
        android:layout_marginTop="8dp"
        android:text="@string/posts"
        android:textColor="@color/regularTextColora5a7aa"
        android:textSize="14sp"
        fresco:layout_constraintStart_toStartOf="parent"
        fresco:layout_constraintTop_toBottomOf="@+id/llPostsCount" />


    <TextView
        android:id="@+id/tvFollowersCount"
        android:layout_width="wrap_content"
        android:layout_height="26dp"
        android:layout_marginStart="48dp"
        android:layout_marginTop="16dp"
        android:text="00"
        android:textColor="@color/balck282828"
        android:textSize="18sp"
        android:textStyle="bold"
        fresco:layout_constraintStart_toEndOf="@+id/llPostsCount"
        fresco:layout_constraintTop_toBottomOf="@+id/sdvProfilePic" />

    <TextView
        android:id="@+id/textView5"
        android:layout_width="59dp"
        android:layout_height="19dp"
        android:layout_marginStart="25dp"
        android:layout_marginTop="8dp"
        android:text="@string/followers"
        android:textColor="@color/regularTextColora5a7aa"
        android:textSize="14sp"
        fresco:layout_constraintStart_toEndOf="@+id/textView4"
        fresco:layout_constraintTop_toBottomOf="@+id/tvFollowersCount" />


    <TextView
        android:id="@+id/tvFollowingCount"
        android:layout_width="wrap_content"
        android:layout_height="26dp"
        android:layout_marginStart="48dp"
        android:layout_marginTop="16dp"
        android:text="00"
        android:textColor="@color/balck282828"
        android:textSize="18sp"
        android:textStyle="bold"
        fresco:layout_constraintStart_toEndOf="@+id/tvFollowersCount"
        fresco:layout_constraintTop_toBottomOf="@+id/sdvProfilePic" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="57dp"
        android:layout_height="19dp"
        android:layout_marginStart="14dp"
        android:layout_marginTop="8dp"
        android:text="@string/following"
        android:textColor="@color/regularTextColora5a7aa"
        android:textSize="14sp"
        fresco:layout_constraintStart_toEndOf="@+id/textView5"
        fresco:layout_constraintTop_toBottomOf="@+id/tvFollowingCount" />


    <TextView
        android:id="@+id/tvEditProfile"
        android:layout_width="0dp"
        android:layout_height="43dp"
        android:layout_marginBottom="2dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_weight="1"
        android:background="@drawable/selector_rcorner_white_box_lgray_ltgray"
        android:gravity="center"
        android:paddingBottom="5dp"
        android:paddingTop="5dp"
        android:text="@string/EDIT_PROFILE"
        android:textColor="@color/balck282828"
        android:textSize="14sp"
        android:textStyle="bold"
        fresco:layout_constraintBottom_toBottomOf="parent"
        fresco:layout_constraintEnd_toEndOf="parent"
        fresco:layout_constraintHorizontal_bias="0.0"
        fresco:layout_constraintStart_toStartOf="parent"
        fresco:layout_constraintTop_toBottomOf="@+id/textView3"
        fresco:layout_constraintVertical_bias="0.178" />


    <TextView
        android:id="@+id/user_stars"
        android:layout_width="21dp"
        android:layout_height="26dp"
        android:layout_marginEnd="68dp"
        android:layout_marginStart="52dp"
        android:layout_marginTop="16dp"
        android:text="00"
        android:textColor="@color/balck282828"
        android:textSize="18sp"
        android:textStyle="bold"
        fresco:layout_constraintEnd_toEndOf="parent"
        fresco:layout_constraintStart_toEndOf="@+id/tvFollowingCount"
        fresco:layout_constraintTop_toBottomOf="@+id/sdvProfilePic" />

    <TextView
        android:id="@+id/user_stars_text"
        android:layout_width="32dp"
        android:layout_height="19dp"
        android:layout_marginEnd="57dp"
        android:layout_marginStart="24dp"
        android:layout_marginTop="8dp"
        android:text="@string/userstars"
        android:textColor="@color/regularTextColora5a7aa"
        android:textSize="14sp"
        fresco:layout_constraintEnd_toEndOf="parent"
        fresco:layout_constraintStart_toEndOf="@+id/textView3"
        fresco:layout_constraintTop_toBottomOf="@+id/user_stars" />


</android.support.constraint.ConstraintLayout>

What am I doing incorectly?

EDIT

I got a emulator to screenshot the result I get and it did not look as bad as it did on the phone but still not I want:

enter image description here

Sorry for the bad quality but this is what I am getting from the phone:

enter image description here

Upvotes: 1

Views: 1843

Answers (2)

K&#233;lian
K&#233;lian

Reputation: 3433

Here some advices :

  • Name your views more precisely. You should not use ids like @+id/textView5 (which is the second view in the horizontal list of word), it's too much confusing to build your layout properly.
  • You are specifying exact width to your textview so words are cut, prefer using wrap_content if you can.
  • You used precise margins to center your 00 labels. If it seems to work on the layout editor, you won't expect the same result on all devices, especially on larger ones. You could rather center your items using constraints
  • To build your layout I would use a packed Horizontal chain on the labels (because they are larger) https://developer.android.com/training/constraint-layout/#constrain-chain. Then you center the number according to their corresponding label.

Here's a result of what you can have following the last advice : packed horizontal chain

Keep trying, i'm sure you can do this !

Upvotes: 1

Xixis
Xixis

Reputation: 909

I suggest you add fresco:layout_constraintEnd_toStartOf="@id/some-id" to the middle items. So that all four items can be centered horizontally. For example, TextView with id allPostsCount should have fresco:layout_constraintEnd_toStartOf="@id/tvFollowersCount".

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:fresco="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <com.facebook.drawee.view.SimpleDraweeView
        android:id="@+id/sdvProfilePic"
        android:layout_width="90dp"
        android:layout_height="90dp"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="16dp"
        fresco:actualImageScaleType="fitCenter"
        fresco:failureImage="@drawable/edit_profile_profile_default_image"
        fresco:failureImageScaleType="fitCenter"
        fresco:placeholderImage="@drawable/edit_profile_profile_default_image"
        fresco:placeholderImageScaleType="fitCenter"
        fresco:roundAsCircle="true"
        fresco:roundedCornerRadius="0.5dp" 

        fresco:layout_constraintEnd_toEndOf="parent"
        fresco:layout_constraintStart_toStartOf="parent"
        fresco:layout_constraintTop_toTopOf="parent"
        />

    <TextView
        android:id="@+id/llPostsCount"
        android:layout_width="wrap_content"
        android:layout_height="26dp"
        android:layout_marginStart="84dp"
        android:layout_marginTop="16dp"
        android:text="@string/_00_text"
        android:textColor="@color/balck282828"
        android:textSize="18sp"
        android:textStyle="bold"
        fresco:layout_constraintStart_toStartOf="parent"
        fresco:layout_constraintEnd_toStartOf="@id/tvFollowersCount"
        fresco:layout_constraintTop_toBottomOf="@+id/sdvProfilePic" />

    <TextView
        android:id="@+id/textView4"
        android:layout_width="40dp"
        android:layout_height="19dp"
        android:layout_marginStart="76dp"
        android:layout_marginTop="8dp"
        android:text="@string/posts"
        android:textColor="@color/regularTextColora5a7aa"
        android:textSize="14sp"
        fresco:layout_constraintStart_toStartOf="parent"
        fresco:layout_constraintEnd_toStartOf="@id/textView5"
        fresco:layout_constraintTop_toBottomOf="@+id/llPostsCount" />


    <TextView
        android:id="@+id/tvFollowersCount"
        android:layout_width="wrap_content"
        android:layout_height="26dp"
        android:layout_marginStart="48dp"
        android:layout_marginTop="16dp"
        android:text="00"
        android:textColor="@color/balck282828"
        android:textSize="18sp"
        android:textStyle="bold"
        fresco:layout_constraintStart_toEndOf="@+id/llPostsCount"
        fresco:layout_constraintEnd_toStartOf="@id/tvFollowingCount"
        fresco:layout_constraintTop_toBottomOf="@+id/sdvProfilePic" />

    <TextView
        android:id="@+id/textView5"
        android:layout_width="59dp"
        android:layout_height="19dp"
        android:layout_marginStart="25dp"
        android:layout_marginTop="8dp"
        android:text="@string/followers"
        android:textColor="@color/regularTextColora5a7aa"
        android:textSize="14sp"
        fresco:layout_constraintStart_toEndOf="@+id/textView4"
        fresco:layout_constraintEnd_toStartOf="@id/textView3"
        fresco:layout_constraintTop_toBottomOf="@+id/tvFollowersCount" />


    <TextView
        android:id="@+id/tvFollowingCount"
        android:layout_width="wrap_content"
        android:layout_height="26dp"
        android:layout_marginStart="48dp"
        android:layout_marginTop="16dp"
        android:text="00"
        android:textColor="@color/balck282828"
        android:textSize="18sp"
        android:textStyle="bold"
        fresco:layout_constraintStart_toEndOf="@+id/tvFollowersCount"
        fresco:layout_constraintEnd_toStartOf="@id/user_stars"
        fresco:layout_constraintTop_toBottomOf="@+id/sdvProfilePic" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="57dp"
        android:layout_height="19dp"
        android:layout_marginStart="14dp"
        android:layout_marginTop="8dp"
        android:text="@string/following"
        android:textColor="@color/regularTextColora5a7aa"
        android:textSize="14sp"
        fresco:layout_constraintStart_toEndOf="@+id/textView5"
        fresco:layout_constraintTop_toBottomOf="@+id/tvFollowingCount" />


    <TextView
        android:id="@+id/tvEditProfile"
        android:layout_width="0dp"
        android:layout_height="43dp"
        android:layout_marginBottom="2dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_weight="1"
        android:background="@drawable/selector_rcorner_white_box_lgray_ltgray"
        android:gravity="center"
        android:paddingBottom="5dp"
        android:paddingTop="5dp"
        android:text="@string/EDIT_PROFILE"
        android:textColor="@color/balck282828"
        android:textSize="14sp"
        android:textStyle="bold"
        fresco:layout_constraintBottom_toBottomOf="parent"
        fresco:layout_constraintEnd_toEndOf="parent"
        fresco:layout_constraintHorizontal_bias="0.0"
        fresco:layout_constraintStart_toStartOf="parent"
        fresco:layout_constraintTop_toBottomOf="@+id/textView3"
        fresco:layout_constraintVertical_bias="0.178" />


    <TextView
        android:id="@+id/user_stars"
        android:layout_width="21dp"
        android:layout_height="26dp"
        android:layout_marginEnd="68dp"
        android:layout_marginStart="52dp"
        android:layout_marginTop="16dp"
        android:text="00"
        android:textColor="@color/balck282828"
        android:textSize="18sp"
        android:textStyle="bold"
        fresco:layout_constraintEnd_toEndOf="parent"
        fresco:layout_constraintStart_toEndOf="@+id/tvFollowingCount"
        fresco:layout_constraintTop_toBottomOf="@+id/sdvProfilePic" />

    <TextView
        android:id="@+id/user_stars_text"
        android:layout_width="32dp"
        android:layout_height="19dp"
        android:layout_marginEnd="57dp"
        android:layout_marginStart="24dp"
        android:layout_marginTop="8dp"
        android:text="@string/userstars"
        android:textColor="@color/regularTextColora5a7aa"
        android:textSize="14sp"
        fresco:layout_constraintEnd_toEndOf="parent"
        fresco:layout_constraintStart_toEndOf="@+id/textView3"
        fresco:layout_constraintTop_toBottomOf="@+id/user_stars" />


</android.support.constraint.ConstraintLayout>

Upvotes: 3

Related Questions