I have a horizontal image which is more wide than tall. I want the image to fill the display fully heightwise and I do not care if the sides get clipped out as it is the center of the image that is important to be seen.
When the android device gets turned to its side, the user should be able to see much more of the image since its a horizontal picture on a horizontal display.
I've been using fill_parent and match_parent and fill content and testing all of these over and over by exporting them to my phone. It is all drastically different from the virtual device verses my phone.
edit: main idea is to cover the entire display when the device is both held horizontal and vertical
<?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" >
<ImageButton
android:id="#+id/imageButton1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentBottom="true"
android:layout_alignParentTop="true"
android:contentDescription="#string/honktext"
android:onClick="amazinghonks"
android:scaleType="centerCrop"
android:src="#drawable/big_clown" />
<TextView
android:id="#+id/toptext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/imageButton1"
android:layout_alignRight="#+id/imageButton1"
android:layout_alignTop="#+id/imageButton1"
android:layout_margin="0dp"
android:gravity="center"
android:text="#string/toptext"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#33B5E5"
android:background="#CC303030"
/>
</RelativeLayout>
Did you tried this?
android:scaleType="centerCrop"
or this?
imageView.setScaleType( ImageView.ScaleType.CENTER_CROP );
Related
I´ve tried a few thinks to achive the following thing:
For the discription: I want to have a header with a textview which wraps over the howl page and below this header I want to display three images beside each other. It should be like a image gallery. This layout i want to duplicate.
But my problem is, that I the height of the ImageView is to high and that there is a distance between the sized image and the title. See figure.
On the Left is what I want and on the right is what I got...
Here is my layout code:
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scrollbars="none"
android:layout_weight="1">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:textStyle="bold"
android:text="titel"
android:id="#+id/titel"
android:gravity="center"
android:padding="3dp"
android:textSize="18sp"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/titel">
<ImageView
android:layout_width="0dp"
android:layout_weight="0.208"
android:layout_height="match_parent"
android:id="#+id/image1"
android:src="#drawable/1"/>
<ImageView
android:layout_width="0dp"
android:layout_weight="0.389"
android:layout_height="match_parent"
android:id="#+id/image2"
android:src="#drawable/2"/>
<ImageView
android:layout_width="0dp"
android:layout_weight="0.403"
android:layout_height="match_parent"
android:id="#+id/image3"
android:src="#drawable/3"/>
</LinearLayout>
</RelativeLayout>
</ScrollView>
my best guess is because your ImageView scales your image in a way that it fits into the center of the view and leaves empty space around the top and bottom of the view. try adding android:adjustViewBounds="true" to your ImageView in the xml.
on a side note, when debugging view hierarchy, it's almost always gonna be helpful to go to Android Device Monitor, select your devices to the right, and click Dump View Hierarchy for UI Automator. You can easily find out which view is taking the extra space by hovering your mouse over different view elements.
Hey I begin my adventure with Android and I can't solve one problem.
I am loading pictures from web server using Universal Image Loader. I put them into Relative Layouts which is located in ListView. The effect that I want to achieve, is that pictures are displayed on the entire screen with full width and height with a small box at the bottom.
In the IDE preview, everything looks ok:
But on my phone loaded images look like that. I want them to be displayed with full height. It is necessary to use programming functions to achive it?
Loading images:
imageLoader.displayImage(
wallpapers.get(position).getSrcUrl()//the drawable
, currentWallpaperViewHolder.imageViewWallpaper//the image view
, imageLoaderOptions);//the display options
return itemView;
List view:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<ListView
android:id="#+id/WallpapersListView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
Image view:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/wallpaper_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:src="#drawable/test"
/>
<TextView
android:id="#+id/wallpaper_date_for_use"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="20dip"
android:padding="12dip"
android:background="#AA000000"
android:textColor="#ffffffff"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:gravity="center"
android:textStyle="bold"
android:text="Date of use" />
</RelativeLayout>
It's probably because you have a RelativeLayout as your root view. Try wrapping the outside RelativeLayout in a LinearLayout.
You can do this,
Get the device height.
And then set imageView height programatically as the device height.
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.
Hi,
I am trying to design a layout that has no dependency on screen size. Actually I am designing a sample layout in which there is a large size add in the center of screen. There is a text in the center of upper remaining area and lower remaining part. The 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" >
<ImageView
android:id="#+id/ads_layout_large"
android:layout_width="300dp"
android:layout_height="250dp"
android:layout_centerInParent="true"
android:background="#android:color/background_light" />
<TextView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="#id/ads_layout_large"
android:background="#fff000"
android:gravity="center"
android:text="#string/exit_enjoyed_text" />
<TextView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_below="#id/ads_layout_large"
android:background="#fff000"
android:gravity="center"
android:text="#string/exit_enjoyed_text" />
</RelativeLayout>
The problem is, it is working on upper part, the text is exactly in the center of the remaining area, but the lower TextView has covered half of the screen, can you please help me find the mistake? Or any other way to design the same?
I think here is your problem :
android:layout_height="fill_parent"
setting your TextView height to fill_parent cause your textview extend to reach it's parent size , use wrap_content or static value like "30dp" instead
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.