android best layout to display image button that will fills the screen - android

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().

Related

Android buttons are cut off (LinearLayout horizontal)

In my app I am calling API to get list of people with some informations (address, phone numbers etc.). Under every phone number, I am creating programatically 3 buttons (add to contacts, edit and call). Problem is, that last button is cut off (small screen). I am using Linear Layout horizontal.
Is there any way to control size of screen and if needed, put last button to second line? When I rotate screen to landscape, I have enough space, so buttons should stay in one line.
Now, I am using horizontalScrollView with visible scrollbar. It's working, but I am not very satisfied with it.
Thanks for help.
I'm not really sure if you can do that with LinearLayout. But you could do that using FlowLayout. Check this link: https://github.com/ultimate-deej/FlowLayout-for-Android.
This layout moves the buttons to the next line if there is no space for them on the screen.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weight="1" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weight="1" />
</LinearLayout>
the weight attribute will automatically adjust your button size
make sure you set width to match parent for all buttons.
Best to create a new variant of the listitem layout for smaller screenshots:
layout-w200dp/listitem.xml : layout with 3 buttons on one line
layout/listitem.xml : layout with buttons on separate lines
Android will then choose the multiline layout when the current available width is smaller than 200dp. (Note that you can still tweak the 200 to a different value)
Alternatively you can also use an alternatieve linearlayout which does the wrapping for you: Flowlayout
This is probably more complicated to achieve that you wan't it to be but the best shot is to use some adapter based solution:
GridView - this is the old solution, better go for the 2nd
RecyclerView with StaggeredLayoutManager setup to your needs
Simple solution is using android:layout_weight="1" and android:layout_width="0dp" as params for each button in your LinearLayout but then they will fit the whole screen and take the same percent of the width, and if the screen is too small buttons might get cut off.

Android Studio: View content in scrollView that is off the screen

I'm brand new to android development and I'm using both design view and text view to create a layout.
I've just used a scrollView element on the screen and have started to fill in all of the content. Unfortunately, the content is going off of the page (obviously will be scrollable when it's built). But I would like to be able to see the designed content before I run a build to see it.
Is there any way to expand my view of the scrollView element so I can see the content below the screen?
If you put all of the content you want in a separate layout using merge tag as the top level element you should be able to preview that layout in the preview window. Then just use an include tag to put it into the scrollView
eg
<merge xmlns:android="http://schemas.android.com/apk/res/android">
Your content here
</merge>
And
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<include layout="#layout/yourlayout"/>
</ScrollView>
See http://developer.android.com/training/improving-layouts/reusing-layouts.html
Well, obviously you can't scroll the screen in Android Studio, but you can set the visibility of any parent view to gone to see how your off-screen views look like, then change it back by removing the visibility attribute in xml.
You can also copy the views that are off-screen and paste them in another new layout for testing purposes only to see how it looks like.
Generally, you can just run the emulater in Android Studio and see how your design looks like too.

ActionBar overlay with GridView padding or custom GridView to show entire first image?

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.

android layout: nested weights or relative view

I'm trying to assemble a layout that would be fairly easy to do with weights in that everything is either 1/2, 1/4 or 1/8 of its parent, but I've heard that doing nested weights is bad for loading/performance and that relative layouts are better.
To be honest, I don't like relative layouts. I understand how to arrange things right next to or on top of something I've already put down, but struggle to understand how to arrange things in a manner similar to how I would with weighting.
This is a rough drawing of how I would like my layout to look like with the measurements on the sides. I could easily do that left grouping (Header, Name, Image, Type, Rank/Tier) but I'm not sure how to arrange the other side especially in how to maintain the height of the description box so that the rest underneath doesn't move if the content of that box changes.
[Edit]* I will set it up to always be in landscape mode
You could have two RelativeLayouts. One for the left side, and one for the right side. That of course, would only work for landscape mode, in which case scrolling would be the only other option for portrait. So you can do
Landscape
<LinearLayout
android:layout_width=""
android:layout_height=""
android:orientation="horizontal" >
<RelativeLayout..> RelativeLayout/>
<RelativeLayout..> <RelativeLayout/>
<LinearLayout/>
Portrait
<LinearLayout
android:layout_width=""
android:layout_height=""
android:orientation="vertical" >
<RelativeLayout..> <RelativeLayout/>
<RelativeLayout..> <RelativeLayout/>
<LinearLayout/>
So you still have control where the views lie in each section, but they still stay in each side respectively.

Multiple views on top of an ImageView

I'm trying to port an app from iOS to Android. In my iOS app I have an image view which displays a map, and on top of it I want to display multiple button views on certain specific positions.
None of the standard views in Android seem to fit my needs, but I am surely missing something. How could I achieve this?
Thanks
The easiest thing to do would be to use any layout that's best suited for your needs (LinearLayout, FrameLayout, RelativeLayout, etc.) and set its background to any image you need. I believe the image will automatically scale to fill the corresponding Layout. Put the image into the appropriate drawable folders - and format your XML similar to this:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/buttons"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/background_image">
...
</RelativeLayout>

Categories

Resources