I'm setting an image (jpeg) resource to an ImageView that has dimensions 877x3719. However when I run the app it tells me:
W/OpenGLRenderer﹕ Bitmap too large to be uploaded into a texture (2631x11157, max=4096x4096)
Which is exactly triple the original image's dimensions. Does anyone know how or why it's tripling the dimensions without anything in my java code telling it to?
Below is the layout XML:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<ScrollView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/scrollView2" >
<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/testlay">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView1"
android:contentDescription="#string/imageph" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView2"
android:contentDescription="#string/imageph" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView3"
android:contentDescription="#string/imageph" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView4"
android:contentDescription="#string/imageph" />
</LinearLayout>
</ScrollView>
</LinearLayout>
ImageView has its size measured in dips (device independent pixel), which can be different for devices with different screen density (like regular and "retina" iPhone).
But when we set image to it, for maximum quality we need to assign value for each screen pixel, that's why your image dimensions are "tripled" — for one dip there are three screen pixels.
Related
I have created the Android layout as shown below. It displays a small toolbar with 2 buttons. The toolbar is located at the bottom. The problem is that on smaller screens the height of the toolbar and the buttons is much bigger than on bigger screen which makes sense because I'm using dp values. How do I have to change it so that the toolbar has visually always the same size on screens with bigger and smaller height? That means if the height is 1cm on big screens it should also be 1cm on small screens.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/keyboard_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:orientation="horizontal">
<View
android:id="#+id/keyboard_toolbar_line"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_below="#id/buttonsLayout"
android:layout_marginBottom="5dp"
android:background="#c0c0c0"/>
<RelativeLayout
android:id="#+id/buttonsLayout"
android:orientation="horizontal"
android:alpha="0.5"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:id="#+id/privacyButton"
android:layout_width="100dp"
android:layout_height="35dp"
android:gravity="center"
android:clickable="true"
android:focusable="true"
android:layout_marginStart="30dp"
android:layout_alignParentStart="true">
<ImageView
android:id="#+id/privacyButtonImage"
android:layout_width="25dp"
android:layout_height="25dp"
android:scaleType="fitXY"
android:clickable="false"
android:focusable="false"
android:src="#drawable/ic_lock_open_light_24dp" />
</LinearLayout>
<LinearLayout
android:id="#+id/ratingButton"
android:layout_width="100dp"
android:layout_height="35dp"
android:gravity="center"
android:clickable="true"
android:focusable="true"
android:layout_marginEnd="30dp"
android:layout_alignParentEnd="true">
<ImageView
android:id="#+id/ratingButtonImage"
android:layout_width="25dp"
android:layout_height="25dp"
android:scaleType="fitXY"
android:clickable="false"
android:focusable="false"
android:src="#drawable/ic_star_gray_24" />
</LinearLayout>
</RelativeLayout >
</RelativeLayout >
For that, you need to set your view height based on dimen in the values folder.
Using that dimen value you can archive this thig.
Otherwise, you can use this lib that will provide dp value based on device screen size and resolution
Link: https://github.com/intuit/sdp
I am trying to create a large square and inside the large square there will be 25 small squares.I am using a png image of the square with small 25 squares in it and using linear and linear horizontal to align the large text view inside the square. But when I change the device screen the text comes out of the boundary of the png image square.
Is there any solution for this?
This the square image i am using
<?xml version="1.0" encoding="utf-8"?>
<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"
tools:context="com.nijinsha.bingomultiplayer.Game_Act"
android:background="#drawable/bkgd"
android:padding="5dp">
<ImageView
android:layout_width="330dp"
android:layout_height="340dp"
android:id="#+id/imageView"
android:src="#drawable/bgrid"
android:background="#drawable/gdbk"
android:scaleType="fitXY"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true" />
<LinearLayout
android:orientation="vertical"
android:layout_width="330dp"
android:layout_height="340dp"
android:layout_alignTop="#+id/imageView"
android:layout_alignLeft="#+id/imageView"
android:layout_alignStart="#+id/imageView">
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="68.5dp"
android:weightSum="1">
<TextView
android:layout_width="62dp"
android:layout_height="match_parent"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="02"
android:id="#+id/textView1"
android:gravity="center_vertical|center_horizontal"
android:textSize="50sp" />
<TextView
android:layout_width="62dp"
android:layout_height="match_parent"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="05"
android:id="#+id/textView2"
android:gravity="center_vertical|center_horizontal"
android:textSize="50sp" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
Edit
The problem is with devices which is not HD
The problem was with the width of the imageView. I changed the width to 300 and now no problem. The problem was imageView was at its maximum and could not be bigger on low pixel density devices.
I am trying to setup a section of a screen with 4 images around each other but there is huge white space between them as per image example:
I would like them all right next to each other. Below is the XML I am using:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:id="#+id/imageView1"
android:src="#drawable/test1"
android:layout_weight="1"/>
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:id="#+id/imageView2"
android:src="#drawable/test"
android:layout_weight="1"/>
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:id="#+id/imageView3"
android:src="#drawable/test1"
android:layout_weight="1"/>
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:id="#+id/imageView4"
android:src="#drawable/test"
android:layout_weight="1"/>
</LinearLayout>
I am also trying to get them to the top of the screen but that white space is preventing that.
The images you see dont have any white space at all, the edge of the colors are the edge of the image?
Thanks
You need to set the scaleType to centerInside and the adjustViewBounds to true like this: (adjust view bounds should get rid of the space you don't want.)
<ImageView
...
android:layout_height="wrap_content"
android:scaleType="centerInside"
android:adjustViewBounds="true" />
#x10sion:For your information,
Why should i add this
android:scaleType="centerInside" is going to center the image inside the container, rather than making the edges match exactly. Reference
android:adjustViewBounds="true" this to true if you want the ImageView to adjust its bounds to preserve the aspect ratio of its drawable.
This: android:layout_height="wrap_content"
should be like this instead: android:layout_height="fill_parent", or android:layout_height="match_parent", on your four ImageViews.
How can I layout a Text with an icon exactly like this:
I did it with this Layout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="64dp"
android:layout_height="64dp">
<ImageView
android:id="#+id/imgIcon"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="8dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginBottom="24dp"
android:duplicateParentState="true"
android:src="#drawable/delete_icon" />
<TextView
android:id="#+id/txtLabel"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:gravity="center_horizontal"
android:duplicateParentState="true"
android:text="xxx" />
</RelativeLayout>
But the Android guide says: Use compound drawables - A LinearLayout which contains an ImageView and a TextView can be more efficiently handled as a compound drawable.
I have tried, but I couldn't find the layout parameters (size for the image, different paddings for image and text) that I need.
<TextView
android:id="#+id/txtLabel"
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_alignParentBottom="true"
android:gravity="center_horizontal|bottom"
android:duplicateParentState="true"
android:drawableTop="#drawable/delete_icon"
android:paddingTop="8dp"
android:drawablePadding="8dp"
android:text="xxx" />
Here is the result (left with RelativeLayout, right with compound drawable):
If there is a better standard component which provides the necessary parameters, it's acceptable, too.
I tried to do the same.
I got this result (please note that the image has an "optical square", which is smaller than the physical image size):
I'm using my favourite method: the compound drawable.
But:
1 - I prepared some images at different resolutions, so that 32*32 is referred to a standard mdpi (160dpi) resolution, and scaling at different resolutions (xxhdpi is 96*96 px wide and tall)-
2 - I placed these images in the corresponding drawable folders (drawable-ldpi to drawable-xxhdpi).
3 - I corrected the layout a bit, to match.
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#fff"
android:layout_margin="0dp"
android:padding="0dp"
>
<TextView
android:id="#+id/txtLabel"
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_alignParentBottom="true"
android:gravity="center_horizontal|bottom"
android:padding="8dp"
android:drawableTop="#drawable/delete_icon"
android:drawablePadding="4dp"
android:text="XXX"
android:textSize="12sp"
/>
</RelativeLayout>
I used all caps letters to better see the spacing between the text and the drawable.
Does it fit your needs?
I am using some .png images for my Android app's UI. I have kept the images in the 'res/drawable' directory. I read in some tutorials that Android automatically scales up the images when the screen resolution is bigger than mdpi. But when I run my app on big screened devices, the images are displayed as their original sizes, and not scaled up. Rest of the space is empty( black). What am I doing wrong here? Below is the XML for my layout, if it helps:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:theme="#android:style/Theme.Black.NoTitleBar"
>
<ImageView
android:id="#+id/imageView2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/imageView1"
android:clickable="false"
android:contentDescription="#string/p"
android:src="#drawable/volbar" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:clickable="false"
android:contentDescription="#string/p"
android:src="#drawable/head" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/imageView1"
android:layout_alignParentRight="true"
android:layout_marginBottom="33dp"
android:layout_marginRight="19dp"
android:text="#string/press_to_update" />
<ImageView
android:id="#+id/imageView9"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/imageView2"
android:clickable="false"
android:contentDescription="#string/p"
android:src="#drawable/frag11"
/>
<ImageView
android:id="#+id/imageView4"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/imageView9"
android:layout_alignParentLeft="true"
android:clickable="false"
android:contentDescription="#string/p"
android:src="#drawable/base" />
</RelativeLayout>
I'm guessing that you want your image to scale up to fill the space. If that is the case, you will need to specify scaledType for your ImageView:
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="cropInside" />
Experiment with different values from ImageView.ScaleType to get the effect you want.
FYI, when you put an image in res/drawable, it is scaled according to device density. For instance, if your png is 200x150, it will be scaled to 300x225 on a device with 1.5 density. This scaling happens independent of the scaleType.