Search code examples
androidandroid-layoutandroid-relativelayout

Placing an ImageView below a TextView

I have a RelativeLayout with a TextView and an ImageView that looks like this:

enter image description here

The orange is the ImageView's background color to illustrate how much space is between the start of the image itself and the start of the ImageView. How can I make my image display at the top of my ImageView so that the title is directly above the image without the orange in between?

This is my layout:

<?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>
Solution

  • you can achieve that using RelativeLayout in that way:

    <?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>

    here is a screenshot of my result

    enter image description here

    also, by LinearLayout in this way :

    <?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>