From an Android example I can see how to do
ActionBar tabs and how to use tabs for fragment switching, however in the example the fragment layout covers the whole screen.
I want to put some controls at the bottom of the screen,
which should be a part of and controlled by activity itself.
So i want to keep the bottom of the screen same while clicking on tabs and switching between fragments.
Thanks
Split the screen using LinearLayouts into two sections. For example give one linear layout a weight of 9 (to occupy 90% of screen) and the other a weight of 1 (to occupy 10% of screen) - then put the fragments in the LinearLayout with weight 9. This way your fragments have their own container and you have another container at the bottom which your activity can use to do whatever it likes and it will be visible and accessible from all the fragments just like your tabs.
As sunil said, you have to create the bottom layout in your MainActivity. So the layout will be something like below.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<FrameLayout
android:id="#+id/fragment_holder"
android:layout_width="match_parent"
android:layout_height="0dp"
android:weight="9"/>
<Button
android:id="#+id/bottomButton"
android:layout_width="match_parent"
android:layout_height="0dp"
android:weight="1"
android:text="Common BUtton"/>
</LinearLayout>
And in the FragmentTransaction pass R.id.fragment_holder as it will be container for fragments.
Related
I want to create an application to display 3 different fragments inside a fragment using ViewPager. The fragments will look like in the picture shown down below:
Click here to see the picture
And later on, when user clicks on one of these fragments, another fragment will be opened to display only that specific fragment.
Is this possible? Any recommendations would be appreciated! Thanks!
It really takes 3 minutes.
You have to give each container/view/widget a 0dp which means "match_constrains", in other words: your size will be determined by the constrains you have (after they have been ran by the algorithm).
In the following Layout there are three widgets (I used the "new" FragmentContainerView but they can be FrameLayout instances as well.
Notice in all three:
width/height is set to 0dp (aka: match_constrains)
Fragment one:
Top to Top of Parent (top of the screen)
Start to Start of Parent (left/start of the screen)
End(right) to Start(left) of Fragment Two.
Bottom to Top of Fragment Three.
Fragment Two:
Top to Top of Parent (top of the screen)
Start(left) to End(right) of Parent
End(right) to End of Parent (right/end of the screen)
Bottom to Top of Fragment Three.
Fragment Three:
Top to bottom of Fragment One (here I chose Fragment One, but could have used "two" or even a guideline set at 50%, this is fine)
Start and End both pointing to the respective parent (since we want FR3 to use all the available width)
Bottom to Bottom of Parent (fragment three goes all the way down).
The result looks like this:
And here's the Layout.
Now go and spend some time learning Constraint Layout. :)
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/root"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.fragment.app.FragmentContainerView
android:id="#+id/fragment_one"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#android:color/holo_blue_bright"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="#+id/fragment_two"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#id/fragment_three" />
<androidx.fragment.app.FragmentContainerView
android:id="#id/fragment_two"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#android:color/holo_blue_dark"
app:layout_constraintStart_toEndOf="#id/fragment_one"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#id/fragment_three" />
<androidx.fragment.app.FragmentContainerView
android:id="#+id/fragment_three"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#android:color/holo_purple"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/fragment_one"
app:layout_constraintBottom_toBottomOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
I have one Android application(Xamarin.Android) and it has many fragments.
All fragments have the link to website in bottom.
Ideally I'd like to create it as custom fragment with link to website and add to all fragments.
But I don't find any way to add this fragment to XML of every fragment without coding.
I don't want to add the custom fragment to FrameLayout of other fragments in code.
Please let me know if anyone knows best solution for this kind of footer.
Thanks.
You can add the footer to the activity and use fragments for other screens. (Fragment frame layout above the footer in the main activity obviously)
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/footer">
</FrameLayout>
<FrameLayout
android:id="#+id/footer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true">
<TextView
android:layout_width="wrap_content"
android:layout_height="30dp"
android:layout_gravity="center"
android:text="Footer content"/>
</FrameLayout>
You can make a custom layout with your footer view at the bottom of the view and extend it for all your parent layouts.
Here is the simple way that I found.
Create new XML layout for footer
Create custom fragment class for this footer
Add this footer fragment to end of layout as needed as following
That's all!
There are 4 ListFragment in the main layout, like code below. What layout or property should I apply to guarantee all elements of all 4 ListFragment will be displayed sequentially, no matter how long each ListFragmentmight be?
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<fragment
android:id="#+id/todolist_newitem"
android:name="com.example.tek.first.servant.todolist.fragment.NewItemAddedFragment"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true" />
<fragment
android:id="#+id/todolist_displayfragment_incomplete_items"
android:name="com.example.tek.first.servant.todolist.fragment.display.IncompleteDetailedItemsDisplayFragment"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/todolist_newitem" />
<fragment
android:id="#+id/todolist_displayfragment_simple_todoitems"
android:name="com.example.tek.first.servant.todolist.fragment.display.SimpleToDoItemsDisplayFragment"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/todolist_displayfragment_incomplete_items" />
<fragment
android:id="#+id/todolist_displayfragment_completed_items"
android:name="com.example.tek.first.servant.todolist.fragment.display.CompletedDetailedItemsDisplayFragment"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/todolist_displayfragment_simple_todoitems" />
</RelativeLayout>
I tried LinearLayout, RelativeLayout, and ScrollView, with layout_height both as wrap_content and match_parent.
If the first ListFragment is too long(more than screen height), in both LinearLayout and RelativeLayoutsituations, it will "hide"/"cover" the remaining three; if the first ListFragment is almost as long as the screen, e.g. it takes up 2/3 of the screen, the remaining three ListFragment can only be scrollably displayed in the last 1/3 part of the screen, and the 2nd might "cover" the 3rd, etc.
As for ScrollView, there was only one line of item for each ListFragment, thus only 4 lines of item in the whole screen, with each item scrollable for its ListFragment.
None of the situations mentioned above meet my requirements. What I want is just frank displays of all ListFragment sequentially both in order of fragments and elements in the fragment, just like the way only one very long ListFragment will be displayed. What should I do?
I know TabLayout is the least option, or combine all 4 ListFragment data in ArrayList into one. But what else could be done? Any better solution?
change Relative to LinearLayout(vertical) with layout_height="match_parent" and then in fragment set layout_weight="1" and layout_height="0dp". Weight works like % that means it provides equal height(because of value 1) to all view in one viewgroup.
Thanks.
I'm new to programming. I was using Graphical Layout then when I was reading xml file, I saw FrameLayout. Then I searched, but I couldn't find something useful. What is FrameLayout and what does it do?
You use a FrameLayout to stack child views on top of each other, with the most recent child on top of the stack. In the example below, the TextView is the most recent, so it is automatically placed on top of the ImageView.
For example:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:id="#+id/backgroundImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
android:src="#drawable/bitmapie" />
<TextView
android:id="#+id/descTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginTop="70dp"
android:background="#android:color/holo_blue_light"
android:padding="10dp"
android:text="TextView placed at the top of the Imageview"
android:textColor="#android:color/white"
android:textSize="22sp" />
</FrameLayout>
Output:
FrameLayout is the simplest implementation of ViewGroup. Child views are drawn are in a stack, where the latest added view is drawn at the top. Usually you can use one of the next approaches or combine them:
Add a single view hierarchy into FrameLayout
Add multiple children and use android:layout_gravity to navigate them
Another popular approaches of using FrameLayout:
as a Fragment container
as an ancestor of your custom ViewGroup
You can consider the word frame as regular photo frame. What you do with that frame? you can place photos in that frame by one top to another. Same as in FrameLayout we can place views ( Any layout, or widget like button, text, image so on) top of other as #ojonugwa shows you the textview top of the Image.
Are you sure that you googled it?
http://www.tutorialspoint.com/android/android_frame_layout.htm
Frame Layout is designed to block out an area on the screen to display a single item. Generally, FrameLayout should be used to hold a single child view, because it can be difficult to organize child views in a way that's scalable to different screen sizes without the children overlapping each other.
You can, however, add multiple children to a FrameLayout and control
their position within the FrameLayout by assigning gravity to each
child, using the android:layout_gravity attribute.
http://blog.neteril.org/blog/2013/10/10/framelayout-your-best-ui-friend/
The secret of FrameLayout is how it layouts its children. Although normally designed to contain one
item, it will happily stack up other element on top of each other.
Thus FrameLayout is essentially a way to manipulate the Z-order of
views on the screen.
This is super useful for a couple of UI tricks from HUD-like elements
to sliding panels to more complex animated transitions. In this post
we will see an example for each of those.
http://www.learn-android-easily.com/2013/05/frame-layout-in-androis.html
FrameLayout is designed to display a single item at a time. You can
have multiple elements within a FrameLayout but each element will be
positioned based on the top left of the screen. Elements that overlap
will be displayed overlapping. I have created a simple XML layout
using FrameLayout that shows how this works.
Basically it puts one view on top of another for example :
Inflating text on Image
<FrameLayout>
<ImageView>
<Textview>
</FrameLayout>
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'...