I have a TextView and ImageButton I want to display in my ActionBar. I am able to successfully render the TextView or the ImageButton, but not both. Either I'm running out room to fit both of them, I'm not understanding how LayoutParams work, or something else entirely.
Just the TextView:
Just the ImageButton:
How can I fit both of these in the ActionBar programmatically?
Declarations and inside of onCreate method in MapActivity.java:
private ActionBarDrawerToggle mToggle;
private DrawerLayout mDrawerLayout;
private ActionBar actionBar;
private TextView actionBarDistanceText;
/*
ACTION BAR STUFF onCREATE
*/
if (getSupportActionBar() != null) {
getSupportActionBar().setDisplayShowTitleEnabled(false);
}
mDrawerLayout = findViewById(R.id.nav_drawer);
mToggle = new ActionBarDrawerToggle(this, mDrawerLayout, R.string.open, R.string.close);
mDrawerLayout.addDrawerListener(mToggle);
mToggle.syncState();
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
/*
NAV STUFF onCREATE
*/
mNavigationView = findViewById(R.id.navigation_view);
if (mNavigationView != null) {
mNavigationView.setNavigationItemSelectedListener(this);
}
Here is the portion of code to render them in MapActivity.java:
/*
CODE FOR DISTANCE TEXT AND SHARE BUTTON
*/
actionBar = getSupportActionBar();
actionBarDistanceText = new TextView(MapActivity.this);
ConstraintLayout.LayoutParams layoutParams = new ConstraintLayout.LayoutParams(android.app.ActionBar.LayoutParams.MATCH_PARENT, android.app.ActionBar.LayoutParams.WRAP_CONTENT);
layoutParams.setMargins(150, 0, 0, 0);
actionBarDistanceText.setLayoutParams(layoutParams);
actionBarDistanceText.setTextSize(20);
actionBarDistanceText.setTextColor(Color.WHITE);
actionBar.setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);
actionBar.setCustomView(actionBarDistanceText);
ImageButton shareBtn = new ImageButton(actionBar.getThemedContext());
shareBtn.setScaleType(ImageButton.ScaleType.CENTER);
shareBtn.setImageResource(R.drawable.share_button_selector);
shareBtn.setBackgroundColor(Color.TRANSPARENT);
ActionBar.LayoutParams shareLayoutParams = new ActionBar.LayoutParams(
ActionBar.LayoutParams.WRAP_CONTENT,
ActionBar.LayoutParams.WRAP_CONTENT, Gravity.END | Gravity.CENTER_VERTICAL);
shareLayoutParams.rightMargin = 40;
shareBtn.setLayoutParams(shareLayoutParams);
actionBar.setCustomView(shareBtn);
Here is my share_button_selector.xml file:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Share Button -->
<item android:state_pressed="true" android:drawable="#drawable/ic_share_green" android:background="#null"/>
<item android:state_pressed="false" android:drawable="#drawable/ic_share_white" android:background="#null"/>
</selector>
nav_menu.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group
android:id="#+id/nav_group_2">
<item android:title="#string/nav_map_type">
<menu>
<item
android:id="#+id/basic_map"
android:icon="#drawable/basic_map_24x24"
android:title="#string/nav_basic"/>
<item
android:id="#+id/terrain_map"
android:icon="#drawable/ic_terrain_black_24dp"
android:title="#string/nav_terrain"/>
<item
android:id="#+id/satellite_map"
android:icon="#drawable/satellite_24x24"
android:title="#string/nav_sat"/>
<item
android:id="#+id/hybrid_map"
android:icon="#drawable/ic_satellite_black_24dp"
android:title="#string/nav_hybrid"/>
</menu>
</item>
<!--
SETTINGS GROUP
-->
</group>
<group
android:id="#+id/nav_group_3">
<item android:title="#string/nav_settings">
<menu>
<item
android:id="#+id/standard_distance"
android:icon="#drawable/ic_settings_black_24dp"
android:title="#string/nav_standard_setting"/>
<item
android:id="#+id/metric_distance"
android:icon="#drawable/ic_settings_black_24dp"
android:title="#string/nav_metric_setting"/>
</menu>
</item>
</group>
</menu>
If I do not comment out the ImageButton code in MapActivity.java, the TextView disappears. Leaving just the TextView portion of the code allows it to be seen.
Use ToolBar instead .
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:gravity="center"
app:popupTheme="#style/AppTheme.PopupOverlay">
<TextView
android:id="#+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="start|center_vertical"
android:text="App name" />
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
Setting gravity of title TextView to android:layout_gravity="center" will make the title appear at center . And for ImageView use a OptionMenu.
Related
How can I know (programmatically) if the menu is displayed with text on the ActionBar?
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools">
<item
android:id="#+id/action_cancel"
android:orderInCategory="100"
android:title="#string/action_cancel"
android:icon="#drawable/ic_cancel_24dp"
app:showAsAction="always|withText"/>
<item
android:id="#+id/action_clear"
android:orderInCategory="200"
android:title="#string/action_clear"
android:icon="#drawable/ic_clear_24dp"
app:showAsAction="always|withText"/>
<item
android:id="#+id/action_done"
android:orderInCategory="300"
android:title="#string/action_done"
android:icon="#drawable/ic_done_24dp"
app:showAsAction="always|withText"/>
</menu>
If the text is not displayed I want the menu to remain as menu
I tried also to replace always|withText with ifRoom|withText but in both cases, the Device I am using for debug shows only the icons, not the text.
I finally resourced to using a custom toolbar layout, where I put the items with icon + text.
<TextView
android:id="#+id/action_cancel"
style="#style/ActionBarItem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:drawableLeft="#drawable/ic_cancel"
android:text="#string/action_cancel"/>
<TextView
android:id="#+id/action_clear"
style="#style/ActionBarItem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:drawableLeft="#drawable/ic_clear"
android:text="#string/action_clear"/>
<TextView
android:id="#+id/action_done"
style="#style/ActionBarItem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:drawableLeft="#drawable/ic_done"
android:text="#string/action_done"/>
and
private void setupActionBar() {
MyLog.pe(DEBUG, TAG, "+ setupActionBar()");
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
final ActionBar actionBar = getSupportActionBar();
try {
assert actionBar != null;
actionBar.setDisplayShowTitleEnabled(false);
actionBar.setDisplayShowHomeEnabled(false);
actionBar.setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);
actionBar.setCustomView(R.layout.actionbar_cancel_clear_done);
final View customActionBarView = actionBar.getCustomView();
customActionBarView.setLayoutParams(
new Toolbar.LayoutParams(
ViewGroup.LayoutParams.MATCH_PARENT,
ViewGroup.LayoutParams.MATCH_PARENT));
customActionBarView.findViewById(R.id.action_cancel).setOnClickListener(this);
customActionBarView.findViewById(R.id.action_clear).setOnClickListener(this);
customActionBarView.findViewById(R.id.action_done).setOnClickListener(this);
} catch (Exception e) {
MyLog.e(DEBUG, TAG, "SupportActionBar is null!");
}
MyLog.px(DEBUG, TAG, "- setupActionBar()");
}
Please Look at below Picture,
And here is code :
ActionBar actionBar = getSupportActionBar();
if (actionBar != null) {
actionBar.setDisplayShowHomeEnabled(false);
actionBar.setDisplayShowTitleEnabled(false);
actionBar.setDisplayShowCustomEnabled(true);
View view = getLayoutInflater().inflate(R.layout.action_bar, null);
ActionBar.LayoutParams layoutParams = new ActionBar.LayoutParams(ActionBar.LayoutParams.MATCH_PARENT,
ActionBar.LayoutParams.MATCH_PARENT);
actionBar.setCustomView(view, layoutParams);
view.getLayoutParams().width = ActionBar.LayoutParams.MATCH_PARENT;
Toolbar parent = (Toolbar) view.getParent();
parent.setContentInsetsAbsolute(0, 0);
TypedValue tv = new TypedValue();
if (getTheme().resolveAttribute(android.R.attr.actionBarSize, tv, true)) {
int actionBarHeight = TypedValue.complexToDimensionPixelSize(tv.data, getResources().getDisplayMetrics());
View bottom = findViewById(R.id.bottomLayout_FrameLayout_LoginActivity);
bottom.getLayoutParams().height = actionBarHeight;
}
tvTitleActionBar = (TextView) actionBar.getCustomView().findViewById(R.id.title_TextView_ActionBar);
getSupportActionBar().setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);
}
R.layout.action_bar:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/head_bottom_blue_color">
<ImageView
android:id="#+id/openSlideMenu_ImageView_ActionBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:clickable="true"
android:src="#android:drawable/ic_menu_sort_by_size"
android:visibility="gone" />
<TextView
android:id="#+id/title_TextView_ActionBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:textAppearance="#android:style/TextAppearance.Medium"
android:textColor="#android:color/white"
android:textStyle="bold" />
</RelativeLayout>
Add these to styles
<style name="MyActionBar" parent="#style/Base.Widget.AppCompat.ActionBar">
<item name="contentInsetStart">0dp</item>
<item name="contentInsetEnd">0dp</item>
</style>
and then use it in your AppTheme like this
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="android:actionBarStyle">#style/MyActionBar</item>
Hope it helps
This looks like the same problem addressed here - see the suggested answers- especially the selected answer OR the answer proposed by Amrut Bidri (in his case you add a few lines). Hopefully this solves your problem.
I have created a custom action bar in my android app. Unfortunately the height and width is not set properly in my custom layout. After I run the app there remains a blank space left and right at the custom action bar as well as a heights problem. How can I solve this ?
Custom action bar
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#3A86CF"
android:orientation="horizontal"
android:layout_gravity="fill_horizontal">
<ImageView
android:id="#+id/imgLeftMenu"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="left|center_vertical|center_horizontal"
android:layout_weight="1"
android:src="#drawable/menu_left" />
<TextView
android:layout_width="200dp"
android:layout_height="30dp"
android:layout_weight="1"
android:id="#+id/txtTitle"
android:gravity="center_vertical|center_horizontal"
android:text="All Post"
android:textColor="#android:color/white" />
<ImageView
android:id="#+id/imgSearch"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#android:drawable/ic_menu_search" />
<ImageView
android:id="#+id/imgAdd"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#android:drawable/ic_menu_add" />
</LinearLayout>
Activity code
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.all_post);
CustomActionBar();
}
public void CustomActionBar()
{
android.support.v7.app.ActionBar actionBar = getSupportActionBar();
actionBar.setDisplayOptions( android.support.v7.app.ActionBar.DISPLAY_SHOW_CUSTOM);
// Do any other config to the action bar
getSupportActionBar().setDisplayShowTitleEnabled(false);
getSupportActionBar().setDisplayShowHomeEnabled(false);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
// set custom view
View actionBarView = getLayoutInflater().inflate(
R.layout.custom_action_bar, null);
View btnMenuLeft= actionBarView.findViewById(R.id.imgLeftMenu);
btnMenuLeft.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
}
});
View textView_Title= actionBarView.findViewById(R.id.txtTitle);
View btnMenuShare= actionBarView.findViewById(R.id.imgSearch);
View btnMenuAdd= actionBarView.findViewById(R.id.imgAdd);
android.support.v7.app.ActionBar.LayoutParams params = new android.support.v7.app.ActionBar.LayoutParams(
android.support.v7.app.ActionBar.LayoutParams.MATCH_PARENT,android.support.v7.app.ActionBar.LayoutParams.MATCH_PARENT);
actionBar.setCustomView(actionBarView, params);
// Hide the home icon
actionBar.setIcon(android.R.color.transparent);
actionBar.setLogo(android.R.color.transparent);
}
style.xml
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="android:height">5dp</item>
</style>
</resources>
put below code in your style.xml
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light">
<item name="actionBarStyle">#style/MyActionBar</item>
<item name="android:actionBarStyle">#style/MyActionBar</item>
<!-- Customize your theme here. -->
</style>
<!-- ActionBar styles -->
<style name="MyActionBar" parent="#style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
<item name="android:background">#color/actionbar_bg</item>
<item name="background">#color/actionbar_bg</item>
<item name="android:homeAsUpIndicator">#drawable/ic_backarrow</item>
<item name="homeAsUpIndicator">#drawable/ic_backarrow</item>
</style>
Use "#style/AppTheme" in manifest
Custom layout
<?xml version="1.0" encoding="utf-8"?>
<TextView
android:id="#+id/cal_tvActionbarTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:textColor="#color/white"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textStyle="bold" />
Write below code in your java class for actionbar
/**
* Method to change ActionBar Title
*/
public void setMainScreenActionBar(String p_title)
{
LayoutInflater m_inflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);
ActionBar m_actionBar = getSupportActionBar();
View m_viewActionBar = m_inflater.inflate(R.layout.custom_actionbar_title_layout, null);
ActionBar.LayoutParams m_params = new ActionBar.LayoutParams(ActionBar.LayoutParams.WRAP_CONTENT, ActionBar.LayoutParams.MATCH_PARENT, Gravity.CENTER);
TextView m_tvTitle = (TextView) m_viewActionBar.findViewById(R.id.cal_tvActionbarTitle);
m_tvTitle.setText(p_title);
m_actionBar.setCustomView(m_viewActionBar, m_params);
m_actionBar.setDisplayShowCustomEnabled(true);
m_actionBar.setDisplayShowTitleEnabled(false);
m_actionBar.setDisplayHomeAsUpEnabled(true);
m_actionBar.setHomeButtonEnabled(true);
}
put below code in your style.xml
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">Light">
<item name="actionBarStyle">#style/MyActionBar</item>
<item name="android:actionBarStyle">#style/MyActionBar</item>
<!-- Customize your theme here. -->
</style>
<!-- ActionBar styles -->
<style name="MyActionBar" parent="#style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
<item name="android:layout_height">5dp<background">#color/actionbar_bg</item>
<item name="background">#color/actionbar_bg</item>
<item name="android:homeAsUpIndicator">#drawable/ic_backarrow</item>
<item name="homeAsUpIndicator">#drawable/ic_backarrow</item>
</style>
If you don´t fix Use "#style/AppTheme" in manifest
Custom layout
<?xml version="1.0" encoding="utf-8"?>
<TextView
android:id="#+id/cal_tvActionbarTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:textColor="#color/white"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textStyle="bold" />
Write belove code in your problem with this post a screenshot please. java class for actionbar
/**
* Method to change ActionBar Title
*/
public void setMainScreenActionBar(String p_title)
{
LayoutInflater m_inflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);
ActionBar m_actionBar = getSupportActionBar();
View m_viewActionBar = m_inflater.inflate(R.layout.custom_actionbar_title_layout, null);
ActionBar.LayoutParams m_params = new ActionBar.LayoutParams(ActionBar.LayoutParams.WRAP_CONTENT, ActionBar.LayoutParams.MATCH_PARENT, Gravity.CENTER);
TextView m_tvTitle = (TextView) m_viewActionBar.findViewById(R.id.cal_tvActionbarTitle);
m_tvTitle.setText(p_title);
m_actionBar.setCustomView(m_viewActionBar, m_params);
m_actionBar.setDisplayShowCustomEnabled(true);
m_actionBar.setDisplayShowTitleEnabled(false);
m_actionBar.setDisplayHomeAsUpEnabled(true);
m_actionBar.setHomeButtonEnabled(true);
}
I wonder if anyone is having problems when redefining the background of the items on a NavigationView with app:itemBackground"? I get the behavior shown on the screenshot, no matter what item I press the last item shows the ripple instead.
Here is my drawer_menu.xml:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="single" android:id="#+id/first_group">
<item
android:id="#+id/nav_home"
android:icon="#drawable/ic_home"
android:title="#string/nav_home" />
</group>
<group android:id="#+id/second_group">
<item
android:id="#+id/nav_settings"
android:title="#string/nav_settings" />
<item
android:id="#+id/nav_about"
android:title="#string/nav_about" />
<item
android:id="#+id/nav_logout"
android:title="#string/nav_logout" />
</group>
</menu>
My my_ripple.xml:
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#ffff0000">
<item
android:id="#android:id/mask"
android:drawable="#android:color/white" />
</ripple>
My NavigationView:
<android.support.design.widget.NavigationView
android:id="#+id/navigation_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#android:color/white"
app:headerLayout="#layout/drawer_header"
app:itemBackground="#drawable/my_ripple"
app:itemIconTint="#color/drawer_item"
app:itemTextColor="#color/drawer_item"
app:menu="#menu/drawer_menu" />
Possible workaround for now - Just for people looking and just in case....
Adding addOnGlobalLayoutListener in onCreate for the navigation view and applying the Drawable on each menu item.
/**
* Contains the {#link MenuItem} views in the {#link NavigationView}
*/
private final ArrayList<View> mMenuItems = new ArrayList<>(5);
// Grab the NavigationView Menu
final Menu navMenu = mNavigationView.getMenu();
mNavigationView.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
#Override
public void onGlobalLayout() {
// Remember to remove the installed OnGlobalLayoutListener
mNavigationView.getViewTreeObserver().removeOnGlobalLayoutListener(this);
// Loop through and find each MenuItem View
for (int i = 0, length = 5; i < length; i++) {
final MenuItem item = navMenu.getItem(i);
mNavigationView.findViewsWithText(mMenuItems, item.getTitle(), View.FIND_VIEWS_WITH_TEXT);
}
// Loop through each MenuItem View and apply your custom Typeface
for (final View menuItem : mMenuItems) {
//Create RippleDrawable called myRipple
((TextView) menuItem).setBackground(myRipple);
}
}
});
Ripple drawables should be defined like this sample:
<!-- A red ripple masked against an opaque rectangle. -->
<ripple android:color="#ffff0000">
<item android:id="#android:id/mask"
android:drawable="#android:color/white" />
</ripple>
read more
https://developer.android.com/reference/android/graphics/drawable/RippleDrawable.html
Apply the itemBackground attribute to the menu rather than the NavigationView. The ripple will then stay contained to the menu item handling the touch event.
Here is the action bar that I want to create.
Here is items that I put in menu.
<item
android:id="#+id/search"
android:title="Search"
android:showAsAction="ifRoom|collapseActionView"
android:actionLayout="#layout/search_layout"
/>
<item
android:id="#+id/search1"
android:title="PHOTO"
android:showAsAction="ifRoom"
android:actionLayout="#layout/search_layout"
/>
collapseActionView - collapses search menu on startup.
After click on search item it shows edit text like on picture 1. But I need always see it, not only after click.
If I set it to Always it will pop the menu items from the screen because of fill_parent.
<EditText
android:id="#+id/txt_search"
android:inputType="text"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
Is it possible to get width of title bar layout without menu items? In this case I can set fixed width to edittext item.
Is it any other approaches to make it work?
In result it must be custom title layout + menu items. This custom layout must fill empty space between menu items and icon.
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>
<color name="action_bar">#ff0d0d0d</color>
<color name="white">#ffffffff</color>
<color name="off_white">#99ffffff</color>
</resources>
styles.xml
<style name="MyActionButtonStyle" parent="android:Widget.ActionButton">
<item name="android:minWidth">28dip</item>
</style>
<style name="ActionBarButton">
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:background">#null</item>
<item name="android:ellipsize">end</item>
<item name="android:singleLine">true</item>
<item name="android:textSize">#dimen/text_size_small</item>
</style>
now you need to create ViewGroup and ActionBar in your java file as per following:
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(new ColorDrawable(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(new View.OnClickListener() {
#Override
public void onClick(View view) {
actionBarEditSearch.setVisibility(View.VISIBLE);
actionBarImgSearch.setVisibility(View.VISIBLE);
actionBarSearch.setVisibility(View.GONE);
}
});
actionBarImgSearch.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
actionBarEditSearch.setVisibility(View.GONE);
actionBarImgSearch.setVisibility(View.GONE);
actionBarSearch.setVisibility(View.VISIBLE);
}
});
<style name="ActionBarButtonWhite" parent="#style/ActionBarButton">
<item name="android:textColor">#color/white</item>
</style>
<style name="ActionBarButtonOffWhite" parent="#style/ActionBarButton">
<item name="android:textColor">#color/off_white</item>
</style>
You can achieve this by setting a custom view in place of the action bar title.
ActionBar actionBar = 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.