My goal is to display 6 images (1 image, 6 times) across one line on my screen. My approach was to nest a RelativeLayout inside of a LinearLayout. My issue is that when I'm in 'portrait' mode, I cannot see all of my images. The more I resize my image, the more of the images I can fit, But I'm at a point where I do not want it to be any smaller. I assumed that by default, it would just wrap what it can't fit, but that doesnt seem to be the case. Theres no auto re-size to fit? Also, how can I manually decide how much space is between each image? Thanks!
Basically, you need to provide two different xml files for your app, one for portrait, once for landscape as per: Providing Resources. android will pick the proper xml file based on orientation.
and this ImageView.ScaleType explains the different scaling styles
Here is what I would suggest:
res/layout-land/main.xml
<?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="horizontal">
<ImageView
android:id="#+id/debris_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitCenter"
android:weight="1"
android:src="#drawable/image1"
</ImageView
... repeat 5 more times ...
</LinearLayout>
the weight element should make them all fit but there might be a conflict with scaleType. anyway that should do it for your landscape, for portrait, you could either make it so there were two rows of images, or you could use a horizontalScrollView as below:
res/layout-port/main.xml
<?xml version="1.0" encoding="utf-8" ?>
<HorizontalScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal">
<ImageView
android:id="#+id/debris_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitCenter"
android:weight="1"
android:padding="15dp"
android:src="#drawable/image1"
</ImageView
... repeat 5 more times ...
</LinearLayout>
</HorizontalScrollView>
really, you could prolly just use the portrait main.xml as your only layout file and just have it be horizontally scrolling regardless of orientation. you might need to change some times in the portrait main.xml as i am at work and im not sure how well weight works with horizontalScrollView
as far as the space between each element, you would use android:padding like i have above.
Related
I'm developing an app, the have 100 buttons. And I want to put all the buttons inside the screen. I'm using a GridLayout with all the buttons inside the problem that I am having is that the buttons are getting out of the screen.
This is the 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:id="#+id/content_main"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context=".MainActivity"
tools:showIn="#layout/app_bar_main"
android:layout_column="1">
<GridLayout
android:id="#+id/GridLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:columnCount="6"
android:rowCount="17"
android:orientation="vertical">
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
app:srcCompat="#drawable/numero_1"
android:id="#+id/button1"/>
The question that I have is: Is this possible to do? And this is the best approach?
I made other test where I changed the size of the image. The result is not what i expected header
Result with a different size image
As you can see in the second image the buttons in the rows are inside the screen but the position of the buttons is not ok, there are a lot of space between the last button of the row and the end of the screen.
The solution that I am looking for, is to have a layout that don't allow the buttons to get out of the screen, and that resizes the space between the buttons and the edges automatically, if the screen size is different the layout will automatically adapt to the size of the screen.
I don't think that is possible. I would suggest you to use 6 vertical LinearLayouts in one horizontal, with weight 1 on inner ones. I know that that is not most optimized way, but it's easiest. Another would be to keep GridLayout and calculate size of images and set their size from Java code.
I want to make a game with exact the same Layout across all devices. I'm familiar with dp, wrap_content and fill_parent. But they don't produce the EXACT same Layout.
Is there a way to make the width and height of various views, as well as their mangins from the edges of the device screen, in percentages relative to the screen width and height?
Something like:
android:layout_width="40%"
I know the above XML code doesn't work, but is there a workaround? Isn't there a in-Java solution to this? Something?
In the image below is what I'm trying to achive to happen in all devices.
I know the above XML code doesn't work, but is there a workaround?
LinearLayout and android:layout_weight allow you to work on a percentage basis. The following layout has three buttons, given 50%, 30%, and 20% of the screen respectively:
<?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">
<Button
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight="50"
android:text="#string/fifty_percent"/>
<Button
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight="30"
android:text="#string/thirty_percent"/>
<Button
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight="20"
android:text="#string/twenty_percent"/>
</LinearLayout>
To do things on a percentage basis, set the width or height (for horizontal or vertical LinearLayouts, respectively) to be 0dp, then assign android:layout_weight to the desired percentage (e.g., 20). If the sum of the weights will not add to 100, add android:weightSum="100" to the LinearLayout itself.
Of course, doing things on a percentage basis will not give you "the EXACT same Layout" for any conventional definition of the term "EXACT". But, perhaps it will meet your needs. It certainly can implement the marked-up design from your screenshot.
I've got a 4-item start screen in my app, which looks like the following:
What's important to me there:
- All items do have the same width (not regarding how much text is actually in it)
- Look the same on all devices (small-screen, mdpi, large-screen, etc.)
Im just wondering if there is a easy solution about this problem?
I've tried using 3 LinearLayouts but thats really awkward..
(1 presenting the layout root[vertical] and two which do each contain 2 buttons[horizonal]).
Making this layout ready for multiple screens would require a lot of fixed-width and fixed-margin hacking. Just like "button margin = 30dp on xlarge, 20 on large, 15 on normal,...".
My layout-xml:
<?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:background="#drawable/background"
android:id="#+id/main_root"
android:orientation="vertical"
android:gravity="center" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_gravity="center" >
<Button
android:id="#+id/btn_learn"
android:text="#string/mainBtn_learn"
style="#style/mainBtn"
android:onClick="handleBtnClick"
android:layout_margin="20dip" />
<Button
android:id="#+id/btn_quiz"
android:text="#string/mainBtn_quiz"
style="#style/mainBtn"
android:onClick="handleBtnClick"
android:layout_margin="20dip" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_gravity="center" >
<Button
android:id="#+id/btn_search"
android:text="#string/mainBtn_search"
style="#style/mainBtn"
android:onClick="handleBtnClick"
android:layout_margin="20dip" />
<Button
android:id="#+id/btn_more"
android:text="#string/mainBtn_more"
style="#style/mainBtn"
android:onClick="handleBtnClick"
android:layout_margin="20dip" />
</LinearLayout>
Is there a view which "auto-scales" these Buttons or still any other easier solution?
Edit:
So, in special, you need something like
button:
android:layout_width="15%" // 15% of screen width / height depending on the orientation
android:layout_marginBottom="10%" // see above
I'm pretty new to Android development but I can show you what worked for me in a similar case. I defined my layout as follows:
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<EditText
android:id="#+id/outputText"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:editable="false" />
<Spinner
android:id="#+id/outputSpinner"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:prompt="#string/OutputBaseOptionsPrompt" />
</LinearLayout>
I have a horizontal layout with two items. The LinearLayout has a width of "match_parent" so that it is as wide as the screen. Both items in the layout have the following:
android:layout_width="0dp"
android:layout_weight="1"
Since both items have a layout_weight of 1, they will be drawn at the same width. In this case, each item takes up half of the available space. If you change the weight of one of these items to "2" then it will be twice as wide as the item with a weight of "1".
Do you already have xml that makes it work on one screen size? If so post what you have so far.
I would suggest using a RelativeLayout for your root though. You can use the alignCenter attributes to float your children towards the middle. Then you just have to hard code the inner margins (how far apart you want the buttons) rather than the margin from yourself to the wall.
You could also avoid having to hard code the inner margin by making your own button 9 patch images. You can just add a border of transparent pixels in your image to represent the margin. You'll probably still want to supply an image for each density you wish to support though.
The solution is you dont use hardcoded values any where
Put three images with same name in hdpi mdpi and ldpi folders in drawables
an run the code
I am fairly new at the whole Android thing so I am hoping this is something obvious that I am overlooking since I have not been able to find a solution online yet.
I am creating a view which contains an ImageView and a "bottom bar". The problem I am having is that since the image is larger than the screen and I would prefer to use something similar to "fill_parent" or "wrap_content". Ideally I would set the ImageView's height to "fill_parent-44px", but I have not found a way to do this in the XML.
Eventually I plan to have the ImageView function with multi-touch zoom, so it is therefore not an option to resize the image for different screen resolutions.
Thanks for any help.
It's easy to do this with a RelativeLayout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<View android:id="#+id/bottombar"
android:background="#FFCC00"
android:layout_height="40dp"
android:layout_width="fill_parent"
android:layout_alignParentBottom="true" />
<ImageView android:id="#+id/image"
android:src="#drawable/someimage"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="#id/bottombar"/>
</RelativeLayout>
The important things here are android:layout_alignParentBottom and android:layout_above (see RelativeLayout.LayoutParams for all possible layout attributes).
The android:layout_height="fill_parent" is more or less ignored given the right RelativeLayout parameters, it just needs to be there to please the Android UI system.
The android:background is just for highlighting in the UI designer, and the bottombar View can be replaced by any other view like, TextView, LinearLayout, etc.
After searching for a few hours, I was unable to find the exact answer to my situation. I'm currently using a RelativeLayout and all I have is a background image and a button. The problem I'm having is placing the button in the exact location I want it to be (a little offset from the center).
My first attempt was to modify the layout_margins of the button. While this worked for the current emulator I was working with (3.7in WVGA), the positioning of the button was slightly/way off for a different screen size (such as 3.2in HVGA).
I then attempted to modify the padding of the parent layout but got the same issue. My XML looks like this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:paddingLeft="98dip" android:paddingBottom="68dip" android:background="#drawable/background">
<Button android:id="#+id/starttimer"
android:background="#drawable/button"
android:layout_width="wrap_content" android:clickable="true" android:layout_height="wrap_content" android:layout_alignParentBottom="true"/>
</RelativeLayout>
Please let me know if I'm completely off with my approach. It seems like an extremely simple problem, and I'm bummed out that it's taken me so long to try to get it. Thanks for any help!
I take it that you want to center the button on the bottom of the parent with a little offset, try layout_centerHorizontal then add your preferred margin.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:paddingLeft="98dip" android:paddingBottom="68dip" android:background="#drawable/background">
<Button android:id="#+id/starttimer"
android:background="#drawable/button"
android:layout_width="wrap_content" android:clickable="true" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" android_marginLeft="5dp"/>
</RelativeLayout>
Absolute Layout is used for absolute positions of the control.