I am trying to make a ScrollView with some ImageButtons.
If I create it with blank buttons it works great.
My xml is:
<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=".MainScreen">
<HorizontalScrollView
android:id="#+id/filtersScroll"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true">
<LinearLayout
android:id="#+id/filtersLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageButton
android:id="#+id/filtro1"
android:layout_width="64dp"
android:layout_height="64dp"/>
<ImageButton
android:id="#+id/filtro2"
android:layout_width="64dp"
android:layout_height="64dp" />
<ImageButton
android:id="#+id/filtro3"
android:layout_width="64dp"
android:layout_height="64dp"/>
<ImageButton
android:id="#+id/filtro4"
android:layout_width="64dp"
android:layout_height="64dp"/>
<ImageButton
android:id="#+id/filtro5"
android:layout_width="64dp"
android:layout_height="64dp"/>
<ImageButton
android:id="#+id/filtro6"
android:layout_width="64dp"
android:layout_height="64dp"/>
<ImageButton
android:id="#+id/filtro7"
android:layout_width="64dp"
android:layout_height="64dp"/>
<ImageButton
android:id="#+id/filtro8"
android:layout_width="64dp"
android:layout_height="64dp"/>
</LinearLayout>
</HorizontalScrollView>
And what I get is:
But when I add a picture to the drawable folder(don't know if it matters but the picture is 2000x2000) and add it to one of the ImageButtons like so:
<ImageButton
android:id="#+id/filtro1"
android:layout_width="64dp"
android:layout_height="64dp"
android:scaleType="centerInside"
android:src="#drawable/smiley" />
Not only can I not make the image resize to the size of the button, but the app also stops working as soon as i try to run it.
This is how the preview looks like:
What am I missing?
Has it something to do with the size of the source picture?
I mean, I just want it to resize to the size of the button and work.
Also, what happened to the other folders that used to be in drawable/? Now you don't have to separate the images according to their size?
Has it something to do with the size of the source picture
Yes. You are using a very high resolution image, and surely it will create problem on different devices (especially on low-end device). You should either use scaled down image, or try scaling through code.
Now you don't have to separate the images according to their size
No, place images in different drawable folders according to their density (not size)
See below links:
Loading Large Bitmaps Efficiently
Displaying Bitmaps Efficiently
High resolution Image - OutOfMemoryError
Related
I'm trying something that should be simple, an imageButton and some text that says something about it. My problem is, the view of the imageButton is bigger than the image itself. I'm certain that the actual image is not like this (I've tried with several images and the result is the same). By searching online, the solution I've found is to insert the attribute "adjustViewBounds". That seemed reasonable but it didn't work. Here I leave my code and an image of how the result looks.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center|top">
<ImageButton
android:id="#+id/imageButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:background="#android:color/transparent"
android:scaleType="fitXY"
android:scaleX="0.2"
android:scaleY="0.2"
android:src="#drawable/icon1"
android:padding="0dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="DEFAULT!"
android:textSize="20sp"
/>
</LinearLayout>
image
The problem is using scaleX and scaleY to adjust the size. The button changes it's visible size, but the rest of the layout acts as if it were the original full scale.
I'd suggest using a different method of defining the size, for example:
<ImageButton
android:id="#+id/imageButton"
android:layout_width="48dp"
android:layout_height="48dp"
android:background="#android:color/transparent"
android:scaleType="fitXY"
android:src="#drawable/icon1"
android:padding="0dp"/>
I have a listview layout with images
It looks like this
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="240dp"
android:adjustViewBounds="true"
android:id="#+id/listview_item_imageView"
android:layout_gravity="center_horizontal|top" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#FAC308"
android:id="#+id/listview_item_title"
android:text="TITLE"
android:textSize="20sp"
android:paddingBottom="40dp"
android:layout_centerInParent="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#ffffff"
android:id="#+id/listview_item_subtitle"
android:paddingTop="40dp"
android:text="SUBTITLE"
android:textSize="20sp"
android:layout_centerInParent="true" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/orangeSeparator"
android:src="#drawable/orangeseparator"
android:layout_centerInParent="true" />
If I run it on device with 720x1280 240dpi it looks like this
If I run it on device with 720x1280 320dpi it looks like this
I get images from the internet, so I cant prepare different versions.
How to make it look similar across all the devices ?
You can use fitXY Android Developer,
android:scaleType="fitXY"
or you can also create different drawable resources from the original one, with Photoshop or any similar program
in your container you have
android:layout_height="match_parent"
and in the image:
android:layout_height="240dp"
you have to have the same height or 'wrap_content' for your container not to have those gaps.
you can also add to the imageview:
android:scaleType="centerCrop"
another thing is that you can use specific library to handle loading of network images.
You can look this article . Make your app supporting different dpi variations and different screen types: Supporting Different Screens
I am making an android app, and I want to set a large image as the background. However, I only want a small part of this image to display at the startup, and I want to be able to scroll to the rest of the image (by swiping)
This is what I have so far
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:background="#drawable/background"
>
<ImageButton
android:id="#+id/searchbutton"
android:contentDescription="#null"
android:scaleType="fitXY"
android:layout_height="50dp"
android:layout_width="55dp"
android:layout_gravity="left"
android:onClick="searchmethod"
android:src="#drawable/search" />
<ImageButton
android:id="#+id/filterbutton"
android:scaleType="fitXY"
android:contentDescription="#null"
android:state_pressed="true" android:drawable="#drawable/search"
android:layout_height="50dp"
android:layout_width="55dp"
android:layout_alignParentRight="true"
android:layout_alignTop="#+id/searchbutton"
android:onClick="choosefilter"
android:src="#drawable/filter" />
<ImageButton
android:id="#+id/Zoomoutbutton"
android:contentDescription="#null"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignRight="#+id/filterbutton"
android:layout_marginBottom="27dp"
android:src="#drawable/zoomout"
/>
<ImageButton
android:id="#+id/Zoominbutton"
android:contentDescription="#null"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/Zoomoutbutton"
android:layout_toLeftOf="#+id/Zoomoutbutton"
android:src="#drawable/zoomin"
/>
</RelativeLayout>
This however just displays the entire image in the background, whereas I want a small part of it to display and then scroll across it. I apologize if this was asked already, but I couldn't find any answer that helped me.
EDIT: Ok, I can scroll the image now, but I want my buttons to stay in the corners of my screen at all times. Can anyone help? Currently when I scroll, I am scrolling away from my buttons.
Embed the RelativeLayout in a ScrollView. You don't specify vertical or horizontal, so you may need HorizontalScrollView (or both?)
You need to use a ScrollView object which will hold the image. The ScrollView dimensions can be set by you and the rest of the image will then become scrollable.
I have a centered background image with a pattern that I am showing using an ImageView. I want it to fill the width and height of all the different screen sizes/densities, but maintain its aspect ratio. I think I have that part figured out, but then I have a foreground image (in a ToggleButton) that is smaller and centered and needs to scale at the same rate of the background image. This is important because the button image has graphical elements that need to align perfectly with the background. How do I get it to scale correctly? Here's what I've got so far:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/relmain"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView
android:id="#+id/imageView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="centerCrop"
android:layout_centerInParent="true"
android:contentDescription="#string/bg_desc"
android:src="#drawable/bg_img" />
<ToggleButton
android:id="#+id/button"
android:background="#drawable/btn_on"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="center"
android:layout_centerInParent="true"
android:textOff=""
android:textOn=""
android:onClick="toggleLight" />
</RelativeLayout>
Thanks for taking a look!
I think you should do it like this according to my skills
<ImageView
android:id="#+id/imageView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:layout_centerInParent="true"
android:contentDescription="#string/bg_desc"
android:background="#drawable/bg_img" />
May be it will look as you want.
I'm novice in android development and still can't understand fully how sizing works with different layouts. I want to place a preview of the book into this template:
I've tried to implement it using FrameLayout. The idea is that the center of preview image will be exactly where the center of the png background is. Here is the code:
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight=".5" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/book_frame" />
<ImageView
android:id="#+id/previewImage"
android:layout_width="83dp"
android:layout_height="83dp"
android:layout_gravity="center_vertical|center_horizontal"
android:src="#drawable/abs__ab_bottom_solid_dark_holo" />
</FrameLayout>
The result in layout builder look exactly like I want it to be:
On real phone it is different:
I think on other resolutions it will also differ from both variants. So my question is how to synchronize these images so after any resizing and distortions the preview will fit the cover correctly?
Possible solution would be to remove border from image and place it on previewImage instead. But there are several similar usecases in application where the border can't be removed, so I'd like to find out a universal solution for all of them.
You have your answer in your question.
What happening in your case image size matter for different screen resolution.
Hard-coded things always gives weird result in your case
android:layout_width="83dp"
android:layout_height="83dp" this piece of code.
Check this link this will guide you to manage drawables for different screens.
and here is another link
So the suitable solution for me was to separate border of inner image into its own ImageView, insert it into layout over the photo and add 1dp padding to the photo.
The layout become like this:
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight=".5" >
<ImageView
android:id="#+id/bookFrame"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|center_horizontal"
android:src="#drawable/book_frame" />
<ImageView
android:id="#+id/previewImage"
android:layout_width="83dp"
android:layout_height="83dp"
android:layout_gravity="center_vertical|center_horizontal"
android:padding="1dp"
android:scaleType="centerCrop"
android:src="#drawable/abs__ab_bottom_solid_dark_holo" />
<ImageView
android:id="#+id/previewBorder"
android:layout_width="83dp"
android:layout_height="83dp"
android:layout_gravity="center_vertical|center_horizontal"
android:src="#drawable/preview_border" />
</FrameLayout>