0

I have a screen in my app with a large image at the top (filling the width of the screen) and some text and buttons below it in a relative layout.

<RelativeLayout 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:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".WelcomeScreenActivity"
>

<ImageView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:adjustViewBounds="true"
    android:id="@+id/imgFirstScreenImage"
    android:layout_centerHorizontal="true"
    android:src="@drawable/first_screen_image"/>

<TextView
    android:layout_width="200dp"
    android:layout_height="wrap_content"
    android:text="@string/first_screen_text"
    android:textAppearance="?android:attr/textAppearanceLarge"
    android:id="@+id/firstScreenText"
    android:layout_below="@+id/imgFirstScreenImage"
    android:layout_centerHorizontal="true"
    android:gravity="center" />

This is working fine on newer phones, like the Nexus 5 and 5X, but on the Nexus 4 the text is partly off the bottom of the screen.

I want the image to be able to be cropped so that it will only fill a maximum of 50% of the height of the screen so that the other elements will always appear on the screen, but only if the screen size is below a certain size, so what I am looking for is some sort of fallback.

I am using different resolutions of the image in my drawables folders, but that doesn't seem to be enough in this case, it appears that the Nexus 4 is using the xhdpi version anyway. I'm very new to android though, so I could easily be mistaken, or be looking in the wrong direction entirely.

Carasel
  • 2,740
  • 5
  • 32
  • 51
  • I'd look into using a `LinearLayout` with weights - that would allow you to set the weight of each at 1/2 and 1/2 – Cody Caughlan Nov 10 '15 at 16:52
  • Thanks, I've tried that, but I don't want to limit the size of the image on a taller screen to 50%, just on the smaller screens where the image is pushing other elements off the bottom. I've edited the question to include that. – Carasel Nov 10 '15 at 16:53
  • Just get the screen height on pixels and set your imageview size accordingly, consider this: http://stackoverflow.com/questions/29956014/why-should-we-use-xml-layouts – Nanoc Nov 10 '15 at 16:58

1 Answers1

0

It would be more practical if you can define a certain height percentage for your screen.

Like - 70 % for the image and 30 % for the rest. You can achieve this easily with layout_weight and Linear layouts.

But if you keep focusing on your requirement, you can do as follows,

  1. Get the device height programatically.
  2. If device height < certain size, then set the imageView maximum height programatically.

Ex - imageView max height = device height / 2

Otherwise leave it as it is.

This might work.

Heshan Sandeepa
  • 3,388
  • 2
  • 35
  • 45