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>
Related
Recently, I stunned with a problem. On my android phone elements of the list or scroll views with the same elevation have different shadows related to their positioning. For example, views on the top of the screen have a small light shadow, whenever views on the bottom of the screen have more dark and strong shadow. Here is a screenshot from Google Keep application:
So, I thought that this is because of exactly Google Keep application. Maybe guys from Google decided to do that trick with shadows for their application. Thus, I created a sample application.
My 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="match_parent"
android:orientation="vertical">
<TextView
style="#style/AppButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:text="Test"/>
<TextView
style="#style/AppButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:text="Test"/>
<TextView
style="#style/AppButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:text="Test"/>
<TextView
style="#style/AppButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:text="Test"/>
<TextView
style="#style/AppButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:text="Test"/>
<TextView
style="#style/AppButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:text="Test"/>
<TextView
style="#style/AppButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:text="Test"/>
</LinearLayout>
My styles:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- 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>
<style name="AppButton">
<item name="android:background">#color/colorAccent</item>
<item name="android:elevation">4dp</item>
<item name="android:gravity">center</item>
<item name="android:padding">16dp</item>
<item name="android:textColor">#android:color/white</item>
</style>
</resources>
And the output is:
As you see, we have the same effect (top view has a small shadow, bottom view have a big shadow). So my questions are:
What I did wrong?
How can I achieve the same shadow for all views (not different by their positions)?
Also, I haven't found any explanations in docs, so where I can read about that phenomenon?
Does it happen on all devices or only on specific?
P.S.: I have Nexus 5X, Android 7.1.2.
UPD:
An important mention that from Android Studio Preview Window everything is fine. Every view has the same shadow as other. But on a real device, you can see the difference.
Shadows generated by Elevation API are positioned in 3D space, which means that the look of each shadow is affected not only by its elevation value, but also by shadow caster's x and y position on screen. It's pretty much like in the real world - objects beneath a light source cast shorter shadows than objects further away.
Take a closer look at the first image you posted. Shadows are longer on left edges of the left cards and on right edges of the right cards than on the edges at the horizontal center.
Ad. 1. Nothing. It just works that way.
Ad. 2. It's not possible using Elevation API. You can draw shadows by yourself.
Ad. 3. Don't know, sorry.
Ad. 4. All devices.
Ad. UPD. Shadows in the editor are static, so there's no effect you're observing.
In my application, I am using an Activity with the theme "Theme.AppCompat.Dialog" to display it as a dialog. That works out well, however, the dialog fills the entire screen height, leaving a lot of space empty. To illustrate my issue, here is a picture of opening the dialog (on an unusually high resolution to demonstrate the issue better):
The higher the resolution, the greater this space.
Here is a code snippet:
<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="wrap_content"
android:orientation="vertical"
xmlns:tools="http://schemas.android.com/tools">
<!--This is the yellow box-->
<LinearLayout
android:id="#+id/dialog_button_bar"
android:layout_alignParentBottom="true"
style="?android:buttonBarStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content">
[Buttons...]
</LinearLayout>
<!--This is the red box-->
<ScrollView
android:layout_above="#id/dialog_button_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
[LinearLayout containing rows...]
</ScrollView>
If I remove the android:layout_alignParentBottom="true" and the android:layout_above="#id/dialog_button_bar" attributes, the whole layout jumps to the top and now the empty space is below my layout.
What am I doing wrong? :(
It seems like this is some kind of intended behavior. The standard Android app installation dialog seems to behave the same way (leaving a lot of blank space between the permission part and the buttons) so I guess I'll keep it this way...
Create new Style in styles.xml
<style name="MyCustomDialog" parent="Base.Theme.AppCompat.Light.Dialog">
<item name="android:windowNoTitle">true</item>
<item name="windowActionBar">false</item>
</style>
Now in AndroidManifest.xml, add android:theme="#style/MyCustomDialog" to your Dialog activity.
I was wondering, how can I specific background normal color a ?android:attr/borderlessButtonStyle button?
Currently, I have the following button.
<Button
android:id="#+id/buy_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="?attr/shopButtonTextColor"
style="?android:attr/borderlessButtonStyle"
android:textStyle="bold"
android:text="#string/shop_buy" />
It looks like
Normal
Pressed (Has ripple effect)
What I'm expecting is
During normal, it has orange background.
During pressed, it has colorControlHighlight (Usually grey) color ripple overlay on the top of orange background.
I do the following modification.
<Button
android:id="#+id/buy_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="?attr/shopButtonTextColor"
style="?android:attr/borderlessButtonStyle"
android:background="#color/shop_button_background_color_material_light"
android:textStyle="bold"
android:text="#string/shop_buy" />
The padding/ margin information seem gone.
When I press on it, the previous ripple selector is gone.
I was wondering, how can I use ?android:attr/borderlessButtonStyle, yet able to achieve the following?
Retain padding/ margin in ?android:attr/borderlessButtonStyle.
Retain round corner (I guess is 2dp) behavior of the ?android:attr/borderlessButtonStyle button.
During normal, it has orange background.
During pressed, it has colorControlHighlight (Usually grey) color ripple overlay on the top of orange background.
Thanks to #Vikram. I was able to achieve a nice flat button effect, with desired background color by using the following technique.
<style name="ShopButton">
<item name="colorButtonNormal">#color/shop_button_background_color_material_light</item>
<item name="android:colorButtonNormal">#color/shop_button_background_color_material_light</item>
<item name="colorControlHighlight">#color/ripple_material_dark</item>
<item name="android:colorControlHighlight">#color/ripple_material_dark</item>
<item name="android:textColor">#color/shop_button_text_color_material_light</item>
<item name="android:textSize">16sp</item>
<item name="android:textStyle">bold</item>
</style>
<Button
android:id="#+id/buy_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="?attr/buttonStyle"
android:theme="#style/ShopButton"
android:stateListAnimator="#null"
android:text="#string/shop_buy" />
It looks as the following
I have been trying to make an ActionBar for a while now. At first I decided just to draw it as an image (2nd actionBar in the image below) but noticed that on some of the devices that Image wouldn`t take up the whole screen width. As for the original ActionBar I use this code in my main Activity onCreate method:
final ActionBar actionBar = getActionBar();
#SuppressWarnings("deprecation")
BitmapDrawable background = new BitmapDrawable (BitmapFactory.decodeResource(getResources(), R.drawable.actionbar));
actionBar.setBackgroundDrawable(background);
//actionBar.setIcon(android.R.color.transparent);
actionBar.setDisplayShowTitleEnabled(false);
The first ActionBar has a light theme with the image being stretched. How can I make it to be transparent and is there a way to set ActionBar height so it wouldn`t look that stretched ? I also tried doing this with styles and had the same result.
EDIT I followed vinitius answer so I now have this: result the image is 482x104 and my phone is 480x800. This is the same problem that happened when using it as plain image. Image is in drawable-hdpi folder.
EDIT 2 by adding android:scaleType="fitXY" to the ImageView it will make the whole image stretched.
actionbar_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#00000000"
android:orientation="vertical" >
<View
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#3383A8" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:src="#drawable/actionbar" />
</RelativeLayout>
EDIT 3 If I add the image as a RelativeLayout background it fill not fit in the whole width on the bigger devices. If I use it as an image on bigger width devices it will be stretched. Image
You can design your own actionBar view, you may even inflate it from any xml, and then just:
getActionBar().setCustomView(yourView);
getActionBar().setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);
To adjust the height of your bar, you could do it like this:
<!-- Application theme. -->
<style name="AppTheme" parent="AppBaseTheme">
<item name="android:actionBarStyle">#style/MyActionBar</item>
</style>
<!-- the theme applied to the application or activity -->
<style name="CustomActionBarTheme" parent="#android:style/Theme.Holo.Light.DarkActionBar">
<item name="android:actionBarStyle">#style/MyActionBar</item>
</style>
<!-- ActionBar styles -->
<style name="MyActionBar" parent="#android:style/Widget.Holo.Light.ActionBar.Solid.Inverse">
<!-- the height you desire according to your dimen -->
<item name="android:height">#dimen/action_bar_height</item>
</style>
Then, apply your theme. It works for me
I am testing out my app for API21 on Android! Unfortunately, my buttons seem weird - there is some kind of background color added. The background images did not change - they are completely transparent except for the border. (The different text and size is due to the screenshot).
Here you see the buttons before and since API 21: http://imgur.com/9EEcl0o,yVEnJkI#0
I already tried android:elevation="0dp" and android:background="#android:color/transparent". Anybody knows why my buttons change? Thank you very much!
layout.xml:
<Button android:id="#+id/sm_achievements_btn"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1.1"
android:background="#drawable/menu_btn_selector"
android:onClick="showAchievements"
android:text="#string/sm_achievements_btn"
android:padding="#dimen/padding_std"
android:layout_marginTop="#dimen/margin_small"
android:textColor="#color/button_text"
android:textSize="#dimen/text_xlarge"
style="#style/lbm_button"/>
menu_btn_selector.xml:
<item android:drawable="#drawable/menu_button"
android:state_pressed="false"/>
style.xml:
<style name="lbm_button" parent="android:Theme.Holo.Light">
<item name="android:textAllCaps">false</item>
</style>
Material buttons have a default stateListAnimator that provides state-based elevation (e.g. 0dp when disabled, 1dp when enabled). You can clear it by setting android:stateListAnimator="#null" in your style or directly on the Button.
Here is what that would look like on your button XML:
<Button android:id="#+id/sm_achievements_btn"
...
android:textAllCaps="false"
android:stateListAnimator="#null" />
Also, you're using the wrong parent for your button style. You should never set a theme as the parent for a widget style. Regardless, here is what that should look like if you prefer that route:
<Button android:id="#+id/sm_achievements_btn"
...
style="#style/MyButtonStyle" />
<style name="MyButtonStyle" parent="android:Widget.Material.Light.Button">
<item name="android:textAllCaps">false</item>
<item name="android:stateListAnimator">#null</item>
</style>