I have a nexus 7 tablet with 1900 x 1200 resolution. I try to create an ImageButton with wrap_content but the created ImageButton is much too big and i dont know why.
This is the layout i use:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/main_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/gradient" >
<ImageButton
android:id="#+id/main_button_fog"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/custom_button_fog"
android:contentDescription="#string/imageview_description"
android:scaleType="centerInside" />
</RelativeLayout>
When i start my Application it looks like that:
As a reminder: the width of nexus 7 tablet is 1200 px. The with of my image is 397 px so it should be much smaller. Why is the Image loaded here so big?
I didn't try this, but i think that it can work. But if i can say a thing, put the value of width and height as wrap_content if you want that image will have the maximum dimensions is not useful. If you want to scale the image as the size of the screen you have to use also Java part. Tell me if this doesn't work by the way.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/main_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/gradient" >
<ImageButton
android:id="#+id/main_button_fog"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="android:color/transparent"
android:src="#drawable/custom_button_fog"
android:contentDescription="#string/imageview_description"
android:scaleType="fitCenter" />
</RelativeLayout>
Related
I do design for android. I have a few phones. they have different resolutions. I have a design in resolving 1440X2560 px. screen has 3 squares with different widths. width of 1440 pixels in xxxhdpi = 360 dpi.I have the width for each layout. Now if I run the application on Samsung Galaxy Note 4 (1440x2560 640 dpi) everything looks as it should. Now if I run the application on Nexus 6 (1440x2560 ? dpi) the picture is not the entire screen. I found that the nexus 6 has resolution betwen xxhdpi and xxxhdpi. the question is how I mark the screen so that it looked the same on all phones? or I should not use dpi?enter link description here
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal">
<LinearLayout
android:orientation="horizontal"
android:layout_width="60dp"
android:layout_height="100dp"
android:background="#ffff2622">
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="200dp"
android:layout_height="100dp"
android:background="#ff42ff20">
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="100dp"
android:layout_height="100dp"
android:background="#ff4934ff">
</LinearLayout>
</LinearLayout>
</LinearLayout>
According to this the Nexus 6 really is between xxhdpi and xxxhdpi with scale around 3.5. I am not a fan of layout weighting as #Squonk suggested so I would reccomend using dimensions.
Create values folders for different screen widths such as values-w320dp, values-w360dp, values-w410dp etc. There you can define your dimensions for different screen widths.
<resources>
<dimen name="left_column">60dp</dimen>
<dimen name="middle_column">200dp</dimen>
<dimen name="right_column">100dp</dimen>
</resources>
In your xml you can then reference layout_width="#dimen/left_column"
I would also recommend setting only the left and right column widths and have the middle one fill the remaining space. You could do that with a RelativeLayout.
It seems to me you want to create your 'squares' to have a ratio of 60:200:100 (which is also 3:10:5). Try the following to set width by layout_weight...
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:orientation="horizontal"
android:layout_width="0dp"
android:layout_height="100dp"
android:layout_weight="3"
android:background="#ffff2622">
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="0dp"
android:layout_height="100dp"
android:layout_weight="10"
android:background="#ff42ff20">
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="0dp"
android:layout_height="100dp"
android:layout_weight="5"
android:background="#ff4934ff">
</LinearLayout>
</LinearLayout>
</LinearLayout>
Using android:layout_width=0dp and android:layout_weight= will give each element a size based on a percentage of the sum of all weight values.
I am pretty new to android programming and i was hoping you could help me out with something. I have set a background in an xml file and i am trying to align a image button to a specific area of my background. I have tried using density pixels however it is not precise enough and the button now covers an area of the background i would like to be visible. Any ideas on how i could fix this?
Many thanks,
Alex
My code is as follows:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#drawable/home_background">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginTop="93dp" >
<ScrollView
android:id="#+id/scrollView1"
android:layout_width="match_parent"
android:layout_height="341dp" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<ImageButton
android:id="#+id/imageButton1"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginLeft="30dp"
android:layout_marginTop="30dp"
android:background="#null"
android:scaleType="fitXY"
android:src="#drawable/workbench" />
</LinearLayout>
</ScrollView>
</LinearLayout>
</LinearLayout>
You can always try using px instead of dp, however the whole point of dp is that they will scale automatically for any screen. If you use px I suspect that it will only work well on the current screen resolution that you're testing on. You would have to define px values for numerous screen resolutions/densities to ensure that your app displayed correctly across different devices.
For a game I have six buttons which look good on mdpi. The 4 left buttons are 100x100px:
If I switch to hdpi, it looks like this:
The xml looks like this (I omitted all but one button to keep it simple):
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/gameContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1.0"
android:orientation="vertical" >
<com.mydomain.mygame.game.GameSurface
android:id="#+id/gameSurface"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/background_game" >
</com.mydomain.mygame.game.GameSurface>
<RelativeLayout
android:id="#+id/controlButtonContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<ImageButton
android:id="#+id/button_left"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_alignParentBottom="true"
android:layout_marginBottom="100dp"
android:contentDescription="#string/button_left"
android:background="#drawable/control_button" />
</RelativeLayout>
</FrameLayout>
<LinearLayout
android:id="#+id/emptyBar"
android:layout_width="match_parent"
android:layout_height="40dp"
android:baselineAligned="false"
android:gravity="center"
android:orientation="horizontal" >
</LinearLayout>
</LinearLayout>
These attempts didn't work:
I tried to use 100dp instead of wrap_content. I tried src instead of background as well as I tried different scaleType attributes.
Probably I could calculate the scaling factor in code, but I can't imagine that this is the proper way to do that. Why does it not scaled automatically, because what are dp then for? So how can I configure the right ratio in xml?
Please avoid use of specific size like 100dp . Try to use WRAP_CONTENT or MATCH_PARENT . and for different different screen sizes please use drawable-folders like drawable-hdpi and drawable-mdpi etc . And Put corrosponding images of android:background="#drawable/control_button" in all its specific folders .
Refer these linkes for multiple screen sizes :
http://developer.android.com/guide/practices/screens_support.html
http://developer.android.com/training/multiscreen/screensizes.html
I would like to display an image with a border. The solution below works fine for some images, but not for others.
So far my best guess is, that it works fine for smaller images but not for large ones.
With a smaller picture, the solution displays the image nicely with a 2 pixel border. With a large picture the background is too wide in height.
I was testing this with an image that I scaled manually from say 2000 * 400 to 200 * 40. So it was the same image, only prescaled.
Any idea why the large pictures wont scale in the same way as the smaller ones?
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:background="#ffffff"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center" >
<ImageView
android:id="#+id/testimage"
android:background="#000000"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/testimage2"
android:padding="2dip"
android:scaleType="fitCenter"
/>
</LinearLayout>
Remove the scaletype and use android:adjustViewBounds="true" for your Imageview.
My android app currently has two layouts for its splash screen, portrait and landscape. Both use the same simple format - an image that's the same size as the screen, held in a simple linear layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="fitCenter"
android:src="#drawable/splash_p"
/>
</LinearLayout>
The image used is 320w x 480h and Android automatically resizes it to fit the screen, irrespective of the screen size of the device. Obviously, the image isn't as sharp when resized for a tablet for example.
I should point out here that my goal is to reduce the installed size of the final application as much as possible, and I'm aware that I could include different layouts and sizes of the same images for each differing screen size.
My splash screen is made up of the app's name in the top third of the screen, and then an image in the bottom two thirds of the screen. In order to save memory, I want to crop the app name and the image into two seperate images, and then display them in a linear vertical layout for devices held in portrait mode. I'll then use a linear horizontal layout of image and then app name for landscape mode.
For the portrait layout I've got this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical">
<LinearLayout android:id="#+id/linearLayout1" android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="vertical">
<View android:layout_height="45dp" android:layout_width="45dp" />
<ImageView android:layout_height="fill_parent"
android:src="#drawable/splashtext"
android:scaleType="fitCenter"
android:layout_gravity="center"
android:layout_width="fill_parent"></ImageView>
<View
android:layout_height="35dp"
android:layout_width="35dp" />
<ImageView
android:scaleType="fitCenter"
android:src="#drawable/splashpic"
android:layout_height="fill_parent" android:scaleType="fitCenter" android:layout_width="fill_parent" android:layout_gravity="center"/>
</LinearLayout>
</LinearLayout>
When I display the above in eclipse, it looks ok for smart phones, but the images are not scaled up when displayed on a tablet, although I'm using the android:scaleType="fitCenter" argument. I've tried using dips instead of fill_parent in the imageview layout_width and layout_height but that doesn't work either.
What am I doing wrong? Is there another way to do this?
Thanks
I've edited the question to include this revised XML based on #KaHa6u 's help below. So now I have:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<LinearLayout android:id="#+id/linearLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<View
android:layout_height="15dp"
android:layout_width="15dp"
/>
<ImageView android:layout_height="wrap_content"
android:src="#drawable/splashtext"
android:adjustViewBounds="true"
android:scaleType="fitXY"
android:layout_gravity="center"
android:layout_width="wrap_content"
android:layout_weight="1">
</ImageView>
<View
android:layout_height="15dp"
android:layout_width="15dp"
/>
<ImageView
android:scaleType="fitXY"
android:src="#drawable/splashpic"
android:adjustViewBounds="false"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_weight="4"
android:layout_gravity="center"/>
</LinearLayout>
</LinearLayout>
Which scales up vertically, but not horizontally, so I end up with tall thin images when the screen size increases.
#basinbasin
I just encountered a situation very similar to the one you explained. I needed to have an ImageView on top of the layout, which had to be stretched ONLY HORIZONTALLY and retain its height when the phone gets into landscape orientation. I succeeded with just this:
<ImageView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:src="#drawable/main_header"
android:scaleType="fitXY"
/>
and, of course, with activity's attribute:
<activity android:configChanges="keyboardHidden|orientation">
Hope this helps. Thank you.
The fitCenter scaleType maintains the original aspect ratio. Have you tried the fitXY scaleType? Matrix.ScaleToFit Documentation
Did you try "fill_parent" as the android:layout_height and android:layout_width values for the ImageView you want stretched?
I guess that the "wrap_content" setting does not let the system know the bounds to which to resize the image. Please try that and let me know of the results.