I am building an Android app in which there is a list of items in a gridview, and I would like the user to select any of them.I do not want to use a radio group/radios, but an icon and a name of the item next to it.
Once the user has selected something, I have three buttons at the bottom, back, cancel and set as default.
The problem is arranging this stuff so that it appears fine on a landscape mode as well as portrait mode.
Can someone suggest a good layout skeleton?
Here is the Android layout file content
<?xml version="1.0" encoding="utf-8"?><RelativeLayoutandroid:id="#+id/widget30"android:layout_width="fill_parent"android:layout_height="fill_parent"xmlns:android="http://schemas.android.com/apk/res/android"><GridView xmlns:android="http://schemas.android.com/apk/res/android" android:id="#+id/GridView01" android:layout_width="fill_parent" android:layout_height="370dip" android:numColumns="auto_fit" android:stretchMode="columnWidth" android:layout_alignParentTop="true" android:gravity="center"></GridView><Buttonandroid:id="#+id/back"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text=" Back "android:layout_alignParentBottom="true"android:layout_alignParentLeft="true"android:layout_below="#+id/GridView01"></Button><Buttonandroid:id="#+id/setDefault"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text=" Set as Default "android:layout_alignParentBottom="true"android:layout_toLeftOf="#+id/cancel"android:layout_below="#+id/GridView01"></Button><Buttonandroid:id="#+id/cancel"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text=" Cancel "android:layout_alignParentBottom="true"android:layout_alignParentRight="true"android:layout_below="#+id/GridView01"></Button></RelativeLayout>
Use Relative Layout,Click Here to know how to use Relative Layout.
Related
I'm developing an android app where in I have the login button at the bottom of the layout. On rotation of the device to landscape view, the button disappears making the UI pretty much useless.
So my question is: Should I rearrange views in the existing layout and enable scrolling or create a new layout for landscape view?
If you agree with the first option, how can I make sure that the login button stays intact at the bottom in the portrait as well as in landscape view?
Specifying a landscape layout should be your best option. With this, you can setup exactly what you want for each orientations.
Add ScrollView as a parent to the xml file of your login page
Example
<ScrollView android:id="#+id/ScrollView01"
xmlns:android="http://schemas.android.com/apk/res/android"
android:fillViewport="true"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<--your layout
</ScrollView>
I have an activity with a GridView inside it. The ActionBar is set to overlay mode.
Right now, you can only see half of the first image because the ActionBar cuts it in half.
How do I add padding to the interior of the GridView so that it initializes in such a way that you can see the entire first image? Or is there another way? For example, how would I go about extending GridView to create one that has a built-in configurable, dynamic gap at the front?
example (although ListView instead of GridView): reddit is fun app: https://play.google.com/store/apps/details?id=com.andrewshu.android.reddit
edit: I'm hiding the ActionBar whenever the user scrolls down at a certain rate or past a certain level.
Use a ViewTreeObserver.OnGlobalLayoutListener in your Activity or Fragment to determine the number of columns your GridView will display (presuming it varies based on screen size and orientation), then use that number in your Adapter implementation. In getView(), if position is less than the number of columns, return an empty view whose height matches the Action Bar, otherwise bind your data as you would normally.
There is an excellent example that does exactly what you want in Google's "Displaying Bitmaps Efficiently" sample application: https://developer.android.com/training/displaying-bitmaps/display-bitmap.html
Here is the relevant source code:
https://android.googlesource.com/platform/development/+/master/samples/training/bitmapfun/src/com/example/android/bitmapfun/ui/ImageGridFragment.java
Try adding android:layout_marginTop="?android:attr/actionBarSize" to the parent of your GridView, or the GridView itself if it doesn't have one.
This will push your layout down so that it rests below the ActionBar.
Edit
You may want to conside using a ListView instead of a GridView. Reason being, you can easily achieve that effect by creating a fake header and then calling ListView.addHeaderView. You can't do the same with a GridView. What you're talking about can definitely be done with a GridView, but it will require you to subclass it and modify it quite a bit.
Header
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="?android:attr/actionBarSize" />
Having ActionBar in overlay mode, the following works for me:
<GridView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="?android:attr/actionBarSize"
android:clipToPadding="false"
android:numColumns="auto_fit"
android:columnWidth="120dp"
android:verticalSpacing="8dp"
android:horizontalSpacing="8dp"
android:stretchMode="columnWidth"
android:gravity="center"
android:id="#+id/gridLibrary" />
The most important lines here are: android:paddingTop and android:clipToPadding.
In my application, when I open an activity with the gridview above, the first row is fully visible. Then, when I scroll down, the ActionBar hides and the gridview fills up all the screen.
I've been playing around with Android lately and I've run into a problem building UIs. More precisely, I'm pretty sure when I was building the first layout, the layout editor in Eclipse adjusted the visible area so when I added new widgets, it stretched in height to display them.
Now I have a problem that whenever the widgets fill the area, it's impossible for me to properly lay them out since the preview window displays only the height of a single screen, even if it's a simple LinearLayout with a bunch of textviews to fill about 2 screen heights.
Also, I'm using the latest stable Eclipse and ADT plugin, target platform is 2.2.
EDIT
What I meant was that the editor doesn't display the elements that don't fit inside a single screen height and clips the stuff (see the image to see how it clips, there are actually 2 more textviews that are clipped totally) which makes impossible to build UIs that are taller that a single screen height.
That's normal there is a clipping occuring. I just tested it on my eclipse and I have the same behavior than you.
If what you want to achieve is creating a layout bigger than your screen size, you should use scroll views (and insert your initial layout in it):
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
isScrollContainer="true" >
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/exampleView"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center_horizontal"
android:orientation="vertical" >
...
Once in scroll mode, the layout will auto adjust.
Try this:
Hope this helps. If this hasn't solved your problem, then please explain your question again in different words, because that's how I understood it.
what's the best layout to use to display a series of image button, side by side (as displayed in attached image), and that will fills the screen horizontally when the orientation changes to horizontal (as attached)?
horizontal orientation http://img254.imageshack.us/img254/657/layoutxs.png
vertical orientation http://img208.imageshack.us/img208/2428/layouthy.png
<GridView android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:numColumns="auto_fit" >
</GridView>
It looks like you want to use something like FlowLayout, which doesn't exist in Android. You can make your own, however. More information
How can I do something like a FlowLayout in Android?
http://nishantvnair.wordpress.com/2010/09/28/flowlayout-in-android/
I have an activity with a layout similar to yours, but I use a different method. What I do is define a different xml layout for landscape and portrait. So I have layout-port/mylayout.xml and layout-land/mylayout.xml and the system determines which one the activity should use.
just create two separate layout files and call setContentView() in your onOrientationChanged().
I'm using Eclipse Helios 3.6.2 for Android development and whenever I design a layout in the graphical layout mode (not the XML layout), I can't see the entire content of a ScrollView in the graphical layout.
Specifically, when I'm using a ScrollView and the height of the ScrollView exceeds the height of the content view area (i.e., the phone screen visible in the graphical layout mode), I am not able to see the items that I have at the bottom of the screen.
In Eclipse Helios 3.6.1 there was an option called "expand to fit"; whenever I used to click on it, the phone screen increased in size to encompass all the elements that I had added. How do i achieve the same thing in 3.6.2?
There's no way to scroll the content inside the Android Layout Editor. What you can do, though, is create a new device simulation with a huge height, so you can see what is hidden in the ScrollView.
To do so, go to the dropdown menu below "Editing config" ang choose "Custom..." (top-left corner of the Android Layout Editor). Select one of your preferred resolutions (mine is 3.7in WVGA) and hit "Copy". The copied resolution will appear in the "Custom" group in the bottom of the list.
Choose your new configuration and hit "Edit...". In there, you can select the "Screen Dimension" property and change the value. I created a resolution 2000x480 (portrait). This way, I can see the whole content inside the ScrollView.
Hope it helps.
Use an included layout for the scrollview.
Move the entire scrollview layout in a separated file (ie: my_scrollview.xml).
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
...
</ScrollView>
The layout editor will then display the entire scrollview.
In the main layout use in place of the scrollview something like:
<include layout="#layout/my_scrollview" />
There was a button that allow to remove the clipping generated in a scroll view and show all the views that you have inside it.
In later sdk versions the button is removed, and the view mode is triggered if the scroll view is the root element of the view, so my solution when this doesn't happen (because you have a relative layout with some buttons over the view for example) is extracting the scrollview to it's own view, and including it in the original layout with an include tag.
My quick fix.
In the upper right corner of the graphic layout window you will see a drop down menu that shows what minimum version of android you are creating for. Make sure you have it set to at least android 2.1. I had an app at 1.6 and i had the same issue you have. swapped minimum build platform to 2.1 and it was magic.
Hope this helps.
If use Relative layout, you can use layout_marginTop negative, like that:
<ScrollView
android:id="#+id/scrollView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="-500px"
android:layout_alignParentLeft="true"
android:layout_below="#+id/linearLayout" >
Increase the layout_marginTop to move scrollview.
The drop-down on the left (under the text "Editing config: ...") allows you to change the simulated screen size in the graphical layout. Perhaps that is what you are looking for.
Just click on the Config window of the Graphical Layout and click on the preview for all screen sizes and u will be able to see your scroll
Use the android:scrollY in the ScrollView child and remove it before publishing.
<ScrollView ... >
<LinearLayout ...
scrollY="300dp">
</LinearLayout>
</ScrollView>