Friday, December 16, 2011

Android NavigationBar Example

Android NavigationBar  Example
simple   android navigationbar look like iphone navigationbar.

layout code.
layout/actnavbar.xml.
<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@android:color/white"
>
    <RadioGroup
        android:id="@+id/radiogroup"
        android:layout_width="fill_parent"
        android:layout_height="60dp"
        android:layout_alignParentBottom="true"
        android:orientation="horizontal"
        android:background="@drawable/navbar_background"
    >
        <RadioButton
            android:id="@+id/btnAll"
            style="@style/navbar_button"
            android:drawableTop="@drawable/navbar_allselector"
            android:text="All"
        />
        <RadioButton
            android:id="@+id/btnPicture"
            style="@style/navbar_button"
            android:drawableTop="@drawable/navbar_pictureselector"
            android:text="Pictures"
            android:layout_marginLeft="5dp"
        />
        <RadioButton
            android:id="@+id/btnVideo"
            style="@style/navbar_button"
            android:drawableTop="@drawable/navbar_videoselector"
            android:text="Videos"
            android:layout_marginLeft="5dp"
        />
         <RadioButton
            android:id="@+id/btnFile"
            style="@style/navbar_button"
            android:drawableTop="@drawable/navbar_fileselector"
            android:text="Files"
            android:layout_marginLeft="5dp"
        />
        <RadioButton
            android:id="@+id/btnMore"
            style="@style/navbar_button"
            android:drawableTop="@drawable/navbar_moreselector"
            android:text="More"
            android:layout_marginLeft="5dp"
        />
    </RadioGroup>
   
   
    <LinearLayout
        android:id="@+id/floatingmenu"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginLeft="30dp"
        android:layout_marginRight="30dp"
        android:background="@drawable/laysemitransparentwithborders"
        android:orientation="vertical"
        android:layout_marginBottom="-4dp"
        android:visibility="gone"
    >
        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:paddingLeft="5dp"
            android:paddingTop="15dp"
            android:paddingBottom="15dp"
            android:text="Contacts"
            android:textColor="#ffffff"
            android:textSize="16dp"
        />
        <View
            android:layout_width="fill_parent"
            android:layout_height="1dp"
            android:background="#ff999999"
        />
        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:paddingLeft="5dp"
            android:paddingTop="15dp"
            android:paddingBottom="15dp"
            android:text="Calendar"
            android:textColor="#ffffff"
            android:textSize="16dp"
        />
    </LinearLayout>
</RelativeLayout>

values/style.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <style name="navbar_button">
 <item name="android:layout_width">0dp</item>
 <item name="android:layout_height">wrap_content</item>
 <item name="android:button">@null</item>
 <item name="android:background">@drawable/navbar_backgroundselector</item>
 <item name="android:gravity">center_horizontal</item>
 <item name="android:layout_weight">1</item>
 <item name="android:textSize">12dp</item>
  </style>
</resources>

Activity code


public class NavbarActivity  extends Activity {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.actnavbar);

        RadioButton radioButton;
        radioButton = (RadioButton) findViewById(R.id.btnAll);
        radioButton.setOnCheckedChangeListener(btnNavBarOnCheckedChangeListener);
        radioButton = (RadioButton) findViewById(R.id.btnPicture);
        radioButton.setOnCheckedChangeListener(btnNavBarOnCheckedChangeListener);
        radioButton = (RadioButton) findViewById(R.id.btnVideo);
        radioButton.setOnCheckedChangeListener(btnNavBarOnCheckedChangeListener);
        radioButton = (RadioButton) findViewById(R.id.btnFile);
        radioButton.setOnCheckedChangeListener(btnNavBarOnCheckedChangeListener);
        radioButton = (RadioButton) findViewById(R.id.btnMore);
        radioButton.setOnCheckedChangeListener(btnNavBarOnCheckedChangeListener);
    }

    private CompoundButton.OnCheckedChangeListener btnNavBarOnCheckedChangeListener = new CompoundButton.OnCheckedChangeListener() {
        public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
            if (isChecked) {
                Toast.makeText(NavbarActivity.this,"Clicked Button ! "+ buttonView.getText(), Toast.LENGTH_SHORT).show();
            }
        }
    };
}

Sample Screen Shot:

naviigation bar for android look like iphone navigation bar. download source code here.

7 comments:

  1. Fantastic! Thank you!!

    ReplyDelete
  2. great - it looks so much like the iphone version it's spooky; at first i though i launched my iphone simulator by mistake, but after a few seconds confirmed it was indeed running in the android simulator

    ReplyDelete
  3. Very Nice.. Thanks!!!

    ReplyDelete
  4. thank you so much, your code save my days

    ReplyDelete
  5. Make good using the borrowed funds and pay it off back faster since these private education
    loans have become expensive pay day loans uk we know a few of you think that it can be not necessary to
    study your own personal credit card but believe the proven fact that once weaknesses are known, it can be strengthened easily.
    Also see my page - pay day loans uk

    ReplyDelete
  6. the link above directs me to another project entirely please fix that

    ReplyDelete

Check out this may be help you

Related Posts Plugin for WordPress, Blogger...