Размещение ImageView под TextView

Question

У меня есть RelativeLayout с TextView и ImageView, который выглядит следующим образом:

Апельсин - это *Цвет фона 1011 * показывает, сколько места находится между началом самого изображения и началом ImageView.Как сделать так, чтобы мое изображение отображалось в верхней части моего ImageView, чтобы заголовок находился непосредственно над изображением без оранжевого цвета между ними?

Это мой макет:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- Recyclerview -->
    <com.sometimestwo.moxie.MultiClickRecyclerView
        android:id="@+id/recycler_zoomie_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <!-- Container for title and image-->
    <RelativeLayout
        android:id="@+id/hover_view_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center|top"
        android:visibility="gone">

      <!-- Title -->
        <TextView
            android:id="@+id/hover_view_title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/colorBgBlackTint"
            android:gravity="center"
            android:textColor="@color/colorWhite"
            android:visibility="visible" />

     <!-- Imageview that holds dog picture -->
        <ImageView
            android:id="@+id/hover_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_below="@id/hover_view_title"
            android:background="@color/colorDarkThemeAccent"
            android:visibility="visible" />
    </RelativeLayout>

</FrameLayout>

Answer 1

Вы можете достичь этого, используя RelativeLayout таким образом:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="13dp"
        android:text="TextView"
        android:textSize="24sp"
        android:textStyle="bold" />

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="216dp"
        android:layout_height="217dp"
        android:layout_below="@+id/textView"
        android:scaleType="fitStart"
        android:adjustViewBounds="true"
        android:layout_centerHorizontal="true"
        android:background="@drawable/ic_launcher_background" />
</RelativeLayout>

вот скриншот моего результата

также, LinearLayout таким образом:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:layout_height="match_parent">

    <TextView
        android:layout_gravity="center"
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="13dp"
        android:text="TextView"
        android:textSize="24sp"
        android:textStyle="bold" />

    <ImageView
        android:layout_gravity="center"
        android:id="@+id/imageView2"
        android:layout_width="216dp"
        android:layout_height="217dp"
        android:background="@drawable/ic_launcher_background" />
</LinearLayout>

Answer 2

Здесь есть несколько вариантов, я бы действительно рекомендовал использовать ConstraintLayout, но это действительно другая проблема. Чтобы ваш макет работал должным образом, я бы предложил добавить scaleType="fit_start". Это изменит изображение так, чтобы оно вписалось в ваш ImageView и выровняло его по верхнему / левому краю (справа в макете RTL). Настройки adjustViewBounds="true", скорее всего, также будут работать, если вам не нужно, чтобы изображение было таким высоким во всех случаях.