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.
Related
In my game I use AlertDialog with custom view. On most devices, the dialogs look correct, but on some devices (Samsung Galaxy A73 5G Android 12) they appear cut off. I have attached screenshots for better understanding. I would appreciate any help in solving this problem.
Correct dialog
Cut off
AlertDialog.Builder builder = new AlertDialog.Builder(activity, R.style.CustomDialogStyle);
View view = activity.getLayoutInflater().inflate(R.layout.message_dialog, null);
String messageText = String.format(Strings.daily_star_bonus_message, Configs.DAILY_BONUS_TIPS);
TextView title = view.findViewById(R.id.dialog_title);
title.setText("Тестовый Диалог 1");
TextView message = view.findViewById(R.id.message_text);
message.setText(Html.fromHtml(messageText));
builder.setCancelable(true);
builder.setView(view);
builder.setPositiveButton(Strings.button_ok, new DialogInterface.OnClickListener() {
#Override
public void onClick(DialogInterface dialogInterface, int i) {
dialogInterface.dismiss();
}
});
builder.show();
message_dialog.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/dialog_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="30dp"
android:paddingTop="14dp"
android:paddingBottom="9dp"
android:textColor="#color/black"
android:textSize="20sp"
android:textStyle="bold" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="#color/dark_blue" />
<ScrollView
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="#+id/message_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="10dp"
android:paddingTop="10dp"
android:paddingRight="10dp"
android:textColor="#color/grey_text_color"
android:textSize="16sp" />
</ScrollView>
styles.xml
<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Theme.AppCompat.NoActionBar android:Theme.Light.NoTitleBar.Fullscreen-->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="android:windowFullscreen">true</item>
<item name="android:windowNoTitle">true</item>
<item name="android:forceDarkAllowed" tools:targetApi="q">false</item>
</style>
<style name="DictionaryTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowFullscreen">true</item>
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="android:forceDarkAllowed" tools:targetApi="q">false</item>
</style>
<style name="CustomDialogStyle" parent="Theme.AppCompat.Light.Dialog.Alert">
<item name="colorAccent">#color/dark_blue</item>
</style>
Will I think the problem is AlertDialog not taking the full height & width of your screen
so can you try this code ?
// Initializing:
DisplayMetrics displayMetrics = new DisplayMetrics();
WindowManager.LayoutParams layoutParams = new WindowManager.LayoutParams();
// Configuring:
getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);
layoutParams.height (alertDialog.getWindow().getAttributes());
// setting width & height to 90% of display
layoutParams.width = (int) (displayMetrics.widthPixels * 0.9f);
layoutParams.height = (int) (displayMetrics.heightPixels * 0.9f);
// Setting:
alertDialog.getWindow().setAttributes(layoutParams);
also you'll need to use your builder.create(); method for creating AlertDialog then you'll use your dialog.show(); instead of builder.show();
& Please tell me if it not works so I can provide more help & Good Luck 😊
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.
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()");
}
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);
}
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.