Let’s learn how to use android fragments and weights in this post – which is part of a series am doing! If you have done anything in android development, you must have certainly run into a situation where you have to deal with different size devices and trust me, it is a piece of work. Just getting all the images to look right is a pain if you don’t have the right tools. With that being said, today I would like to share with you some of the tips I have learned over the months that I have been doing android development. Let us get to it!
Let us consider a simple scenario here for a second before moving on:
You want to support a variety of devices and so you figure you don’t want to set heights on your layouts – simply because setting heights is not intuitive. If you set a certain height for example 400dp, it might look good on a 10inch tablet but just imagine what it will look like on a smart phone! It could be a nightmare to say the least.
How To Use Android Fragments and Weights
The first time I learned about Fragments in android, I didn’t quite understand them. After using them in projects, I realized how powerful they can be. The amazing thing about Fragments is the ability to replace or add or even remove them from view depending on what you want the user to see.
In the above example, I have two fragments (Fragment 1 & Fragment 2). As you can see, I put them side by side. Fragment 1 will simply contain a list view which will be a list of people’s names or contacts in an app or something – it can be anything you can think of. On the right hand side is another fragment that will contain the details of each user. So how do you do this in a real situation? Simple:
Basically, you want to create two containers in your main layout – those two containers will later on hold the two fragments shown above. Now, once you have created your containers (which could be anything from Frame layouts to Linear Layouts), assign some ids to them and from within your activity, you can easily add your fragments to the view! Is it really that easy?
Just in case you have never used Fragments in android before, you should know that each fragment has a class that inflates its own layout. You then use a fragment manager to perform transactions inside an activity. Remember that the Activity class does not really have to know anything about the Fragment since it uses the Fragment Manager to perform all the tasks which include adding, replacing and removing fragments from view! Read on!
Weights – In android layouts, you use weights to design views that adjust according to the size of the device – which means you don’t have to set a fixed value for the height or width of your layout. As as I said earlier, consider a layout that has a height of 500dp or width of the same; the problem will occur when someone using a smaller device downloads your app and parts of your app are invisible to them. That really sucks! You will be a terrible developer! There is a solution to this problem:
Take a look at my image above and see that I have assigned weights to both fragments (in this case I am referring to the containers that hold the fragments).
One thing to remember is that you need a LinearLayout as the container (parent) in order for you to use weights. So, you basically create your Linear Layout, set the orientation attribute (this depends entirely on which direction you want the fluidity to flow – if your app goes horizontally, then set it to horizontal and vice versa is true. Now, after that, set the height and with to something like fill_parent or match_parent. Once you are done creating your container, create the children.
Child 1 – Now create your child container inside your linear layout and set either the height or with to 0dp – again, this depends on whether you want your app to adjust horizontally or vertically on different devices. If you set the orientation of your linear layout to vertical, then you want to set the child’s height to zero. This is brilliant because you are not fixing the height size but letting android adjust it accordingly. In my example above, I set the weight of the list view to 1 and the width to 0dp! Now you know why!
Child 2 – For the second container – which will contain the detailed view for my app (each list item when clicked will display the details of the item on the right hand side), I set the width to 0dp and weight to 3. That means a larger amount of space will be assigned to the details fragment compared to the list view! So, no matter how big your tablet or phone is, I know for sure that the layouts will not be screwed up!
This is how it will look like when filled with data:
The above snapshot has three fragments – you can have as many as you want. Before I forget, I should mention the other great thing about about Fragments – re-usability! You can create one Fragment and do a heck of a lot more with it like displaying the data for different users/friends as shown above. You will not have to create 20 fragments for 20 people in your list!
I am realizing this post is getting longer as I type and so I am going to stop here so next time I can pick up from where I left. In my next post, I will show you how to communicate between your fragments and the activity from whence the transactions are performed using the fragment manager: here is how the flow will look like and we will get to actually write some code to show how it works:
So, there you have it folks. I hope you learned something from this post today – I know, I should have shown you some code but I wanted to make some points on how this stuff work before jumping into programming – that actually is always the cause of problems (when people just copy and paste code before fully understanding the concepts behind them). Anyway, I wish you a happy Easter and hope to see you next time when we tackle the communication between fragments and the activity using interfaces and more importantly why fragments should NOT talk to each other! It will be evil of me not to direct you to where Fragments started in the first place: so here you go!
See you and if you found this post helpful, please share it with your friends using the buttons below! Cheers!