In Android, i noticed that you can have a fixed view on top of another. For example, when you open your browser, and tap the search box, a keyboard prompt pops up (on top of a listview). However, notice that you can still scroll up and down on the listview without the keyboard going away. Like:
would someone please explain (preferrably some sample code in addition) how this works?
What i'm trying to do is just have a custom listview that always has a floating navigation bar on top of the listview and also on the bottom of the list view (it's not actually a header/footer of the listview, it's more like a header/footer of the screen). It would be similar to the example i just described, where the user can interact with both the navigation bar as well as the listview "underneath" the nav bar.
I am somewhat new to Android development, so please be nice and provide a little bit of details if you would :) much thanks in advance!!
whoops. looks like someone had a similar issue:
Layout Layers? Z-Axis?
and this post http://android-developers.blogspot.com/2009/03/android-layout-tricks-3-optimize-by.html explains how FrameLayout works and also how works, which is an even better alternative.
FrameLayout lays object in a different Z-axis, so this is the solution i was looking for.
There are many ways to achieve that, the simpler i can think of is using linear layout :
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/header">
//Here you add whatever you want in your "header"
</LinearLayout>
//create your listview
<ListView
android:id="#+id/content_list"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:cacheColorHint="#00000000"
android:layout_marginRight="10dip"
android:layout_marginLeft="10dip"
android:layout_marginTop="10dip"
android:layout_marginBottom="10dip"
android:scrollbars="none"
android:paddingBottom="5dp"
/>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/footer">
//Here you add whatever you want in your "footer"
</LinearLayout>
Related
I'm working on an Android app with a slightly complex layout and I'm having nightmares to make it work the way I want.
My main layout is defined like this:
<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"
android:background="#000000"
tools:context=".MainLayout" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<RelativeLayout
android:id="#+id/content"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:scrollbars="none" />
<LinearLayout
android:id="#+id/menudown"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
... buttons ...
</LinearLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerInParent="true" >
... header content ...
</LinearLayout>
</RelativeLayout>
The idea of the layout is having a content frame(content), a footer menu (menudown) and a header (header) hovering over the content, aligned to the top of the screen. - Sorry guys, no image, confidential project.
The content is inflated with other layouts, depending on the section the user is, and some of them are forms to be filled. So, i just used the adjustPan and everything worked fine.
The problem here is: the client asked me to make the content scrollable while there's a soft keyboard showing, so that the user can view whatever he wrote on the other fields.
And it's painful because: the form fits the screen, so using content as a scrollview won't help, unless it gets resized.
And simply changing to adjustResize does not work because: the menudown goes up with the soft keyboard, which should not heappen. Also, the visual effect is terrible.
The app was already made for iPad (by someone else), and what heappens there is: the menudown remains aligned to the bottom of the screen, under the soft keyboard, which pushes only the content view up. Then, the content becomes scrollable, so that the user is able to see it entirely.
I have this same issue too, making keyboard behave the same way as it does on iOS. The best thing I can get from all the other posts is manually detecting the soft keyboard and moving the view up the difference.
This seems to be the best: How to check visibility of software keyboard in Android?
I've to design a UI for an Android app where i've 10 vertical tiles containing image and text(the 2 big boxes in the picture) and on clicking a tile, it disappears and is replaced by scrollable gridview containing 6 elements(shown in the centre of figure below) on the same page. (shown by an animation)
Here is a snapshot of the view I'm trying to explain. This images shows only 2 out of 10 tiles and a gridview which appears on click Each of the white box contains image and text. I'm not good at designing, so a detailed answer of implementing this would be appreciated. Thanks.
There is not much details in your question, even the picture does not clarify everything, but here is a stab at it.
Not sure what you mean when you say the tiles "expand" further, do you expect to see the six tiles in the middle to appear at that time or are they always there? if they appear, would that be animated?
To achieve the picture you have, you should probably get a RelativeLayout at the top level.
That's just because you have this date TextView on the top right and the handle to a SlidingDrawer at the bottom. You can set the background of that RelativeLayout with your wallpaper theme and I guess the blue bar on top if that's static.
Then inside this top-leve RelativeLayout you have a LinearLayout with an horizontal orientation. This one will contain the three "windows" on your picture.
In that horizontal LinearLayout, first you have another LinearLayout with a vertical orientation, then a ViewPager and then another vertical LinearLayout similar to the first one (not sure how the right part is different from the left one or that is supposed to be a complete mirror... ?).
So in summary:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android:id="#+id/top_level"
android:layout_height="fill_parent"
android:layout_width="fill_parent">
<TextView
android:id="#+id/date_text"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:paddingTop="..." // fill in some space to offset from the top of the screen
android:paddingRight="..." // same thing to keep it off the right edge
/>
<LinearLayout
android:layout_height="..." // set the height of your content in the center of your screen
android:layout_width="fill_parent"
android:layout_below="#+id/date_text"
android:orientation="horizontal" >
<LinearLayout
android:layout_height="fill_parent"
android:layout_width="wrap_content"
android:orientation="vertical" >
< add here some of the stuff you have above your tile like that RSS icon and so on />
<ListView
android:id="#+id/tile_list"
android:layout_height="fill_parent"
android:layout_width="fill_parent"/>
</LinearLayout>
<ViewPager
android:id="#+id/pager"
android:layout_height="fill_parent"
android:layout_width="0dp"
android:layout_weight="1" // so that will fill the remaining space between the left and the right parts
/>
<LinearLayout
android:layout_height="fill_parent"
android:layout_width="wrap_content"
android:orientation="vertical" >
< add here some of the stuff you have above your tile like that RSS icon and so on />
<ListView
android:id="#+id/tile_list"
android:layout_height="fill_parent"
android:layout_width="fill_parent"/>
</LinearLayout>
</LinearLayout>
<SlidingDrawer
android:id="#+id/drawer"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:handle="#+id/drawer_handle"
android:content="#+id/drawer_contents">
<ImageView
android:id="#+id/drawer_handle"
android:src="#drawable/image for the tab..."
android:layout_width="fill_parent"
android:layout_height="wrap_content">
</ImageView>
<Another Layout for the content of the drawer
android:id="#+id/drawer_contents"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
>
....
</Close that layout>
</SlidingDrawer>
</RelativeLayout>
From there, there is still quite a few things to fill up and some code to write to fill the lists of tiles (on the left and right), handle when the user click on an item, and then also display the content of the ViewPager in the middle of the screen. You'll probably want to use a GridLayout in each page there.
If you need to hide that ViewPager until the user click on some tile, you can set the visibility to hidden and change it in your code.
UPDATE
Now there is more information on how this moves......
OK, so keep the top level RelativeLayout with the date and the SlidingDrawer at the bottom.
In the middle part, you can use the HorizontalListView that was put together by this person: How can I make a horizontal ListView in Android?, the code and instructions and example can be found here: http://www.dev-smart.com/archives/34
Then you need to create your own Adapter to populate that List. You can base it off the BaseAdapter (that decision is more dependent on how your images / information is stored).
In the getView function of that Adapter, can have a layout where both the collapsed and expanded views are combined into one FrameLayout, but only one is visible at a time. It will look like something like this:
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="fill_parent" // assuming the HorizontalListView is set with the right height
>
<LinearLayout
android:id="#+id/collapsed_view"
android:layout_height="fill_parent"
android:layout_width="wrap_content"
android:orientation="vertical" >
< add here some of the stuff you have above your tile like that RSS icon and so on />
</LinearLayout>
<ViewPager
android:id="#+id/expanded_view"
android:layout_height="fill_parent"
android:layout_width="0dp"
android:layout_weight="1" // so that will fill the remaining space between the left and the right parts
android:visibility="gone"
/>
</FrameLayout>
In the list adapter, you will need to set proper tags to the different views, so when a user clicks on one image, you know which one was clicked. To expand one view, you change the visibility of the LinearLayout to gone and the one of the ViewPager to visible.
If there should only be only one expanded at a time, you can have a state variable in your Adapter to say which one it is and set the visibility properties correctly for all the views in the list. Then you call invalidate on the ListView to have it refreshed.
There is quite a bit of code to write to do all this, but if you keep it organized, it should not be too bad....
I recently asked a question about how to add a view on top of a view, after asking that I realized I needed to added a better layout to my app before proceeding further.
I was reading Android Layout Tricks but noticed it was specifically for text views and image views. I'm looking to do it with two custom views. So I decided to whip up a quick image in paint to hopefully show more clearly of what I'm wanting to do.
This is how I want my layout to split the views. :
This is how it would look with the views drawn. Obviously the purple and blue boundaries would be the background color (greyish). The data above simply displays the y-intercept of the graph drawn with respective color. (So there would be multiple graph views drawn on top of each other)
So my question is, what would my main content view look like? I assume it would have a Linear layout but I'm rather new to these layouts.
EDIT
Using TextViews I'm able to come up with something similar using the following XML:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:text="Data Placeholder"
android:background="#733674"
android:textSize="15pt"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="20"/>
<TextView
android:text="Graph Placeholder"
android:background="#374F82"
android:textSize="15pt"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="80"/>
</LinearLayout>
</LinearLayout>
So The only question that really remains is, am I supposed to use TextViews? Meaning in my Activity am I able to add my custom views where these TextViews are? Or am I supposed to add my custom view to the XML?
Ie.
<DataView
android:text="Data Placeholder"
android:background="#733674"
android:textSize="15pt"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="20"/>
<GraphView
android:text="Graph Placeholder"
android:background="#374F82"
android:textSize="15pt"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="80"/>
My custom views are written in Java and I'm not sure how I would let the layout know where the views are located if I was to do it this way.
Try this: http://developer.android.com/resources/tutorials/views/hello-linearlayout.html
It has some very useful information which might help you out in regards to layout_weight as Michell Bak mentioned in the comment.
And here's the page for the Hello Views:
http://developer.android.com/resources/tutorials/views/index.html
Not to be rude, but it would be much better for you to peruse these and learn the xml on your own. That way you can actually understand it and be better able to re-create it later.
I was quite overwhelmed at first with all the code I didn't understand (including xml files), but with a little practice it becomes very easy - just time consuming.
The main thing I'm confused about is what kind of View to put in the
layout. In the examples they use TextView or ImageView, but mine is a
custom view
Well, for your "Custom Data View", you would use a LinearLayout with android:layout_width="fill_parent" and android:layout_height="fill_parent" and android:layout_weight="1" and android:background="#BA4AAB" (See http://www.colorpicker.com/)
Then for your Custom Graph View, I would use:
android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_weight="4" android:background="#7D4ABA"
Note the layout_weight and background values I put are kind of guesses, you might have to tweak them some to match what you want.
The two linearlayouts that I mentioned would be inside one larger LinearLayout with android:orientation="vertical"
Then for the data in the top, you would use 4 text Views, and in code, you'd use setText(...) on those text views to put your data in.
In the xml for textview1, you would add android:id="#+id/textview1" then in code add TextView textview1 = (TextView)findviewbyId(R.id.textview1); then textview1.setText(myString);
For the graph in the bottom part, you would use 2 views for the base of the graph, and set there android:layout_width and android:layout_height to whatever suits you using dip, dp, or px units.
For the lines that you draw, I believe you would have to use the canvas class with a bitmap and call canvas.drawLine(...) (see http://developer.android.com/reference/android/graphics/Canvas.html)
Im trying to have a searchbox on the top of my list view. But I want this searchbox to disapear sometimes and the listview to resize to regain space. Is there a way I can do that without reloading another and different layout ???
is there a way to add and remove a component from the current view ?I have been playing with setvisibility but it doesnt resize anything.
Please, if you know, give code example ! :)
I did this with a layout like this
<RelativeLayout android:id="#+id/editFrame"
android:layout_width="wrap_content"
android:layout_below="#id/imageAttachments"
android:layout_height="wrap_content"
>
<EditText android:id="#+id/editText"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
></EditText>
</RelativeLayout>
<ListView android:id="#+id/ListView01"
android:layout_below="#id/editFrame"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
></ListView>
Then, in the code, do the following:
findViewById(R.id.editText).setVisibility(View.GONE);
to free up the space, or
findViewById(R.id.editText).setVisibility(View.VISIBLE);
to show the search box.
Instead of the EditText, one can as well use any other single control or a layout for a combination of controls.
Setting its visibility to GONE will make the surrounding editFrame layout (can as well be a FrameLayout) shrink to zero size and reclaim the space for the ListView (which is set to be layout directly below the editFrame layout).
I need to create a layout with a title bar on the top and a list view with n sections. The
list header of every section has got two distinct Buttons that must be clickable and focusable independently from each other. This is the code of the layout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:orientation="vertical">
<include layout="#layout/title_bar" />
<ListView android:id="#android:id/list"
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight="1.0"
/>
</LinearLayout>
I tried this two solutions but I've found issues that I am not able to solve in both:
1) Using a sectioned adapter (source code can be found here). It works fine without the title bar but with the title bar the default focus algorithm doesn't work any more.
2) Using an ExpandableListAdapter (in this case obviously the ListView in the layout becomes an ExpandableListView). It works fine but if I press the dpad center button on group layout both buttons are clicked. I did not find a way to solve this.
Anyone can help?
Thanks very much!
How about trying Merge adapter https://github.com/commonsguy/cwac-merge it allows you to add multiple list and buttons !!