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:
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.
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.
I am develop xml with some image button,image buttons show properly in emulator but it Disorganization on
devices(for example galaxy fit)
As described in emulator https://www.dropbox.com/s/qeecp868ht61sck/emulator.jpg and galaxy fit https://www.dropbox.com/s/23r9tvtp0tcn7bs/fit.jpg
what change imagebutton Proportional to size device?
what can i do?
this is my 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"
tools:context=".Main"
android:background="#drawable/backmain" >
<ImageButton
android:id="#+id/btnfehrest"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="53dp"
android:background="#null"
android:src="#drawable/fehrest" />
<ImageButton
android:id="#+id/btndarbareh"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/btnfehrest"
android:layout_marginLeft="21dp"
android:background="#null"
android:src="#drawable/darbareh" />
<ImageButton
android:id="#+id/btnmahsulat"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignTop="#+id/btndarbareh"
android:layout_marginRight="17dp"
android:background="#null"
android:src="#drawable/mahsulat" />
<ImageButton
android:id="#+id/btnkhoruj"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/btndarbareh"
android:layout_centerHorizontal="true"
android:background="#null"
android:src="#drawable/khoruj" />
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/main"
android:scaleType="fitXY" />
</FrameLayout>
</RelativeLayout>
It is all because you are using Relative Layout in your xml
Relative layout always maintains a relationship with other views in your xml either with Parent view or with child views.
so on small screen your FrameLayout with button image trying to fit in the screen as it maintaining the relationship with other views, that's why its overlaping.
Talking about giving the suggestion regarding this.
1) You can use Linear Layout with scroll view, ie if views gets out of screen you can see them by scrolling down.
//If you don't wanna do this
2) You can create another xml in layout-small with same name.
Example:
res> layout> main.xml
and
res> layout-small> main.xml
Second option will help you in creating multi support for different screen sizes.
Note: By Default layout-small folder is not present but you can create it.
Hai all I am new in android programming.....
For my application I am using image button and it successfully installed on the device.
But when I rotate the screen all the button position get changed...
and I need all the button placed at centre of the screen....
And here is my code....
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:id="#+id/testText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#FFCC99"
android:textSize="24dp" />
<ImageButton
android:id="#+id/up"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_marginRight="124dp"
android:layout_marginTop="80dp"
android:src="#drawable/up" />
<ImageButton
android:id="#+id/left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_below="#+id/up"
android:layout_marginRight="200dp"
android:layout_marginTop="150dp"
android:src="#drawable/left" />
please help.......
<ImageButton
android:id="#+id/right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_below="#+id/up"
android:layout_marginRight="50dp"
android:layout_marginTop="150dp"
android:src="#drawable/right" />
<ImageButton
android:id="#+id/down"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/up"
android:layout_alignParentRight="true"
android:layout_marginRight="124dp"
android:layout_marginTop="80dp"
android:src="#drawable/down" />
</RelativeLayout>
well if u are creating your app for both potrait as well as landscape mode then you have to make two different layouts otherwise you can restrict your app to display your app only on the potrait mode by adding a screenOrientation property in your manifest file
android:name=".ListViewImagesActivity"
android:label="#string/app_name"
android:screenOrientation="portrait"
change your layout to relative layout -- and you can also put a different layout for landscape and portrait refer supporting multiple screens by android developers you will understand in a better way http://developer.android.com/guide/practices/screens_support.html
Create layout xml file for both landscape and portrait mode is the good practice. You can also manipulate it through Layout changes, but its recommended to use two layout files.
Then put the landscape layout file in layout-land folder and other in layout-port folder.
For more info : Click here for more info from android developer site