Split Android Layout Vertically

Welcome to "Android Super Nerds". Thanks for coming back to my Site, I really appreciate that and if you guys are new to my Site please do check my previous articles as well.

Anyways Today, I am going to show you guys "How to split the Android Layout Vertically". And trust me it's a very very simple. But before doing that we need to consider some scenario:-
  1. Just remember, its not a Rocket Science.
  2. We really no need to do anything like calculating the height.
  3. Not require to convert px, dp, sp with your device resolution.
  4. And last, let's get started........😇😇😏

So, mostly for every Detail / Master Screen, we display the full content (information of the specific selected product, user, place, object....etc) in short the whole information about that selected object.

And when we talk about displaying the information, let's take an example like if we want to display the details of a student in the detail screen of that School App.

Personal Information to be displayed would be:-
  • Name (first and last name)
  • Age / DOB (Date Of Birth)
  • Sex 
  • Profile picture on the top of the block of the detail screen
  • Address
  • Contact Number
  • Parents Detail
Non Personal Information to be displayed would be:-
  • Class No
  • Roll No
  • Remark
  • Class Teacher
  • Attendance
  • Bus number 
we can add more attributes but not really required. 

Here according to above-given attributes, the only point which I am trying to explain (prove) is that for displaying this kind of huge or much information data sometimes (and the best practice is to) divide (split) the layout into the different chain of blocks. As soon below ↓


As you can see in the above-given beautiful screenshot, the layout is divided into two different views.
  1. The first view is to display the profile image.
  2. The second view is to display a listview with image and some text.
  3. This second view is also inside the tab view.

Note: "Same-way before letting us start with any layout design, the first step is always to divide the layout view (if necessary) into subviews".

Cheers for that


As I suppose you guys are ready with the design part let's check some sample design.


Splitting the layout into two equal part for the horizontal and vertical View

For Horizontal


Output for the above layout:


For Vertical


Output for the above layout:


Splitting the layout into three equal part for the horizontal and vertical View

For Horizontal


Output for the above layout:



For Vertical
Output for the above layout:



Splitting the layout into three equal part

Layout for the unequal part
Output for the above layout:


Layout for an unequal part for both the orientation

Output for the above layout:



And like every good thing is supposed to come at its END. ↓




If you guys have any questions about Layout or any of the UI components, Please do Leave a comment below..!!

&&
If you like this article don’t forget to share it. Till then "Happy coding".

Comments