I'm facing a problem when changing the screen orientation. When the phones in portrait mode everything's working fine but when i change the orientation to landscape mode the imageview hides the button bellow.
Here's my layouts xml:
<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=".MainActivity"
android:longClickable="false">
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Your Inbox"
android:id="#+id/btn_inbox"
android:layout_centerHorizontal="true" />
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/imageView"
android:layout_below="#+id/btn_inbox"
android:scaleType="fitCenter"
android:adjustViewBounds="true"
android:src="#drawable/img_main" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Scan QR"
android:id="#+id/btn_qrscan"
android:layout_below="#+id/imageView"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentEnd="true"
android:enabled="false" />
Sure, because the image could has a size that fits the screen in portrait. If you want to view all, you need to:
Reduce the size of the imageview
Play with the property "weight" of the components in the view
Add a Scrollview if you want to use a scroll
Its because, the height of the screen in Portrait mode is more, when compared to height of the screen in Landscape mode. The elements won't adjust their places, as per screen height automatically. You should handle the placement of views on all orientations/devices/tablets.
The width is more when the device is in landscape mode. So, try changing the position of views to make use of the width when height is less.
Please try this
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:longClickable="false"
android:orientation="vertical"
tools:context=".MainActivity">
<Button
android:id="#+id/btn_inbox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="Your Inbox" />
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:src="#drawable/background" />
<Button
android:id="#+id/btn_qrscan"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:enabled="false"
android:text="Scan QR" />
</LinearLayout>
I Solved the problem using these line in AndroidManifest.xml.
android:configChanges="orientation|screenSize"
Related
The following code is working properly in portrait orientation, but in landscape orientation, the image is covering the whole screen and none of the other views are showing. which part of the code I have to replace to solve the issue?
Screenshots here https://imgur.com/LNJ95r7 "portrait view"
https://imgur.com/yq1ncnk "landscape view"
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<ImageView
android:id="#+id/resturant_image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/resturant"
android:layout_alignParentTop="true"
android:scaleType="centerCrop" />
<TextView
android:id="#+id/resturant_name"
android:layout_below="#id/resturant_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="10dp"
android:paddingLeft="16dp"
android:text="Etarnity Resturant"
android:textSize="30dp"
android:textColor="#android:color/black"
android:textStyle="bold"/>
<TextView
android:id="#+id/resturant_description"
android:layout_below="#id/resturant_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="10dp"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:text="Best food quality in cheapest price.One of the best stores of california. Home delivery available 24x7"
android:textSize="20dp"
android:textColor="#android:color/black" /> </RelativeLayout>
Add ScrollView or NestedScrollView to your layout like below code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/resturant_image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/resturant"
android:layout_alignParentTop="true"
android:scaleType="centerCrop" />
<TextView
android:id="#+id/resturant_name"
android:layout_below="#id/resturant_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="10dp"
android:paddingLeft="16dp"
android:text="Etarnity Resturant"
android:textSize="30dp"
android:textColor="#android:color/black"
android:textStyle="bold"/>
<TextView
android:id="#+id/resturant_description"
android:layout_below="#id/resturant_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="10dp"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:text="Best food quality in cheapest price.One of the best stores of california. Home delivery available 24x7"
android:textSize="20dp"
android:textColor="#android:color/black" />
</RelativeLayout>
</ScrollView>
</RelativeLayout>
There Are two ways to solve this problem
First
create different layout for landscape view and inflate at runtime orientation change
Second
For big size layout we have used ScrollView Or NestedScrollView.Some time Layout need more space So in this situation we have used ScrollView
See Code
<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=".MainActivity">
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingBottom="10dp">
<ImageView
android:id="#+id/resturant_image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:adjustViewBounds="true"
android:src="#drawable/house1" />
<TextView
android:id="#+id/resturant_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/resturant_image"
android:paddingLeft="16dp"
android:paddingTop="10dp"
android:text="Etarnity Resturant"
android:textColor="#android:color/black"
android:textSize="30dp"
android:textStyle="bold" />
<TextView
android:id="#+id/resturant_description"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/resturant_name"
android:paddingLeft="16dp"
android:paddingTop="10dp"
android:paddingRight="16dp"
android:text="Best food quality in cheapest price.One of the best stores
of california. Home delivery available 24x7"
android:textColor="#android:color/black"
android:textSize="20dp" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</RelativeLayout>
In this code i am using nestedscroll view to scroll layout
You can solve it by two methods.
1.Create a layout for landscape orientation and change the layout in landscape and portrait orientation
2.Change the image width from match_parent to a fixed size and put it in a scroll view.
When you turn your device to landscape mode following line
android:adjustViewBounds="true"
starts its job. Which in turn forces your ImageView to increase its bounds to preserve aspect ratio of the image/drawable and your image goes out of the available view.
Read more about ImageViews here
Try removing above line and see how your app performs in both orientations.
OR
Use ScrollView with current code.
I would prefer scrollView if nothing works.
I have an xml screen with three children linear layouts in a parent linear layout of vertical orientation. First child contains an image view and when running the application I can not view any image. Why? is the image size too big?? If so.. how to scale it? However Image is view able in my design tab. of android stdudio. Below is my complete code for xml file.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/activity_sign_up"
android:layout_width="match_parent"
android:layout_height="match_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"
tools:context="com.example.root.my_laoder.SignUp"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:adjustViewBounds="true"
android:scaleType="centerInside"
android:src="#drawable/ty"
/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:orientation="vertical"
android:paddingTop="50dp"
>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textEmailAddress"
/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textPassword"
/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="number"
/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:paddingTop="50dp"
>
<Button
android:text="Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.5"/>
<Button
android:text="Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.5"
/>
</LinearLayout>
</LinearLayout>
1. Add attribute android:gravity="center_horizontal" to LinearLayout, to show ImageView in center.
2. Update ImageView width to android:layout_width="wrap_content" and remove attribute android:layout_gravity="center".
3. Use android:scaleType="fitXY" instead of android:scaleType="centerInside"
Try this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/activity_sign_up"
android:layout_width="match_parent"
android:layout_height="match_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:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitXY"
android:src="#drawable/ty" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:orientation="vertical"
android:paddingTop="50dp">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textEmailAddress" />
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textPassword" />
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="number" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:paddingTop="50dp">
<Button
android:text="Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.5" />
<Button
android:text="Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.5" />
</LinearLayout>
</LinearLayout>
OUTPUT:
what are the dimens values for these parameters?
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
and why you are using separate linearlayout for imageView even with parent layout as linear?
kindly remove that
have you checked the size of image you are using as a background in ImageView? if size is large than probably image is pushing your rest of your views out of the screen.try to give fixed width and height let's say 100dp for both and see if you are able to see anything.
If you wanna make imageView centre horizontally use in ImagView view
android:layout_gravity="center_horizontal"
above line of code will not work with separate linear layout for ImageView. If you are gonna use separate layout for ImageView anyway, use below line of code inside that linearlayout
android:gravity="center_horizontal"
Note: sorry I'm not able to leave a comment.
Try this for your ImageView:
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:adjustViewBounds="true"
android:scaleType="centerInside"
android:src="#android:drawable/btn_minus" />
I think you missed scaleType of ImageView, Follow the steps to make your image center
1. Add attribute android:layout_gravity="center_horizontal" to show ImageView in center.
2. Set ImageView layout_width="match_parent" and
layout_height="#dimen/fixed_height"
==> height will be fixed but width will automatically adjust
according to device size
3. and set scaleType="fitEnd" or scaleType="fitCenter"
==> fitEnd is ( Scale the image from the end of the container ) and
possible to have space on top
if image is different each time.
==> fitCenter is (Scale the image from center) and possibility to
have space in top and bottom
Example:
<ImageView
android:id="#+id/cover_image"
android:layout_width="match_parent"
android:layout_height="#dimen/fixed_height"
android:layout_gravity="center_horizontal"
android:scaleType="fitEnd" />
I want to do that in my xml. Currently I'm doing this:
<?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:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_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"
tools:context="com.example.MainActivity">
<ImageView
android:id="#+id/main_drawable_text"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/text" />
<LinearLayout
android:id="#+id/main_drawable_logo"
android:layout_width="match_parent"
android:layout_below="#id/main_drawable_text"
android:layout_height="wrap_content">
<ImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.1"
android:layout_centerHorizontal="true"
android:adjustViewBounds="true"
android:src="#drawable/logo" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_below="#id/main_drawable_logo"
android:layout_height="wrap_content">
<TextView
android:id="#+id/credits"
android:layout_width="wrap_content"
android:layout_centerHorizontal="true"
android:layout_height="wrap_content"
android:text="#string/credits" />
</LinearLayout>
</RelativeLayout>
In my testing device I only get part of the #drawable/logo, the rest falls out of the screen as does the credit's text. I can of course adjust the weight until I have the desired outcome, but how can I make sure I will get the expected result on all devices?
What I want is main_drawable_text always matching the width of the screen (from margin to margin), credits always being on the bottom of the screen and drawable_logo been scaled to fit the free space between them, yet with the original aspect ratio.
If I well understand UI you want to design you don't need LinearLayout but only existing RelativeLayout and inside it you can place your element according to each others positions (with android:layout_above, android:layout_below and so on). To keep original ratio of your drawable use android:scaleType="fitCenter".
Here is a layout which display (my interpretation of) what you want:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_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">
<ImageView
android:id="#+id/main_drawable_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:src="#drawable/text"/>
<ImageView
android:id="#+id/logo"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_above="#id/credits"
android:layout_below="#id/main_drawable_text"
android:layout_centerHorizontal="true"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:src="#drawable/logo"/>
<TextView
android:id="#+id/credits"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:text="#string/credits"/>
</RelativeLayout>
I know that layouts can look different on different screen sizes, but I didn't take that into account when I made this layout. So, it is designed for normal screen size, by default, and my phone screen is also normal.
The problem is, the layout looks different then it should be. Here is how it is on my phone, notice that the four image buttons are slightly to the right
Here is what it should be like, as shown in android studios layout tool. Notice, it is nicely centered, as it should be:
Here is my xml code:
<?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"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="com.example.ruchir.circleswithmap.MainActivity"
android:id="#+id/layout">
<ImageButton
android:layout_width="100dp"
android:layout_height="100dp"
android:id="#+id/Blue"
android:layout_marginTop="108dp"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginLeft="73dp"
android:layout_marginStart="73dp"
android:background="#drawable/bluecircle" />
<ImageButton
android:layout_width="100dp"
android:layout_height="100dp"
android:id="#+id/Green"
android:layout_below="#+id/Blue"
android:layout_alignLeft="#+id/Blue"
android:layout_alignStart="#+id/Blue"
android:background="#drawable/greencircle" />
<ImageButton
android:layout_width="100dp"
android:layout_height="100dp"
android:id="#+id/Red"
android:layout_alignTop="#+id/Blue"
android:layout_toRightOf="#+id/Blue"
android:layout_toEndOf="#+id/Blue"
android:background="#drawable/redcircle" />
<ImageButton
android:layout_width="100dp"
android:layout_height="100dp"
android:id="#+id/Purple"
android:layout_alignBottom="#+id/Green"
android:layout_alignLeft="#+id/Red"
android:layout_alignStart="#+id/Red"
android:background="#drawable/purplesquare" />
</RelativeLayout>
Why is this? How can I fix it so that the layout on my phone is also centered, as it should be? Thanks so much for your help!
Add
android:gravity="center"
to your RelativeLayout to center the content of the layout and remove the
android:layout_marginTop="108dp"
android:layout_marginLeft="73dp"
android:layout_marginStart="73dp"
from the first ImageButton if you want to center it horizontally and vertically.
I´m trying to code my first android-app. I read a lot, but I have problems with the layout.
What is wrong in both xml?
For a better understanding, I have made a picture:
My XML for main.xml
<?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="wrap_content"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="2.5"
android:contentDescription="#string/upload"
android:scaleType="fitCenter"
android:visibility="visible" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="4"
android:gravity="center"
android:orientation="vertical" >
<Button
android:id="#+id/btnShoot"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="50dp"
android:layout_marginRight="50dp"
android:text="#string/shoot_again" />
</LinearLayout>
</LinearLayout>
for main.xml in the folder layout-land, If i switch to the landscape-Mode the app crashes:
<?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="wrap_content"
android:orientation="horizontal" >
<Button
android:id="#+id/btnShoot"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="50dp"
android:layout_marginRight="50dp"
android:text="#string/shoot" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/upload"
android:scaleType="fitCenter"
android:visibility="visible" />
</LinearLayout>
Okay, just looking at your XML, there are a few issues:
Portrait XML:
< ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="2.5"
Here, you've set both a weight and a height - in a LinearLayout you can't have both. Either you set the height yourself, or you give it a height of 0dp and a weight, then let the LinearLayout assign the height. As for why it's rotated, the image itself might be rotated in your resources.
Horizontal XML:
Your root LinearLayout still needs to have a vertical orientation
Your ImageView needs to be declared above your Button
What's happening is that a) it's horizontal, b) your button is getting put on first, and c) your button has a android:layout_width="match_parent", which means the ImageView has nowhere to be put, as your Button is already taking up all of the space on screen (can you see why this is case?)
Make these changes, then update your question as appropriate, as I think that your problems will have changed