I want to let the user know what page of the app he is on using tabs. So if he is on page one the page one tab will be lit and if he is on page two the page two tab will be lit etc. But i want it so that the tabs don't have any function. They are stay the same across all the pages (execpt what is lit) and do not have touch/click events. Should I use tabs for this or is there a better option? How exactly do I accomplish this with tabs for the better option? Thanks in advance
Probably the best way to do this is to avoid using the tab widgets altogether, and simply roll your own with TextViews arranged in a container like LinearLayout.
<?xml version="1.0" encoding="utf-8"?>
<!-- Top-level layout for page -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!-- Tab Bar -->
<LinearLayout
android:id="#+id/tab_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<!-- Tab 1 -->
<TextView
android:id="#+id/tab_bar_file"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/file_label"/>
<!-- Tab 2 -->
<TextView
android:id="#+id/tab_bar_edit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/edit_label"/>
<!-- More tabs go here -->
</LinearLayout>
<!-- Page content goes here -->
</LinearLayout>
Some notes about this:
You can set padding on the TextView
to expand the tab size. You can set a
background drawable (including a
color or an image resource) to
change the 'look' of the tab, as
well as style the text.
You can extract the enclosing LinearLayout for the tab bar into a
separate XML file, and then use the
<include> directive to incorporate
it into whatever layouts need to
display the tab.
In your Java code, you simply change
the style/color of whatever tab is
current, to highlight it for the user.
Related
I am developing application which requires many (more than 80) screen layouts (each layout having different image views, buttons, textviews and so on) and I have to be able to switch between them (upon button clicks). I am also using SlidingMenu so I would very much like to have only one Activity (I am currently using ActionBarActivity and the SlidingMenu serves as expandable navigation TreeView).
So my question is, what is the best practice to be able to switch between a lot of unique screen layouts within one activity ?
I suggest two ways:
1) Use FrameLayout, and Fragment
2) Use ViewFlipper in main.xml that in this one every child of ViewFliper is one of your 80 views like:
<ViewFlipper ...>
<!-- first view -->
<LinearLayout ...>
</LinearLayout>
<!-- second view -->
<LinearLayout ...>
</LinearLayout>
<!-- third view -->
<LinearLayout ...>
</LinearLayout>
<!-- and so on -->
</ViewFlipper>
Of course you can create 80 separate xml files and include them in ViewFlipper.
I have a drop down menu in a header. When a button is pressed the drop down menu comes down. The problem is all the other views in the activity are positioned with android:layout_below="#id/header" and drop down menu pushes everything down because it increases the header's height. I need to exclude the drop down menu from android:layout_height="wrap_content" in order to prevent that. Is it possible?
NOTE: I can solve the problem programmatically, I just want to learn whether it is possible to exclude an item from "warp_content" in XML.
You cannot exclude ViewGroup's child from being considered during layout calculations unless you set android:visibility=gone. But you may want to replace your main container with RelativeLayout which then would let you position some elements as you wish
Start off with a RelativeLayout, than add all you items in the RelativeLayout, and lastly, put your header file at the bottom of your xml (at the bottom in the sense, that it will show over all other elements). E.g. something like this:
<!-- Root element -->
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- First text view, the margin_top defines space for your header -->
<TextView android:id="#+id/tv1" android:layout_margin_top="height_of_your_header"/>
<!-- TextView below another view -->
<TextView android:id="#+id/tv2" android:layout_below="#+id/tv1" />
<!-- Your Header file, which will be positioned over all elements
- When closed, it will fit above #id/tv1
- When opened, it will float above the other elements -->
<include
layout="#layout/header"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
Good day (or evening, or night)
I'm developing an app for android and I'm very curious about one thing. I have an activity, where user chats with another, like "im" chat. There are an EditText on the bottom and some kind of actionbar on the top. What I need is when user enters a message and the software keyboard is on screen, my activity should move up, but the actionbar should still be "glued" to the top of the screen, because it has some valuable controls on it.
Again, that's not an ActionBar, but just a 48dp height layout in a parent vertical linear layout. So I need to know is there an easy way to prevent it from moving to the top, when the layout moves off the screen.
I tried to put everything in a FrameLayout and put this bar on top of it, but on keyboard opens it goes off the screen too...
On you Activity at AndroidManifest you should put this: android:windowSoftInputMode="adjustResize"
Use something like this:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<com.myapp.MyActionBar
android:layout_width="match_parent"
android:layout_height="48dp"/>
<LinearLayout
android:id="#+id/mylayout"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1dp"/>
<!-- Add your edittext and button -->
</LinearLayout>
This will make sure the actionbar and edittext + button are allways on screen, and the mylayout takes up the rest of the screen. When your keyboard is shown, the mylayout will shrink.
Try adding android:windowSoftInputMode="adjustResize" to your activity in the manifest. This tells Android to completely resize your layout when the keyboard comes up, rather than pan it. Note that if there isn't enough room for the entire layout this still won't work. But you ought to be able to make it work if your top level layout is a RelativeLayout, with the edit text set to align bottom, the top bar to align top, and the middle section to fill_parent and be above the edit text and below the bar.
use a RelativeLayout as your base Layout and add android:layout_alignParentTop="true" to your action bar to keep it up
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<LinearLayout
android:id="#+id/action_bar_layout"
android:layout_width="match_parent"
android:layout_height="48dp"
android:layout_alignParentTop="true" >
</LinearLayout>
<TextView
android:id="#+id/text_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true" />
</RelativeLayout>
i am targeting an app on android 2.1. i am having a layout which contains three sections. the header, mainbody and the footer. the footer remains same all through the application lifecycle. the footer has four options for the user to select(like four tabs). when the user selects each option in the footer the content has to change in the mainbody. and when the user interacts with the UI in the mainbody, there is a need to change the content of just the mainbody(like activity replacing an activity). and the user selection in the footer has to remain highlighted untill user selects another option in the footer.i alomost have a need like, launching activities within the same tab, but the tabs are placed below. a lot of people have suggested using activitygroup but as it is deprecated how do i go about doing this?. if anybody needs more clarity about question i am ready to provide
If you want support from lower versions like 2.1 and higher I can propose my way. I always use separate XML layout for tray (footer in your case), for example (res/layout/tray.xml):
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/mainMenu"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#EEEEEE"
android:gravity="bottom|fill_horizontal"
android:orientation="horizontal"
android:padding="5dp" >
<ImageView
android:id="#+id/addBtn"
android:layout_width="50dp"
android:layout_height="50dp"
android:src="#drawable/add" android:layout_weight="0.2"/>
<ImageView
android:id="#+id/catalogBtn"
android:layout_width="50dp"
android:layout_height="50dp"
android:src="#drawable/catalog" android:layout_weight="0.2"/>
<ImageView
android:id="#+id/searchBtn"
android:layout_width="50dp"
android:layout_height="50dp"
android:src="#drawable/search" android:layout_weight="0.2"/>
<ImageView
android:id="#+id/settingsBtn"
android:layout_width="50dp"
android:layout_height="50dp"
android:src="#drawable/settings" android:layout_weight="0.2"/>
<ImageView
android:id="#+id/infoBtn"
android:layout_width="50dp"
android:layout_height="50dp"
android:src="#drawable/info" android:layout_weight="0.2"/>
</LinearLayout>
And includes it in every Activity I need:
<include layout="#layout/tray" android:id="#+id/tray" />
After that I can in java code hide/show some buttons in tray by ID, or select some of them with another color ...
To display the footer menu across all activities, you may create a custom layout - the layout of the footer - and include it in every activity, or to be more specific, include it in the layout of every activity with <include />
Also, all your activities should have a parent activity, let it be BaseActivity, where you will provide appropriate actions for you footer menu.
Then you will need just to inherit the BaseActivity and include the footer menu layout, into your current layout, to have the menu available for any Activity you would like.
Another possible approach is using fragments instead of a full activity per content page. Fragments are a lot like activities, except that they need to be embedded in an activity to be displayed and they give you the freedom to change the content of one part of an activity (that is, swapping one fragment for another), meaning you can have another part of the activity remain unchanged - for instance tabs for switching between these fragments. A nice bonus is that reusing that content page in another activity is very easy, and should you choose create a tablet-friendly version you can easily compose more complex views of your existing fragments.
Using a ViewPager together with some type of page indicator, such as the tab indicator here you can have an active fragment and easily switch between them.
Since you are targeting 2.1 you will need to use the android support library to support fragments.
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....