I would like to add my own image background to the action bar. How can I do that? Also on top of this on the left I would like to add another image of my own which contains a text. Is this possible?
I haven't managed to find any examples of this at all.
I have got a "styles.xml", in values folder, which contains the actual background image:
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="AppTheme" parent="android:Theme.Holo" />
<style name="ActionBar">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">45dp</item>
<item name="android:orientation">horizontal</item>
<item name="android:background">#drawable/actionbar_bg</item>
</style>
</resources>
I've also got an "actionbarbg.xml", within the layout folder, which contains the text image I mentioned:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
style="#style/ActionBar" >
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clickable="false"
android:paddingLeft="15dip"
android:scaleType="center"
android:src="#drawable/bannerlogo" />
/>
</LinearLayout>
I have an "actionbar.xml", within the menu folder, which contains 2 menu buttons on the action bar.
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:id="#+id/item_refresh"
android:icon="#drawable/help"
android:title="Refresh"
android:showAsAction="ifRoom|withText" />
<item
android:id="#+id/item_save"
android:icon="#drawable/info"
android:title="Save"
android:showAsAction="ifRoom|withText" />
</menu>
My code within my main class:
ActionBar actionBar = getActionBar();
actionBar.setDisplayShowHomeEnabled(false);
actionBar.setDisplayShowTitleEnabled(false);
LayoutInflater mInflater = LayoutInflater.from(this);
View mCustomView = mInflater.inflate(R.layout.actionbarbg, null);
actionBar.setCustomView(mCustomView);
actionBar.setDisplayShowCustomEnabled(true);
The result looks like this:
Are you using Android 4.0 or higher?
Also, maybe it's easier doing it with the sherlock actionbar
Maybe you can try setting the android:src and android:background, according to the requirements.
Related
i am using this library to make the same bottom navigation but when i click on item the icon will disappear, here is my code
activity_main:
<com.github.kwasow.bottomnavigationcircles.BottomNavigationCircles
android:id="#+id/navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:forceDarkAllowed="true"
app:labelVisibilityMode="selected"
app:menu="#menu/navigation" />
navigation items:
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="#+id/destination_ejournal"
android:icon="#drawable/ejournal_selector"
android:title="#string/bottomnav_ejournal" />
<item
android:id="#+id/destination_solah"
android:icon="#drawable/solah_selector"
android:title="#string/bottomnav_solah" />
<item
android:id="#+id/destination_home"
android:icon="#drawable/home_selector"
android:title="#string/bottomnav_home" />
<item
android:id="#+id/destination_dua"
android:icon="#drawable/dua_selector"
android:title="#string/bottomnav_dua" />
<item
android:id="#+id/menu_more"
android:icon="#drawable/more_selector"
android:title="#string/bottomnav_more" />
MainActivity:
val bottomNavigation = findViewById<BottomNavigationCircles>(R.id.navigation)
bottomNavigation.color = Color.WHITE
so what am i doing wrong here?
is it in the activity or XML?
Images of the problem:
If i click Home
If i navigate to another
If i change color from white to red
home selector:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/home_selected" android:state_checked="true" />
<item android:drawable="#drawable/ic_home" android:state_checked="false" />
</selector>
ic_home: is verctor
home_selected: is png
SOLUTION:
i was using a selector to display a different drawable if the "state_checked" and one of them was PNG format so it didn't appear, i used 2 vectors for the selector and it works fine now
I tried your example with that library & the problem is that you're setting the color to white at runtime & that kind of blends into the bottomnav color.
You can try different color e.g red.
val bottomNavigation = findViewById<BottomNavigationCircles>(R.id.navigation)
bottomNavigation.color = Color.RED
It gives me following result:
I'm trying to get a shadow to appear beneath my action bar, but for some reason the shadow continually appears and begins at the very top of the screen, instead of beneath the action bar. I'm using a CustomView android.support.v7.widget.Toolbar action bar widget in each of my xml layout files. How can I get the shadow to properly appear beneath this action bar instead of at the top? Can I set some kind of divider equal to the height of this custom view before the shadow appears? Can we do something like set the height of the gradient to 50dp but only show the gradient in the last 5-10% of that height?
My theme:
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- colorPrimary is used for the default action bar background -->
<item name="colorPrimary">#color/white</item>
<!-- colorPrimaryDark is used for the status bar -->
<item name="colorPrimaryDark">#000</item>
<!-- colorAccent is used as the default value for colorControlActivated
which is used to tint widgets -->
<item name="colorAccent">#color/teal</item>
<!-- You can also set colorControlNormal, colorControlActivated
colorControlHighlight & colorSwitchThumbNormal. -->
<item name="android:textColorSecondary">#d7d7d7</item>
<item name="android:windowContentOverlay">#drawable/actionbar_shadow</item>
</style>
Shadow drawable:
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<size android:height="4dp" />
<gradient
android:angle="270"
android:endColor="#android:color/transparent"
android:startColor="#color/grey" />
</shape>
Toolbar:
<android.support.v7.widget.Toolbar
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_height="50dp"
android:minHeight="30dp"
android:layout_width="match_parent"
android:paddingTop="10dp"
android:paddingBottom="10dp"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
android:background="#color/white">
<ImageView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="#drawable/actionbar_title_r"
android:id="#+id/ActionBarTitle" />
</android.support.v7.widget.Toolbar>
Toolbar will have a shadow only in devices running on API 21 or higher. In order to achieve this effect you can add the property android:elevation="4dp" And it will work fine. Hope this helps
You can try several dp for elevation on the material appBar layout and see the degree of effect it gives. Then you decide how much do you give it.
in the appBar,
android:elevation = "1dp"
play with 2dp, 3dp,4dp and choose whats right for you.
I can't seem to get an image and text to work in portrait mode on menu items in the action bar no matter what I try. I even tried to force android portrait orientation
My XML:
<item android:id="#+id/menu_save"
android:icon="#drawable/content"
android:orderInCategory="100"
android:title="New Group"
android:showAsAction="withText|always" />
Has anyone figured this out?
From the config.xml file of the native ActionBar:
values:
<bool name="config_allowActionMenuItemTextWithIcon">false</bool>
values-480dp:
<bool name="config_allowActionMenuItemTextWithIcon">true</bool>
To answer your question:
No you can't do that, if the devices width is smaller than 480dp. (Unless you want to create a custom rom with a modded framework)
Ahmad's answer makes clear why this is not possible. It is annoying that the action bar is not easier to customise.
One quick and dirty solution is to put two buttons in the menu, remove the icon from one and give the second a different name. Then in the corresponding java file, replicate the functionality for the extra button in onOptionsItemSelected. This gets over having to create a custom view for the action bar.
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:yourapp="http://schemas.android.com/apk/res-auto" >
<item android:id="#+id/action_done"
android:icon="#drawable/ic_done"
android:title="#string/done"
yourapp:showAsAction="always" />
<item android:id="#+id/action_done2"
android:title="#string/done"
yourapp:showAsAction="always" />
<item android:id="#+id/action_cancel"
android:icon="#drawable/ic_cancel"
android:title="#string/cancel"
yourapp:showAsAction="always" />
<item android:id="#+id/action_cancel2"
android:title="#string/cancel"
yourapp:showAsAction="always" />
</menu>
I also saw this answer but didn't try it: withText in split ActionBar #Google Calendar Method. This is how it is done in Google Calendar but also relies on a custom view replacing the action bar.
The easiest way to do it is:
<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"
tools:ignore="AppCompatResource">
<item
android:id="#+id/action_nexo"
android:title="title"
app:actionLayout="#layout/custom_menu_item"
app:showAsAction="always"/>
</menu>
custom_menu_item.xml
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="?attr/actionBarSize">
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center"
android:text="#string/nexo_tile_short"
android:clickable="true"
android:focusable="true"
android:textSize="#dimen/text_size_small"
android:textStyle="bold"
android:textColor="?attr/actionMenuTextColor"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:paddingTop="#dimen/padding_small"
android:paddingBottom="#dimen/padding_small"
android:src="#drawable/nexo"/>
</LinearLayout>
when i customize title bar in view by adding a image, i face an issue as the images is not fixed to the edges accurately. I have attached the image where you can see space between the window margin and image added. How to overcome this problem. Below are the code that i have used to customize the title bar. Can anyone help me to fix this issue.
java code :
requestWindowFeature(Window.FEATURE_CUSTOM_TITLE);
setContentView(R.layout.home_view);
this.getWindow().setFeatureInt(Window.FEATURE_CUSTOM_TITLE,
R.layout.upwindow);
layout code :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="32dp">
<ImageView
android:id="#+id/imageView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/up_bar"
android:src="#drawable/up_bar" />
<TextView
android:id="#+id/pagename"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:text="Sify MyStorage"
android:textAppearance="?android:attr/textAppearanceMedium" />
</RelativeLayout>
create style xml in values folder :
<resources>
<style name="CustomWindowTitleBackground" />
<style name="CustomTheme" parent="android:Theme">
<item name="android:windowTitleSize">32dp</item>
<item name="android:windowTitleBackgroundStyle">#style/CustomWindowTitleBackground
</item>
</style>
</resources>
then refer it in manifest as :
android:theme="#style/CustomTheme">
this will solve it .
hope this help .
Do you have different images for different resolutions? It might be that your image simply does not fit that space, and that you need a larger one. Be careful though, you might run into issues with your app working across different platforms with scaling.
You need to play a little with styling in order to override this behavior. Define a custom theme (style) as below:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="customTitle">
<item name="android:background">#drawable/up_bar</item>
</style>
<style name="myTheme" parent="android:Theme">
<item name="android:windowTitleBackgroundStyle">#style/customTitle</item>
</style>
</resources>
and then use this theme in your activity by applying android:theme="#style/myTheme" to your desired activity tag in AndroidManifest.xml
requestWindowFeature(Window.FEATURE_NO_TITLE);
and setBackground to your layout in layout file...
Like,,,
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent" android:background="#drawable/up_bar" <---Add this
android:layout_height="32dp">
and Remove imageview from xml
I've been able to override any themes that have names with "android:" prepended to them, but the Android themes.xml also defines properties that don't seem to be able to be overridden. For example:
<!-- Variation on the Light theme that turns off the title -->
<style name="Theme.Codebase" parent="android:style/Theme.Light">
<item name="android:windowNoTitle">true</item>
<item name="android:windowContentOverlay">#null</item>
<item name="colorBackground">#color/off_white</item>
</style>
colorBackground is defined in the Theme.Light xml, but adding this here gives me a
/res/values/styles.xml:10: error: Error: No resource found that matches the given name: attr 'colorBackground'.
error. How do I override that style for the Application as a whole?
You can overwrite standard attributes the same way you modified such properties as windowNoTitle, just don't forget to add android: prefix like this:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="SEclubTheme" parent="#android:style/Theme">
<item name="android:colorForeground">#color/bright_foreground_dark</item>
<item name="android:colorBackground">#color/background_dark</item>
</style>
</resources>
Without the attr prefix, your colorBackground becomes an attribute that you need to define. Consider the following example where theme_dependent_icon is defined in a styles.xml:
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<declare-styleable name="custom_menu">
<attr name="theme_dependent_icon" format="reference"/>
</declare-styleable>
<style name="MyDarkTheme" parent="android:Theme" >
<item name="theme_dependent_icon">#drawable/ic_search_dark</item>
</style>
<style name="MyLightTheme" parent="android:Theme.Light" >
<item name="theme_dependent_icon">#drawable/ic_search_light</item>
</style>
</resources>
Then, you can use the attribute via ?attr/theme_dependent_icon in your main_activity.xml:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="?attr/theme_dependent_icon" />
</LinearLayout>
In this example, because I used custom theme names MyDarkTheme and MyLightTheme, they need to be selected during onCreate of your main activity prior to setContentView, i.e.
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setTheme(R.style.MyDarkTheme); // causes ic_search_dark.png to be shown
// setTheme(R.style.MyLightTheme); // causes ic_search_light.png to be shown
setContentView(R.layout.main_activity);
}
Calling setTheme() is one way of selecting a theme during runtime. Another way is to define multiple versions of styles.xml in your resources under the values, values-11, values-14 corresponding to default theme, theme for Android 3.0 (API-11) and theme for Android 4.0 (API-14).