Related
Currently, I have the following bottom log in button.
When button is not being pressed
When button is being pressed
The XML looks like this
<LinearLayout
android:background="?attr/welcomeBottomNavBarBackground"
android:orientation="horizontal"
android:id="#+id/sign_in_bottom_nav_bar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true">
<Button
style="?android:attr/buttonBarButtonStyle"
android:id="#+id/sign_in_button"
android:layout_width="0dp"
android:width="0dp"
android:layout_weight="1.0"
android:layout_height="48dp"
android:gravity="center"
android:layout_gravity="center"
android:enabled="true"
android:textAllCaps="true"
android:text="#string/log_in" />
</LinearLayout>
I would like to remove the padding (Or should I call it margin? Please refer to my bottom most p/s section) around button when it is being pressed.
I look at How to remove padding around buttons in Android?
I had tried
<Button
...
...
android:minHeight="0dp"
android:minWidth="0dp" />
It doesn't work and has no effect.
I further try
<Button
...
...
android:background="#null"
android:minHeight="0dp"
android:minWidth="0dp" />
No more padding when pressed. However, the material designed pressed visual effect will gone too.
May I know what is the best way to remove button padding during pressed, yet retain the material designed pressed visual effect?
P/S
I don't really know whether I should call it padding or margin. What I wish to achieve is that, when we press on the bottom region, press visual effect change should be covered entire 100% bottom bar region (#+id/sign_in_bottom_nav_bar), instead of current 95% bottom bar region.
A standard button is not supposed to be used at full width which is why you experience this.
Background
If you have a look at the Material Design - Button Style you will see that a button has a 48dp height click area, but will be displayed as 36dp of height for...some reason.
This is the background outline you see, which will not cover the whole area of the button itself.
It has rounded corners and some padding and is supposed to be clickable by itself, wrap its content, and not span the whole width at the bottom of your screen.
Solution
As mentioned above, what you want is a different background. Not a standard button, but a background for a selectable item with this nice ripple effect.
For this use case there is the ?selectableItemBackground theme attribute which you can use for your backgrounds (especially in lists).
It will add a platform standard ripple (or some color state list on < 21) and will use your current theme colors.
For your usecase you might just use the following:
<Button
android:id="#+id/sign_in_button"
style="?android:attr/buttonBarButtonStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Login"
android:background="?attr/selectableItemBackground" />
<!-- /\ that's all -->
There is also no need to add layout weights if your view is the only one and spans the whole screen
If you have some different idea on what your background should look like you have to create a custom drawable yourself, and manage color and state there.
As simple, use the inset property like:
android:insetTop="0dp"
android:insetBottom="0dp"
android:insetRight="0dp"
android:insetLeft="0dp"
In styles.xml
<style name="MyButtonStyle" parent="Base.Widget.AppCompat.Button">
<item name="android:background">#drawable/selector</item>
<item name="android:textColor">#android:color/black</item>
</style>
In values/drawable:
my_drawable.xml
<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle" xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="2dp" />
<!-- specify your desired color here -->
<solid android:color="#9e9b99" />
</shape>
selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true" android:drawable="#drawable/my_drawable"/>
<item android:state_pressed="true" android:drawable="#drawable/my_drawable"/>
<item android:drawable="#android:color/transparent"/>
</selector>
In values/drawable-v21:
my_drawable.xml
<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle"
android:tint="?attr/colorButtonNormal"
xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="2dp" />
<solid android:color="#android:color/white" />
</shape>
selector.xml
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?attr/colorControlHighlight">
<item android:id="#android:id/mask"
android:drawable="#drawable/my_drawable" />
</ripple>
In layout:
<Button
android:id="#+id/button"
style="#style/MyButtonStyle"
android:layout_width="match_parent"
android:layout_height="100dp"
android:text="Test"/>
Result on API 19:
Result on API 21:
Source code
I think the best solution to solve that is create your own Ripple Effect. The padding when you press the button is respecting the default Ripple Effect of the component.
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?attr/colorControlHighlight">
<item android:drawable="?attr/colorPrimary"/>
</ripple>
Or you can try change the style of your button to style="?android:textAppearanceSmall"
Remember: This effect is only shown on Android Lollipop (API 21) or higher.
I have been through what you are going through. Long story short, you just cannot do it cleanly with a <Button> tag alone, while ensuring backwards compatibility.
The simplest and the most widely practiced method is to use a <RelativeLayout> underlay, around a <Button>.
Button Code:
<RelativeLayout
android:id="#+id/myButtonUnderlay"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:visibility="visible">
<Button
android:id="#+id/myButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/selectableItemBackgroundBorderless"
android:text="I am as cute as a Button"/>
</RelativeLayout>
Wherever you need to use a button, you use this complete code.
Here is the breakdown:
OnClick events will be hooked to myButton.
Control dimensions of your button, by changing attributes of myButtonUnderlay.
In myButton, android:background="?attr/selectableItemBackgroundBorderless". This will make it a transparent button with just the text, and backwards compatible ripples.
In myButtonUnderlay, you will do all the other background applications, like setting the color of the button, margins, paddings, borders, gradients, and shadows etc.
If manipulation of the button's visibility (programmatic or not) is wish, you do it on myButtonUnderlay.
Note: To ensure backwards compatibility, make sure that you use
android:background="?attr/selectableItemBackgroundBorderless", and NOT
android:background="?android:attr/selectableItemBackgroundBorderless"
As #David Medenjak answer you can read the Google Material design Button-style to its developer site. Use button style as #David Medenjak explained in his answer. You can also do by the following way also
It is not a padding or margin but it is actually background effect of button.
If you want to remove that then you can do as following.
Option 1:
Step 1: Put the below code in styles.xml
<style name="myColoredButton">
<item name="android:textColor">#FF3E96</item>
<item name="android:padding">0dp</item>
<item name="android:minWidth">88dp</item>
<item name="android:minHeight">36dp</item>
<item name="android:elevation">1dp</item>
<item name="android:translationZ">1dp</item>
<item name="android:background">#FF0000</item>
</style>
Step 2:Create a new XML file under drawables folder and add the following code: I named my XML file as button_prime.xml
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#color/colorPrimary">
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="1dp" />
<solid android:color="#8B8386" />
</shape>
</item>
</ripple>
Step 3: Use the style and drawable in your Button as follows.
<Button
style="#style/myColoredButton"
android:layout_width="250dp"
android:layout_height="50dp"
android:text="Cancel"
android:gravity="center"
android:background="#drawable/button_prime"
android:colorButtonNormal="#3578A9" />
Option 2:
With the Support Library v7, all the styles are actually already defined and ready to use, for the standard buttons, all of these styles are available.So you can set your button style like this
<Button
style="#style/Widget.AppCompat.Button.Borderless"
android:layout_width="match_parent"
android:layout_height="50dp"
android:text="BUTTON"
android:gravity="center"
android:minHeight="0dp"
android:minWidth="0dp"
android:background="#color/colorAccent"/>
For more detail of Button style please check this answer
I think you will check this answer also. I hope you will get your solution.
The padding and margin may be a result of the original resources used in the button.
So you could try to change the resources used, using a selector:
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="#drawable/btn_action_hover" />
<item android:state_selected="true" android:drawable="#drawable/btn_action_hover" />
<item android:state_focused="true" android:drawable="#drawable/btn_action_hover" />
<item android:drawable="#drawable/btn_action_normal" />
</selector>
That would change the default images/shapes for your buttons, so you could try using drawables and set every item to a drawable. The drawable being either a bitmap, or a .xml file(style file) defining the look of the button in its current state. I assume there still are some native styles included even though you have set the button-style yourself. This may be because you aren't using a custom theme. So the issue may also be solved by defing
theme="#style/myNewTheme"
where myNewTheme is your theme, and it should have any parents(parent="" should not be defined).
Take any given theme(designed by Google/Android, for an instance Theme.AppCompat.[name]), it does also come with a buttonStyle. This is a part of Theme.Holo.Light:
<!-- Button styles -->
<item name="buttonStyle">#style/Widget.Holo.Light.Button</item>
<item name="buttonStyleSmall">#style/Widget.Holo.Light.Button.Small</item>
<item name="buttonStyleInset">#style/Widget.Holo.Light.Button.Inset</item>
<item name="buttonStyleToggle">#style/Widget.Holo.Light.Button.Toggle</item>
<item name="switchStyle">#style/Widget.Holo.Light.CompoundButton.Switch</item>
<item name="mediaRouteButtonStyle">#style/Widget.Holo.Light.MediaRouteButton</item>
<item name="selectableItemBackground">#drawable/item_background_holo_light</item>
<item name="selectableItemBackgroundBorderless">?attr/selectableItemBackground</item>
<item name="borderlessButtonStyle">#style/Widget.Holo.Light.Button.Borderless</item>
<item name="homeAsUpIndicator">#drawable/ic_ab_back_holo_light</item>
As you see, this theme defines how your buttons will look/work in basic features. You can override parts of it, but you haven't overridden the important parts(being buttonStyle and similar). So if you create a new theme yourself and style it to your liking and set the theme(using theme="themename") and that theme does not inherit any theme, you should be able to style your buttons to your liking without having to worry about the default styles in the theme
Basically:
calling padding/margin="0dp" will not help. The default drawable defined by the theme has this in the button drawable, meaning you cannot change it. So you have to either change the button style, or change the theme completely. Make sure that theme does not have any parents, because many themes define the button style. You do not want the button style defined by the theme.
The best solution these days is just to use MaterialButton in place of Button.
Note: MaterialButton is visually different from Button and AppCompatButton. One of the main differences is that AppCompatButton has a 4dp inset on the left and right sides, whereas MaterialButton does not. To add an inset to match AppCompatButton, set android:insetLeft and android:insetRight on the button to 4dp, or change the spacing on the button’s parent layout.
When replacing buttons in your app with MaterialButton, you should inspect these changes for sizing and spacing differences.
Source: https://material.io/develop/android/components/material-button/
I'd suggest you taking a look at this just in case before all.
Then, if not working i'd suggest you to create your own style (like azizbekian suggest)using android xml drawables, and drawable states to differentiate pressed/notpressed.
I think using your own style may be the best answer as it will further give you more control on how your app is displaying, but using android default themes and styles also allows the user to have custom styles which is a good idea. However, you cannot test every custom style so you cannot check that your app will display correctly on ALL custom styles, and therefore may encounter problems with some.
Set the Button background as android:background="?selectableItemBackground"
<LinearLayout
android:background="?attr/welcomeBottomNavBarBackground"
android:orientation="horizontal"
android:id="#+id/sign_in_bottom_nav_bar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true">
<Button
style="?android:attr/buttonBarButtonStyle"
android:background="?selectableItemBackground"
android:id="#+id/sign_in_button"
android:layout_width="0dp"
android:width="0dp"
android:layout_weight="1.0"
android:layout_height="48dp"
android:gravity="center"
android:layout_gravity="center"
android:enabled="true"
android:textAllCaps="true"
android:text="#string/log_in" />
</LinearLayout>
After trying lots of solution, Finally I came to a conclusion that with tag alone we can't achieve this. to remove this unwanted space around button my solution is as below:
<RelativeLayout
android:id="#+id/myButtonUnderlay"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:visibility="visible">
<Button
android:id="#+id/save_button"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginTop="-5dp"
android:layout_marginBottom="-5dp"
android:layout_above="#+id/content_scrollview"
android:layout_gravity="bottom"
android:background="#drawable/ripple_theme"
android:enabled="true"
android:text="SetUp Store"
android:textColor="#fff"
android:textSize="18sp"
android:visibility="gone"
tools:visibility="visible"
style="#style/MediumFontTextView" />
</RelativeLayout>
1.add a drawable resource file named maybe button_background.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<shape>
<solid android:color="#ff0000"/>
<stroke android:width="5dp" android:color="#00ff00"/>
</shape>
</item>
<item>
<shape>
<solid android:color="#00ff00"/>
</shape>
</item>
</selector>
2.Use the button_background.xml as the button background, done!
github
blog
I don't really know whether I should call it padding or margin.
The button is enacting surface elevation for providing visual feedback in response to touch. It is one of two feedbacks used for surface reaction; the first one being the ripple effect. For example, a raised button has resting state elevation of 2dp and pressed state elevation of 8dp (See raised button under Shadows). The button meets the finger as it touches the surface.
May I know what is the best way to remove button padding during pressed, yet retain the material designed pressed visual effect?
Having answered the first part, I do not believe you are having all of the material design if you wish to remove the surface elevation effect.
Anyways, here is how to remove surface elevation visual feedback:
Add animator file button_raise.xml to animator directory under res directory having the following code:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_enabled="true"
android:state_pressed="true">
<objectAnimator
android:duration="#android:integer/config_shortAnimTime"
android:propertyName="translationZ"
android:valueTo="0dp"
android:valueType="floatType" />
</item>
</selector>
Refer newly created animator in the button using stateListAnimator property:
<Button
...
android:stateListAnimator="#animator/button_raise"
... />
Hope this helps.
I have a unique splash screen, called splash.png and sized 1280x1280, 150dpi
I use react-native-bootsplash in my React Native project, but I don't think it really matters.
My question is simple : how can I make my splash screen, in portrait mode, be full height, not less, not more, and keep its aspect ratio so that the picture fills the screen.
Like a background-size: cover in css.
Or like an easy <Image resizeMode="cover" style={{ height: '100%' }} /> in React Native.
So I have :
android/app/src/main/res/values/styles.xml
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="android:textColor">#000000</item>
</style>
<!-- BootTheme should inherit from AppTheme -->
<style name="BootTheme" parent="AppTheme">
<!-- set the generated bootsplash.xml drawable as activity background -->
<item name="android:windowBackground">#drawable/bootsplash</item>
<item name="android:windowNoTitle">true</item>
</style>
</resources>
android/app/src/main/res/drawable/bootsplash.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<item>
<!-- your logo, centered horizontally and vertically -->
<bitmap
android:layout_height="fill_parent"
android:src="#drawable/splash"
android:scaleType="centerInside"
android:gravity="center" />
</item>
</layer-list>
And my splash.png in android/app/src/main/res/drawable/splash.png
I tried a lot of things, a lot of combinations of android:layout_height, android:scaleType and all, and I always end-up with a splash image's height overflowing the screen height.
[EDIT]
Here is the splash original image, with the size reduced enough to have a small size for stackoverflow
and here is what it give on screen...
I think the key here is android:gravity="fill".
I had the same issue when I was implementing it in my application.
My android/app/src/main/res/values/styles.xml
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="android:textColor">#000000</item>
</style>
<style name="BootTheme" parent="AppTheme">
<!-- set bootsplash.xml as background -->
<item name="android:background">#drawable/bootsplash</item>
and my android/app/src/main/res/drawable/bootsplash.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" android:opacity="opaque">
<item>
<bitmap android:src="#mipmap/launch_screen" android:gravity="fill" />
</item>
</layer-list>
for center image with background image fillup..
step1: create a Drawable resource file inside drawable in res
step2: paste the code below replacing with background images as your image and logo
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/backgroundmapsneww"
android:gravity="fill"
/>
<item
android:height="100dp"
android:width="100dp"
android:gravity="center"
android:drawable="#drawable/logo"
>
</item>
Splash screen implemented as a launcher theme is mostly meant for showing logos and not full images. You can try to nine-patch the image for different resolutions, use this website:
http://ticons.fokkezb.nl/
Upload your image (use 3:4 aspect ratio, e.g. 1080x1920, for the best results) and select -> splashes. It will generate nine-patch images for you, which you then need to upload to your res/drawable-hdpi, res/drawalbe-mdpi, res/drawable-xhdpi, res/drawable-xxhdpi and res/drawable-xxxhdpi directories. If they do not exist yet, you can just create them.
Use it like this after uploading nine-patched images:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<bitmap
android:src="#drawable/background"
android:gravity="fill" />
</item>
</layer-list>
I was able to achieve reasonable results using the image you provided. Let me know, if this has helped. This is the best you can get. Other option would be to create your own SplashActivity which would show that image for you for a short period of time.
The approach with Bitmap did not seem to succeed. Are you happy with an alternative?
What about using a layout for your SplashActivity/-Fragment like the following?
Pretty useful to display additional information like Appversion, Support's contact, Progress etc. - that's why I personally prefer it.
Done in Kotlin working with ViewModels, you might probably know it better for ReactNative.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
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">
<ImageView
android:id="#+id/iv_splash"
android:layout_width="0dp"
android:layout_height="0dp"
android:scaleType="centerCrop"
app:srcCompat="#drawable/splash"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
As you can see centerCrop is key. It will cut the image, but retain its aspect ratio.
Now inflate the layout in SplashActivity, where you could also let the user sign in or so, then display the result in the layout and when done, switch to MainActivity.
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_splash)
}
...or Fragment
override fun onCreateView(
inflater: LayoutInflater, container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
viewModel = ViewModelProvider.AndroidViewModelFactory(Application())
.create(viewModel::class.java)
return inflater.inflate(R.layout.fragment_splash, container, false)
}
Alternative Solution
Using this as a layout, if you don't plan to display anything more than just the image itself in the future.
<?xml version="1.0" encoding="utf-8"?>
<ImageView 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:scaleType="centerCrop"
app:srcCompat="#drawable/splash"/>
Hope it helps :)
I have done this by using FrameLayout and ImageView. Write down below code in your android/app/src/main/res/drawable/bootsplash.xml:
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/splash"
android:scaleType="centerCrop"
/>
</FrameLayout>
I'm trying to add splash-screen to my Android app.
I've been following instructions from here. It's the standard way as I get it, and it seems logical.
So it's really simple right? Create drawable resource, use it in a theme as windowBackground, use the theme? Well it doesn't work for me...
manifest:
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="euroicc.sicc">
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<uses-permission android:name="android.permission.INTERNET"/>
<application
android:allowBackup="true"
android:icon="#drawable/app_icon"
android:label="#string/app_name"
android:roundIcon="#mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="#style/AppTheme.Splashscreen">
<activity android:name="euroicc.sicc.ui.MainActivity"
android:theme="#style/AppTheme.Splashscreen">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
styles:
<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="android:spinnerDropDownItemStyle">#style/mySpinnerItemStyle</item>
<item name="android:itemBackground">#color/main_background</item>
<item name="android:textColor">#color/text_default</item>
<!--<item name="android:popupMenuStyle">#style/MyAlertDialog</item>-->
</style>
<style name="AppTheme.Splashscreen" parent="AppTheme">
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowTranslucentNavigation">true</item>
<item name="android:windowBackground">#drawable/splashscreen_drawable</item>
</style>
</resources>
splashscreen_drawable:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#android:color/holo_green_light"></solid>
</shape>
</item>
<item>
<bitmap android:src="#drawable/splashschreen_eicc"
android:gravity="center"></bitmap>
</item>
</layer-list>
I've tried other codes from other sites, but nothing seems to work.
Only white background is displayed for less then a second (approximately), and then the app starts running. I'm setting the theme AppTheme in onCreate method of main activity so it uses it's default theme always except on start.
I'm also overriding onPause and onResume, but I call their supers, so that shouldn't be a problem.
I'm testing on v7.0.0, but that shouldn't be a problem also?
I have more styles but I removed them from the example code, because they are used for dialogs and elements inside xml files, not for activities.
So what is the problem and how do I solve it? When I first read about splashscreens I thought setting windowBackground would've been enough
You don't set your background in styles.xml, rather inside your splashcreen layout xml file. Here is my layout example:
<?xml version="1.0" encoding="utf-8"?>
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:ignore="ContentDescription"
android:background="#drawable/green" ==============================> HERE!
tools:context=".activity_splash_screen">
<ImageView
android:id="#+id/logo"
android:layout_width="#dimen/_150sdp"
android:layout_height="#dimen/_150sdp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="#dimen/_100sdp"
android:src="#drawable/white_logo"
/>
<ImageView
android:id="#+id/title"
android:layout_width="#dimen/_240sdp"
android:layout_height="#dimen/_150sdp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="#dimen/_100sdp"
android:src="#drawable/title"
/>
If you need help with the entire code, I can help you!
I've had this problem. I created the splash screen as a layer-list drawable, and in the theme as windowBackground as it is recommended everywhere, yet it wouldn't work on some devices (like my and my friend's Motorolas, a few other phones) - a black screen would be shown. For me the solution was to wrap my splash activity code in a Handler's postDelayed runnable with some small delay:
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
Handler(Looper.getMainLooper()).postDelayed( { //this is a trick so the splash screen - in window bg theme - is displayed on all devices, instead of black screen. E.g. moto g6
val startMainActivityIntent = ...
startActivity(startMainActivityIntent)
finish()
}, 100)
}
I am not particularly fond of delaying UI, if I knew a better way that worked, I would not do this. But it’s better than black screen.
So I have a listview in my app and it seems that the AppTheme value "colorControlHighlight" changes the colors for ripple and onclick row in that listview to (blue). However I made a listview with identical xml attributes that relate to color on a widget and for some reason the ripple and on press colors are still the default color (white). If I change the android:listselector attribute for the listview on my widget, it works but it doesn't act the same and the ripple effect is gone. How it acts; after I change listselector it stays blue unless I press a different row on the list. This is not what I want (is this because i haven't set onclick actions yet? or is this how that attribute is designed to work?). Any help would be appreciated.
This is my app activity listview
<ListView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:id="#+id/AppUrlList"
android:background="#color/dark_black"
android:layout_gravity="center_horizontal"
android:dividerHeight="1px"
android:divider="#color/faded_blue"
android:clickable="true"
/>
now this is my widget listview
<ListView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clickable="true"
android:dividerHeight="2px"
android:divider="#color/faded_blue"
android:background="#color/black"
android:id="#+id/WidgetListView"
android:layout_gravity="center_horizontal" />
now this is my apptheme
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="colorControlNormal">#color/faded_blue</item>
<item name="colorControlActivated">#color/bright_blue</item>
<item name="colorControlHighlight">#color/bright_blue</item>
thanks for the suggestions to improve my question i'm new here
I figured it out i had to do this:
app_list_item.xml
<TextView
android:id="#+id/AppListTextViewGreen"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/List_Hint"
android:gravity="center"
android:background="#drawable/list_background_green"
style="#style/liststyleGreen"
/>
then in list_background_green.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true" android:drawable="#color/faded_green" />
<item android:state_pressed="true" android:drawable="#color/faded_green"/>
<item android:drawable="#color/black" />
</selector>
the state_pressed is what defines the color when the list item is pressed (obviously)
and the default background is black.
this works on my widget whereas setting the default colors in the app theme did not change the colors in my widget.
EDIT: forgot to put the ripple selector here too, here it is, and i'll also include how to make it work on versions above api 21.
you have to name the ripple selector the same name as the list selector. so you would make another xml named "list_background_green" but put it in drawable-v21 folder. This folder probably won't exist so right click on res folder in android studio and click show in explorer, then create drawable-v21 folder and put the same named xml there. here is an example.
drawable-v21/list_background_green.xml
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#color/bright_green">
<item>
<selector>
<item android:state_selected="true">
<color android:color="#color/transp_green" />
</item>
<item android:state_activated="true">
<color android:color="#color/transp_green" />
</item>
<item android:state_pressed="true">
<color android:color="#color/transp_green" />
</item>
<item>
<color android:color="#color/semi_trans_black" />
</item>
</selector>
</item>
you want to be careful how transparent you make this value.
<color android:color="#color/semi_trans_black" />
i couldn't figure out why the selector wasn't showing up for a while and then realized that if this value is too transparent it makes the ripple not show up. I can't explain why if someone can please do, just warning people because it took me a while to figure out that was the cause. That value is the default background for each textview in the list, so maybe the selectors inherit it's transparency although that doesn't make alot of sense. I only had to do this on my appwidget, for some reason beyond my current understanding. In my regular app listview i didn't need to do any of this. My suspicion is that widgets inherit their theme from the system but i'm not sure of this.
cheers, hope this helps someone.
How do I use a background image in an Activity theme/style?
If I do this using a colour:
<style name="CustomTheme" parent="android:Theme.Light">
<item name="android:windowBackground">#color/custom_theme_color</item>
</style>
It works correctly, but if I replace the line with:
<item name="android:windowBackground">#drawable/splash_image</item>
The image displays correctly, but all the content is squished into a tiny block in the top left corner of the screen. The shadow underneath the status bar is also cut off or messed.
I am using Mono for Android and the image is a valid nine-patch png.
I also don't use themes, so in the layout of the activity I would add
android:background="#drawable/splash_image"
My solution was change the android:windowBackground to android:background.
<?xml version="1.0" encoding="UTF-8" ?>
<resources>
<style name="Theme.Splash" parent="android:Theme">
<item name="android:background">#drawable/splash</item>
<item name="android:windowNoTitle">true</item>
</style>
</resources>
I don't use themes or anything, so I'm not sure how that will affect this, but I set my background like this:
getWindow().setBackgroundDrawableResource(R.drawable.background_image);
in onCreate
I needed to have a splash image that looked like my app's initial activity and ran into same issue. I had good luck with windowContentOverlay instead of windowBackground. The drawable appeared below the status bar in the exact same position as a real layout would. It has worked on Android 2.2, Android 3.0, and Android 4.1.
This is my style:
<style name="SplashTheme" parent="android:style/Theme.Light">
<item name="android:windowNoTitle">true</item>
<item name="android:windowContentOverlay">#drawable/splash</item>
</style>
My splash.xml drawable mimics my user interface header using layer-list:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!--- Background; tile is broken on Android 2.2 so just have super wide background that will get clipped -->
<item>
<bitmap android:gravity="top|left" android:src="#drawable/splash_background" />
</item>
<!--- Icon left justified -->
<item>
<bitmap android:gravity="top|left" android:src="#drawable/header_icon" />
</item>
<!--- Buttons/etc right justified -->
<item>
<bitmap android:gravity="top|right" android:src="#drawable/splash_buttons" />
</item>
</layer-list>
I believe ActionBar also has some built-in ways to handle this, if your app uses it. The MonoIO sample seems to have such a launch image.
You can use the android:gravity="fill" instead of android:gravity="center",
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
android:opacity="translucent">
<item>
<bitmap
android:gravity="fill"
android:src="#drawable/splash_screen" />
</item>
</layer-list>
Note: It will depend on your shape and size of the splash image. In my case by the use of android:gravity="fill" my splash is looking perfect.
You can use the different attribute of gravity on the type of your splash image.