These orientations are shown correctly here, but when i run it and changes the orientations the landscape mode doesn't works and all the buttons are misplaced as
what might the solution to this problem be?
XML for landscape mode.
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
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"
android:background="#drawable/flowers"
android:id="#+id/frontpage_layout"
tools:context="com.example.hassidiczaddic.multiplescreensupport.MainActivity">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/scrollView">
<Button
android:layout_width="200dp"
android:layout_height="50dp"
android:text="OPEN"
android:textSize="20sp"
android:id="#+id/button.open"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<Button
android:layout_width="200dp"
android:layout_height="50dp"
android:text="LARGE"
android:textSize="20sp"
android:id="#+id/button.large"
android:layout_alignParentRight="true"
android:layout_marginRight="86dp"
android:layout_marginEnd="86dp"
android:layout_toRightOf="#+id/button.rate"
android:layout_toEndOf="#+id/button.rate" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20sp"
android:text="Something"
android:id="#+id/button.something"
android:layout_marginTop="38dp"
android:layout_below="#+id/button.open"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_toLeftOf="#+id/button.rate"
android:layout_toStartOf="#+id/button.rate" />
<Button
android:layout_width="wrap_content"
android:textSize="20sp"
android:layout_height="wrap_content"
android:text="RATE"
android:id="#+id/button.rate"
android:layout_marginTop="38dp"
android:layout_below="#+id/button.something"
android:layout_toRightOf="#+id/button.open"
android:layout_toEndOf="#+id/button.open" />
<Button
android:layout_width="wrap_content"
android:textSize="20sp"
android:layout_height="wrap_content"
android:text="CLOSE"
android:id="#+id/button.close"
android:layout_alignTop="#+id/button.something"
android:layout_alignRight="#+id/button.large"
android:layout_alignEnd="#+id/button.large"
android:layout_toRightOf="#+id/button.rate"
android:layout_toEndOf="#+id/button.rate" />
</RelativeLayout>
</ScrollView>
There are 6 different layout for the main activity, where the OS will select one most suitable for the current device in accordance to the qualifiers specified for each XML layout, the rules are defined here.
Since you've provided layout for small/normal/large screen sizes, these layout will take priority over your land layout. In fact, the only time your land layout will be used is when you run it on a xlarge screen, since it's only then that layouts defined in layout-land will be used (check the link above for more detail).
You can fix this by either:
Remove layout-small/layout-normal/layout-large, then OS have nothing better to use than the one provided in layout-port & layout-land, note that the use of layout-small/layout-normal/layout-large have been strongly discouraged for years now, you should check the Supporting Multiple Screens article.
Instead of using layout-port & layout-land, use the Available height qualifier (layout-hXXXdp) where XXX is the minimum height where you want this layout to be applied. For example layout-h320dp can contain the layout for phone on portrait mode, and put the side-by-side version of the layout XML in the default folder (layout).
Rework your UI design so none of the above is needed, perhaps by putting the buttons in a ScrollView.
As per your Images shows that you have used RelativeLayout and because No room is available for the buttons so it is overlapping and misplacing.
Better you use ScrollView as parent of RelativeLayout else you have to resize button dynamically by calculating height of the screen and all that parameters.
Related
I have an activity layout defined as follows:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:orientation="horizontal"
android:padding="0dp"
android:gravity="center">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="#string/tv_example"
android:textSize="45sp"
android:textStyle="bold"
android:textAlignment="center"
android:maxLines="2"
android:ellipsize="end"
android:padding="5dp"
android:background="#color/transparent">
</TextView>
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:inputType="number"
android:text="#string/tv_example"
android:textSize="40sp"
android:textStyle="bold|italic"
android:textAlignment="center"
android:maxLines="1"
android:ellipsize="end"
android:padding="5dp"
android:background="#color/transparent">
</EditText>
</LinearLayout>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center|bottom"
android:maxHeight="150dp"
android:maxWidth="150dp"
android:src="#mipmap/ic_launcher"
android:padding="15dp"
android:adjustViewBounds="true"
android:scaleType="centerCrop"/>
<Button
android:id="#+id/button_item_edit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center|bottom"
android:alpha="0.3"
android:clickable="false"
android:ellipsize="end"
android:padding="15dp"
android:layout_margin="50dp"
android:text="#string/button_edit"
android:textAlignment="center"
android:textSize="25sp"/>
</LinearLayout>
</RelativeLayout>
Which produces the following on portrait mode:
[
But, when switching it to landscape mode, the button disappears:
How can I make the missing TextView appear at landscape mode,
Or better yet - scale all items to fit the new orientation?
Basically, The text views are the important views - I want them to be visible, even at the cost of downsizing the Button and\or the ImageView
I've tried removing the android:layout_weight="1" line from the most-inner LinearLayout containing the TextView -
This makes the text apear in landscape mode, But makes the Button dissappear:
(It also makes the entire layout to be aligned to the top instead of the center of the screen in portrait mode)
Thanks
The best practice in such situation is to have 2 layout files, one for each orientation.
Create a new folder under your /res directory and call it layout-land in Android Studio and put your layout xml files for the landscape with the same naming.
Upon orientation change Android OS will use the xml file from that folder instead of trying to adjust the original one. This is the recommended approach for orientation support.
In your xml you have mentioned android:layout_margin="50dp" for your Button which is affecting your layout rendering to push the elements up.
This is resulting in hiding the textview. Try modifying the layout with less margin or using padding as an alternative. This might be helpful to retain all the elements in the rendering.
#Adiel - Create a new folder under your /res directory and call it layout-land in Android Studio and put your layout xml files for the landscape with the same naming.
Totally agree with this as Android Studio gives you an option to create a separate one upon request. Ensure any layout_width and layout_heights are defined as match_parent doesn't seem to work.
Im trying to make a Flashlight app for android (being an absolute beginner)
The concept is to make IronMan's chest light as the toggle button for the flash light UI.
I set Iron Man as a background ImageView. And set the chest light photo as the button's image src.
The problem is that, in different screen sizes, the alignment of the button gets changed as you can see in the screenshots below.
This is what it has to look like:
Button displaced when screensize changed:
If someone could help me out on how I could solve this problem, it would be great.
My XML code if that would be of any help:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:ads="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000000"
tools:context="example.flash.flash">
<!-- view for AdMob Interstitial Ad -->
<TextView
android:id="#+id/app_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="50dp"
android:text="#string/interstitial_ad_sample"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="#+id/level"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/app_title"
android:layout_centerHorizontal="true"
android:text="#string/start_level"
android:textAppearance="?android:attr/textAppearanceLarge" />
<Button
android:id="#+id/next_level_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="#string/next_level" />
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/iron"
android:id="#+id/imageView"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<ImageButton
android:id="#+id/imageButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/colorBackground"
android:src="#drawable/onn"
android:scaleType="fitCenter"
android:layout_marginBottom="57dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true" />
<com.google.android.gms.ads.AdView
android:id="#+id/adView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
ads:adSize="BANNER"
ads:adUnitId="#string/banner_home_footer"></com.google.android.gms.ads.AdView>
</RelativeLayout>
The problem is that you are designing the layout specific to one device/screen.
From the docs-
Android supports several configuration qualifiers that allow you to
control how the system selects your alternative resources based on the
characteristics of the current device screen. A configuration
qualifier is a string that you can append to a resource directory in
your Android project and specifies the configuration for which the
resources inside are designed.
See Different values folders in android as to how you can make different values/dimens.xml to suit different screens.
So create different values folder and check the docs - link
What parent layout are you using?
If RelativeLayout then you have to make buttons relative to each other.
I am new in the Android world and I have a little problem with the screen in horizontal position. My android studio version is 1.5.1.
I have already completed the vertical layout, but I have issues when I turn the mobile in horizontal position; all the images, buttons get moving and the VideoView disappears.
This how my layout looks like:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
android:fitsSystemWindows="true"
android:orientation="vertical"
tools:context="com.example.ubuntunyx.apptest3.MainActivity"
android:background="#a987b7"
android:weightSum="1">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#4c335a"
app:popupTheme="#style/AppTheme.PopupOverlay" />
<RelativeLayout
android:id="#+id/LytRelVideoResize"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_weight="0.94">
<Button
android:id="#+id/btnResize"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/btnResize"
android:layout_gravity="left"
android:onClick="btnResize_click"
android:background="#drawable/btn_redondo"
android:layout_marginBottom="39dp"
android:textColor="#ffffff"
android:layout_alignBottom="#+id/imgResize"
android:layout_toLeftOf="#+id/imgResize"
android:layout_toStartOf="#+id/imgResize"
android:layout_marginRight="41dp"
android:layout_marginEnd="41dp" />
<ImageView
android:id="#+id/imgResize"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/ocaso"
android:layout_below="#+id/barResize"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_marginRight="49dp"
android:layout_marginEnd="49dp" />
<VideoView
android:id="#+id/videoPiramides"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_below="#+id/imgResize"
android:layout_marginTop="41dp"
android:layout_alignRight="#+id/barResize"
android:layout_alignEnd="#+id/barResize"
android:layout_alignParentBottom="true"
android:layout_alignLeft="#+id/btnResize"
android:layout_alignStart="#+id/btnResize" />
</RelativeLayout>
<ImageView
android:id="#+id/imgDragDrop"
android:layout_width="118dp"
android:layout_height="100dp"
android:src="#drawable/buho"
android:layout_marginLeft="43dp"
android:layout_marginStart="43dp"
android:layout_centerVertical="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<Button
android:id="#+id/btnExit"
style="?android:attr/buttonStyleSmall"
android:layout_width="81dp"
android:layout_height="wrap_content"
android:text="#string/btnExit"
android:onClick="btnExit_click"
android:textColor="#ffffff"
android:background="#124a68"
android:layout_gravity="right"
android:layout_centerVertical="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true" />
</LinearLayout>
I was looking at: http://developer.android.com/intl/es/training/basics/supporting-devices/screens.html but it just get me more confused.
you just need to build another layout landscape
just follow the picture below:
and then you design that new layout as you wish.
OR
if you dont need that landscape (forcing the APP to set in one orientation only)
AndroidManifest.xml
and add this one of these code to the application tag
android:screenOrientation="portrait"
android:screenOrientation="landscape"
The best solution for this problem is to create design for landscape mode. You should make new folder called 'layout-land' in your res folder. In new folder create new layout file with the same name but with design for landscape mode. Android os will know when to use landscape and when to use portrait mode.
You have a couple of options here:
1. Rearrange the layout child views so that they look fine both in landscape and portrait mode. This will need trial and error and is not always possible.
2. Make your activity stick to a particular layout, regardless of changes in the device orientation. This can be done in you apps manifest file as:
<activity android:name=".MyActivity"
android:screenOrientation="portrait"
android:configChanges="orientation|keyboardHidden"/>
3.The best way: Create separate layout files for landscape and portrait orientations. In android studio it is easy. Suppose you have an activity named MyActivity, then the layout files will be something like: my_activity.xml (for normal, portrait mode) and my_activity_land.xml for landscape mode.
I have a android view with 2 buttons centered. I want to change the button sizes to be bigger when I run the app on a tablet because they look ridiculous small there since it is the same size as for the phones.
How can I do this?
This is my code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#e9e9e9"
android:orientation="vertical"
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/imageView1"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_centerInParent="true"
android_layout_gravity= "center"
android:layout_marginLeft="30dp"
android:layout_marginRight="30dp"
android:src="#drawable/icon_bakgrund_android">
</ImageView>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/TableLayout01"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_centerInParent="true"
>
<TableRow android:id="#+id/TableRow01"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:id="#+id/button1"
android:layout_width="260dp"
android:layout_height="50dp"
android:background="#drawable/nybutton"
android:layout_below="#+id/button2"
android:text="#string/las_sollefteabladet"
android:textColor="#ffffff"
android:layout_centerHorizontal="true"/>
</TableRow>
<TableRow android:id="#+id/TableRow02" android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="centerCrop">
<Button
android:id="#+id/button2"
android:layout_width="260dp"
android:layout_height="50dp"
android:layout_marginTop="10dp"
android:background="#drawable/nybutton"
android:layout_centerInParent="true"
android:text="#string/annonsorer"
android:textColor="#ffffff"
/>
</TableRow>
</TableLayout>
</RelativeLayout>
</RelativeLayout>
Here you go
insert in the button code
android:layout_weight="some integer value according to your need"
Simply make a separate layout file and place it in the folder
'Layout-xlarge'
or
'Layout-large'
You can do either of the following
make separate layout for large screen
use layout:weight for the buttons. Hence the button size will be set depending on the screensize.
You can create different dimen.xml for different screen densities, so you can have only one layout to adjust to multiple screens.
EDIT:
You have to create several folders for diferent densities (values-mdpi, values-hdpi, etc) and in each you create a dimens.xml . Then you add dimension items like this:
<dimen name="title_small_font_size">14sp</dimen>
<dimen name="header_title_font_size">32sp</dimen>
and so, in each file, adjusting the number as you need. And then, in your button you set the button attributes for example:
android:textSize="#dimen/grid_title_text_size"
Hope it helps.
As far as my knowledge goes, giving static width and height for the button will not be good option here. All you have to do is to create a background image for the button for all type of mobile and tablet size and keep these images in appropriate drawable folders, and try to give the textAppearance for the text of the button like this:
android:textAppearance="?android:attr/textAppearanceLarge"
I copy and past my layout-folder, renamed it to layout-large (with a small l) and took in all my xml views and changed them and it works fine.
Thanks!
I have two activities which opens depending on the SD card presence. One activity has three Buttons and a TextView and the other an ImageView, a button and zoom control. When I change the orientation, the buttons get scrambled around while in horizontal direction. How to go around this?
My 'SD' card layout
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#1E1E1E"
android:orientation="vertical" >
<Button
android:id="#+id/button_print"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="44dp"
android:background="#drawable/my_button"
android:text="#string/print" />
<TextView
android:id="#+id/text_SDmissing"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="80dp"
android:text="#string/SDmissing"
android:textSize="20dp" />
<Button
android:id="#+id/button_camera"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/button_print"
android:layout_centerHorizontal="true"
android:layout_marginBottom="58dp"
android:background="#drawable/my_button"
android:text="#string/camera" />
<Button
android:id="#+id/button_insert"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/text_SDmissing"
android:layout_centerHorizontal="true"
android:layout_marginTop="40dp"
android:background="#drawable/my_button"
android:text="#string/insert" />
</RelativeLayout>
You have to create separate XML files for portrait and landscape modes and place it in different directories. The device will automatically select the right one. You can use the following directory structure
res/layout/my_layout.xml
res/layout-land/layout.xml
For further reference you can check:
http://developer.android.com/guide/practices/screens_support.html
You can make a folder in your project called "layout-land" (in the "res" directory). In there you can copy all your xml styles from the normal "layout" folder and restyle them for landscape mode. Android will automatically use those layouts for landscape mode.
Your project would look like this: