I am building an app for Android and iOS. It is working but the creative people want to totally change the style so that the top part of the screen (where the actionbar is on android) is taller and has their logo centered in it.
Should I hide the actionbar and put the logo (and custom nav icons) at the top of my layouts, OR should I try to change the style of the actionbar (make it taller and include the logo in the center)? Either option seems a bit painful, but I don't think I can talk them out of it.
you should create own View. You can't center any item (icon, logo, title) in ActionBar, also you can't change height. Android ACtionBar's guidelines are very strict. You might change some params by using "findViewById" and passing hardcoded android ids, but they might change for different device manufacturers resulting no change on these units (or even some crashes)
Personally, I would probably modify the ActionBar and try to maintain as much of the functionality as possible. Especially if this is a long running project and it might go back to the standard action bar later.
You can do this by adding your own custom view that will contain your centered logo to the action bar:
getActionBar().setDisplayShowCustomEnabled(true);
getActionBar().setCustomView(R.layout.action_bar_view);
You can then use the action buttons and home/up buttons as you normally would.
Depending on your needs however, you may find it challenging to keep the logo centered since the home and action buttons will add to the left and right respectively which will shift the center view if unbalanced. If so, you can still use your custom action bar view from above and add buttons directly to it inside a FrameLayout to maintain the centering.
To change the height, you can use themes and styles. Wherever you define your styles, set the actionBarStyle and the height in that style:
<style name="MainTheme" parent="android:Theme.Holo.Light">
<item name="android:actionBarStyle">#style/ActionBarStyle</item>
</style>
<style name="ActionBarStyle">
<item name="android:height">70dp</item>
</style>
Related
I'm trying to add the edge-to-edge stuff for the gesture navigation bar to the Tip Time app from Google. I added the transparent navigationBarColor XML tag to themes.xml as well as the following code to the onCreate() function of MainActivity.kt:
This was directly copy-pasted from the documentation. Android Studio says that "it cannot find a parameter with this name" for each of the three margins. I noticed that changing the parenthesis right after <ViewGroup.MarginLayoutParams> to curly braces fixes the compiler error. Maybe the documentation is just wrong?
Anyways, even after fixing that, the app still doesn't look right:
As you can see, the entire view gets shifted up slightly and the "Cost of Service" TextView is partially cut-off by the app bar. What would I need to change to implement the system/navigation bar insets for edge-to-edge content so the UI looks nice? Also, as a side-question, how can I change the dark blue color of the system status bar to match the color of the app bar so that they look blended?
As per documentation for edge to edge contents:
Draw behind the status bar if it makes sense for your content and
layout, such as in the case of full-width imagery. To do this, use
APIs such as AppBarLayout, which defines an app bar pinned to the top
of the screen.
So, while handing the window insets (especially the top one), you can't use the default ActionBar, instead you need to customize that with AppBarLayout and ToolBar, and to make it act as the ActionBar, use setSupportActionBar(), and a NoActionBar app theme; it'd be <style name="Theme.TipTime" parent="Theme.MaterialComponents.DayNight.NoActionBar"> in the shared repo.
the entire view gets shifted up slightly and the "Cost of Service" text field is partially cut-off by the app bar.
The reason that the sample uses the default ActionBar instead of a customized one; when it comes to handle the top window insets, it won't affect the default ActionBar; notice that you pass in the activity's root layout to setOnApplyWindowInsetsListener callback, and as the ActionBar is not a part of the activity, it won't be affected. Therefore the activity is shifted up behind the ActionBar when the top inset is removed. So, to solve this you have either to totally remove the default ActionBar or to use a custom toolbar instead.
Also, as a side-question, how can I change the dark blue color of the system status bar to match the color of the app bar so that they look blended?
Use a transparent status bar color in the app's theme:
<item name="android:statusBarColor" tools:targetApi="l">#android:color/transparent</item>
I added this translucent gradient background to a Toolbar so buttons are noticeable on any background, but I wonder how to make a shadow just under the button itself instead of what I did?
Thank You
EDIT
So I realized the easiest way to achieve that is by setting a Drawable Resources.
getSupportActionBar().setHomeAsUpIndicator(R.drawable.ic_home);
and
<style name="AppTheme" parent="parent_theme">
<item name="actionModeShareDrawable">#drawable/ic_share</item>
</style>
I downloaded Material Vector assets, added shadow in Adobe Illustrator, imported it to PNG. But the Android Studio's Image Asset/Action Bar and Tab Icons mess up with it I didn't get why - it removed the shadow and colors went different even with Custom 'Theme' so I did different dpi image sizes by myself and that's what I got. That's quite what I wanted
http://imgur.com/vnR98H5
Well, I don't know how to do it with simple button, if you could change Button with FloatingActionButton you may use elevation for making a shadow.
Floating Action Button (FAB) is simply a circle button with some drop shadow that unbelieveably could change the world of design. No
surprise why it becomes a signature of Material Design. So let's start
with this thing. Add FAB in layout file with FloatingActionButton and wrap it with FrameLayout since it needs some parent to make it aligned at bottom right position of the screen.
and
The shadow depth is automatically set to the best practices one, 6dp
at idle state and 12dp at pressed state. Anyway you are allowed to
override these values by defining app:elevation for idle state's
shadow depth and app:pressedTranslationZ for press state's.
From: http://inthecheesefactory.com/blog/android-design-support-library-codelab/en
Of course, you can customize by adding your icon. I'm pretty sure, that play icon as you have on button is in Material Design library.
You can also grab it here: https://design.google.com/icons/
To resume, I advice you learn something more about FloatingActionButton, which alows you to add some nice effect like elevation/shadow and others good things from Material library.
Hope it make your development easier and your app more beautiful.
I am trying to custom our home as up indicator on our Android ActionBar. I have change the icon and padding using theme style.
<item name="android:homeAsUpIndicator">#drawable/fb_back</item>
While this make the function
getActionBar().setDisplayHomeAsUpEnabled(false);
become useless. Because in some situation I want to hide the up arrow icon. However calling this leaves large space left of the home button. I am working on sdk 16, so I cannot dynamically set the homeAsUp indicator using
getActionBar().setHomeAsUpIndicator
Some one know a better solution to do this?
Hi guys I wanna ask you if it is possible to completely redesign the actionbar. I have no buttons on my bar and I want to place a "png" file instead of the default bar..is it possible? Thank you so much :)
It is possible not to use any ActionBar at all.
Just place any control which has a drawable background settable (I normally use a TextView) on the top of your Activity and set its background image.
A TextView may also contain a title and one or more "icons" (compound drawables).
And it's also clickable, if needed.
If you design your layout properly; a RelativeLayout container (I prefer this kind of container) may help: set the TextView as alignParentTop="true" and the map as layout_below="#id/yourTextView_ID" and layout_height="match_parent" (to fill the remaining space).
Let the RelativeLayout be the overall (root) container, so that it contains everything.
As such, its children can be positioned relatively.
To let the map be positioned under the "title", Just skip the layout_below attribute to the map. And add alignParentTop="true" to it.
If you don't use action bar functionality like Up navigation or drawer navigation toogle from action bar.You can use at window like this and style your title in your theme:
getWindow.requestFeature(FEATURE_CUSTOM_TITLE);
And at style file like this:
<item name="android:windowTitleSize">#dimen/title_height</item>
<item name="android:windowTitleBackgroundStyle">#style/WindowTitleBackground</item>
<item name="android:windowTitleStyle">#style/CustomWindowTitle</item>
If you want to use action bar functionality, override action bar custom view by this:
getActionBar().setCustomView(R.layout.custom_actionbar);
I set "android:uiOptions="splitActionBarWhenNarrow" in AndroidManifest.xml.
Therefore, if there is no enough room for the device, the action bar will be split into two parts.
Sometime, I want to hide the action bar by calling getActionBar().hide(). But it will leave an ugly white space in the bottom. How can I get rid of it?
I tried to call getActivity().getWindow().requestFeature(Window.FEATURE_ACTION_BAR_OVERLAY), but it would block my webview content.
Just a simple work, simply use OverLay. use this in your style
<style name="AppTheme" parent="#style/Theme.AppCompat">
<item name="android:windowNoTitle">false</item>
<item name="android:windowFullscreen">true</item>
<item name="android:windowActionBarOverlay">true</item>
</style>
or if you want to do it by programmatically, just past it before your setContentView() function
requestWindowFeature(Window.FEATURE_ACTION_BAR_OVERLAY);
and give some transparency, so it won't hide the web content. just read the documentation for the style
http://developer.android.com/training/basics/actionbar/overlaying.html
Try to remove android:uiOptions from <application> or <activity> elements from the AndroidManifest. Also, remove the android.support.UI_OPTIONS for activity that need in the AndroidManifest.
the split bar can only be hidden with api 11 for the other i tried on my tablet right now and
it continue to be here on the screen, my tablet have android 4 api >10 then split bar must be taken into count when designing a layout example:
for games touch screen like tablets or phone without harwdware key ,the thouch event x,y must be trasformed to y=y+height of the split bar, becouse the size of the window is fullscreen - splitbar and that make a lot of difference if you have graphical interface drawed with canvas ,that mean you must check if the touch is iniside a rectagle of a screen button.
and use dp pixel and not pure pixel ,all drawing maust use dp converted pixel cordiantes for make sure that have same coridanate system on the screen and on the canvas
px = dp *(dpi * default dpi)
deafult dpi is 160pdi screen medium pixel resolution