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.