How to center imageView in third row using Constraint Layout












1















2x2 plus 1 un-centered tile



I have 5 square tiles all of which need to be the same size but flexible so it can grow and shrink to fit different display sizes. There is text beneath each tile. I want the last row to be centered horizontally and wish to do this using only xml if possible. I also have a toolbar and a navigation bar. Here is my xml file:



<?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:id="@+id/main_container"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    tools:context=".MainActivity" android:background="@drawable/sunrise" tools:layout_editor_absoluteY="25dp">



<android.support.v7.widget.Toolbar

        android:id="@+id/my_toolbar"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:background="@color/toolBarColor"

        app:layout_constraintEnd_toEndOf="parent"

        app:layout_constraintStart_toStartOf="parent"

        app:layout_constraintTop_toTopOf="parent"

        app:navigationIcon="@drawable/refresh2">



    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="Now - The Technology"

        android:textColor="@color/appTitleColor"

        android:textSize="18sp"

        android:layout_gravity="center"

        android:id="@+id/toolbar_title"/>

</android.support.v7.widget.Toolbar>



<ImageView

        android:id="@+id/ivPlay"

        app:layout_constraintDimensionRatio="1:1"

        android:layout_width="0dp"

        android:layout_height="0dp"

        app:srcCompat="@drawable/play"

        android:scaleType="fitXY" android:adjustViewBounds="true"

        android:contentDescription="@string/con_des_play"

        app:layout_constraintTop_toBottomOf="@+id/my_toolbar"

        android:layout_marginTop="16dp"

        app:layout_constraintStart_toStartOf="parent"

        android:layout_marginStart="16dp"

        app:layout_constraintEnd_toStartOf="@+id/ivReminder"

        android:layout_marginEnd="16dp"

/>



<TextView android:id="@+id/tvPlay"

          android:layout_width="wrap_content"

          android:layout_height="wrap_content"

          app:layout_constraintStart_toStartOf="@+id/ivPlay"

          app:layout_constraintEnd_toEndOf="@+id/ivPlay"

          app:layout_constraintTop_toBottomOf="@+id/ivPlay"

          android:layout_marginBottom="2dp"

          android:text="@string/play_10_minutes"

          android:textColor="@color/iconTextColor"

          android:textSize="16sp"

/>



<ImageView

        android:id="@+id/ivReminder"

        app:layout_constraintDimensionRatio="1:1"

        android:layout_width="0dp"

        android:layout_height="0dp"

        app:srcCompat="@drawable/reminder"

        android:scaleType="fitXY" android:adjustViewBounds="true"

        android:contentDescription="@string/con_des_play"

        app:layout_constraintTop_toBottomOf="@+id/my_toolbar"

        android:layout_marginTop="16dp"

        app:layout_constraintEnd_toEndOf="parent"

        android:layout_marginEnd="16dp"

        app:layout_constraintStart_toEndOf="@+id/ivPlay"

        android:layout_marginStart="16dp"

/>



<TextView android:id="@+id/tvReminder"

          android:layout_width="wrap_content"

          android:layout_height="wrap_content"

          app:layout_constraintStart_toStartOf="@+id/ivReminder"

          app:layout_constraintEnd_toEndOf="@+id/ivReminder"

          app:layout_constraintTop_toBottomOf="@+id/ivReminder"

          android:layout_marginBottom="2dp"

          android:text="@string/now_reminder"

          android:textColor="@color/iconTextColor"

          android:textSize="16sp"

/>



<ImageView

        android:id="@+id/ivGuide"

        app:layout_constraintDimensionRatio="1:1"

        android:layout_width="0dp"

        android:layout_height="0dp"

        app:srcCompat="@drawable/guide"

        android:scaleType="fitXY" android:adjustViewBounds="true"

        android:contentDescription="@string/con_des_play"

        app:layout_constraintTop_toBottomOf="@+id/tvPlay"

        android:layout_marginTop="20dp"

        app:layout_constraintStart_toStartOf="@+id/ivPlay"

        app:layout_constraintEnd_toEndOf="@+id/ivPlay"

        app:layout_constraintHorizontal_bias="1.0"/>



<TextView android:id="@+id/tvGuide"

          android:layout_width="wrap_content"

          android:layout_height="wrap_content"

          app:layout_constraintStart_toStartOf="@+id/ivGuide"

          app:layout_constraintEnd_toEndOf="@+id/ivGuide"

          app:layout_constraintTop_toBottomOf="@+id/ivGuide"

          android:layout_marginBottom="2dp"

          android:text="@string/guide"

          android:textColor="@color/iconTextColor"

          android:textSize="16sp"

/>



<ImageView

        android:id="@+id/ivUpgrade"

        app:layout_constraintDimensionRatio="1:1"

        android:layout_width="0dp"

        android:layout_height="0dp"

        app:srcCompat="@drawable/upgrade"

        android:scaleType="fitXY" android:adjustViewBounds="true"

        android:contentDescription="@string/con_des_play"

        app:layout_constraintTop_toTopOf="@+id/ivGuide"

        app:layout_constraintStart_toStartOf="@+id/ivReminder"

        app:layout_constraintEnd_toEndOf="@+id/ivReminder"



/>



<TextView android:id="@+id/tvUpgrade"

          android:layout_width="wrap_content"

          android:layout_height="wrap_content"

          app:layout_constraintStart_toStartOf="@+id/ivUpgrade"

          app:layout_constraintEnd_toEndOf="@+id/ivUpgrade"

          app:layout_constraintTop_toBottomOf="@+id/ivUpgrade"

          android:layout_marginTop="2dp"

          android:text="@string/upgrade"

          android:textColor="@color/iconTextColor"

          android:textSize="16sp"

/>



<ImageView

        android:id="@+id/ivLearn"

        app:layout_constraintDimensionRatio="1:1"

        android:layout_width="0dp"

        android:layout_height="0dp"

        app:srcCompat="@drawable/learn"

        android:scaleType="fitXY" android:adjustViewBounds="true"

        android:contentDescription="@string/con_des_play"

        app:layout_constraintTop_toBottomOf="@+id/tvGuide"

        app:layout_constraintStart_toStartOf="@+id/ivGuide"

        app:layout_constraintEnd_toEndOf="@+id/ivGuide"

        app:layout_constraintBottom_toTopOf="@+id/tvLearn"

        android:layout_marginTop="16dp"

        android:foregroundGravity="center_horizontal"

        app:layout_constraintHorizontal_bias="0.5"/>



<TextView android:id="@+id/tvLearn"

          android:layout_width="wrap_content"

          android:layout_height="wrap_content"

          app:layout_constraintStart_toStartOf="@+id/ivLearn"

          app:layout_constraintEnd_toEndOf="@+id/ivLearn"

          app:layout_constraintTop_toBottomOf="@+id/ivLearn"

          app:layout_constraintBottom_toTopOf="@+id/navigation"

          android:text="@string/learn"

          android:textColor="@color/iconTextColor"

          android:textSize="16sp"

          android:layout_marginTop="2dp"

          android:layout_marginBottom="16dp"

/>



<android.support.design.widget.BottomNavigationView

        android:id="@+id/navigation"

        android:layout_width="0dp"

        android:layout_height="wrap_content"

        android:background="#D3D3D3"

        app:menu="@menu/navigation" app:itemTextColor="@color/navAccent" style="@style/AppTheme"

        android:visibility="visible" app:itemIconTint="@color/navAccent"

        app:layout_constraintStart_toStartOf="parent"

        app:layout_constraintEnd_toEndOf="parent"

        app:layout_constraintBottom_toBottomOf="parent"

        android:layout_marginBottom="0dp"/>

</android.support.constraint.ConstraintLayout>


Thanks in advance.






android centering constraint-layout







share|improve this question























  • used GridLayout manger into recyclerview.

    – Android Team
    Nov 19 '18 at 8:02











  • stackoverflow.com/questions/40587168/…

    – Android Team
    Nov 19 '18 at 8:03











  • I tried the minimal app mentioned above and it works, only I want the last row centered if there aren't as many columns as in the row above. I tried using android:layout_gravity="center" and layout:gravity="center" but it didn't work.

    – Philip Stephens
    Nov 20 '18 at 2:39
















1















2x2 plus 1 un-centered tile



I have 5 square tiles all of which need to be the same size but flexible so it can grow and shrink to fit different display sizes. There is text beneath each tile. I want the last row to be centered horizontally and wish to do this using only xml if possible. I also have a toolbar and a navigation bar. Here is my xml file:



<?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:id="@+id/main_container"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    tools:context=".MainActivity" android:background="@drawable/sunrise" tools:layout_editor_absoluteY="25dp">



<android.support.v7.widget.Toolbar

        android:id="@+id/my_toolbar"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:background="@color/toolBarColor"

        app:layout_constraintEnd_toEndOf="parent"

        app:layout_constraintStart_toStartOf="parent"

        app:layout_constraintTop_toTopOf="parent"

        app:navigationIcon="@drawable/refresh2">



    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="Now - The Technology"

        android:textColor="@color/appTitleColor"

        android:textSize="18sp"

        android:layout_gravity="center"

        android:id="@+id/toolbar_title"/>

</android.support.v7.widget.Toolbar>



<ImageView

        android:id="@+id/ivPlay"

        app:layout_constraintDimensionRatio="1:1"

        android:layout_width="0dp"

        android:layout_height="0dp"

        app:srcCompat="@drawable/play"

        android:scaleType="fitXY" android:adjustViewBounds="true"

        android:contentDescription="@string/con_des_play"

        app:layout_constraintTop_toBottomOf="@+id/my_toolbar"

        android:layout_marginTop="16dp"

        app:layout_constraintStart_toStartOf="parent"

        android:layout_marginStart="16dp"

        app:layout_constraintEnd_toStartOf="@+id/ivReminder"

        android:layout_marginEnd="16dp"

/>



<TextView android:id="@+id/tvPlay"

          android:layout_width="wrap_content"

          android:layout_height="wrap_content"

          app:layout_constraintStart_toStartOf="@+id/ivPlay"

          app:layout_constraintEnd_toEndOf="@+id/ivPlay"

          app:layout_constraintTop_toBottomOf="@+id/ivPlay"

          android:layout_marginBottom="2dp"

          android:text="@string/play_10_minutes"

          android:textColor="@color/iconTextColor"

          android:textSize="16sp"

/>



<ImageView

        android:id="@+id/ivReminder"

        app:layout_constraintDimensionRatio="1:1"

        android:layout_width="0dp"

        android:layout_height="0dp"

        app:srcCompat="@drawable/reminder"

        android:scaleType="fitXY" android:adjustViewBounds="true"

        android:contentDescription="@string/con_des_play"

        app:layout_constraintTop_toBottomOf="@+id/my_toolbar"

        android:layout_marginTop="16dp"

        app:layout_constraintEnd_toEndOf="parent"

        android:layout_marginEnd="16dp"

        app:layout_constraintStart_toEndOf="@+id/ivPlay"

        android:layout_marginStart="16dp"

/>



<TextView android:id="@+id/tvReminder"

          android:layout_width="wrap_content"

          android:layout_height="wrap_content"

          app:layout_constraintStart_toStartOf="@+id/ivReminder"

          app:layout_constraintEnd_toEndOf="@+id/ivReminder"

          app:layout_constraintTop_toBottomOf="@+id/ivReminder"

          android:layout_marginBottom="2dp"

          android:text="@string/now_reminder"

          android:textColor="@color/iconTextColor"

          android:textSize="16sp"

/>



<ImageView

        android:id="@+id/ivGuide"

        app:layout_constraintDimensionRatio="1:1"

        android:layout_width="0dp"

        android:layout_height="0dp"

        app:srcCompat="@drawable/guide"

        android:scaleType="fitXY" android:adjustViewBounds="true"

        android:contentDescription="@string/con_des_play"

        app:layout_constraintTop_toBottomOf="@+id/tvPlay"

        android:layout_marginTop="20dp"

        app:layout_constraintStart_toStartOf="@+id/ivPlay"

        app:layout_constraintEnd_toEndOf="@+id/ivPlay"

        app:layout_constraintHorizontal_bias="1.0"/>



<TextView android:id="@+id/tvGuide"

          android:layout_width="wrap_content"

          android:layout_height="wrap_content"

          app:layout_constraintStart_toStartOf="@+id/ivGuide"

          app:layout_constraintEnd_toEndOf="@+id/ivGuide"

          app:layout_constraintTop_toBottomOf="@+id/ivGuide"

          android:layout_marginBottom="2dp"

          android:text="@string/guide"

          android:textColor="@color/iconTextColor"

          android:textSize="16sp"

/>



<ImageView

        android:id="@+id/ivUpgrade"

        app:layout_constraintDimensionRatio="1:1"

        android:layout_width="0dp"

        android:layout_height="0dp"

        app:srcCompat="@drawable/upgrade"

        android:scaleType="fitXY" android:adjustViewBounds="true"

        android:contentDescription="@string/con_des_play"

        app:layout_constraintTop_toTopOf="@+id/ivGuide"

        app:layout_constraintStart_toStartOf="@+id/ivReminder"

        app:layout_constraintEnd_toEndOf="@+id/ivReminder"



/>



<TextView android:id="@+id/tvUpgrade"

          android:layout_width="wrap_content"

          android:layout_height="wrap_content"

          app:layout_constraintStart_toStartOf="@+id/ivUpgrade"

          app:layout_constraintEnd_toEndOf="@+id/ivUpgrade"

          app:layout_constraintTop_toBottomOf="@+id/ivUpgrade"

          android:layout_marginTop="2dp"

          android:text="@string/upgrade"

          android:textColor="@color/iconTextColor"

          android:textSize="16sp"

/>



<ImageView

        android:id="@+id/ivLearn"

        app:layout_constraintDimensionRatio="1:1"

        android:layout_width="0dp"

        android:layout_height="0dp"

        app:srcCompat="@drawable/learn"

        android:scaleType="fitXY" android:adjustViewBounds="true"

        android:contentDescription="@string/con_des_play"

        app:layout_constraintTop_toBottomOf="@+id/tvGuide"

        app:layout_constraintStart_toStartOf="@+id/ivGuide"

        app:layout_constraintEnd_toEndOf="@+id/ivGuide"

        app:layout_constraintBottom_toTopOf="@+id/tvLearn"

        android:layout_marginTop="16dp"

        android:foregroundGravity="center_horizontal"

        app:layout_constraintHorizontal_bias="0.5"/>



<TextView android:id="@+id/tvLearn"

          android:layout_width="wrap_content"

          android:layout_height="wrap_content"

          app:layout_constraintStart_toStartOf="@+id/ivLearn"

          app:layout_constraintEnd_toEndOf="@+id/ivLearn"

          app:layout_constraintTop_toBottomOf="@+id/ivLearn"

          app:layout_constraintBottom_toTopOf="@+id/navigation"

          android:text="@string/learn"

          android:textColor="@color/iconTextColor"

          android:textSize="16sp"

          android:layout_marginTop="2dp"

          android:layout_marginBottom="16dp"

/>



<android.support.design.widget.BottomNavigationView

        android:id="@+id/navigation"

        android:layout_width="0dp"

        android:layout_height="wrap_content"

        android:background="#D3D3D3"

        app:menu="@menu/navigation" app:itemTextColor="@color/navAccent" style="@style/AppTheme"

        android:visibility="visible" app:itemIconTint="@color/navAccent"

        app:layout_constraintStart_toStartOf="parent"

        app:layout_constraintEnd_toEndOf="parent"

        app:layout_constraintBottom_toBottomOf="parent"

        android:layout_marginBottom="0dp"/>

</android.support.constraint.ConstraintLayout>


Thanks in advance.






android centering constraint-layout







share|improve this question























  • used GridLayout manger into recyclerview.

    – Android Team
    Nov 19 '18 at 8:02











  • stackoverflow.com/questions/40587168/…

    – Android Team
    Nov 19 '18 at 8:03











  • I tried the minimal app mentioned above and it works, only I want the last row centered if there aren't as many columns as in the row above. I tried using android:layout_gravity="center" and layout:gravity="center" but it didn't work.

    – Philip Stephens
    Nov 20 '18 at 2:39














1












1








1








2x2 plus 1 un-centered tile



I have 5 square tiles all of which need to be the same size but flexible so it can grow and shrink to fit different display sizes. There is text beneath each tile. I want the last row to be centered horizontally and wish to do this using only xml if possible. I also have a toolbar and a navigation bar. Here is my xml file:



<?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:id="@+id/main_container"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    tools:context=".MainActivity" android:background="@drawable/sunrise" tools:layout_editor_absoluteY="25dp">



<android.support.v7.widget.Toolbar

        android:id="@+id/my_toolbar"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:background="@color/toolBarColor"

        app:layout_constraintEnd_toEndOf="parent"

        app:layout_constraintStart_toStartOf="parent"

        app:layout_constraintTop_toTopOf="parent"

        app:navigationIcon="@drawable/refresh2">



    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="Now - The Technology"

        android:textColor="@color/appTitleColor"

        android:textSize="18sp"

        android:layout_gravity="center"

        android:id="@+id/toolbar_title"/>

</android.support.v7.widget.Toolbar>



<ImageView

        android:id="@+id/ivPlay"

        app:layout_constraintDimensionRatio="1:1"

        android:layout_width="0dp"

        android:layout_height="0dp"

        app:srcCompat="@drawable/play"

        android:scaleType="fitXY" android:adjustViewBounds="true"

        android:contentDescription="@string/con_des_play"

        app:layout_constraintTop_toBottomOf="@+id/my_toolbar"

        android:layout_marginTop="16dp"

        app:layout_constraintStart_toStartOf="parent"

        android:layout_marginStart="16dp"

        app:layout_constraintEnd_toStartOf="@+id/ivReminder"

        android:layout_marginEnd="16dp"

/>



<TextView android:id="@+id/tvPlay"

          android:layout_width="wrap_content"

          android:layout_height="wrap_content"

          app:layout_constraintStart_toStartOf="@+id/ivPlay"

          app:layout_constraintEnd_toEndOf="@+id/ivPlay"

          app:layout_constraintTop_toBottomOf="@+id/ivPlay"

          android:layout_marginBottom="2dp"

          android:text="@string/play_10_minutes"

          android:textColor="@color/iconTextColor"

          android:textSize="16sp"

/>



<ImageView

        android:id="@+id/ivReminder"

        app:layout_constraintDimensionRatio="1:1"

        android:layout_width="0dp"

        android:layout_height="0dp"

        app:srcCompat="@drawable/reminder"

        android:scaleType="fitXY" android:adjustViewBounds="true"

        android:contentDescription="@string/con_des_play"

        app:layout_constraintTop_toBottomOf="@+id/my_toolbar"

        android:layout_marginTop="16dp"

        app:layout_constraintEnd_toEndOf="parent"

        android:layout_marginEnd="16dp"

        app:layout_constraintStart_toEndOf="@+id/ivPlay"

        android:layout_marginStart="16dp"

/>



<TextView android:id="@+id/tvReminder"

          android:layout_width="wrap_content"

          android:layout_height="wrap_content"

          app:layout_constraintStart_toStartOf="@+id/ivReminder"

          app:layout_constraintEnd_toEndOf="@+id/ivReminder"

          app:layout_constraintTop_toBottomOf="@+id/ivReminder"

          android:layout_marginBottom="2dp"

          android:text="@string/now_reminder"

          android:textColor="@color/iconTextColor"

          android:textSize="16sp"

/>



<ImageView

        android:id="@+id/ivGuide"

        app:layout_constraintDimensionRatio="1:1"

        android:layout_width="0dp"

        android:layout_height="0dp"

        app:srcCompat="@drawable/guide"

        android:scaleType="fitXY" android:adjustViewBounds="true"

        android:contentDescription="@string/con_des_play"

        app:layout_constraintTop_toBottomOf="@+id/tvPlay"

        android:layout_marginTop="20dp"

        app:layout_constraintStart_toStartOf="@+id/ivPlay"

        app:layout_constraintEnd_toEndOf="@+id/ivPlay"

        app:layout_constraintHorizontal_bias="1.0"/>



<TextView android:id="@+id/tvGuide"

          android:layout_width="wrap_content"

          android:layout_height="wrap_content"

          app:layout_constraintStart_toStartOf="@+id/ivGuide"

          app:layout_constraintEnd_toEndOf="@+id/ivGuide"

          app:layout_constraintTop_toBottomOf="@+id/ivGuide"

          android:layout_marginBottom="2dp"

          android:text="@string/guide"

          android:textColor="@color/iconTextColor"

          android:textSize="16sp"

/>



<ImageView

        android:id="@+id/ivUpgrade"

        app:layout_constraintDimensionRatio="1:1"

        android:layout_width="0dp"

        android:layout_height="0dp"

        app:srcCompat="@drawable/upgrade"

        android:scaleType="fitXY" android:adjustViewBounds="true"

        android:contentDescription="@string/con_des_play"

        app:layout_constraintTop_toTopOf="@+id/ivGuide"

        app:layout_constraintStart_toStartOf="@+id/ivReminder"

        app:layout_constraintEnd_toEndOf="@+id/ivReminder"



/>



<TextView android:id="@+id/tvUpgrade"

          android:layout_width="wrap_content"

          android:layout_height="wrap_content"

          app:layout_constraintStart_toStartOf="@+id/ivUpgrade"

          app:layout_constraintEnd_toEndOf="@+id/ivUpgrade"

          app:layout_constraintTop_toBottomOf="@+id/ivUpgrade"

          android:layout_marginTop="2dp"

          android:text="@string/upgrade"

          android:textColor="@color/iconTextColor"

          android:textSize="16sp"

/>



<ImageView

        android:id="@+id/ivLearn"

        app:layout_constraintDimensionRatio="1:1"

        android:layout_width="0dp"

        android:layout_height="0dp"

        app:srcCompat="@drawable/learn"

        android:scaleType="fitXY" android:adjustViewBounds="true"

        android:contentDescription="@string/con_des_play"

        app:layout_constraintTop_toBottomOf="@+id/tvGuide"

        app:layout_constraintStart_toStartOf="@+id/ivGuide"

        app:layout_constraintEnd_toEndOf="@+id/ivGuide"

        app:layout_constraintBottom_toTopOf="@+id/tvLearn"

        android:layout_marginTop="16dp"

        android:foregroundGravity="center_horizontal"

        app:layout_constraintHorizontal_bias="0.5"/>



<TextView android:id="@+id/tvLearn"

          android:layout_width="wrap_content"

          android:layout_height="wrap_content"

          app:layout_constraintStart_toStartOf="@+id/ivLearn"

          app:layout_constraintEnd_toEndOf="@+id/ivLearn"

          app:layout_constraintTop_toBottomOf="@+id/ivLearn"

          app:layout_constraintBottom_toTopOf="@+id/navigation"

          android:text="@string/learn"

          android:textColor="@color/iconTextColor"

          android:textSize="16sp"

          android:layout_marginTop="2dp"

          android:layout_marginBottom="16dp"

/>



<android.support.design.widget.BottomNavigationView

        android:id="@+id/navigation"

        android:layout_width="0dp"

        android:layout_height="wrap_content"

        android:background="#D3D3D3"

        app:menu="@menu/navigation" app:itemTextColor="@color/navAccent" style="@style/AppTheme"

        android:visibility="visible" app:itemIconTint="@color/navAccent"

        app:layout_constraintStart_toStartOf="parent"

        app:layout_constraintEnd_toEndOf="parent"

        app:layout_constraintBottom_toBottomOf="parent"

        android:layout_marginBottom="0dp"/>

</android.support.constraint.ConstraintLayout>


Thanks in advance.






android centering constraint-layout







share|improve this question














2x2 plus 1 un-centered tile



I have 5 square tiles all of which need to be the same size but flexible so it can grow and shrink to fit different display sizes. There is text beneath each tile. I want the last row to be centered horizontally and wish to do this using only xml if possible. I also have a toolbar and a navigation bar. Here is my xml file:



<?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:id="@+id/main_container"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    tools:context=".MainActivity" android:background="@drawable/sunrise" tools:layout_editor_absoluteY="25dp">



<android.support.v7.widget.Toolbar

        android:id="@+id/my_toolbar"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:background="@color/toolBarColor"

        app:layout_constraintEnd_toEndOf="parent"

        app:layout_constraintStart_toStartOf="parent"

        app:layout_constraintTop_toTopOf="parent"

        app:navigationIcon="@drawable/refresh2">



    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="Now - The Technology"

        android:textColor="@color/appTitleColor"

        android:textSize="18sp"

        android:layout_gravity="center"

        android:id="@+id/toolbar_title"/>

</android.support.v7.widget.Toolbar>



<ImageView

        android:id="@+id/ivPlay"

        app:layout_constraintDimensionRatio="1:1"

        android:layout_width="0dp"

        android:layout_height="0dp"

        app:srcCompat="@drawable/play"

        android:scaleType="fitXY" android:adjustViewBounds="true"

        android:contentDescription="@string/con_des_play"

        app:layout_constraintTop_toBottomOf="@+id/my_toolbar"

        android:layout_marginTop="16dp"

        app:layout_constraintStart_toStartOf="parent"

        android:layout_marginStart="16dp"

        app:layout_constraintEnd_toStartOf="@+id/ivReminder"

        android:layout_marginEnd="16dp"

/>



<TextView android:id="@+id/tvPlay"

          android:layout_width="wrap_content"

          android:layout_height="wrap_content"

          app:layout_constraintStart_toStartOf="@+id/ivPlay"

          app:layout_constraintEnd_toEndOf="@+id/ivPlay"

          app:layout_constraintTop_toBottomOf="@+id/ivPlay"

          android:layout_marginBottom="2dp"

          android:text="@string/play_10_minutes"

          android:textColor="@color/iconTextColor"

          android:textSize="16sp"

/>



<ImageView

        android:id="@+id/ivReminder"

        app:layout_constraintDimensionRatio="1:1"

        android:layout_width="0dp"

        android:layout_height="0dp"

        app:srcCompat="@drawable/reminder"

        android:scaleType="fitXY" android:adjustViewBounds="true"

        android:contentDescription="@string/con_des_play"

        app:layout_constraintTop_toBottomOf="@+id/my_toolbar"

        android:layout_marginTop="16dp"

        app:layout_constraintEnd_toEndOf="parent"

        android:layout_marginEnd="16dp"

        app:layout_constraintStart_toEndOf="@+id/ivPlay"

        android:layout_marginStart="16dp"

/>



<TextView android:id="@+id/tvReminder"

          android:layout_width="wrap_content"

          android:layout_height="wrap_content"

          app:layout_constraintStart_toStartOf="@+id/ivReminder"

          app:layout_constraintEnd_toEndOf="@+id/ivReminder"

          app:layout_constraintTop_toBottomOf="@+id/ivReminder"

          android:layout_marginBottom="2dp"

          android:text="@string/now_reminder"

          android:textColor="@color/iconTextColor"

          android:textSize="16sp"

/>



<ImageView

        android:id="@+id/ivGuide"

        app:layout_constraintDimensionRatio="1:1"

        android:layout_width="0dp"

        android:layout_height="0dp"

        app:srcCompat="@drawable/guide"

        android:scaleType="fitXY" android:adjustViewBounds="true"

        android:contentDescription="@string/con_des_play"

        app:layout_constraintTop_toBottomOf="@+id/tvPlay"

        android:layout_marginTop="20dp"

        app:layout_constraintStart_toStartOf="@+id/ivPlay"

        app:layout_constraintEnd_toEndOf="@+id/ivPlay"

        app:layout_constraintHorizontal_bias="1.0"/>



<TextView android:id="@+id/tvGuide"

          android:layout_width="wrap_content"

          android:layout_height="wrap_content"

          app:layout_constraintStart_toStartOf="@+id/ivGuide"

          app:layout_constraintEnd_toEndOf="@+id/ivGuide"

          app:layout_constraintTop_toBottomOf="@+id/ivGuide"

          android:layout_marginBottom="2dp"

          android:text="@string/guide"

          android:textColor="@color/iconTextColor"

          android:textSize="16sp"

/>



<ImageView

        android:id="@+id/ivUpgrade"

        app:layout_constraintDimensionRatio="1:1"

        android:layout_width="0dp"

        android:layout_height="0dp"

        app:srcCompat="@drawable/upgrade"

        android:scaleType="fitXY" android:adjustViewBounds="true"

        android:contentDescription="@string/con_des_play"

        app:layout_constraintTop_toTopOf="@+id/ivGuide"

        app:layout_constraintStart_toStartOf="@+id/ivReminder"

        app:layout_constraintEnd_toEndOf="@+id/ivReminder"



/>



<TextView android:id="@+id/tvUpgrade"

          android:layout_width="wrap_content"

          android:layout_height="wrap_content"

          app:layout_constraintStart_toStartOf="@+id/ivUpgrade"

          app:layout_constraintEnd_toEndOf="@+id/ivUpgrade"

          app:layout_constraintTop_toBottomOf="@+id/ivUpgrade"

          android:layout_marginTop="2dp"

          android:text="@string/upgrade"

          android:textColor="@color/iconTextColor"

          android:textSize="16sp"

/>



<ImageView

        android:id="@+id/ivLearn"

        app:layout_constraintDimensionRatio="1:1"

        android:layout_width="0dp"

        android:layout_height="0dp"

        app:srcCompat="@drawable/learn"

        android:scaleType="fitXY" android:adjustViewBounds="true"

        android:contentDescription="@string/con_des_play"

        app:layout_constraintTop_toBottomOf="@+id/tvGuide"

        app:layout_constraintStart_toStartOf="@+id/ivGuide"

        app:layout_constraintEnd_toEndOf="@+id/ivGuide"

        app:layout_constraintBottom_toTopOf="@+id/tvLearn"

        android:layout_marginTop="16dp"

        android:foregroundGravity="center_horizontal"

        app:layout_constraintHorizontal_bias="0.5"/>



<TextView android:id="@+id/tvLearn"

          android:layout_width="wrap_content"

          android:layout_height="wrap_content"

          app:layout_constraintStart_toStartOf="@+id/ivLearn"

          app:layout_constraintEnd_toEndOf="@+id/ivLearn"

          app:layout_constraintTop_toBottomOf="@+id/ivLearn"

          app:layout_constraintBottom_toTopOf="@+id/navigation"

          android:text="@string/learn"

          android:textColor="@color/iconTextColor"

          android:textSize="16sp"

          android:layout_marginTop="2dp"

          android:layout_marginBottom="16dp"

/>



<android.support.design.widget.BottomNavigationView

        android:id="@+id/navigation"

        android:layout_width="0dp"

        android:layout_height="wrap_content"

        android:background="#D3D3D3"

        app:menu="@menu/navigation" app:itemTextColor="@color/navAccent" style="@style/AppTheme"

        android:visibility="visible" app:itemIconTint="@color/navAccent"

        app:layout_constraintStart_toStartOf="parent"

        app:layout_constraintEnd_toEndOf="parent"

        app:layout_constraintBottom_toBottomOf="parent"

        android:layout_marginBottom="0dp"/>

</android.support.constraint.ConstraintLayout>


Thanks in advance.






android centering constraint-layout




android centering constraint-layout






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Nov 19 '18 at 7:39









Philip StephensPhilip Stephens

1015




1015













  • used GridLayout manger into recyclerview.

    – Android Team
    Nov 19 '18 at 8:02











  • stackoverflow.com/questions/40587168/…

    – Android Team
    Nov 19 '18 at 8:03











  • I tried the minimal app mentioned above and it works, only I want the last row centered if there aren't as many columns as in the row above. I tried using android:layout_gravity="center" and layout:gravity="center" but it didn't work.

    – Philip Stephens
    Nov 20 '18 at 2:39



















  • used GridLayout manger into recyclerview.

    – Android Team
    Nov 19 '18 at 8:02











  • stackoverflow.com/questions/40587168/…

    – Android Team
    Nov 19 '18 at 8:03











  • I tried the minimal app mentioned above and it works, only I want the last row centered if there aren't as many columns as in the row above. I tried using android:layout_gravity="center" and layout:gravity="center" but it didn't work.

    – Philip Stephens
    Nov 20 '18 at 2:39

















used GridLayout manger into recyclerview.

– Android Team
Nov 19 '18 at 8:02





used GridLayout manger into recyclerview.

– Android Team
Nov 19 '18 at 8:02













stackoverflow.com/questions/40587168/…

– Android Team
Nov 19 '18 at 8:03





stackoverflow.com/questions/40587168/…

– Android Team
Nov 19 '18 at 8:03













I tried the minimal app mentioned above and it works, only I want the last row centered if there aren't as many columns as in the row above. I tried using android:layout_gravity="center" and layout:gravity="center" but it didn't work.

– Philip Stephens
Nov 20 '18 at 2:39





I tried the minimal app mentioned above and it works, only I want the last row centered if there aren't as many columns as in the row above. I tried using android:layout_gravity="center" and layout:gravity="center" but it didn't work.

– Philip Stephens
Nov 20 '18 at 2:39












2 Answers
2






active

oldest

votes


















1














Try change attributes of android:id="@+id/ivLearn"



from



app:layout_constraintStart_toStartOf="@+id/ivGuide"

app:layout_constraintEnd_toEndOf="@+id/ivGuide"


to



app:layout_constraintStart_toStartOf="parent"

app:layout_constraintEnd_toEndOf="parent"





share|improve this answer



















  • 1





    That didn't quite work. It made one huge icon at the bottom and 4 small ones above it. I need the image views to all be the same size.

    – Philip Stephens
    Nov 19 '18 at 7:51






  • 1





    can you set explicit dimensions for ivLearn? for example, instead android:layout_width="0dp" and android:layout_height="0dp set 150dp size

    – igor_rb
    Nov 19 '18 at 7:56













  • If I did that then the images wouldn't automatically adjust for different screen sizes. Perhaps there is a way to use guidelines to achieve the result.

    – Philip Stephens
    Nov 19 '18 at 8:06











  • I got it to work by setting a vertical guideline to 25% and another one to 67% and set constraints based on these guidelines. Is there a better way of doing this?

    – Philip Stephens
    Nov 19 '18 at 8:23



















0














I haven't tried it yet but the recycler view looks like the best and most flexible answer from the android team. I used vertical guidelines using percentages and I need to test it on different screen sizes which seems to work at least on one screen size. I will have to convert the Java code to Kotlin which I am learning as well.



Thanks.






share|improve this answer























    Your Answer






    StackExchange.ifUsing("editor", function () {
    StackExchange.using("externalEditor", function () {
    StackExchange.using("snippets", function () {
    StackExchange.snippets.init();
    });
    });
    }, "code-snippets");

    StackExchange.ready(function() {
    var channelOptions = {
    tags: "".split(" "),
    id: "1"
    };
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function() {
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled) {
    StackExchange.using("snippets", function() {
    createEditor();
    });
    }
    else {
    createEditor();
    }
    });

    function createEditor() {
    StackExchange.prepareEditor({
    heartbeatType: 'answer',
    autoActivateHeartbeat: false,
    convertImagesToLinks: true,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: 10,
    bindNavPrevention: true,
    postfix: "",
    imageUploader: {
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    },
    onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    });


    }
    });














    draft saved

    draft discarded


















    StackExchange.ready(
    function () {
    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53370213%2fhow-to-center-imageview-in-third-row-using-constraint-layout%23new-answer', 'question_page');
    }
    );

    Post as a guest















    Required, but never shown

























    2 Answers
    2






    active

    oldest

    votes








    2 Answers
    2






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes









    1














    Try change attributes of android:id="@+id/ivLearn"



    from



    app:layout_constraintStart_toStartOf="@+id/ivGuide"
    
app:layout_constraintEnd_toEndOf="@+id/ivGuide"


    to



    app:layout_constraintStart_toStartOf="parent"
    
app:layout_constraintEnd_toEndOf="parent"





    share|improve this answer



















    • 1





      That didn't quite work. It made one huge icon at the bottom and 4 small ones above it. I need the image views to all be the same size.

      – Philip Stephens
      Nov 19 '18 at 7:51






    • 1





      can you set explicit dimensions for ivLearn? for example, instead android:layout_width="0dp" and android:layout_height="0dp set 150dp size

      – igor_rb
      Nov 19 '18 at 7:56













    • If I did that then the images wouldn't automatically adjust for different screen sizes. Perhaps there is a way to use guidelines to achieve the result.

      – Philip Stephens
      Nov 19 '18 at 8:06











    • I got it to work by setting a vertical guideline to 25% and another one to 67% and set constraints based on these guidelines. Is there a better way of doing this?

      – Philip Stephens
      Nov 19 '18 at 8:23
















    1














    Try change attributes of android:id="@+id/ivLearn"



    from



    app:layout_constraintStart_toStartOf="@+id/ivGuide"
    
app:layout_constraintEnd_toEndOf="@+id/ivGuide"


    to



    app:layout_constraintStart_toStartOf="parent"
    
app:layout_constraintEnd_toEndOf="parent"





    share|improve this answer



















    • 1





      That didn't quite work. It made one huge icon at the bottom and 4 small ones above it. I need the image views to all be the same size.

      – Philip Stephens
      Nov 19 '18 at 7:51






    • 1





      can you set explicit dimensions for ivLearn? for example, instead android:layout_width="0dp" and android:layout_height="0dp set 150dp size

      – igor_rb
      Nov 19 '18 at 7:56













    • If I did that then the images wouldn't automatically adjust for different screen sizes. Perhaps there is a way to use guidelines to achieve the result.

      – Philip Stephens
      Nov 19 '18 at 8:06











    • I got it to work by setting a vertical guideline to 25% and another one to 67% and set constraints based on these guidelines. Is there a better way of doing this?

      – Philip Stephens
      Nov 19 '18 at 8:23














    1












    1








    1







    Try change attributes of android:id="@+id/ivLearn"



    from



    app:layout_constraintStart_toStartOf="@+id/ivGuide"
    
app:layout_constraintEnd_toEndOf="@+id/ivGuide"


    to



    app:layout_constraintStart_toStartOf="parent"
    
app:layout_constraintEnd_toEndOf="parent"





    share|improve this answer













    Try change attributes of android:id="@+id/ivLearn"



    from



    app:layout_constraintStart_toStartOf="@+id/ivGuide"
    
app:layout_constraintEnd_toEndOf="@+id/ivGuide"


    to



    app:layout_constraintStart_toStartOf="parent"
    
app:layout_constraintEnd_toEndOf="parent"






    share|improve this answer












    share|improve this answer



    share|improve this answer










    answered Nov 19 '18 at 7:45









    igor_rbigor_rb

    903624




    903624








    • 1





      That didn't quite work. It made one huge icon at the bottom and 4 small ones above it. I need the image views to all be the same size.

      – Philip Stephens
      Nov 19 '18 at 7:51






    • 1





      can you set explicit dimensions for ivLearn? for example, instead android:layout_width="0dp" and android:layout_height="0dp set 150dp size

      – igor_rb
      Nov 19 '18 at 7:56













    • If I did that then the images wouldn't automatically adjust for different screen sizes. Perhaps there is a way to use guidelines to achieve the result.

      – Philip Stephens
      Nov 19 '18 at 8:06











    • I got it to work by setting a vertical guideline to 25% and another one to 67% and set constraints based on these guidelines. Is there a better way of doing this?

      – Philip Stephens
      Nov 19 '18 at 8:23














    • 1





      That didn't quite work. It made one huge icon at the bottom and 4 small ones above it. I need the image views to all be the same size.

      – Philip Stephens
      Nov 19 '18 at 7:51






    • 1





      can you set explicit dimensions for ivLearn? for example, instead android:layout_width="0dp" and android:layout_height="0dp set 150dp size

      – igor_rb
      Nov 19 '18 at 7:56













    • If I did that then the images wouldn't automatically adjust for different screen sizes. Perhaps there is a way to use guidelines to achieve the result.

      – Philip Stephens
      Nov 19 '18 at 8:06











    • I got it to work by setting a vertical guideline to 25% and another one to 67% and set constraints based on these guidelines. Is there a better way of doing this?

      – Philip Stephens
      Nov 19 '18 at 8:23








    1




    1





    That didn't quite work. It made one huge icon at the bottom and 4 small ones above it. I need the image views to all be the same size.

    – Philip Stephens
    Nov 19 '18 at 7:51





    That didn't quite work. It made one huge icon at the bottom and 4 small ones above it. I need the image views to all be the same size.

    – Philip Stephens
    Nov 19 '18 at 7:51




    1




    1





    can you set explicit dimensions for ivLearn? for example, instead android:layout_width="0dp" and android:layout_height="0dp set 150dp size

    – igor_rb
    Nov 19 '18 at 7:56







    can you set explicit dimensions for ivLearn? for example, instead android:layout_width="0dp" and android:layout_height="0dp set 150dp size

    – igor_rb
    Nov 19 '18 at 7:56















    If I did that then the images wouldn't automatically adjust for different screen sizes. Perhaps there is a way to use guidelines to achieve the result.

    – Philip Stephens
    Nov 19 '18 at 8:06





    If I did that then the images wouldn't automatically adjust for different screen sizes. Perhaps there is a way to use guidelines to achieve the result.

    – Philip Stephens
    Nov 19 '18 at 8:06













    I got it to work by setting a vertical guideline to 25% and another one to 67% and set constraints based on these guidelines. Is there a better way of doing this?

    – Philip Stephens
    Nov 19 '18 at 8:23





    I got it to work by setting a vertical guideline to 25% and another one to 67% and set constraints based on these guidelines. Is there a better way of doing this?

    – Philip Stephens
    Nov 19 '18 at 8:23













    0














    I haven't tried it yet but the recycler view looks like the best and most flexible answer from the android team. I used vertical guidelines using percentages and I need to test it on different screen sizes which seems to work at least on one screen size. I will have to convert the Java code to Kotlin which I am learning as well.



    Thanks.






    share|improve this answer




























      0














      I haven't tried it yet but the recycler view looks like the best and most flexible answer from the android team. I used vertical guidelines using percentages and I need to test it on different screen sizes which seems to work at least on one screen size. I will have to convert the Java code to Kotlin which I am learning as well.



      Thanks.






      share|improve this answer


























        0












        0








        0







        I haven't tried it yet but the recycler view looks like the best and most flexible answer from the android team. I used vertical guidelines using percentages and I need to test it on different screen sizes which seems to work at least on one screen size. I will have to convert the Java code to Kotlin which I am learning as well.



        Thanks.






        share|improve this answer













        I haven't tried it yet but the recycler view looks like the best and most flexible answer from the android team. I used vertical guidelines using percentages and I need to test it on different screen sizes which seems to work at least on one screen size. I will have to convert the Java code to Kotlin which I am learning as well.



        Thanks.







        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Nov 19 '18 at 8:38









        Philip StephensPhilip Stephens

        1015




        1015






























            draft saved

            draft discarded




















































            Thanks for contributing an answer to Stack Overflow!


            • Please be sure to answer the question. Provide details and share your research!

            But avoid …



            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.


            To learn more, see our tips on writing great answers.




            draft saved


            draft discarded














            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53370213%2fhow-to-center-imageview-in-third-row-using-constraint-layout%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown





















































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown

































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown







            -

            Popular posts from this blog

            How to pass form data using jquery Ajax to insert data in database?

            Image
            .everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box; } 1 I have 4 tables namely stud, country_master_academic,master_state and master_city. The main problem is that my form consists of many different fields like textbox, radio buttons, dropdown and an image file, so i am getting really confused. I can't insert data in database. Please help me. I tried many times but its not working. Thanks for the help in advance. Modal in home.php page <div class="container"> <div class="modal fade" id="add_data_modal" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> ...
            Read more

            National Museum of Racing and Hall of Fame

            Image
            Coordinates: 43°04′35″N 73°46′24″W  /  43.0763°N 73.7734°W  / 43.0763; -73.7734 Professional sports hall of fame in Saratoga Springs, New York National Museum of Racing and Hall of Fame National Museum of Racing and Hall of Fame Established 1951 Location Saratoga Springs, New York Type Professional sports hall of fame Director Cathy Marino Curator Victoria Tokarowski Website racingmuseum.org The National Museum of Racing and Hall of Fame was founded in 1951 in Saratoga Springs, New York, to honor the achievements of American Thoroughbred race horses, jockeys, and trainers. In 1955, the museum moved to its current location on Union Avenue near Saratoga race course, at which time inductions into the hall of fame began. Each spring, following the tabulation of the final votes, the announcement of new inductees is made, usually during Kentucky Derby Week in early May. The actual inductions are held in mid-August during the Saratoga race meeting...
            Read more

            Guess what letter conforming each word

            Image
            6 $begingroup$ This is an entry in the Fortnightly Topic Challenge #41: Short and Sweet. 1 letter only could be mean anything . With an additional letter in front , could be used as medicine component and something you definitely learn or at least heard once. Add another letter in front , you would possibly hear that many times . Add an additional letter in front , you would found an independent country . With an additional letter, in the end , you would found something related to apple . Add another letter in the end , you would found something bad . Hint: Each letter is unique . word knowledge letters chemistry share | improve this question ...
            Read more