I'm creating a new app using Flutter and wanted to add a custom image on the initial splash screen.
The image appears on the splash screen, however for about half a second it appears stretched which does not look very good.
I've been searching but have struggled to find anyone with the same issue.
Any ideas?
I have tried giving a variable size image using mipmap but produces the same result.
launch_background.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/green" />
<item>
<bitmap
android:gravity="center_horizontal"
android:src="#drawable/ic_logo"
android:tileMode="disabled"/>
</item>
</layer-list>
style.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="LaunchTheme" parent="#android:style/Theme.Black.NoTitleBar">
<item name="android:windowBackground">#drawable/launch_background</item>
<item name="android:windowFullscreen">false</item>
</style>
<color name="green">#b7dd05</color>
</resources>
AndroidManifest.xml
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.flutter_app">
<!-- io.flutter.app.FlutterApplication is an android.app.Application that
calls FlutterMain.startInitialization(this); in its onCreate method.
In most cases you can leave this as-is, but you if you want to provide
additional functionality it is fine to subclass or reimplement
FlutterApplication and put your custom class here. -->
<application
android:name="io.flutter.app.FlutterApplication"
android:label="flutter_app"
android:icon="#mipmap/ic_launcher">
<activity
android:name=".MainActivity"
android:launchMode="singleTop"
android:theme="#style/LaunchTheme"
android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
android:hardwareAccelerated="true"
android:windowSoftInputMode="adjustResize"
android:screenOrientation="portrait">
<!-- This keeps the window background of the activity showing
until Flutter renders its first frame. It can be removed if
there is no splash screen (such as the default splash screen
defined in #style/LaunchTheme). -->
<meta-data
android:name="io.flutter.app.android.SplashScreenUntilFirstFrame"
android:value="true" />
<intent-filter>
<action android:name="android.intent.action.MAIN"/>
<category android:name="android.intent.category.LAUNCHER"/>
</intent-filter>
</activity>
</application>
</manifest>
I don't mind the image taking a second the render in, but having it stretched first is not ideal.
You'll need to provide an image with all the possible sizes (mdpi, hdpi, xhdpi, etc) to have the correct size for every screen size and use this 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_dark" />
<padding
android:left="0dp"
android:top="0dp"
android:right="0dp"
android:bottom="0dp" />
</shape>
</item>
<item
android:gravity="center"
android:drawable="#drawable/logo_splash">
</item>
</layer-list>
This will be my styles:
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
<style name="SplashScreen" parent="AppTheme">
<item name="android:windowBackground">#drawable/splash</item>
<item name="android:windowFullscreen">false</item>
</style>
</resources>
finally this will be my AndroidManifest.xml:
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
package="com.example.marianozorrilla">
<application
android:allowBackup="true"
android:icon="#mipmap/ic_launcher"
android:label="#string/app_name"
android:roundIcon="#mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="#style/AppTheme"
tools:ignore="GoogleAppIndexingWarning">
<activity
android:name=".MainActivity"
android:theme="#style/SplashScreen">
<intent-filter>
<category android:name="android.intent.category.LAUNCHER" />
<action android:name="android.intent.action.MAIN" />
</intent-filter>
</activity>
</application>
</manifest>
The result of all these will be the following:
In my case, the logo_splash.png has a size of 200px-200px size. If you really want to handle the size in DP you'll need to have a minimum API 23:
<?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_dark" />
<padding
android:left="0dp"
android:top="0dp"
android:right="0dp"
android:bottom="0dp" />
</shape>
</item>
<item
android:gravity="center"
android:drawable="#drawable/logo_splash"
android:width="100dp"
android:height="100dp">
</item>
</layer-list>
This one will look like this:
Related
In Activity‘'s option menu, It has a fillet boundary in default and the ripple effect is not over it.
Option_Menu_In_Activity:
I implement a activity by AppCompatActivity, But It is not default filled boundary like Activity, so I set a theme for AppCompatActivity by below code:
AndroidManifest.xml：
....
<activity android:name=".MainActivity"
android:theme="#style/AAA">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
menu.xml:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#+id/reset_setting"
android:title="设置2"
android:showAsAction="never"/>
<item android:id="#+id/add_handle"
android:title="设置3"
android:showAsAction="never"/>
<item android:id="#+id/reset_setting4"
android:title="设置4"
android:showAsAction="never"/>
</menu>
themes.xml
<style name="AAA" parent="Theme.AppCompat.Light.NoActionBar">
<item name="actionOverflowMenuStyle">#style/OverFlowMenu</item>
</style>
<style name="OverFlowMenu" parent="Widget.AppCompat.Light.PopupMenu.Overflow">
<item name="android:popupBackground">#drawable/menu_popup_background</item>
</style>
menu_popup_background.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:top="6dp"
android:bottom="6dp">
<shape
android:shape="rectangle">
<stroke
android:color="#fcfcfc"
android:width="2px" />
<padding
android:top="6dp"
android:bottom="6dp" />
<corners
android:radius="26dp" />
<solid
android:color="#f2fcfc" />
</shape>
</item>
</layer-list>
But I found a issue, when touch menu, the ripple effect will over fillet boundary.
Option_Menu_In_AppcompatActivity:
I also try to set ripple for it, and it is not work.
Any person know that?
I have a logo image asset which I am using as splash screen.I am trying to achieve result like instagram , snapchat which shows their logo in splash screen
I have a made a layout with black background and a imageview with my image asset
Logo
AndroidManifest
<application
android:name=".BaseApplication"
android:allowBackup="true"
android:configChanges="orientation|keyboardHidden|screenSize"
android:icon="#mipmap/ic_logo_black_no_title"
android:label="#string/app_name"
android:roundIcon="#mipmap/ic_logo_black_no_title_round"
android:supportsRtl="true"
android:theme="#style/AppTheme">
<meta-data
android:name="com.google.mlkit.vision.DEPENDENCIES"
android:value="ocr" />
<activity android:name=".SplashActivity"
android:screenOrientation="portrait">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity
android:name=".MainActivity"
android:screenOrientation="portrait">
</activity>
<provider
android:name="androidx.core.content.FileProvider"
android:authorities="com.pratiksahu.android.fileprovider"
android:exported="false"
android:grantUriPermissions="true">
<meta-data
android:name="android.support.FILE_PROVIDER_PATHS"
android:resource="#xml/file_paths" />
</provider>
</application>
welcome_splash_screen.xml
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:background="#000000"
tools:context=".SplashActivity">
<ImageView
android:id="#+id/imageView"
android:layout_width="70sp"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/logo_512_512" />
</androidx.constraintlayout.widget.ConstraintLayout>
SplashActivity.kt
class SplashActivity : AppCompatActivity(){
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.welcome_splash_screen)
val handler = Handler()
handler.postDelayed({
val intent = Intent(this, MainActivity::class.java)
startActivity(intent)
finish()
}, 3000)
}
}
The 3000ms delay is for starting other activity
This is working fine but when I start app , it takes few seconds to load the my splash screen layout.
When app starts
After few seconds
Is there any way I can load the layout faster or any alternative way to show splash screen?
UPDATE 1 -
After trying varun's answer
Logo size issue
UPDATE 2 -
I was using xxxhdpi but now I am using mdpi , the image is not getting out of screen but it is still big .
mdpi result Can I change the resolution according to device?
UPDATE 3 SOLVED -
splash_screen.xml
<?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/black" />
</shape>
</item>
<item
android:width="80dp" //mentioned width
android:height="80dp" //mentioned height
android:drawable="#drawable/logo_mdpi"
android:gravity="center" />
</layer-list>
Image can be resized by mentioning height width in drawable item
What you are doing is not correct. The purpose of the Splash screen is to fill in the time which is currently taken by the system to load your app not to make the user wait for one second before the app loads. I always set a splash screen by this method and it works perfectly and does not make users wait.
splash_screen.xml (put this inside the res>drawable folder)
<?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/white" />
</shape>
</item>
<item
android:drawable="#drawable/ic_logo_full"
android:gravity="center" />
</layer-list>
In your styles.xml add these line.
<style name="SplashTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
<item name="android:windowBackground">#drawable/splash_screen</item>
</style>
In your manifest add these
<application
...
android:theme="#style/SplashTheme"/>
In your MainActivity
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setTheme(R.style.AppTheme)
setContentView(R.layout.activity_view)
...
}
Edit 1:
To fix the size issue you can try this drawable. Set whatever width and height you need.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<size android:height="20dp" android:width="20dp"/>
<solid android:color="#android:color/white" />
</shape>
</item>
<item
android:drawable="#drawable/ic_logo_full"
android:gravity="center" />
</layer-list>
I want to display the bg image as the splash screen. So how can I set the image to device screen width and device screen height. Can I do it from the xml file below (this xml file is inside drawable folder) . I tried to put fill_parent or match_parent in the width but it gives error. Is there any way to do it?
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="#color/white"/>
<item
android:drawable="#mipmap/bg"
android:gravity="center"
android:width="300dp"
android:height="600dp"/>
</layer-list>
Set the image to the ImageView in the splash screen and set the scaleType attribute of the ImageView as "fixXY".
Replace android:drawable="#color/white with background drawable.
<!-- in your_splash_screen.xml -->
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/your_background" />
</layer-list>
<!--in values.xml -->
<style name="AppTheme.SplashScreen" parent="AppTheme">
<item name="android:windowFullscreen">true</item>
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowBackground">#drawable/your_splash_screen</item>
</style>
<!--in AndroidManifest.xml -->
<activity
android:name=".SplashActivity"
android:theme="#style/AppTheme.SplashScreen">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
I've followed Googles theme guide when customising the Actionbar. I´ve also added rounded top corners on the ActionBar. The problem is a white color appearing behind the corners where they are rounded.
This is my activity main.xml:
<?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:background="#000000"
android:orientation="vertical" >
</RelativeLayout>
My styles.xml
<style name="AppBaseTheme" parent="android:Theme">
<item name="android:windowBackground">#color/black</item>
</style>
This is my actionbar_theme.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:startColor="#ffc71e"
android:endColor="#d09e07"
android:type="linear"
android:angle="270"/>
<stroke
android:width="1px"
android:color="#333" >
</stroke>
<corners
android:topLeftRadius="7dp"
android:topRightRadius="7dp">
</corners>
</shape>
How do I change the background of the base application. I want it black.
Thank you.
I had the same problem, and this solution works for me. Just change the colorBackground of your activity theme's style.
<item name="android:colorBackground">#android:color/black</item>
This is my activity in manifest file:
<activity
android:name=".MainActivity"
android:label="#string/title"
android:theme="#style/MyTheme"
android:parentActivityName=".MainActivity" >
<meta-data
android:name="android.support.PARENT_ACTIVITY"
android:value=".MainActivity" />
</activity>
My theme style xml file, styles.xml
<resources>
<style name="MyTheme" parent="Theme.AppCompat.Light">
<item name="android:colorBackground">#android:color/black</item>
</style>
</resources>
I have themes file to apply all of my buttons. The following coding is in my themes file.
<style name="CustomButton" parent="#android:style/Widget.Holo.Light.Button">
<item name="android:textSize">14sp</item>
<item name="android:layout_width">72dp</item>
<item name="android:layout_height">32dp</item>
<item name="android:background">#drawable/button_selector</item>
</style>
<style name="MyTheme" parent="#android:style/Theme.Holo.Light">
<item name="android:buttonStyle">#style/CustomButton</item>
</style>
In the #drawable/button_selector
<selector>
<item android:drawable="#drawable/btn_bg">
<shape>
<size android:width="72dip" android:height="32dip"/>
<stroke
android:width="1dp"
android:color="#992f2f" />
<corners
android:radius="3dp" />
</shape>
</item>
</selector>
In my layout file
<Button android:id="#+id/savebtn"
android:layout_width="wrap_content" android:layout_marginRight="15dip"
android:layout_height="wrap_content"
android:text="Save"/>
My problem is that the button width and height didn't change. When I set layout_with(72dp) and layout_height(32dp) in the savebtn directly, it works. I have already defined themes file in application tag. I don't want to set all of my buttons like that. I would like to know any suggestions or idea?
AndroidManifest.xml
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.myproject"
android:versionCode="1"
android:versionName="1.0" >
<uses-sdk
android:minSdkVersion="11"
android:targetSdkVersion="15" />
<application
android:label="#string/app_name"
android:theme="#style/MyTheme">
<activity
android:name=".activity.setting.SettingActivity"
android:label="#string/menu_settings" >
</activity>
<activity
android:name=".activity.setting.AboutActivity"
android:label="#string/app_name" >
</activity>
<activity
android:name=".activity.DetailsActivity"
android:label="#string/app_name" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
I tested exactly your code and it worked.
Did you add the following on your AndroidManifest.xml?
<application
android:allowBackup="true"
android:icon="#drawable/ic_launcher"
android:label="#string/app_name"
android:theme="#style/MyTheme" >
If still doesn't work, please post your manifest!
Also pay attention that if you are setting another theme on your activity, it will override the application theme!