Android Custom Action Bar With Action Buttons

Question

Here is the action bar that I want to create. Here is items that I put in menu.

Solution 1:

Using Custom ActionBar, you can solve your Problem. For Custom ActionBar you have to create on Custom Layout as per following:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="fill_parent"android:layout_height="wrap_content"android:enabled="false"android:orientation="horizontal"android:layout_alignParentRight="true"android:layout_gravity="right"android:paddingEnd="8dip"android:paddingRight="8dip"android:paddingLeft="8dip">

<EditText
    android:layout_width="200dip"
    android:layout_height="wrap_content"
    android:id="@+id/action_bar_edt_search"/>
<ImageButton
    android:layout_width="50dip"
    android:layout_height="50dip"
    android:id="@+id/action_bar_img_search"
    android:background="@drawable/search_ico"/>
<Button
    android:id="@+id/action_bar_search"
    android:layout_alignParentRight="true"
    android:layout_gravity="right"
    style="@style/ActionBarButtonWhite" />

<Button
    android:id="@+id/action_bar_photo"
    android:layout_alignParentRight="true"
    android:layout_gravity="right"
    style="@style/ActionBarButtonOffWhite" />

<Button
    android:id="@+id/action_bar_video"
    android:layout_alignParentRight="true"
    android:layout_gravity="right"
    style="@style/ActionBarButtonOffWhite" />

<Button
    android:id="@+id/action_bar_mobile"
    android:layout_alignParentRight="true"
    android:layout_gravity="right"
    style="@style/ActionBarButtonOffWhite" />

color.xml

<resources><colorname="action_bar">#ff0d0d0d</color><colorname="white">#ffffffff</color><colorname="off_white">#99ffffff</color></resources>

styles.xml

<stylename="MyActionButtonStyle"parent="android:Widget.ActionButton"><itemname="android:minWidth">28dip</item></style><stylename="ActionBarButton"><itemname="android:layout_width">wrap_content</item><itemname="android:layout_height">wrap_content</item><itemname="android:background">@null</item><itemname="android:ellipsize">end</item><itemname="android:singleLine">true</item><itemname="android:textSize">@dimen/text_size_small</item></style>

now you need to create ViewGroup and ActionBar in your java file as per following:

Baca Juga

final ViewGroup actionBarLayout = (ViewGroup) getLayoutInflater().inflate(
            R.layout.actions,
            null);

    // Set up your ActionBar
    final ActionBar actionBar = getActionBar();
    actionBar.setDisplayShowHomeEnabled(false);
    actionBar.setDisplayShowTitleEnabled(false);
    actionBar.setDisplayShowCustomEnabled(true);
    actionBar.setCustomView(actionBarLayout);


    // You customization

    final int actionBarColor = getResources().getColor(R.color.action_bar);
    actionBar.setBackgroundDrawable(newColorDrawable(actionBarColor));

    final EditText actionBarEditSearch = (EditText) findViewById(R.id.action_bar_edt_search);
    actionBarEditSearch.setVisibility(View.GONE);

    final ImageButton actionBarImgSearch = (ImageButton) findViewById(R.id.action_bar_img_search);
    actionBarImgSearch.setVisibility(View.GONE);

    final Button actionBarSearch = (Button) findViewById(R.id.action_bar_search);
    actionBarSearch.setText("SEARCH");

    final Button actionBarPhoto = (Button) findViewById(R.id.action_bar_photo);
    actionBarPhoto.setText("PHOTO");

    final Button actionBarVideo = (Button) findViewById(R.id.action_bar_video);
    actionBarVideo.setText("VIDEO");

    final Button actionBarMobile = (Button) findViewById(R.id.action_bar_mobile);
    actionBarMobile.setText("MOBILE");

    actionBarSearch.setOnClickListener(newView.OnClickListener() {
        @OverridepublicvoidonClick(View view) {
            actionBarEditSearch.setVisibility(View.VISIBLE);
            actionBarImgSearch.setVisibility(View.VISIBLE);
            actionBarSearch.setVisibility(View.GONE);
        }
    });

    actionBarImgSearch.setOnClickListener(newView.OnClickListener() {
        @OverridepublicvoidonClick(View view) {
            actionBarEditSearch.setVisibility(View.GONE);
            actionBarImgSearch.setVisibility(View.GONE);
            actionBarSearch.setVisibility(View.VISIBLE);
        }
    });


<stylename="ActionBarButtonWhite"parent="@style/ActionBarButton"><itemname="android:textColor">@color/white</item></style><stylename="ActionBarButtonOffWhite"parent="@style/ActionBarButton"><itemname="android:textColor">@color/off_white</item></style>

Solution 2:

You can achieve this by setting a custom view in place of the action bar title.

ActionBaractionBar= getActionBar();
actionBar.setCustomView(R.layout.search_layout);
actionBar.setDisplayShowCustomEnabled(true);

The result is an EditText that fills the entire width of the action bar, except for the action buttons. It looks exactly like the first image in the question.

Index Android

Android Custom Action Bar With Action Buttons

Solution 1:

Solution 2:

Post a Comment for "Android Custom Action Bar With Action Buttons"