Android not stretching layout by its own in landscape mode - android

I am trying to place two images in landscape mode since my app will be in landscape mode through out. When I am doing this following code android works proper in potrait mode but in landscape mode it doest stretch with the ratio but they remains unchanged. WHat should i do it to make it handle by android
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal" >
<FrameLayout
android:id="#+id/frameLayout1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:layout_gravity="center_horizontal" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:src="#drawable/hud" />
</FrameLayout>
<FrameLayout
android:id="#+id/frameLayout2"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:layout_gravity="center_horizontal">
<ImageView
android:id="#+id/imageView2"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center_horizontal"
android:src="#drawable/bg" />
</FrameLayout>
</LinearLayout>

If you want your app to always be in landscape mode, set it in the Manifest file like this:
<activity android:screenOrientation="landscape">
Then, instead of using XML to make your layout, do it from the activity. Then you can use this code to get the display size info:
/* First, get the Display from the WindowManager */
Display display = ((WindowManager) getSystemService(WINDOW_SERVICE)).getDefaultDisplay();
/* Now we can retrieve all display-related infos */
int width = display.getWidth();
Then you can use this display width to set the width of your images (i.e. width/2).

You probably need android:scaleType="fitCenter" on your ImageViews.

Related

Resize Android ImageView on Keyboard open, keep aspect ratio

I am having some issues with setting some image as the background in an Android application. The problem is that I want the image to fill in the space in the middle of the layout, but when the keyboards opens, it gets stretched and doesn't keep the aspect ratio.
Here are 2 diagrams explaining the layout :
Here is my current code related to this problem :
layout.xml
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1">
<ImageView
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="#drawable/background_image">
</ImageView>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/itemsSetup"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1">
</androidx.recyclerview.widget.RecyclerView>
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
android:background="#color/colorDarkLighter"
android:orientation="vertical">
...
</LinearLayout>
AndroidManifest.xml
<activity
android:windowSoftInputMode="adjustResize">
...
</activity>
I can't use
android:windowSoftInputMode="adjustPan" or android:windowSoftInputMode="adjustNothing" because I want the bottom to be higher than the keyboard as it opens and also keep the header, as shown on the diagrams above.
I have tried setting the background image programatically as explained in other threads with
getActivity().getWindow().setBackgroundDrawableResource(R.drawable.background_image);
The problem is that when doing so, the image gets stretched and doesn't keep the aspect ratio.
Has anyone been able to combine both, resizing the layout with everything still on the screen and keeping the aspect ratio of an image ?
Thanks.

how to make app a percent of the screen size

I am trying to make my app look like the image below, but by setting my app as a percent of my whole screen (not setting the dp), so that no matter what type of phone I am using, the app will take up the same screen percentage. This is my main activity which just consists of two fragments in one LinearLayout. 
android:layout_width="300dp"
android:layout_height="300dp"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_gravity="center"
android:background="#drawable/rounded_edges"
android:theme="#style/Theme.AppCompat.Light.Dialog.Alert">
<!-- Create a container (FrameLayout) for Body Fragment to switch with other Fragments on button clicks-->
<fragment
android:id="#+id/menuFragment"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_margin="5dp"
class="it.anddev.bradipao.janus.MenuFragment"
tools:layout="#layout/fr_menu">
</fragment>
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="end" />
enter image description here
I want my height and width to be a percent of the phone height and width like shown here.
You should use LinearLayout as a container, and use these properties:
weightSum in LinearLayout, set it to 1.
layout_weight in every child of the LinearLayout. For example:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="1">
<LinearLayout
android:orientation="vertical"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.75">
....
</LinearLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.25">
....
</LinearLayout>
</LinearLayout>
First layout will take 75% of the screen and the second 25%.
Note that when using weights, height and/or width has to be 0dp. You can now make it as complex as you need.

Aligning a image button with a background android

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.

keep aspect ratio of background image (android)

I have a background image which should be scaled on the height, but keep its aspect ratio. I tried it with this code:
<ImageView
android:id="#+id/iv_background"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="#drawable/bg" />
This works on phones in portrait mode, but when I test it on a tablet (default landscape), it scales the width and cuts the image on top and bottom. Is this because of the xml code or because of the landscape?
Try something like this:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:scaleType="centerCrop"
android:src="#drawable/background_image"/>
<!-- Your other views -->
</RelativeLayout>

Android layouts and automatic image resizing

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.

Categories

Resources