Android Button Panel

Question

I am creating an android app, and need a navigation panel at the bottom of the screen, which the user can use to navigate through the app, and skip any steps they don't wish to make, for example they could just select steps 5 and 10 and leave the rest out. This will be a panel will 7 buttons across by 3 buttons down, giving 21 buttons. The XML code is below;

<LinearLayout
            android:layout_width="match_parent"            
            android:layout_height="wrap_content"            
            android:orientation="vertical" 
            android:layout_alignParentBottom="true"           
            android:weightSum="3">

   <LinearLayout
            android:layout_width="match_parent"
            android:layout_weight="1"  
            android:layout_height="wrap_content"
            android:layout_alignLeft="@+id/button2"
            android:layout_below="@+id/button2"
            android:weightSum="7">
  <Button
          android:id="@+id/button1"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_weight="1"
          android:onClick="Previous"
          android:text="01" />

    <Button
          android:id="@+id/button1"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_weight="1"
          android:onClick="Previous"
          android:text="02" />
      <Button
          android:id="@+id/button1"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_weight="1"
          android:onClick="Previous"
          android:text="03" />
        <Button
          android:id="@+id/button1"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_weight="1"
          android:onClick="Previous"
          android:text="04" />
          <Button
          android:id="@+id/button1"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_weight="1"
          android:onClick="Previous"
          android:text="05" />
            <Button
          android:id="@+id/button1"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_weight="1"
          android:onClick="Previous"
          android:text="06" />
                <Button
          android:id="@+id/button1"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_weight="1"
          android:onClick="Previous"
          android:text="07" />

      </LinearLayout>   

   <LinearLayout
            android:layout_width="match_parent"
            android:layout_weight="1"  
            android:layout_height="wrap_content"
            android:layout_alignLeft="@+id/button2"
            android:layout_below="@+id/button2"
            android:weightSum="7">
  <Button
          android:id="@+id/button1"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_weight="1"
          android:onClick="Previous"
          android:text="08" />

    <Button
          android:id="@+id/button1"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_weight="1"
          android:onClick="Previous"
          android:text="09" />
      <Button
          android:id="@+id/button1"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_weight="1"
          android:onClick="Previous"
          android:text="10" />
        <Button
          android:id="@+id/button1"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_weight="1"
          android:onClick="Previous"
          android:text="11" />
          <Button
          android:id="@+id/button1"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_weight="1"
          android:onClick="Previous"
          android:text="12" />
            <Button
          android:id="@+id/button1"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_weight="1"
          android:onClick="Previous"
          android:text="13" />
                <Button
          android:id="@+id/button1"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_weight="1"
          android:onClick="Previous"
          android:text="14" />

      </LinearLayout>   

   <LinearLayout
            android:layout_width="match_parent"
            android:layout_weight="1"  
            android:layout_height="wrap_content"
            android:layout_alignLeft="@+id/button2"
            android:layout_below="@+id/button2"
            android:weightSum="7">
  <Button
          android:id="@+id/button1"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_weight="1"
          android:onClick="Previous"
          android:text="15" />

    <Button
          android:id="@+id/button1"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_weight="1"
          android:onClick="Previous"
          android:text="16" />
      <Button
          android:id="@+id/button1"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_weight="1"
          android:onClick="Previous"
          android:text="17" />
        <Button
          android:id="@+id/button1"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_weight="1"
          android:onClick="Previous"
          android:text="18" />
          <Button
          android:id="@+id/button1"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_weight="1"
          android:onClick="Previous"
          android:text="19" />
            <Button
          android:id="@+id/button1"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_weight="1"
          android:onClick="Previous"
          android:text="20" />
                <Button
          android:id="@+id/button1"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_weight="1"
          android:onClick="Previous"
          android:text="21" />

      </LinearLayout>   

   </LinearLayout>   

The are approximately 50 classes (or different screens in this app), and this button panel needs to be present on each of them. Each button will also have to have an onClickListener to tell it what to do.

My question relates to 2 points, the first in relation to the XML file.

As this 'button panel' will be present on every screen, is there a way of creating a master XML file that can be used to create this panel on every screen, rather than having to re write identical code 50 times in one app-which seems highly in efficient.

The second points relates to the onClickListener. Again, is it possible to create a master listener that will apply to this button panel every time it appears. I will make an master listener class that will handle the events, but without a proper master class, each individual class will have to have the listener set for every individual button in every class-which again seems highly inefficient as there will be significant repetition of identical code in 50 classes.

I have considered using ice cream sandwich, but this does not quite seem to meet my needs.

Answer 1

Create a Re-usable Layout

Create a separate Navigation panel layout.

Suppose this is your navigation panel layout ( panelbar.xml)

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width=”match_parent”
android:layout_height="wrap_content"
android:background="@color/footerbar_bg">

<ImageView android:layout_width="wrap_content"
           android:layout_height="wrap_content" 
           android:src="@drawable/gafricalogo" />

Just Include it in all your XML

Now include your navigation panel in each XML like this.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" 
android:layout_width=”match_parent”
android:layout_height=”match_parent”
android:background="@color/app_bg"
android:gravity="center_horizontal">

<include layout="@layout/panelbar"/>

<TextView android:layout_width=”match_parent”
          android:layout_height="wrap_content"
          android:text="@string/hello"
          android:padding="10dp" />

...

source : For more detail info

Answer 2

You can create an xml file with button panel separately, and use include tag in other xmls like this:

<include
    android:id="@+id/panel"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    layout="@layout/button_panel" />

As far as onClickListener is concerned, you can check if this post helps you.