1

I am developing a news app and I want to move views on the right direction in constrain layout. but I could achieve what I want below my XML file where I have implemented constraint layout any suggestion and tips greatly appreciated.

I am developing a news app and I want to move views on the right

direction in constrain layout. but I could achieve what I want below my XML file where I have implemented constraint layout any suggestion and tips greatly appreciated.

<android.support.constraint.ConstraintLayout 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="match_parent">

    <ImageView

        android:id="@+id/articleImage"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_gravity="center"
        android:layout_margin="8dp"
        app:layout_constraintDimensionRatio="16:9"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="@+id/guideline4"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />


    <TextView
        android:id="@+id/articleAuthor"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:gravity="start"
        android:text="article_author"
        android:textSize="12sp"
        app:layout_constraintEnd_toStartOf="@+id/articleImage"
        app:layout_constraintHorizontal_bias="0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />


    <TextView
        android:id="@+id/articleTitle"
        android:layout_width="0dp"

        android:layout_height="wrap_content"

        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"

        android:layout_marginEnd="8dp"

        android:layout_marginBottom="8dp"

        android:text="article_title"

        android:textSize="12sp"


        app:layout_constraintEnd_toStartOf="@+id/guideline4"

        app:layout_constraintHorizontal_bias="0"

        app:layout_constraintStart_toStartOf="parent"

        app:layout_constraintTop_toBottomOf="@+id/articleAuthor" />


    <TextView

        android:id="@+id/articleTime"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_marginStart="8dp"

        android:layout_marginLeft="8dp"

        android:layout_marginTop="8dp"

        android:layout_marginBottom="8dp"

        android:text="Article Time"

        android:textSize="18sp"

        app:layout_constraintEnd_toStartOf="@+id/articleFavorite"

        app:layout_constraintHorizontal_bias="0"

        app:layout_constraintHorizontal_chainStyle="packed"

        app:layout_constraintStart_toStartOf="parent"

        app:layout_constraintTop_toBottomOf="@+id/articleTitle" />


    <ImageButton

        android:id="@+id/articleFavorite"
        android:layout_width="32dp"
        android:layout_height="32dp"

        android:background="@color/colorWhite"

        android:src="@drawable/ic_bookmark"

        app:layout_constraintBottom_toBottomOf="@+id/articleTime"

        app:layout_constraintEnd_toStartOf="@+id/articleShare"
        app:layout_constraintStart_toEndOf="@+id/articleTime"
        app:layout_constraintTop_toTopOf="@+id/articleTime" />


    <ImageButton

        android:id="@+id/articleShare"
        android:layout_width="32dp"
        android:layout_height="32dp"

        android:layout_marginEnd="8dp"

        android:layout_marginRight="8dp"

        android:background="@color/colorWhite"

        android:contentDescription="TODO"

        android:src="@drawable/ic_share"

        app:layout_constraintBottom_toBottomOf="@+id/articleTime"

        app:layout_constraintEnd_toStartOf="@+id/guideline4"
        app:layout_constraintStart_toEndOf="@+id/articleFavorite"
        app:layout_constraintTop_toTopOf="@+id/articleTime" />


    <android.support.constraint.Guideline

        android:id="@+id/guideline4"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:orientation="vertical"

        app:layout_constraintGuide_percent="0.6" />


</android.support.constraint.ConstraintLayout>

below current screenshot of the app app screenshot below screenshot which I want to achievescreenshot I want

Edgar Snowden
  • 51
  • 7

2 Answers2

2

Wrap the views with another Viewgroup (say ConstraintLayout again) and set app:layout_constraintStart_toStartOf="parent" and app:layout_constraintEnd_toEndOf="parent" as constraints to this viewgroup. Said view will then be centered horizontally.

Edit: The code

<android.support.constraint.ConstraintLayout android:layout_height="wrap_content" android:layout_width="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<android.support.constraint.ConstraintLayout
    xmlns:app="http://schemas.android.com/apk/res-auto"

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintBottom_toBottomOf="parent">

    <ImageView

        android:id="@+id/articleImage"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_gravity="center"
        android:layout_margin="8dp"
        app:layout_constraintDimensionRatio="16:9"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="@+id/guideline4"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />


    <TextView
        android:id="@+id/articleAuthor"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:gravity="start"
        android:text="article_author"
        android:textSize="12sp"
        app:layout_constraintEnd_toStartOf="@+id/articleImage"
        app:layout_constraintHorizontal_bias="0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />


    <TextView
        android:id="@+id/articleTitle"
        android:layout_width="0dp"

        android:layout_height="wrap_content"

        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"

        android:layout_marginEnd="8dp"

        android:layout_marginBottom="8dp"

        android:text="article_title"

        android:textSize="12sp"


        app:layout_constraintEnd_toStartOf="@+id/guideline4"

        app:layout_constraintHorizontal_bias="0"

        app:layout_constraintStart_toStartOf="parent"

        app:layout_constraintTop_toBottomOf="@+id/articleAuthor" />


    <TextView

        android:id="@+id/articleTime"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_marginStart="8dp"

        android:layout_marginLeft="8dp"

        android:layout_marginTop="8dp"

        android:layout_marginBottom="8dp"

        android:text="Article Time"

        android:textSize="18sp"

        app:layout_constraintEnd_toStartOf="@+id/articleFavorite"

        app:layout_constraintHorizontal_bias="0"

        app:layout_constraintHorizontal_chainStyle="packed"

        app:layout_constraintStart_toStartOf="parent"

        app:layout_constraintTop_toBottomOf="@+id/articleTitle" />


    <ImageButton

        android:id="@+id/articleFavorite"
        android:layout_width="32dp"
        android:layout_height="32dp"

        android:background="@color/"

        android:src="@drawable/"

        app:layout_constraintBottom_toBottomOf="@+id/articleTime"

        app:layout_constraintEnd_toStartOf="@+id/articleShare"
        app:layout_constraintStart_toEndOf="@+id/articleTime"
        app:layout_constraintTop_toTopOf="@+id/articleTime" />


    <ImageButton

        android:id="@+id/articleShare"
        android:layout_width="32dp"
        android:layout_height="32dp"

        android:layout_marginEnd="8dp"

        android:layout_marginRight="8dp"

        android:background="@color/"

        android:contentDescription="TODO"

        android:src="@drawable/"

        app:layout_constraintBottom_toBottomOf="@+id/articleTime"

        app:layout_constraintEnd_toStartOf="@+id/guideline4"
        app:layout_constraintStart_toEndOf="@+id/articleFavorite"
        app:layout_constraintTop_toTopOf="@+id/articleTime" />


    <android.support.constraint.Guideline

        android:id="@+id/guideline4"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.6" />
</android.support.constraint.ConstraintLayout>

I messed up the ImageButtons a little, please fix the drawables and the color. Edit 2: for some reason, another closing tag won't show in the code section here. make sure to add another ConstraintLayout closing tag right at the end.

<android.support.constraint.ConstraintLayout android:layout_height="wrap_content"
android:layout_width="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<android.support.constraint.Guideline
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.55"
    android:id="@+id/guideline"/>
<ImageView
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintStart_toEndOf="@id/guideline"
    app:layout_constraintDimensionRatio="16:9"
    android:layout_margin="16dp"
    android:id="@+id/imageView"/>
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    android:id="@+id/mainTextView"
    android:layout_marginStart="25dp"
    android:layout_marginTop="10dp"
    android:text="Placeholder"/>
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintTop_toBottomOf="@id/mainTextView"
    app:layout_constraintStart_toStartOf="@id/mainTextView"
    android:layout_marginTop="5dp"
    android:text="Secondary"
    android:id="@+id/secondaryTextView"/>
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintTop_toBottomOf="@id/secondaryTextView"
    app:layout_constraintStart_toStartOf="@id/mainTextView"
    app:layout_constraintBottom_toBottomOf="parent"
    android:layout_marginBottom="10dp"
    android:layout_marginTop="5dp"
    android:text="Tertiary"
    android:id="@+id/tertiaryTextView"/>

<ImageButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintTop_toTopOf="@id/tertiaryTextView"
    app:layout_constraintBottom_toBottomOf="@id/tertiaryTextView"
    app:layout_constraintStart_toEndOf="@id/tertiaryTextView"
    android:layout_marginStart="15dp"
    android:id="@+id/firstButton"/>
<ImageButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintTop_toTopOf="@id/firstButton"
    app:layout_constraintBottom_toBottomOf="@id/firstButton"
    app:layout_constraintStart_toEndOf="@id/firstButton"
    android:layout_marginStart="15dp"
    android:id="@+id/secondButton"/>

Edit 3: Here's a clean take to it.This one should do what you want. Though you have to tweak the margins the way you want them! Again the closing tag ... I don't know why it won't appear here!

Bled
  • 66
  • 1
  • 5
  • good answer, you got my upvote. BUT - as this may work I think that instead of creating a nested view situation (not recommended) you can simply change the constraints, there are not many views and its not too complex. check my answer below for more information. – Tamir Abutbul May 13 '19 at 18:02
  • hi it is still the same can you eleborate your answer again – Edgar Snowden May 13 '19 at 18:02
  • 1
    @EdgarSnowden I totally missed the fact that this is going to be used in a RecyclerView sort of thing as I was on my phone. Check out TamirAbutbul's answer as that's what you're supposed to do. As per my answer ... you put everything you have in an additional ConstraintLayout. The child ConstraintLayout is supposed to have a height of match_parent and width of wrap_content, and then the 2 constraints along with Top_toTopOf="parent". Although nesting is generally not a good idea, I don't think it'll affect you too much in this particular case! Edit: I'll post the code in a few minutes! – Bled May 13 '19 at 18:19
  • @BledK.you are correct- in this particular case it won't affect him a lot but it is not really good practice as you mentioned – Tamir Abutbul May 13 '19 at 18:39
  • @BledK.it is still the same what is your suggestion then – Edgar Snowden May 13 '19 at 18:54
  • @EdgarSnowden check if the code I added below works for you! You'll have to add some margins the way you want to tho! – Bled May 13 '19 at 18:59
  • @Bled K it is looks good but how can I add align textview I will add screenshot please check your third edit thanks – Edgar Snowden May 13 '19 at 19:28
  • @EdgarSnowden for the TextViews ... you can constrain the topmost one to the top of the parent view, and the bottom one to the bottom of the parent view. the middle one should take the rest of the space (if i understand correctly, most content will go there, and the image to the right will make sure the view is big enough) so you constrain it to the bottom of the top TextView and the top of the bottom TextView. IF you want the middle view to have a constant size, set layout_height (and layout_width optionally, but then you'd have to constrain width with End_toStartOf="guideline" or similar). – Bled May 13 '19 at 20:06
1

If you want to move your views that are on the left side of the screen to the right part of the screen simply change your constraints like this:

Replace your constraints, your views will get constraint to your guideline from the left and to the right side on the screen as the right constraint.

Do it like this:

<android.support.constraint.ConstraintLayout 
  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="match_parent">

<ImageView

    android:id="@+id/articleImage"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_gravity="center"
    android:layout_margin="8dp"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="8dp"
    app:layout_constraintDimensionRatio="16:9"
    app:layout_constraintEnd_toStartOf="@+id/guideline4"
    app:layout_constraintHorizontal_bias="1.0"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />


<TextView
    android:id="@+id/articleAuthor"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="8dp"
    android:gravity="start"
    android:text="article_author"
    android:textSize="12sp"
    app:layout_constraintEnd_toStartOf="@+id/articleImage"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintStart_toStartOf="@+id/guideline4"
    app:layout_constraintTop_toTopOf="parent" />


<TextView
    android:id="@+id/articleTitle"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="8dp"
    android:text="article_title"
    android:textSize="12sp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintStart_toStartOf="@+id/guideline4"
    app:layout_constraintTop_toBottomOf="@+id/articleAuthor" />


<TextView
    android:id="@+id/articleTime"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:text="Article Time"
    android:textSize="18sp"
    app:layout_constraintEnd_toStartOf="@+id/articleFavorite"
    app:layout_constraintHorizontal_bias="0"
    app:layout_constraintHorizontal_chainStyle="packed"
    app:layout_constraintStart_toStartOf="@+id/guideline4"
    app:layout_constraintTop_toBottomOf="@+id/articleTitle" />


<ImageButton
    android:id="@+id/articleFavorite"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:background="@color/colorWhite"
    android:src="@drawable/ic_bookmark"
    app:layout_constraintBottom_toBottomOf="@+id/articleTime"
    app:layout_constraintEnd_toStartOf="@+id/articleShare"
    app:layout_constraintStart_toEndOf="@+id/articleTime"
    app:layout_constraintTop_toTopOf="@+id/articleTime" />


<ImageButton
    android:id="@+id/articleShare"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginEnd="8dp"
    android:background="@color/colorWhite"
    android:contentDescription="TODO"
    android:src="@drawable/ic_share"
    app:layout_constraintBottom_toBottomOf="@+id/articleTime"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@+id/articleFavorite"
    app:layout_constraintTop_toTopOf="@+id/articleTime"
    app:layout_constraintVertical_bias="0.0" />


<android.support.constraint.Guideline
    android:id="@+id/guideline4"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.6" />

</android.support.constraint.ConstraintLayout>

And it will look like this:

enter image description here

Tamir Abutbul
  • 7,301
  • 7
  • 25
  • 53