Bottom menu

Example of how to make a bottom menu, which is divided into four image buttons. The most important is to use LinearLayout and align it to the parent element’s bottom. Then dividing the space between the buttons with android:layout_weight=”1″ which makes each button the same size. Using icons for these types of buttons is ideal, since the space per button is quite limited especially on phones, necessarily not so much on tablets.

nexus_bottom_navigation
Bottom menu
<LinearLayout
 android:layout_width="match_parent"
 android:layout_height="40dp"
 android:layout_alignParentBottom="true" >

   <ImageButton
   android:id="@+id/prevList"
   android:layout_width="match_parent"
   android:layout_height="40dp"
   android:layout_weight="1"
   android:background="@color/bottomButtonBg"
   android:src="@drawable/ic_chevron_left_black_36dp" />

   <ImageButton
   android:id="@+id/nextList"
   android:layout_width="match_parent"
   android:layout_height="40dp"
   android:layout_weight="1"
   android:background="@color/bottomButtonBg"
   android:src="@drawable/ic_chevron_right_black_36dp" />

   <ImageButton
   android:id="@+id/addList"
   android:layout_width="match_parent"
   android:layout_height="40dp"
   android:layout_weight="1"
   android:background="@color/bottomButtonBg"
   android:src="@drawable/ic_add_black_36dp" />

   <ImageButton
   android:id="@+id/deleteList"
   android:layout_width="match_parent"
   android:layout_height="40dp"
   android:layout_weight="1"
   android:background="@color/bottomButtonBg"
   android:src="@drawable/ic_clear_black_36dp" />

</LinearLayout>

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s