Impossible put at the top one image using a constraintlayout in android

Question

I'm trying to put an image header at the top of the constraintlayout but when i run the app in a real device it is wrong and the header is not in the top:

<?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=".MainActivity">

    <ImageView
        android:id="@+id/header"
        android:layout_width="0dp"
        android:layout_height="207dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/ic_header" />
    
</androidx.constraintlayout.widget.ConstraintLayout>

below we can see how looks it in a real device:

There is a space between the action bar and the header. I tried to remove the action bar but also does not work. Thanks in advance.

This is my content of ic_header:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="360dp"
    android:height="180dp"
    android:viewportWidth="360"
    android:viewportHeight="180">
  <path
      android:pathData="M0,0h360v180h-360z"
      android:fillColor="#fbc711"/>
</vector>

try to add `bottomToBottom=parent` and `vertical_bias=0.0`. Also run layout inspector tool to see if there's some padding or margin applied — Pawel, Oct 06 '20 at 17:59
Hi @Pawel i added: app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintVertical_bias="0.0" and there is not changes..-Chirag Kalra my "ic_header" is an xml file. I updated the question. — Freddy Daniel, Oct 06 '20 at 18:06

score 1 · Answer 1 · answered Oct 06 '20 at 18:31

1

I think the issue is with the src drawable and the ImageView both having a fixed height.

Try using android:scaleType="centerCrop" in your ImageView xml, so that the source image expands to cover the empty area.

answered Oct 06 '20 at 18:31

Chirag Kalra

509
2
8
23

Hi Chirag I works being a xml file there is not problem but what happen if this is a png image i could loss information, anyways thanks I thinks that this fix by the moment the problem being a solid color, i can change his height without problems. – Freddy Daniel Oct 06 '20 at 18:38
1

You could use `android:layout_height="wrap_content"` instead of a fixed height to avoid any cropping. – Chirag Kalra Oct 06 '20 at 18:40

Tejas Dhawale · Answer 2 · 2020-10-06T19:10:45.547

1

I tried running your code and found out that given constraints are right but your SVG isn't scaling to the total length for your ImageView. You can see the view bounds below

Solution: You can consider adding this line.

 android:scaleType="fitXY"

The result will be like the following image.

and the alternate solution is you can also use shape drawable if all you need is a solid layout.

And if you drawable isn't a solid color and some complex vector image. try not to resize your image view. keep

android:layout_height="wrap_content"

edited Oct 06 '20 at 19:10

answered Oct 06 '20 at 18:59

Tejas Dhawale

393
1
9

1

Thanks this works using android:scaleType="fitXY" being a solid color there is not problem how it spands. – Freddy Daniel Oct 06 '20 at 19:17
hey! You can try fixing your SVG though. you can try getting its size increased and give it a try. – Tejas Dhawale Oct 06 '20 at 19:35

Impossible put at the top one image using a constraintlayout in android

2 Answers2