About design and nearby

How to Add 3 Elements in a LinearLayout and Let the Central One Occupy Max Width (Android app)

Posted: May 5th, 2015 | Author: | Filed under: Mobile Design and Development, Tips and Tricks | Tags: , , , , | No Comments »

Once working on the implementation of Calendar app design for Android I got a problem: I need to put 3 elements (right button, month title, left button) in an android layout.

The requirements were:

1. They should all be in one row.
2. The central part (month) should fill all space of the display width (except part where buttons are located).

Mobile navigation for calendar: how to align 3 elements

It seems to be easy at the very first sight.. in fact all my elements were stuck to the left or buttons wouldn’t move to the right and left side..


The final solution was to use a LinearLayout and set for each element the attribute android:layout_weight=”1″, which will make them all equal weights and take up the space, and the attribute android:layout_width=”fill_parent” for my central control:

  1. <LinearLayout
  2.         android:id="@+id/Text"
  3.         android:orientation="horizontal"
  4.         android:layout_width="fill_parent"
  5.         android:layout_height="50dip"      
  6.         android:layout_centerHorizontal="true"
  7.         android:clickable="false">
  8.         <calendarcontrol.android.controls.FontAwesomeIcon
  9.             android:text="\uf053"
  10.             android:layout_width="60dip"
  11.             android:layout_height="20dip"
  12.             android:textSize="20dip"
  13.             android:clickable="true"
  14.             android:gravity="left"
  15.             android:layout_weight="1" />
  16.         <calendarcontrol.android.controls.TitleView
  17.             android:id="@+id/DateLabel"
  18.             android:layout_width="fill_parent"
  19.             android:layout_height="wrap_content"
  20.             android:textColor="#000"
  21.             android:textSize="20dip"
  22.             android:gravity="center_horizontal"
  23.             android:layout_weight="1" />
  24.         <calendarcontrol.android.controls.FontAwesomeIcon
  25.             android:text="\uf054"
  26.             android:layout_width="60dip"
  27.             android:layout_height="20dip"
  28.             android:textSize="20dip"
  29.             android:clickable="true"
  30.             android:gravity="right"
  31.             android:layout_weight="1" />
  32.     </LinearLayout>

Note:
1. Weights are for LinearLayouts only. They are specify how much of the extra space in the layout to be allocated to the View. LinearLayout supports assigning a weight to individual children and allows it to expand to fill any remaining space in the parent view. Views’ default weight is zero.

The formula to count is
Space assigned to child = Child’s individual weight / Sum of weight of every child

2. You can use instead of my custom ‘calendarcontrol.android.controls.FontAwesomeIcon’ control Button, TextView or what you do need.

Share Button

Check Related Posts:


Leave a Reply


  • 8 + three =

Looking for a Freelance UX & UI designer for your project? I’m ready to jump onboard!

Let's discuss your project now