Problems with ConstraintLayout - ImageView 16:9 inappropriate top margin

Problems with ConstraintLayout - ImageView 16:9 inappropriate top margin - android

I want to build the following layout using ConstraintLayout:
I use this source for layout:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#color/colorAccent">
<ImageView
android:id="#+id/imageView"
android:layout_width="0dp"
android:layout_height="0dp"
android:scaleType="centerCrop"
app:srcCompat="#android:color/darker_gray"
app:layout_constraintDimensionRatio="h,16:9"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toTopOf="#+id/textView1" />
<TextView
android:id="#+id/textView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:text="Title"
android:textAppearance="#style/TextAppearance.AppCompat.Headline"
app:layout_constraintTop_toBottomOf="#+id/imageView"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toTopOf="#+id/textView2" />
<TextView
android:id="#+id/textView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginBottom="24dp"
android:text="Subtle"
app:layout_constraintTop_toBottomOf="#+id/textView1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent" />
</android.support.constraint.ConstraintLayout>
</FrameLayout>
And unfortunately get this result:
As you can see there's an unnecessary margin on the top of ImageView, though layout indicates marginTop=0.

I need to get rid of this top margin
For this,just Remove this line
app:layout_constraintBottom_toTopOf="#+id/textView1"
from your ImageView

The first two answer will work. You can also add app:layout_constraintVertical_chainStyle="spread_inside" to the top ImageView if you want to maintain your vertical chain.
Here is an image after adding this statement (but not changing anything else.)
Here is the XML:
<FrameLayout 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">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#color/colorAccent">
<ImageView
android:id="#+id/imageView"
android:layout_width="0dp"
android:layout_height="0dp"
android:scaleType="centerCrop"
app:srcCompat="#android:color/darker_gray"
app:layout_constraintDimensionRatio="h,16:9"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintVertical_chainStyle="spread_inside"
app:layout_constraintBottom_toTopOf="#+id/textView1" />
<TextView
android:id="#+id/textView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:text="Title"
android:textAppearance="#style/TextAppearance.AppCompat.Headline"
app:layout_constraintTop_toBottomOf="#+id/imageView"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toTopOf="#+id/textView2" />
<TextView
android:id="#+id/textView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginBottom="24dp"
android:text="Subtle"
app:layout_constraintTop_toBottomOf="#+id/textView1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent" />
</android.support.constraint.ConstraintLayout>
</FrameLayout>
Update: So the above doesn't work on API 23 with ConstraintLayout version 1.0.2. Try the following instead:
Remove android:layout_marginTop="16dp" from textView2 and add android:layout_marginBottom="16dp" to textView1. This makes a difference.

The gist of it is to use a packed chain, with a vertical bias of 0, so that the content of the chain will be at the top. Also, I'm not sure why you are using a FrameLayout -- you probably don't need to.
With 1.1.0-beta2:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorAccent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<ImageView
android:id="#+id/imageView"
android:layout_width="0dp"
android:layout_height="0dp"
android:scaleType="centerCrop"
app:layout_constraintBottom_toTopOf="#+id/textView1"
app:layout_constraintDimensionRatio="h,16:9"
app:layout_constraintVertical_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="packed"
app:srcCompat="#android:color/darker_gray" />
<TextView
android:id="#+id/textView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:text="Title"
android:textAppearance="#style/TextAppearance.AppCompat.Headline"
app:layout_constraintTop_toBottomOf="#+id/imageView"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toTopOf="#+id/textView2" />
<TextView
android:id="#+id/textView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginBottom="24dp"
android:text="Subtle"
app:layout_constraintTop_toBottomOf="#+id/textView1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent" />
</android.support.constraint.ConstraintLayout>

Try this one -> I removed app:layout_constraintBottom_toTopOf="#+id/textView1" in the ImageView and it works fine.
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#color/colorAccent">
<ImageView
android:id="#+id/imageView"
android:layout_width="0dp"
android:layout_height="0dp"
android:scaleType="centerCrop"
app:srcCompat="#android:color/darker_gray"
app:layout_constraintDimensionRatio="h,16:9"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent" />
<TextView
android:id="#+id/textView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:text="Title"
android:textAppearance="#style/TextAppearance.AppCompat.Headline"
app:layout_constraintTop_toBottomOf="#+id/imageView"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toTopOf="#+id/textView2" />
<TextView
android:id="#+id/textView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginBottom="24dp"
android:text="Subtle"
app:layout_constraintTop_toBottomOf="#+id/textView1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent" />
</android.support.constraint.ConstraintLayout>
</FrameLayout>

Based on answers and comments posted in reply to this question and considering the fact constraint-layout v1.1.0 is still in beta, the best solution at this moment would be to use app:layout_constraintVertical_chainStyle="packed":
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imageView"
android:layout_width="0dp"
android:layout_height="0dp"
android:scaleType="centerCrop"
app:srcCompat="#android:color/darker_gray"
app:layout_constraintDimensionRatio="h,16:9"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toTopOf="#+id/textView1"
app:layout_constraintVertical_chainStyle="packed"/>
<TextView
android:id="#+id/textView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:text="Title"
android:textAppearance="#style/TextAppearance.AppCompat.Headline"
app:layout_constraintTop_toBottomOf="#+id/imageView"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toTopOf="#+id/textView2" />
<TextView
android:id="#+id/textView2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginBottom="24dp"
android:text="Subtle"
app:layout_constraintTop_toBottomOf="#+id/textView1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent" />
</android.support.constraint.ConstraintLayout>
</FrameLayout>

Related

I would like to know if my approach of creating this UI is improper

I would like to create the UI as seen in this picture. My approach involves using multiple card views. I am uncertain as to if this is the right way to go about doing this. This method seems a bit laborious, and repetitive, secondly I am not sure if this will cause any problems in the future such as memory problem etc. For the experienced developers please enlighten me.
<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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="fill_parent"
android:layout_height="wrap_content">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".Controller.RegisterActivity">
<androidx.appcompat.widget.Toolbar
android:id="#+id/messageToolBar"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:theme="?attr/actionBarTheme"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:id="#+id/backArrow"
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_gravity="left"
android:background="#drawable/ic_arrow_back_black_24dp"
tools:layout_editor_absoluteX="16dp"
tools:layout_editor_absoluteY="15dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="30dp"
android:textSize="16sp"
android:text="Profile"
android:textColor="#424242" />
</androidx.appcompat.widget.Toolbar>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/userInfoConstraint"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="20dp"
android:layout_marginEnd="20dp"
app:layout_constraintDimensionRatio="6:4"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/messageToolBar">
<androidx.cardview.widget.CardView
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/profileImageView"
android:layout_width="90dp"
android:layout_height="90dp"
android:layout_marginTop="36dp"
app:civ_border_color="#FFFFFF"
app:civ_border_width="2dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.498"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/nameTv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:text="Name"
android:textColor="#424242"
android:textSize="#dimen/album_title"
app:layout_constraintEnd_toEndOf="#+id/profileImageView"
app:layout_constraintStart_toStartOf="#+id/profileImageView"
app:layout_constraintTop_toBottomOf="#+id/profileImageView" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:text="Yale"
android:textSize="#dimen/songs_count"
app:layout_constraintEnd_toEndOf="#+id/nameTv"
app:layout_constraintStart_toStartOf="#+id/nameTv"
app:layout_constraintTop_toBottomOf="#+id/nameTv" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/constraintLayout"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="10dp"
app:layout_constraintDimensionRatio="4:1"
app:layout_constraintEnd_toEndOf="#+id/userInfoConstraint"
app:layout_constraintStart_toStartOf="#+id/userInfoConstraint"
app:layout_constraintTop_toBottomOf="#+id/userInfoConstraint">
<androidx.cardview.widget.CardView
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="Empl ID"
android:textColor="#424242"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.051"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView7"
android:layout_width="64dp"
android:layout_height="16dp"
android:layout_marginTop="10dp"
android:text="2335795"
app:layout_constraintEnd_toEndOf="#+id/textView6"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="#+id/textView6"
app:layout_constraintTop_toBottomOf="#+id/textView6" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="10dp"
app:layout_constraintDimensionRatio="6:4"
app:layout_constraintEnd_toEndOf="#+id/constraintLayout"
app:layout_constraintStart_toStartOf="#+id/constraintLayout"
app:layout_constraintTop_toBottomOf="#+id/constraintLayout">
<androidx.cardview.widget.CardView
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/textView8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="Contact"
android:textColor="#424242"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.05"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/emailTv"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
app:layout_constraintEnd_toStartOf="#+id/imageView2"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="#+id/textView8"
app:layout_constraintTop_toBottomOf="#+id/textView8" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_marginEnd="24dp"
app:layout_constraintBottom_toBottomOf="#+id/emailTv"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#+id/emailTv"
app:layout_constraintVertical_bias="0.0"
app:srcCompat="#drawable/pencil" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:text="333-333-1121"
app:layout_constraintEnd_toStartOf="#+id/imageView3"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="#+id/emailTv"
app:layout_constraintTop_toBottomOf="#+id/emailTv" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_marginEnd="24dp"
app:layout_constraintBottom_toBottomOf="#+id/textView3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#+id/textView3"
app:layout_constraintVertical_bias="0.0"
app:srcCompat="#drawable/pencil" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>

You can simple set background for your ConstraintLayout so you don't need to create CardView within ConstraintLayout
If you want shadow in you ConstraintLayout use, To show shadow in ConstraintLayout you must add background to it, simply set #FFFFFF and use this
android:elevation="4dp"
Or you can create a custom background to have round corners and custom background colors
Hope this will help

ScrollView doesn't display whole content of ConstraintLayout

I have the following xml layout:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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=".ui.movie_detail.MovieDetailActivity">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageButton
android:id="#+id/btn_back"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:src="#drawable/ic_back"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:ignore="ContentDescription" />
<TextView
android:id="#+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:textColor="#FFFFFF"
android:textSize="24sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="#id/btn_back"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.appcompat.widget.Toolbar>
<androidx.swiperefreshlayout.widget.SwipeRefreshLayout
android:id="#+id/swipe_refresh"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/toolbar">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
android:padding="16dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/movie_image"
android:layout_width="match_parent"
android:layout_height="300dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:ignore="ContentDescription" />
<TextView
android:id="#+id/tv_description"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="40dp"
android:layout_marginEnd="16dp"
android:layout_marginBottom="16dp"
android:textAlignment="center"
android:textColor="#000000"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/movie_image" />
<TextView
android:id="#+id/tv_country"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="40dp"
android:layout_marginEnd="16dp"
android:layout_marginBottom="16dp"
android:textAlignment="center"
android:textColor="#000000"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/tv_description" />
<TextView
android:id="#+id/tv_runtime"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="40dp"
android:layout_marginEnd="16dp"
android:layout_marginBottom="16dp"
android:textAlignment="center"
android:textColor="#000000"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/tv_country" />
<TextView
android:id="#+id/tv_released"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="40dp"
android:layout_marginEnd="16dp"
android:layout_marginBottom="16dp"
android:textAlignment="center"
android:textColor="#000000"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/tv_runtime" />
<TextView
android:id="#+id/tv_tagline"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="40dp"
android:layout_marginEnd="16dp"
android:layout_marginBottom="16dp"
android:textAlignment="center"
android:textColor="#000000"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/tv_released" />
<TextView
android:id="#+id/tv_year"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="40dp"
android:layout_marginEnd="16dp"
android:layout_marginBottom="16dp"
android:textAlignment="center"
android:textColor="#000000"
android:text="aaaaaaaa"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/tv_tagline" />
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
</androidx.swiperefreshlayout.widget.SwipeRefreshLayout>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/btn_favorite"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="32dp"
android:layout_marginBottom="32dp"
android:src="#drawable/ic_favorite"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
<TextView
android:id="#+id/tv_no_info"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/no_information"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
I added such a big marginTop to all views just to test how scrollview works. And when I open the activity I see this:
So, as you see, there's no year textview in this screen. I specially added default text to display that this problem exists. I watched on the previous questions related to this problem and usually the solution was to add paddings or margins to scrollview. As you can see, I did it and it didn't help. So, what's the problem and how can it be solved?

The bottom margin you have assigned to tv_year will not work until you assign related constraint with it.
So add below attribute in tv_year textview to apply bottom margin too.
app:layout_constraintBottom_toBottomOf="parent"
so your final tv_year view looks like,
<TextView
android:id="#+id/tv_year"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="40dp"
android:layout_marginEnd="16dp"
android:layout_marginBottom="16dp"
android:textAlignment="center"
android:textColor="#000000"
android:text="aaaaaaaa"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/tv_tagline" />
Update:
You have also forget one attribute on SwipeRefreshLayout.
Add below attribute with it.
app:layout_constraintBottom_toBottomOf="parent"
FYI: Also add android:clipToPadding="false" attribute with ScrollView. It'll looks better.

Constraint Layout is causing views to overlap

I'm trying to create a view in Android using ConstraintLayout but I'm having a lot of issues with views overlapping or being pushed off of the screen. I think a lot of it might be because I'm so used to iOS constraints and I'm thinking in terms of them. Here is my code:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context=".LocationFragment">
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical"
android:id="#+id/guideHorz125"
app:layout_constraintGuide_percent="0.125"/>
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical"
android:id="#+id/guideHorz875"
app:layout_constraintGuide_percent="0.875"/>
<TextView style="#style/Label"
android:id="#+id/currentSelectionLabel"
android:layout_marginBottom="21dp"
android:layout_marginLeft="16dp"
android:layout_marginTop="11dp"
android:text="#string/current_selection"
app:layout_constraintBottom_toTopOf="#id/locationLabel"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<TextView style="#style/Label"
android:id="#+id/locationLabel"
android:layout_marginLeft="41dp"
android:text="#string/none"
app:layout_constraintBottom_toTopOf="#id/mapView"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="#id/currentSelectionLabel"/>
<com.google.android.gms.maps.MapView
android:id="#+id/mapView"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="20dp"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_marginTop="20dp"
app:layout_constraintBottom_toTopOf="#id/previousButton"
app:layout_constraintDimensionRatio="16:9"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/locationLabel"/>
<Button style="#style/RoundedButton"
android:id="#+id/previousButton"
android:text="#string/previous"
app:layout_constraintBottom_toTopOf="#id/newButton"
app:layout_constraintLeft_toLeftOf="#id/guideHorz125"
app:layout_constraintRight_toRightOf="#id/guideHorz875"
app:layout_constraintTop_toBottomOf="#id/mapView"/>
<Button style="#style/RoundedButton"
android:id="#+id/newButton"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp"
android:text="#string/new_location"
app:layout_constraintBottom_toTopOf="#id/resetButton"
app:layout_constraintLeft_toLeftOf="#id/previousButton"
app:layout_constraintRight_toRightOf="#id/previousButton"
app:layout_constraintTop_toBottomOf="#id/previousButton"/>
<Button style="#style/RoundedButton"
android:id="#+id/resetButton"
android:text="#string/reset"
app:layout_constraintBottom_toTopOf="#id/startButton"
app:layout_constraintLeft_toLeftOf="#id/previousButton"
app:layout_constraintRight_toRightOf="#id/previousButton"
app:layout_constraintTop_toBottomOf="#id/previousButton"/>
<com.company.ui.ImageButton
android:id="#+id/startButton"
android:layout_width="240dp"
android:layout_height="90dp"
android:layout_marginTop="16dp"
android:layout_marginBottom="11dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:src="#drawable/start"
app:text="#string/get_started"/>
</android.support.constraint.ConstraintLayout>
The first image is what I'd like to see, and the second is what I'm getting.

Try changing
<Button style="#style/RoundedButton"
android:id="#+id/resetButton"
android:text="#string/reset"
app:layout_constraintBottom_toTopOf="#id/startButton"
app:layout_constraintLeft_toLeftOf="#id/previousButton"
app:layout_constraintRight_toRightOf="#id/previousButton"
app:layout_constraintTop_toBottomOf="#id/previousButton"/>
To
<Button style="#style/RoundedButton"
android:id="#+id/resetButton"
android:text="#string/reset"
app:layout_constraintBottom_toTopOf="#id/startButton"
app:layout_constraintLeft_toLeftOf="#id/previousButton"
app:layout_constraintRight_toRightOf="#id/previousButton"
app:layout_constraintTop_toBottomOf="#id/newButton"/>

Use below 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">
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:layout_marginTop="4dp"
android:text="Current Selection"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:text="None"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.184"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView3" />
<com.google.android.gms.maps.MapView
android:id="#+id/mapView"
android:layout_width="311dp"
android:layout_height="114dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView4" />
<Button
android:id="#+id/button54"
android:layout_width="296dp"
android:layout_height="36dp"
android:layout_marginTop="52dp"
android:text="Button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/mapView" />
<Button
android:id="#+id/button55"
android:layout_width="296dp"
android:layout_height="36dp"
android:layout_marginTop="96dp"
android:text="Button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/mapView" />
<Button
android:id="#+id/button56"
android:layout_width="296dp"
android:layout_height="36dp"
android:layout_marginTop="8dp"
android:text="Button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/mapView" />
<ImageButton
android:id="#+id/imageButton"
android:layout_width="293dp"
android:layout_height="116dp"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/button55"
app:layout_constraintVertical_bias="0.529"
app:srcCompat="#drawable/googleg_disabled_color_18" />
</android.support.constraint.ConstraintLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.constraint.ConstraintLayout>

ConstraintLayout not wrapping content nor matching parent

Below you can see my XML code where I have a ConstraintLayout in a ScrollView. The ConstraintLayout does not wrapping content and i cant find the problem. It actually "hides" some of my views - in this case a button.
When I try to change the height attribute in the ConstraintLayout nothing happens so i feel its something else that i cant find.
Thank you
<ScrollView 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"
android:background="#546E7A"
tools:context="com.example.android.business_card.MainActivity">
<android.support.constraint.ConstraintLayout
android:id="#+id/mainConst"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imageView"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/logotop" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="0dp"
android:layout_height="match_parent"
android:adjustViewBounds="true"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView"
app:srcCompat="#drawable/logo5" />
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_margin="#dimen/spacing2"
android:drawableLeft="#drawable/map2"
android:drawablePadding="#dimen/spacing"
android:text="#string/map"
android:textColor="#android:color/white"
app:layout_constraintEnd_toEndOf="#+id/textView2"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView2" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/spacing2"
android:drawableLeft="#drawable/phone3"
android:drawablePadding="#dimen/spacing"
android:text="#string/phone"
android:textColor="#android:color/white"
app:layout_constraintEnd_toEndOf="#+id/textView3"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView3" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="19dp"
android:layout_margin="#dimen/spacing2"
android:drawableLeft="#drawable/web2"
android:drawablePadding="#dimen/spacing"
android:text="#string/site"
android:textColor="#android:color/white"
app:layout_constraintEnd_toEndOf="#+id/textView4"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView4" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:layout_marginStart="8dp"
android:drawablePadding="#dimen/spacing"
android:paddingBottom="#dimen/spacing2"
android:paddingTop="#dimen/spacing2"
android:text="#string/name"
android:textColor="#android:color/white"
android:textSize="25sp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/imageView2" />
<Button
android:id="#+id/button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="#dimen/spacing"
android:background="#color/butCol"
android:text="#string/sign"
android:textAllCaps="false"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView" />
</android.support.constraint.ConstraintLayout>

Solved - i had to use android:fillViewport="true" in the scrollview attributes.

RecyclerView row layout collapsing

I have a row layout, which is a constraint layout.
However, the layout is collapsing on being displayed, as follows:
here is what it should look like:
I want the first 3 element to be constrained to the left, and the last 2 to be constrained to the right, with any empty space being in the middle.
Here's my XML:
<LinearLayout 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="wrap_content">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/habitEventCommentTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:textSize="18sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="comment" />
<TextView
android:id="#+id/eventTypeTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="#+id/textView"
app:layout_constraintTop_toTopOf="parent"
tools:text="Habit Type" />
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:text="TYPE:"
android:textSize="16sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toEndOf="#+id/habitEventCommentTextView"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.52" />
<TextView
android:id="#+id/dateTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="16dp"
android:layout_marginTop="8dp"
android:text="date"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="date" />
<ImageView
android:id="#+id/habitEventThumbnail"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="16dp"
android:layout_marginTop="8dp"
android:background="#drawable/greyrabbit"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/dateTextView"
app:layout_constraintRight_toLeftOf="#+id/dateTextView"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0" />
</android.support.constraint.ConstraintLayout>
</LinearLayout>

try this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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="wrap_content">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/txtComment"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp"
android:textSize="18sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/txtType"
app:layout_constraintTop_toTopOf="parent"
android:text="comment" />
<TextView
android:id="#+id/txtType"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:text="TYPE:"
android:textSize="16sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="#+id/txtComment"
app:layout_constraintRight_toLeftOf="#id/eventTypeTextView"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/eventTypeTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="16dp"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toLeftOf="#id/habitEventThumbnail"
app:layout_constraintLeft_toRightOf="#+id/txtType"
app:layout_constraintTop_toTopOf="parent"
android:text="Habit Type" />
<ImageView
android:id="#+id/habitEventThumbnail"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="16dp"
android:layout_marginTop="8dp"
android:background="#mipmap/ic_launcher"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toLeftOf="#+id/dateTextView"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/dateTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="16dp"
android:layout_marginTop="8dp"
android:text="date"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="date" />
</android.support.constraint.ConstraintLayout>
</LinearLayout>

use a relative layout with two child linear layout ,one alignparentleft and one alignparent right.

Develop Reference

The Android operating system is a mobile operating system that was developed by Google (GOOGL?) to be primarily used for touchscreen devices, cell phones, and tablets.

Problems with ConstraintLayout - ImageView 16:9 inappropriate top margin - android

I need to get rid of this top margin For this,just Remove this line app:layout_constraintBottom_toTopOf="#+id/textView1" from your ImageView

Related

I would like to know if my approach of creating this UI is improper

ScrollView doesn't display whole content of ConstraintLayout

Constraint Layout is causing views to overlap

ConstraintLayout not wrapping content nor matching parent

RecyclerView row layout collapsing

Categories

Resources