I would like the icon of my app to appear in the center of the actionbar - no other changes to the actionbar are required at all.
I have looked at more comprehensible solutions, such as this one:
ActionBar logo centered and Action items on sides
While this is possible, it seems like overkill for such a simple use case. Is there any way it can be achieved through simple styling? I am using the default Holo Light theme, with base API 11.
Why not set a background to your ActionBar with the image in it (like a strip for the Action bar background with your image to its center, Nine patch would be preferred).
Then you can assign this as Action Bar background like,
<style name="AppTheme" parent="#style/Theme.AppCompat.Light.DarkActionBar">
<!-- All customizations that are NOT specific to a particular API-level can go here. -->
<item name="android:actionBarStyle">#style/MyActionBar</item>
</style>
and,
<!-- general styles for the action bar -->
<style name="MyActionBar" parent="#style/Widget.AppCompat.ActionBar">
<!-- Support library compatibility -->
<item name="android:background">#drawable/actionbar</item>// your nine patch image
<item name="android:icon">#android:color/transparent</item>
</style>
You can then hide the Title as well. This is not a hack but considering you don't wanna temper ActionBar this will work. Have fun :)
You can do something like this:
ActionBar action = getActionBar();
LayoutInflater inflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View view = inflater.inflate(R.layout.action_menu, null);
action.setCustomView(view);
action_menu.xml file
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="10sp" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:text="Left button" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="The logo" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:text="Right button" />
</RelativeLayout>
Related
I am using FloatingActionButton icon for sharing a resource my icon look like this
It looks like gray color is overlapped.
My xml for FloatingActionButton icon is
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_marginBottom="15dp"
android:layout_marginRight="15dp"
android:tint="#android:color/white"
app:backgroundTint="#color/colorPrimary"
app:srcCompat="#android:drawable/ic_menu_share" />
However I want the white color to be bright enough as in this icon
Put like this
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_margin="16dp"
android:clickable="true"
android:src="#drawable/ic_menu_share"
app:backgroundTint="#android:color/white"/>
Notice it is:
app:backgroundTint="#android:color/white
and not
android:backgroundTint="#android:color/white"
Hope it's helps you.
The fab inherits the colors from the material theme. Make sure that your theme is using the colors you want by changing the primary, primaryDark and acent colors i.e. in res > values > styles.
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
The android:tint="#android:color/white" will always give that overlapped look. I didn't find a way to set the color of the icon via an attribute in the xml.
What I did is changing the color of the drawable (the icon) itself. It is the only way I found to change the color of the icon.
For adjusting icons I mainly use this website: https://romannurik.github.io/AndroidAssetStudio/index.html
You choose your icon and can than choose the color. Then download and import your icon and it will be the right color in your app.
I just created a custom action bar from my styles.xml class that shows up just the way I want it. And I have activated it from the manifest file.
<style name="customStyle" parent="#style/Theme.AppCompat.Light.NoActionBar">
<item name="actionBarStyle">#style/customActionBarStyle</item>
<item name="android:textColorPrimary">#color/titletextcolor</item>
</style>
<style name="customActionBarStyle" parent="#style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
<item name="background">#drawable/custom</item>
</style>
However, I'm trying to find a way to CENTRALIZE the title text on the action bar from the styles.xml file. Please can anyone help with how to do that.
I tried using this: <item name="android:layout_gravity">center</item>. But it had no effect.
Most of the suggestions I've seen online requires creating a toolbar layout separately. But I've done that and Its not what I want because It requires way more code.
Thank you.
To have a centered title in ABS (if you want to have this in the default ActionBar, just remove the "support" in the method names), you could just do this:
In your Activity, in your onCreate() method:
getSupportActionBar().setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);
getSupportActionBar().setCustomView(R.layout.abs_layout);
abs_layout:
<?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:orientation="vertical" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="my Title"
android:textColor="#ffffff"
android:id="#+id/mytext"
android:textSize="18sp" />
</LinearLayout>
Now you should have an Actionbar with just a title. If you want to set a custom background, set it in the Layout above (but then don't forget to set android:layout_height="match_parent").
or with:
getSupportActionBar().setBackgroundDrawable(getResources().getDrawable(R.drawable.yourimage));
why my DrawerLayout drawer header can't reach under statusbar?
here is mytheme:
<!-- Application theme. -->
<style name="AppTheme" parent="AppTheme.Base">
<!-- All customizations that are NOT specific to a particular API-level can go here. -->
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<!-- Status bar color -->
<item name="android:statusBarColor">#color/base_color_half</item>
<item name="android:windowTranslucentNavigation">true</item>
<!-- Navigation bar color -->
<item name="android:navigationBarColor">#color/base_color_half</item>
</style>
and my drawer view define:
<!-- Sid Drawer -->
<!-- this layout can reach under statusbar -->
<LinearLayout
android:id="#+id/drawer_view"
android:layout_width="270dp"
android:layout_height="match_parent"
android:layout_gravity="start|top"
android:background="#android:color/white"
android:clickable="true"
android:fitsSystemWindows="true"
android:orientation="vertical">
<!-- but this layout (as header) can not reach under statusbar, just above Toolbar -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/drawer_header">
<TextView
style="#style/DefaultTextStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:padding="#dimen/padding_base"
android:text="#string/app_name" />
</LinearLayout>
</LinearLayout>
Drawer background is white, and i add a linearlayout as a header, then i get this issue..
I'm sorry but i can't upload image on my level..
Since status bar is a part of the system window, set the fits attribute to false:
android:fitsSystemWindows="false"
Can someone tell me how to eliminate the padding to the left of the app logo???
Here's what im talking about http://s9.postimage.org/ksxjpx1e7/Untitled.png
You can easily reproduce this even with ABS Demos, by adding to AndroidManifest.xml
android:logo="#drawable/icon"
I even tried editing abs__action_bar_home.xml directly but somehow that damned padding is still there.
<view xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
class="com.actionbarsherlock.internal.widget.ActionBarView$HomeView"
android:background="#00ff00" >
<ImageView
android:id="#id/abs__home"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:padding="0dip"
android:layout_marginLeft="0dip"
android:layout_marginBottom="#dimen/abs__action_bar_icon_vertical_padding"
android:layout_marginRight="8dip"
android:layout_marginTop="#dimen/abs__action_bar_icon_vertical_padding"
android:adjustViewBounds="true"
android:contentDescription="#null"
android:scaleType="fitCenter" />
<ImageView
android:id="#id/abs__up"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|left"
android:layout_marginRight="-8dip"
android:contentDescription="#null"
android:src="?attr/homeAsUpIndicator"
android:visibility="gone"
tools:ignore="ContentDescription" />
</view>
As one of the comments pointed out, the padding is reserved for the up icon. The padding is present even though the up icon is not being displayed (so that the logo doesn't move when you hide/show the up icon). Using action bar (and ActionBarSherlock) there are basically 2 ways how to remove the gap:
1.Remove the up icon
The size of the up icon affects the left padding, if you put there a bigger image than the arrow is, the gap will be bigger. If you remove it the gap will be gone. Beware that removing the up icon might not bring the exact looks you wish. Up icon and logo are partially overlapped (the up icon has negative right margin) so removing the up icon (it actually sets the image to nothing, does not affect the visibility) might cause that the logo is partially hidden behind the left edge of the screen.
To remove the up icon set android:homeAsUpIndicator to #null.
<style name="MyTheme" parent="#style/Theme.Sherlock">
<item name="homeAsUpIndicator">#null</item>
<item name="android:homeAsUpIndicator">#null</item>
</style>
2.Hide home layout and use custom view instead
This way it's more work, but you can affect the result better. You would need to put the icon and the title into the custom view. To hide the home layout and show custom, you have to set android:displayOptions in the action bar style. And then set the proper custom view in the code (you can set it in styles too, but that way it's buggy).
<style name="MyTheme" parent="#style/Theme.Sherlock">
<item name="actionBarStyle">#style/MyActionBarStyle</item>
<item name="android:actionBarStyle">#style/MyActionBarStyle</item>
</style>
<style name="MyActionBarStyle" parent="#style/Widget.Sherlock.ActionBar">
<item name="displayOptions">showCustom</item>
<item name="android:displayOptions">showCustom</item>
</style>
Im trying to customize the actionbar sherlock tabs so they display the tab text below the tab icon. After searching and reading about the subject, I'm still not having much luck.
Here are the results I'm getting:
Custom tab1 selected
Custom tab1 not selected, standard tab2 selected
This is what I have so far:
Created my own styles.xml where I change some of the actionbar settings:
<style name="SkoletubeTheme" parent="Theme.Sherlock">
<item name="actionBarSize">#dimen/st__action_bar_default_height</item>
<item name="actionBarTabStyle">#style/Skoletube.TabView</item>
<item name="actionBarTabTextStyle">#style/Skoletube.Tab.Text</item>
</style>
<style name="Skoletube.TabView" parent="Widget.Sherlock.ActionBar.TabView">
<item name="android:background">#drawable/abs__tab_indicator_holo</item>
<item name="android:paddingLeft">6dp</item>
<item name="android:paddingRight">6dp</item>
</style>
<style name="Skoletube.Tab.Text" parent="Widget.Sherlock.ActionBar.TabText">
<item name="android:textAppearance">#android:style/TextAppearance.Medium</item>
<item name="android:textColor">#android:color/primary_text_dark</item>
<item name="android:textSize">10sp</item>
</style>
Created an xml ressource where I change and owerwrite some textsettings for the actionbar. Here I have increased the height of the actionbar, which in turn increases the height of the tabs. I also decreased the size of the text in order to make room for fitting icon and text in the tab
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- Default height of an action bar. -->
<dimen name="st__action_bar_default_height">58dip</dimen>
<!-- Text size for action bar titles -->
<dimen name="ab__action_bar_title_text_size">10dp</dimen>
<!-- Text size for action bar subtitles -->
<dimen name="ab__action_bar_subtitle_text_size">6dp</dimen>
<!-- Top margin for action bar subtitles -->
<dimen name="ab__action_bar_subtitle_top_margin">-3dp</dimen>
<!-- Bottom margin for action bar subtitles -->
<dimen name="ab__action_bar_subtitle_bottom_margin">5dip</dimen>
</resources>
Then I've defined a custom layout for the tabs to use, where I place the text below the icon:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/customTabLayout"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:orientation="vertical"
android:layout_weight="1"
android:focusable="true"
android:gravity="center"
style="?attr/actionBarTabStyle"
>
<ImageView
android:id="#+id/sk_abs__tab_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:background="#android:color/transparent"
/>
<com.actionbarsherlock.internal.widget.ScrollingTextView
android:id="#+id/sk_abs__tab_txt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/sk_abs__tab_icon"
android:layout_alignWithParentIfMissing="true"
android:layout_weight="1"
android:layout_centerHorizontal="true"
android:lines="1"
android:scrollHorizontally="true"
android:ellipsize="marquee"
android:marqueeRepeatLimit="marquee_forever"
style="#style/Skoletube.Tab.Text"
/>
<FrameLayout
android:id="#+id/abs__tab_custom"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:padding="5dip"
android:layout_weight="1"
android:visibility="gone"
/>
Just for the record the attribute passed as the style for the relative layout points to this:
<style name="Widget.Sherlock.ActionBar.TabBar" parent="android:Widget"></style>
Then I've applied these changes to my app as follows, the first tab has my customized implementation, the second tab has the standard implementation:
final ActionBar actionBar;
actionBar = getSupportActionBar();
actionBar.setDisplayHomeAsUpEnabled(false);
actionBar.setDisplayUseLogoEnabled(true);
// Set up tabs
myMediaTab = actionBar.newTab();
myMediaTab.setCustomView(R.layout.skoletube_tab_layout);
ImageView myMediaImg = (ImageView) myMediaTab.getCustomView().findViewById(R.id.sk_abs__tab_icon);
myMediaImg.setImageResource(R.drawable.tab_mymedia);
ScrollingTextView myMediaText = (ScrollingTextView) myMediaTab.getCustomView().findViewById(R.id.sk_abs__tab_txt);
myMediaText.setText("Tab1");
myMediaTab.setTabListener(this);
myMediaTab.setTag("MyMediaTab");
actionBar.addTab(myMediaTab);
myChannelsTab = actionBar.newTab();
myChannelsTab.setIcon(drawable.tab_mychannels);
myChannelsTab.setText("Tab2");
myChannelsTab.setTabListener(this);
myChannelsTab.setTag("myChannelsTab");
actionBar.addTab(myChannelsTab);
While I think I'm close to the solution, I think I've missed a step somewhere.
Obviously the blue bar behind the text/below the image needs to not be there, but I also haven't seemed to find out where I can set the focused image(I want the img to change color when a tab is selected) andtext color. Do I need to make the imageview focusable and handle it through that or?
I'm still fairly new at this, so the approach I have taken here might be wrong if there is a better/smarter way to go about doing this please do say.
Appreciate any suggestions and ideas.
I have solved that by using a compound drawable:
tv = new TextView(this);
tv.setText(R.string.tab_movies);
tv.setCompoundDrawablesWithIntrinsicBounds(0, R.drawable.nav_movies, 0, 0);
mBar.addTab(mBar
.newTab()
.setCustomView(tv)
.setTabListener(
new TabListenerImpl<TheatersTabActivity>(this, "theaters",
TheatersTabActivity.class)));
In order to deal with the selected or not selected image, I am using a selector:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:state_selected="true"
android:drawable="#drawable/nav_movies_on"/>
<item
android:state_selected="false"
android:drawable="#drawable/nav_movies_off"/>
</selector>
I don't know if you have found an answer for this or not yet but one solution could be to modify the tab image to include the text, with GIMP or photoshop something, and then just set those images in the tabs, instead of images and text. It is a bit of an awkward way of doing it but it would work.
Hope this helps!