How to position ImageView without taking the entire screen?

Question

I am trying to code one of my first android apps. I am trying to position a text below an image, but the image takes up most of the screen and one of the textviews which are supposed to be below it are not displayed. I am using a RelativeLayout.

Here is my code snippet.

<RelativeLayout
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.jsk.myapp.MainActivity">

<TextView
    android:id="@+id/t1"
    android:layout_width="wrap_content"
    android:text="My App"
    android:layout_centerHorizontal="true"
    android:textSize="30sp"
    android:layout_alignParentTop="true"
    android:layout_height="wrap_content" />

<ImageView
    android:scaleType="centerCrop"
    android:id="@+id/img"
    android:layout_below="@id/t1"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:src="@drawable/i1"
    />
<TextView
    android:id="@+id/t2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@id/img"
    android:textSize="24sp"
    android:text="Description"/>

</RelativeLayout>

I have also tried changing the scale type of the imageview, but it doesn't work. Only when I explicitly specify the width and height parameters of the image, the text is visible below the image.

What changes can I make in this code to get the desired output ?

score 1 · Answer 1 · answered Feb 12 '17 at 05:27

If you add a rough diagram of what you want to achieve your question can be answered better. From my understanding, and by looking at your code it seems you are trying to add 2 TextView's at the top and bottom (one each) and then an ImageViewsandwiched in between.

First, add the 2 TextView's. Set the one as android:layout_alignParentTop = true and android:layout_alignParentBottom = true. Then add the ImageView. In the ImageView, you can set android:layout_height = "wrap_content" and then android:layout_below=<id of the top text view> as well as android:layout_above = <id of the bottom text view>.

So something like this:

<RelativeLayout
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.jsk.myapp.MainActivity">

    <TextView
        android:id="@+id/t1"
        android:layout_width="wrap_content"
        android:text="My App"
        android:layout_centerHorizontal="true"
        android:textSize="30sp"
        android:layout_alignParentTop="true"
        android:layout_height="wrap_content" />

   <TextView
        android:id="@+id/t2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:textSize="24sp"
        android:text="Description"/>`

    <ImageView
        android:scaleType="centerCrop"
        android:id="@+id/img"
        android:layout_below="@id/t1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:src="@drawable/i1"
        android:layout_above="@id/t2"
        />

</RelativeLayout>

score 0 · Answer 2 · answered Feb 12 '17 at 05:01

If you're using wrap_content for your ImageView's height and if your ImageView's actual image is large enough then it will surely take up entire space.

In that case, you'll have to explicitly mention exact height of the View, so that text below is show up.

What you want to do to fix this situation is to change actual height of the image itself. If you do that, image will fit itself entirely but takes less height and then text should show up.

So you have two options, 1) Either fix your image height in your layout, OR 2) Fix actual image height so that it's more appropriate in your usecase

I hope this answers your question.

score 0 · Answer 3 · edited May 23 '17 at 12:24

You need to assign a size for ImageView based on screen size

Use PercentRelativeLayout

My compileSdkVersion is 24 so I use compile 'com.android.support:percent:24.0.0' inside my app:gradle dependencies

example :

<android.support.percent.PercentRelativeLayout
    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">

    <TextView
        android:id="@+id/t1"
        android:layout_width="wrap_content"
        android:text="My App"
        android:layout_centerHorizontal="true"
        android:textSize="30sp"
        android:layout_alignParentTop="true"
        android:layout_height="wrap_content" />

    <ImageView
        android:scaleType="centerCrop"
        android:id="@+id/img"
        android:layout_below="@id/t1"
        android:layout_width="match_parent"
        app:layout_heightPercent="50%" <---------- here its taking 50% of screen height
        android:src="@drawable/myImageName"
        />
    <TextView
        android:id="@+id/t2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/img"
        android:textSize="24sp"
        android:text="Description"/>

</android.support.percent.PercentRelativeLayout>

If you use LinearLayout go for layout_weight attribute

@Backspace did you try this? – Charuක Feb 16 '17 at 02:28 — Charuක, Feb 16 '17 at 02:28

score 0 · Answer 4 · answered Feb 12 '17 at 05:34

make t2 alignParentBottom true and let img view layout_above t2

<RelativeLayout
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.jsk.myapp.MainActivity">

<TextView
    android:id="@+id/t1"
    android:layout_width="wrap_content"
    android:text="My App"
    android:layout_centerHorizontal="true"
    android:textSize="30sp"
    android:layout_alignParentTop="true"
    android:layout_height="wrap_content" />

<ImageView
    android:scaleType="centerCrop"
    android:id="@+id/img"
    android:layout_below="@id/t1"
    android:layout_above="@+id/t2"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:src="@drawable/i1"
/>
<TextView
    android:id="@id/t2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:textSize="24sp"
    android:text="Description"/>

</RelativeLayout>

How to position ImageView without taking the entire screen?

4 Answers4

Use PercentRelativeLayout