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>
Related
Currently I'm using Styles-only method and I was using WEBP formatted logo. Works fine. Now I have a GIF and I'm trying to show this GIF while my application starting.
I added this GIF to drawable folder but I have issues.
Problem is; firstly I see my new gif's first frame (I can say, motionless preview of my gif in android studio) as picture, and then I can see my gif but this picture and gif are both visible and overlapped.
My structure is in below.
start_screen.xml:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<solid android:color="#color/my_dark_color" />
</shape>
</item>
<item>
<bitmap
android:gravity="center"
android:src="#drawable/my_gif_file"
android:alpha="0.5"/>
</item>
</layer-list>
themes.xml:
<style name="AppTheme.Launch" parent="AppTheme.Dark">
<item name="android:windowBackground">#drawable/start_screen</item>
<item name="android:windowAnimationStyle">#null</item>
</style>
AndroidManifest.xml:
<activity
android:name=".LaunchActivity"
android:configChanges="orientation|screenSize"
android:label="#string/application_name"
android:launchMode="singleTask"
android:resizeableActivity="${debug}"
android:theme="#style/AppTheme.Launch">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
activity_launch.xml:
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/splash_logo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
LaunchActivity.kt:
class LaunchActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_launch)
Glide.with(this).asGif()
.load(R.drawable.my_gif_file)
.into(splashlogo)
...
...
...
}
}
I tried to debug the code. I realize that, the Glide... codeline is executed a few seconds after seeing first motionless picture.
What is wrong ? Can you help me to find the solution?
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:
I have a splash screen activity with the following theme:
<style name="AppTheme.Launcher" parent="Theme.AppCompat.NoActionBar">
<item name="android:background">#drawable/splash_theme</item>
</style>
Here is a part of my manifest:
<activity
android:name=".activities.SplashActivity"
android:theme="#style/AppTheme.Launcher">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
<category android:name="android.intent.category.DEFAULT" />
</intent-filter>
</activity>
And here is my drawable:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
android:opacity="opaque">
<item android:drawable="#color/colorPrimaryDarkBackground" />
<item>
<bitmap
android:gravity="center"
android:src="#drawable/shelpwelt_theme" />
</item>
</layer-list>
At some builds all works perfectly but sometimes the splash screen is completely distorted and blurred but just at the first 2-3 seconds. Then when my splash screen activity reaches onCreate the theme looks perfectly fine.
Here is the problem:
You are using a gif file for this case. And after the given time you said, 2-3 sec it wraps the screen size, so the image gets bigger. That's why it get's blurred on the screen.
Add bottom,left,right,top size to your item.
Change your drawble file to this :
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
android:opacity="opaque">
<item android:drawable="#color/colorPrimaryDarkBackground" />
<item
android:bottom="24dp"
android:left="24dp"
android:right="24dp"
android:top="24dp"
>
<bitmap
android:gravity="center"
android:src="#drawable/shelpwelt_theme" />
</item>
</layer-list>
It might be a scaling issue, try to change splash's layout, instead of designing the entire image and set it as a background, design your layout to have two images one for the gray rectangle and the other for the video icon
I have defined splash screen like many other without external activity, but it doesn't works for me, I don't understand why.
Is there any limitations for images? Also tried for many other images
This is my splash.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:gravity="center"
android:src="#drawable/splash_logo" />
</item>
</layer-list>
Here preview for splash.xml file in android studio looks like perfectly.
Than I have created style like that
<style name="AppTheme.Launcher">
<item name="android:windowBackground">#drawable/splash</item>
</style>
and assigned it to activity theme inside manifest
<activity
android:theme="#style/AppTheme.Launcher"
android:name=".MainActivity"
android:screenOrientation="portrait">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
this is my activity's
override fun onCreate(savedInstanceState: Bundle?) {
setTheme(R.style.AppTheme)
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
}
when activity is loaded blank white screen is shown instead of image, maybe for a one second. I searched this approach and seems that it is the same what others were done. Don't understand what's wrong
EDIT:
I have tested it for another device OS 5.0 and it works, but for 6.0 doesn't
EDIT
Remove this from your activity
setTheme(R.style.AppTheme)
Try this
Style.xml
<style name="SplashTheme" parent="Theme.AppCompat.NoActionBar">
<item name="android:windowBackground">#drawable/splash_background</item>
</style>
splash_background.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/colorPrimary" />
<item>
<bitmap
android:gravity="center"
android:src="#mipmap/ic_launcher" />
</item>
</layer-list>
SplashActivity
public class SplashActivity extends AppCompatActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_splash);
startActivity(new Intent(SplashActivity.this, MainActivity.class));
// close splash activity
finish();
}
}
Manifest
<activity android:name=".SplashActivity"
android:theme="#style/SplashTheme">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
This should be a comment. But i cannot put a comment. I have faced the same problem. Please check your size of image. Try to compress the image and try again it may help you. Please do let me know.
In my SlashActivity I use only AndroidManifest and style as advised here https://www.bignerdranch.com/blog/splash-screens-the-right-way/.
And in SplashActivity I want use splash.jpg, but this picture changing to screen size.
How I can use centerCrop in my style file or are there other solutions?
My drawble:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="#color/colorMaterialWhite"/>
<item>
<bitmap
android:gravity="center"
android:src="#drawable/splash" />
</item>
</layer-list>
AndroidManifest:
<activity
android:name=".SplashActivity"
android:theme="#style/SplashTheme">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
SplashActivity:
public class SplashActivity extends AppCompatActivity {
#Override
protected void onCreate(#Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
Intent intent = new Intent(this, NavigationActivity.class);
startActivity(intent);
finish();
}
}
Style:
<style name="SplashTheme" parent="Theme.AppCompat.NoActionBar">
<item name="android:windowBackground">#drawable/background_splash</item>
</style>
You might want to add padding to your splash image.
Inside the item tag add android:top, android:bottom, android:right, android:left
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="#color/colorMaterialWhite"/>
<item
android:top="200dp"
android:bottom="200dp"
android:left="200dp"
android:right="200dp">
<bitmap
android:gravity="center"
android:src="#drawable/splash" />
</item>
</layer-list>
I have also followed this blog while creating my Splash screen. Generally, the splash screen has a background color and the logo of your app and you can set it as a background. So, you should not require to centerCrop the image in Splash screen. In case that need is there, I would strongly recommend to edit the image using any editor instead of programmatically doing it.