CODEWITHSUNDEEP
androidandroid-layoutandroid-fragmentsandroid-imageview
user1341300
user1341300

Reputation: 375

Android, fit an image and textview into the screen

I added a fragment with an ImageView, which is a PNG image, and a TextView just below it. The fragment is showing fine but when I rotate the screen the image will take most of the screen and the TextView is partially cut. Here's the code:

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

<ImageView
    android:id="@+id/shopping_cart"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:src="@drawable/shopping_cart" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:layout_below="@id/shopping_cart"
    android:text="@string/no_data"
    android:gravity="center"/>


</RelativeLayout>

I'm trying to find a way to resize the image in order to show both image and text in the screen

Upvotes: 0

Views: 283

Answers (4)

Varini Ramesh
Varini Ramesh

Reputation: 251

Here is the code: 

<?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"
android:gravity="center">

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/shopping_text"
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true"
    android:text="@string/no_data"/>

<ImageView
    android:id="@+id/shopping_cart"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_above="@id/shopping_text"
    android:src="@drawable/shopping_cart"/>


</RelativeLayout>

Upvotes: 0

vibhor_shri
vibhor_shri

Reputation: 374

Alright, so firstly ensure that you have the image for the ImageView in all densities. I would suggest that you use this attribute in your ImageView code:

https://developer.android.com/reference/android/widget/ImageView.ScaleType.html

The scale type defines how your image should scale according to the view. I faced a similar issue once, and i was able to solve it using this. Having said that, i have not seen the image you are using, so i cannot be very sure of it. But, i would say that you use:

android:scaleType="centerCrop"

you can find the definition of the attribute on the link provided above. Also, i do not know what devices you are targeting for your app, but its always good to keep views inside a scroll view so that they are visible even on a smaller screen.

Give it a try, if not by centerCrop, then maybe by some other attribute.

Cheers!!

Upvotes: 0

Parveen Prajapati
Parveen Prajapati

Reputation: 83

<ScrollView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">


<LinearLayout
    android:id="@+id/text_image_container"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical">

(Enter view here)

</LinearLayout>

Upvotes: 0

niranjan_b
niranjan_b

Reputation: 142

try using a scroll-view as the root element if u want to retain the same image size rather than resizing the image. Here's a small snippet - 

<ScrollView
    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"
    android:fillViewport="true">


<RelativeLayout
    android:id="@+id/container"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical">

(all your view elements)

</RelativeLayout>

Upvotes: 1

Related Questions