I am creating an application where each tab has different screens to switch between. Originally I was going to have each tab show a different activity but from what I have read, it seems that is a bad way of doing it.
So I have been using an xml file which has the layout for each screen all in the one file. And I use Java to program which to display each screen required and hide the ones I don't need. The problem I have with this approach is it means all my Java is one file, and all my XML is in one file. Could someone explain to me a better way of doing this as I am pretty sure there must be a better way. My activity has many screens and its getting an eye sore scrolling through all this code at once, as the more screens I add, the larger the code is getting.
Ideally I would like to have the code for each screen in its own Java class, and the layouts for each screen in their own xml files and just switch between these.
To give you example of my code
<TabHost android:id="#+id/tabhost" android:layout_width="fill_parent"
android:windowSoftInputMode="adjustResize"
xmlns:android="http://schemas.android.com/apk/res/android"
android:background="#92c223" android:layout_height="fill_parent">
<LinearLayout android:id="#+id/tab1"
android:layout_above="#android:id/tabs" android:layout_width="fill_parent"
android:layout_height="wrap_content">
<ScrollView android:layout_width="fill_parent"
android:layout_height="wrap_content">
<RelativeLayout android:layout_width="match_parent"
android:layout_height="wrap_content">
XML CODE FOR LAYOUT GOES IN HERE. EACH NEW SCREEN IS CONTAINED WITHIN THESE LAYOUTS.
</RelativeLayout>
</ScrollView>
</LinearLayout>
<TabWidget android:layout_width="fill_parent" android:id="#android:id/tabs" android:layout_weight="0"
android:layout_gravity="bottom" android:layout_height="wrap_content"></TabWidget>
</FrameLayout>
</TabHost>
Then in my Java code, I switch between tabs using
if ("home".equals(tabId)) {
tab1.setVisibility(View.VISIBLE);
tab2.setVisibility(View.GONE);
tab3.setVisibility(View.GONE);
tab4.setVisibility(View.GONE);
tab5.setVisibility(View.GONE);
and when switching between screens within an activity, when user clicks a button in that activity, I use on click listener and do this
tab2.setVisibility(View.GONE);
cvv.setVisibility(View.VISIBLE);
I am sure there is a better way of doing this, and would be grateful if someone would give me suggestions.
Another problem is, as its all in one activity, whenever I hit the back button, it just exits the application. Would prefer to have it so when they hit back, it goes back to previous screen.
The 'better way' is giving each tab an activity of its own. Why did you dismiss this approach in your first paragraph? This is exactly what a TabHost was designed for.
What I usually do is subclass TabActivity. In its onCreate(Bundle savedInstanceState) method, I do the following once for each tab:
tabHost.addTab(
tabHost.newTabSpec("tab1")
.setIndicator("Tab 1", res.getDrawable(R.drawable.tab1))
.setContent(new Intent().setClass(this, Tab1Activity.class))
);
Then you develop each Tab#Activity in an independent file. It's nice and modular. Switching between tabs is handled by the library. You don't need to worry about all that.
Within your tabs, you can capture the back button by overriding the onKeyDown method in your inner activity:
#Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
if (keyCode == KeyEvent.KEYCODE_BACK) {
// Do your thing
return true;
}
return super.onKeyDown(keyCode, event);
}
Related
Update:
I ended up separating out the video player into a separate activity and layout. I then started this activity using the code below.
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
startActivityForResult(new Intent(MainActivity.this, VideoActivity.class), VIDEO_PID); //load video
//etc.
}
When the app is loaded, I call this function to kill the Video Activity and bring the main activity to the front:
public void doneLoading() {
finishActivity(VIDEO_PID);
}
I don't know if this is the best way, but it worked.
=======================
What's the easiest way of showing a centered VideoView and then switching to a WebView after the application is fully loaded? I verified that both these views work when included individually in the app. I just want to only show the VideoView when loading, then hide it until the application is closed.
I was looking into ViewPager and ViewFlipper, but I haven't gotten anything working yet. I was going to avoid including them in separate activities. PageViewer seemed to manage the views (meaning allow them to run and init themselves), but not actually display them (all I saw was a black screen). I'm probably missing something.
Would it be easier to start the loading video then start off another activity that initializes the webview, which requests focus and sends a message for the loading video activity to quit after initialization is finished?
My layout is below to give an idea of what I'm using.
Thanks.
P.S. I'm avoiding the use of Fragments for Gingerbread support.
<?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"
>
<android.support.v4.view.ViewPager android:id="#+id/view_pager"
android:layout_width="wrap_content"
android:layout_height="0dip"
android:layout_weight="1" >
<VideoView
android:id="#+id/videoview_component"
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_gravity="center"
/>
<WebView
android:id="#+id/webview_component"
android:layout_width="fill_parent"
android:layout_height="0dip"
/>
</android.support.v4.view.ViewPager>
</LinearLayout>
On Android 3.0 and above, the android team is driving hard that you should use fragments over activities. And I see this being useful, but I want to be able to handle click events in my app. I'm using a list fragment on the right side of my app, so doing an onclick (or any click listeners) happens in the activity that hosts the fragment. So I had to move from putting a item in XML to using the fragment manager.
In the design documents they show this picture:
http://developer.android.com/training/basics/fragments/fragment-ui.html
What I want is the Fragment A/B tablet UI. However, nowhere in this page does it actually give you an example of doing this - it seems that fragment manager only works with ONE fragment at a time - which is entirely opposite of what the picture portrays. Which makes me think it uses in XML... but then how would I get an onclick? These documents don't make a lot of sense to me. It shows one thing and then says something else. What if I wanted to remove fragment A on the tablet? Add fragment C that doesn't yet exist? Is that even possible if you tried to use Fragment Manager????
I guess I don't get if Fragment manager uses more than 1 fragment, and if it does, how am I supposed to use this to get an item in the picture like the tablet - the left (A) being a listview, and the right (B) being whatever. Without an ID of the fragment I don't how to access it.
Not sure if this is relevant but here is some of my code:
Adds a fragment to the single framelayout I made like in the guide
//Activity
FragLaunch launchPane = new FragLaunch();
// In case this activity was started with special instructions from an Intent,
// pass the Intent's extras to the fragment as arguments
// firstFragment.setArguments(getIntent().getExtras());
// Add the fragment to the 'fragment_container' FrameLayout
getFragmentManager().beginTransaction()
.add(R.id.launch_frag_container, launchPane).commit();
}
Also, in portrait mode of 7" tablets, I want it to use a viewpager that is swipeable. It worked like a charm when I designed it in XML but now that I have to access the listfragment it doesn't work (no way to access since I can't have two fragments)
XML of FragLaunch's content view:
<LinearLayout 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:paddingLeft="16dp"
android:paddingRight="16dp"
android:gravity="center_vertical"
android:orientation="vertical" >
<TextView
android:id="#+id/initial_directions"
style="#style/textScalar.Roboto.Light"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="#string/initial_directions"
android:layout_marginBottom="30dp"
tools:context=".Launch" />
</LinearLayout>
I want to have this one appear as Fragment A in the photo:
FragHistory.java/xml for fragment:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<Button
android:id="#+id/spamhistory"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Spam History" />
<ListView
android:id="#android:id/list"
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="1"
android:drawSelectorOnTop="false" />
</LinearLayout>
Does anyone have any insight on this?
If you want your fragments to be able to communicate then you need to use interfaces, like this.
For onClick events you simply set an onClickListener for the view that you need to receive the onClick event from. Like so:
sampleView.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
//Your code here
}
});
As for fragment transactions, it says somewhere in there (I can't remember exactly where) that when two fragments are displayed on the screen at once (as with larger screens) that instead of swapping the fragments it simply updates it. All you have to worry about is making the correct calls. So if you want to remove fragment A just call remove(). Or if you want to replace it with fragment C call replace() and pass fragment C in as the parameter.
Can you clarify your question about the ViewPager? What do you mean "have to access it"?
Hope this helps!
EDIT: I apoplogize, I misunderstood your question. Here's kind of a quick run down of how to add more than one fragment to the screen at once.
1. Perform a runtime check to make sure that the device screen is big enough to display more than one fragment.
2. If the screen is big enough, set the content view to use a layout that has a FrameLayout for each fragment that you want to add.
3. After that grab a reference to each fragment that you want to use.
4. Then use the FragmentManager to add a fragment to each layout. Like this:
FirstExampleFragment fragment1 = new FirstExampleFragment();
SecondExampleFragment fragment2 = new SecondExampleFragment();
getSupportFragmentManager().beginTransaction().add(R.id.example_framelayout1, fragment1)
.add(R.id.example_framelayout2, fragment2).commit();
Another great way to allow communication between fragments is to use an event bus, such as the Otto event bus. Otto allows components to publish events and subscribe to events in a decoupled manner.
In your particular case, when a user selects an item in the list, your list fragment can publish an event (which can include the item that has been selected) and your content fragment can subscribe for these events and update its content accordingly when it receives a new event. This all being done without the two fragments being directly coupled and without having to define additional interfaces.
I know this doesn't answer your entire question, but thought it might be useful when it comes to the communications between your fragments....YMMV.
I am developing an applications that is aimed at Tablets and Google TVs. It will be like many standard Google TV applications with a LeftNavBar and a top Search bar that is common to all application screens. It will look something like the following image:
Main Screen
The RED area will be different for all other screens. It may contain data like following screens mockups:
Activity One loaded into main container
Activity Two loaded into main container
So you can see that completely different sections can be loaded in the main area.
Screen 3 can be loaded as a detailed section when selecting any list item in Screen 2 (say in fragment list) OR it can be loaded as a result of selecting a tab (which will appear in LeftNavBar).
Here is how I am trying to implement it.
Step 1. I Created a main Activity with the following XML:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#9ccc" >
<!-- Top Bar -->
</LinearLayout>
<FrameLayout
android:id="#+id/mainContainer"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<!-- main Red Container that will load other Activities -->
</FrameLayout>
</LinearLayout>
mainContainer is the RED container where I want to load the Activities. LeftNavBar will be added to this Activity as its the parent of All.
Step 2 I created ActivityOne & ActivityTwo with two & three Fragments in them respectively (as shown in above second & third image).
*Step 3 I am trying to load the ActivityOne in main page's mainContainer FrameLayout... But I cannot add it.
I tried by adding the ActivityOne to mainContainer as follows:
View v = (new ActivityOne()).getWindow().getDecorView();
FrameLayout mainContainer = (FrameLayout) findViewById(R.id.mainContainer);
mainContainer.addView(v);
but the getWindow() returns null....
Other issue occurs because all the data comes from a remote services .. so please also suggest how would I be able to hold references to all the loaded Activities in mainContainer in a some kind of stack ... so I can just reload the already loaded activity instead of creating its new instance.. This will be used on BACK button press.
OR
Instead of loading an activity into the above RED container, I should create two Activities each with their own Fragments & a LeftNavBar. This might be easier than the aforementioned approach. or this might be the only solution.... however I feel that saving state for BACK buttons might get messy .. but I will try implementing this
What would you do if you had to create this type of application?
How would you design the UI layout for best performance/practice?
Your suggestions in helping me setting this app's layout are much appreciated.
Disclaimer
This is where fragments can get tricky. The problem would be simple if Activity 1 & 2 had identical layouts so that you could simply attach/detach fragments and use the fragment back stack to unwind.
Because you want 2 unique layouts to house your fragments, things are going to be a little more involved. If at all possible I would try to use the same layout so that you can take the easy path.
As another option, you could use two activities as you outline above and send data back and forth with Intents.
That said, if I really had to implement this solution as written, here is what I would do. Note that I am not advocating this solution but myself do not know of a better way of doing things.
The Solution
Create a FragmentActivity whose view would be Main Screen as you've defined above. The layout for the Main Screen would contain:
Left nav bar
Top bar
2 layouts. layout1 and layout2. These would be contained in a parent layout i.e. RelativeLayout or LinearLayout and would contain the necessary FrameLayout elements for your fragments.
Example using your XML (note, tags are a bit brief):
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#9ccc" >
<!-- Top Bar -->
</LinearLayout>
<LinearLayout android:id="#+id/layout1">
<FrameLayout android:id="#+id/listFragment" />
<FrameLayout android:id="#+id/contentFragment" />
</LinearLayout>
<LinearLayout android:id="#+id/layout2">
<FrameLayout android:id="#+id/imageFragment" />
<FrameLayout android:id="#+id/boxFragment1" />
<FrameLayout android:id="#+id/boxFragment2" />
<FrameLayout android:id="#+id/boxFragment3" />
</LinearLayout>
</LinearLayout>
The main idea is that you then show/hide layout1 & layout2 i.e. set android:visibility="gone" based on the state of your app.
The disadvantages of this method are:
Using fragment backstack may be impossible, instead you'll have to track where the user is in your UI flow and manage the back button to show/hide layout
You may need to take special care to attach/detach fragments when you show/hide their parent view to reduce resource consumption while the fragments are invisible
The advantages are:
Easy communication between fragments and the base activity since only 1 activity is used
Re: The nested Fragments problem
To get around the 'nested Fragments' problem in our application where (as you correctly note) Fragments cannot add Fragments I hosted a single templating Fragment under the activity whose only purpose was to define a set of place holders for other fragments to anchor to. When adding further Fragments to the activity past this point I used the templating Fragment's view place holder +#ids to identify the "root" or parent view Id for the Fragment being added.
getSupportFragmentManager().beginTransaction().add(#someIdFromTheTemplateFrag, fragment, fragmentTag).commit();
The Fragment I was adding then knew where to anchor itself in the current layout and of course then went about it's merry way of add it's view. This had the effect of attaching a Fragment to another Fragment hence achieving the desired visual 'nesting'...
I'm new to Android development. I'm trying to use the orientation change to switch between two activities. My idea is to use three Activities one TabActivity and a normal Activity. Here is some pseudo code:
public class Main extends Activity{
// this is the entry point into my app
#Override
public void onCreate(...){
if(this.getResources().getConfiguration().orientation == Configuration.ORIENTATION_LANDSCAPE){
// Start Activity1
} else { //Start Activity2}
}
The Activities Activity1 and Activity2 will have their onPause() functions overridden with an intent to start the Main Activity again.
onPause(){
Intent intent = new Intent(this.ActivityX, Main.class);
startActivity(intent);
}
\/\/\/\/ EDIT \/\/\/\/
Ok, I'm taking a different approach. As i need a TabActivity, because i want to be able to start different activities in my tabs (I think i have to use a TabActivity in this case).
I've edited the Manifest.xml and added android.configChanges="orientation" for the TabActivity and the second Activity. Then I've overridden the onConfigurationChanged() functions. With this approach I'm able to switch from landscape (this is the "normal" activity") to portrait (the TabActivity).
The other way round does not work and i don't know why yet. I've exactly the same onConfigurationChanged functions (Copy & Pasted) and only changed the essential parts.
Overriding the onConfigurationChanged of the Activities started in the tabs has no effect, too.
You don't have to write any code - Android already handles this automatically. Just create two different layout resource folders:
/res/layout-land // layout resources for landscape
/res/layout-port // portrait layout
Put in this folders xyz.xml resource description files with the same name and different content. One using activities for portrait, the other for landscape.
Note that you can use the same technique (-port & -land qualifiers) for drawables (bitmaps) or any other resources (text).
Note: this is not supported on Android 1.5. If you want to support this version you must additionally add the /res/layout folder.
If you still want to use the advantages of TabActivity when using tabs in portrait mode, while not having tabs in landscape mode, you could use the following (ugly but still working) workaround. Create /res/layout-land folder and put there a corresponding layout file (it should have the same name that the file in layout folder, you use for portrait orientation). This file, however, should contain the blocks required by the TabActivity to work. That is fine, add those blocks and set their visibility to "gone", like in the following snippet:
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="5dp">
<TabWidget
android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:visibility="gone" />
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="5dp"
android:visibility="gone" />
<!-- Feel free to add your REAL layout for the landscape -->
</LinearLayout>
</TabHost>
Of course, make sure you handle the content management correctly in your activity class, depending on the orientation.
I am following this tutorial https://developer.android.com/guide/tutorials/views/hello-tabwidget.html and have completed it. Now I would actually like to add you know some controls to these tabs like textboxes(text edit).
How do I do this? I go to my mail.xml using eclipse as my ide and go to layout view and I now get a NullPointerException so I can't even drag stuff onto the layout anymore.
Edit
This is what I have
<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TabWidget
android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<FrameLayout
android:id="#android:id/tabcontent"
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:id="#+id/textview1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="this is a tab" />
<EditText android:text="" android:id="#+id/EditText01" android:layout_width="wrap_content" android:layout_height="wrap_content" android:password="true"></EditText>
</LinearLayout>
<TextView
android:id="#+id/textview2"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="this is another tab" />
<TextView
android:id="#+id/textview3"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:text="this is a third tab" />
</FrameLayout>
</LinearLayout>
</TabHost>
Tabs are a bit funny to get working initially since there's a lot of code overhead, but once you've worked your way through that they aren't too bad. To get tabs to work, let's start by improving your XML file and then we can make sure your code to actually load them is correct.
First off, your XML file. Instead of including everything directly in your main.xml, you should use the include feature. As the name would suggest, this lets you work on a separate xml file and then include it in your main with one line. This makes the main.xml file much easier to read. So we'd modify your file above to make it look like this:
//No need to change anything above this
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<include layout="#layout/tab1"/>
<include layout="#layout/tab2"/>
//and however many other tabs you want to include
</FrameLayout>
You then need to create tab1.xml, tab2.xml and so forth. These are normal xml files in that they start with a ViewGroup (i.e. LinearLayout, RelativeLayout) which contains any number of other widgets. These widgets can be things like EditTexts, buttons, custom views, whatever you want. The only rule is that the parent ViewGroup (the one at the top) must have a unique ID in it, in the manner of android:id="#+id/someUniqueName". You will use that to refer to that specific layout/tab in your code. So for example, this would be:
tab1.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/tab1Layout"
android:orientation="vertical">
<TextView ... />
<EditText ... />
</LinearLayout>
With that done, we can look at your code. I assume you've probably already got this, but just in case here's what you want:
public class YourProject extends TabActivity {
#Override
public void onCreate(Bundle savedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
Resources res = getResources();
TabHost tabHost = getTabHost();
tabHost.addTab(tabHost.newTabSpec("tab1").setIndicator("Tab1 title",
res.getDrawable(R.drawable.logo1)).setContent(R.id.tab1Layout));
(...)
//You can also fill tabs with a separate activity like so:
Intent intent = new Intent(this, YourClass.class);
tabHost.addTab(tabHost.newTabSpec("tab2").setIndicator("Another title",
res.getDrawable(R.drawable.logo2)).setContent(intent));
tabHost.setCurrentTab(0);
}
}
As shown above you can set the content of one of the tabs to be a separate activity. In that case, the activity is defined just as any other one with its own Class, layout, etc. Usually you shouldn't do this and instead just use a different View (with setContent(R.id.tabXLayout), but sometimes it's needed. For example if you want one of your tabs to have a list, then you need to start an activity in there that extends ListView, and include all the boilerplate code for ListViews.
I hope that helps!
The layout view in Eclipse can be a bit flaky, particularly with complex layouts. A bit of trial and error might find the View node it is choking on.
As regards developing the tab-based layout further, you have two options, the 'quick' way or the 'right' way. First is to adapt the existing layout xml by replacing one of the TextViews with a LinearLayout (or some other layout) which contains the content you want.
http://google.com/codesearch/p?hl=en#HQNWZ1u2Pig/trunk/HelloLayoutAndroid/res/layout/tab_widget.xml
However Tabs are generally used where there is complex content. For scalability it may be better to locate the TabHost in the layout, call newTabSpec() and then use setContent() to supply an Intent that identifies an internal Activity, which supplies its own Layout.
the include often makes problems while parsing XML, I tried it and got :cannot resolve #layout/mylayout..
my code was correct 100%, but it's common problem spicialy if you need Id for the layout and other attributes.
samply: I solve it by the disign mode, when you drop tabhost to your layout, place it wherever you want, it creates 3 Linear layouts (tab1,tab2,tab3)... on XML editor, in each tab (leanearlayout) insert your markup of the control you need to use as content of the tab.
and in java file do the next:
TabHost tabHost = (TabHost)findViewById(R.id.tabHost);
tabHost.setup();
TabHost.TabSpec tab1 = tabHost.newTabSpec("smil1");
TabHost.TabSpec tab2 = tabHost.newTabSpec("smil2");
TabHost.TabSpec tab3 = tabHost.newTabSpec("smil3");
tab1.setIndicator("#1");//the name will apear on the first tab
tab1.setContent(R.id.smiles1); // the Id of the control you put in the first LeanerLayout
tab2.setIndicator("#2"); // the same as abouv but for the second tab
tab2.setContent(R.id.smiles2);
tab3.setIndicator("#3"); // the thierd tab
tab3.setContent(R.id.smiles3);
// add the tabs
tabHost.addTab(tab1);
tabHost.addTab(tab2);
tabHost.addTab(tab3);
this is the way solving your problem if include makes problem in parsing your XML.
The NullPointerException in the layout editor is a known bug in the Android Development Tools.