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.
Related
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.
First the title may look senseless but I don't know how I describe my problem well in the title.
I have a Relative layout which has 2 buttons (Past games and Upcoming Games) and 2 listviews. Whenever a button is pressed the associated listview is collapsed (height will be zero) if it is already expanded or the reverse will happen. ( i used this solution)
Problem:
Everything is fine when I run it on a 5-inch screen phone. Please see the following picture:
[![][2]][2]
But if I run it on a 10-inch tablet it looks like this:
[![][3]][3]
The same will happen when it will run on less than 5-inch phone.
My questions
Do I need to make another layout for the tablet? like in the layout-large folder?
or I can use some event(s) in Jave file that dynamically set the buttons align parent bottom property when the listview is not collapsed.
or it can be fixed in my current XML
Below is the code for that part I am asking for help
<LinearLayout
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_marginTop="10dp"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/btnPastGames"
android:layout_width="match_parent"
android:layout_height="30dp"
android:layout_centerHorizontal="true"
android:layout_marginLeft="15dp"
android:layout_marginStart="15dp"
android:background="#color/YellowColor"
android:text="Past Games"
android:textAllCaps="false"
android:textSize="15sp" />
<ListView
android:id="#+id/lvPastGames"
android:layout_width="match_parent"
android:layout_height="255dp"
android:layout_below="#+id/btnPastGames"
android:layout_centerHorizontal="true"
android:layout_marginLeft="17dp"
android:layout_marginStart="17dp"
android:layout_marginTop="5dp"
android:divider="#null" />
<Button
android:id="#+id/btnUpcommigGames"
android:layout_width="match_parent"
android:layout_height="30dp"
android:layout_below="#+id/lvPastGames"
android:layout_centerHorizontal="true"
android:layout_marginLeft="15dp"
android:layout_marginStart="15dp"
android:background="#color/YellowColor"
android:text="Up Coming Games"
android:textAllCaps="false"
android:textSize="15sp" />
<ListView
android:id="#+id/lvUpcomingGames"
android:layout_width="match_parent"
android:layout_height="255dp"
android:layout_below="#+id/btnUpcommigGames"
android:layout_centerHorizontal="true"
android:layout_marginLeft="17dp"
android:layout_marginStart="17dp"
android:divider="#null" />
</RelativeLayout>
</LinearLayout>
If you guys can give me some advice on making the user interface that will run on all screen sizes and densities I will be very thankful
Thanks to anyone who will help me
You are trying to workaround functionality of ExpandableListView. Look at the following page:
http://www.androidhive.info/2013/07/android-expandable-list-view-tutorial/
My application is intended to be used in portrait mode. The application itself is locked in landscape mode (in the manifest) because I am working with an OpenCV JavaCameraView.
I would like to position a row of buttons along the bottom edge of the screen (as the user sees it). This is the right-hand side of the screen, as the phone sees it. I've tried using a LinearLayout and playing around with the gravity settings, but this orientates the buttons so that the text is facing according to the landscape orientation; e.g. when the phone is held in portrait mode (as intended), the text is orientated so that the bottom of the text is pointing left (because it has been told it is in landscape mode).
Is there any way I can make the buttons and the LinearLayout ignore the portrait/landscape settings and force them to behave as I would like?
This is my current .xml file for the activity:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:opencv="http://schemas.android.com/apk/res-auto"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<org.opencv.android.JavaCameraView
android:id="#+id/main_activity_surface_view"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
<ImageView
android:id="#+id/recordingIconImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:src="#drawable/circle_red"
android:visibility="invisible" />
<TextView
android:id="#+id/movement"
android:rotation="270"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:text=""
android:textSize="20sp"
android:textStyle="bold"
android:textColor="#FF0000" />
<LinearLayout
android:id="#+id/button_row_linear_layout"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:orientation="vertical" >
<Button
android:id="#+id/button_retry"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:rotation="270"
android:layout_weight="1"
android:onClick="captureButtonPressed"
android:text="Retry" />
<Button
android:id="#+id/button_start"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:rotation="270"
android:layout_weight="1"
android:onClick="captureButtonPressed"
android:text="Start" />
<Button
android:id="#+id/button_next"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:rotation="270"
android:layout_weight="1"
android:onClick="captureButtonPressed"
android:text="Next" />
</LinearLayout>
</RelativeLayout>
***Edit:
Adding images to clarify (as suggested in comments) and have already switched to relative layout on my own, so the .xml is also updated. Image of current state:
As you can see I've got the buttons where I would like them (used android:rotation="270"). Two issues now:
1) The text of the TextView is clipped offscreen. I'm pretty sure this is because the sizing constraints are calculated as if it is not rotated and only after layout occurs is it rotated (this is a guess, but it does appear as if that is what's happening)
2) I can't seem to get the buttons to expand to take up available space inside the linear layout.
Any suggestions would be very welcome!
Cheers.
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.
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: