1

I have an app that have an activity with 3 imagebutton and a banner ad below. Something like this...

enter image description here

The ImageButton layout sizes are wrap-content, and each source is a png that i've made. Now, when i've tested in a small screen the bottom one is behind the banner ad. I want to scale the ImageButtons dending on the size (mainly the height) of the screen.

Can anyone tell me a correct way to do it?

I have to make small png sources that fits on a small screen and then make more drawables with minimal screen width qualifiers? 320dpi and 480dpi its a really big margin, i will have to make some more folders in between.

Thank you all in advance!!!

user2698033
  • 23
  • 6
  • `ImageButton`s are basically just `ImageView`s, so just do what you'd do for an ImageView. It's not clear exactly the behavior that you want vs. what you have currently. – Ryan M Jan 30 '20 at 00:36
  • What i curently have is 3 imageviews with the size of the png sources (wrap-content for width and height). In that scenario, when the screen is small, the bottom button gets behind of the banner ad. I want the Imageview sellect a smaller source (i will have to create the png) when the screen is too small for all 4 items (3 buttons and banner). – user2698033 Jan 30 '20 at 00:45
  • Should they perhaps just resize rather than needing new sources? – Ryan M Jan 30 '20 at 01:03
  • Thats the thing, if resize its the correct way, how do i do it? Can i get the screen height programmatically? To know when i will have to do it. – user2698033 Jan 30 '20 at 01:05

3 Answers3

1

if you dont domain Constraint Layout, maybe you can try to use a LinearLayout inside your main layout with weight to divide the screen... something like below, it may work:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" 
android:layout_height="match_parent">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:weightSum="4"
    android:padding="10dp">

    <ImageButton
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:src="@drawable/..."/>

    <ImageButton
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:src="@drawable/..."/>

    <ImageButton
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:src="@drawable/..."/>

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:src="@drawable/..."/>


</LinearLayout>
</RelativeLayout>

Just adjust it as you want... Hope this work :)

GusCorreia
  • 75
  • 7
1

You don't need to create separate images, you can use ConstraintLayout and it will manage the sizes for you automatically. I have tested the code below and it seems to work fine. Have a go at it:

your_activity.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <ImageButton
        android:id="@+id/imageButton1"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toTopOf="@id/imageButton2"
        android:background="@color/white"
        android:src="@drawable/image_1"/>

    <ImageButton
        android:id="@+id/imageButton2"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@id/imageButton1"
        app:layout_constraintBottom_toTopOf="@id/imageButton3"
        android:background="@color/white"
        android:src="@drawable/image_2"/>

    <ImageButton
        android:id="@+id/imageButton3"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@id/imageButton2"
        app:layout_constraintBottom_toTopOf="@id/bannerContainer"
        android:background="@color/white"
        android:src="@drawable/image_3"/>

    <!-- Whatever container your banner is in -->
    <RelativeLayout
        android:id="@+id/bannerContainer"
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:background="#000"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

Note: I have added the background colors just to test out. The main point to focus on for you is that the height of the ImageButton is 0dp for all, and the constraints manage the height automatically.

The good part of ConstraintLayout is that you don't need to specify different weights like you would in a LinearLayout, so you can have images of different heights and it will work just fine.

omz1990
  • 557
  • 4
  • 10
-1

If you are using css you can use the property unit vh (viewport height). The measurement is a percentage of the viewport/screen height. For example height: 10vh; width: auto; will render the element height as 10% of the screen height, without distorting your png. If you use this measurement for the four elements shown, they will all appear on the screen at the same time if their values add up to 100.

https://www.sitepoint.com/css-viewport-units-quick-start/

thisisannie
  • 31
  • 8