Splash screen with more than one image on android - android

Currently using the layer-list to achieve a splash screen with a drawable at the center. The app is targetting API 23+ so using bitmap is not mandatory unless it's necessary for what am trying to do. Basically I'm trying to pull off something similar to WhatsApp's new splash screen where the company reference is placed at the bottom of the screen.
But for some reason, the second image is not being shown at all even though it's visible in the Android Studio preview distorted. What I have currently is:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/black700" />
<item
android:drawable="#drawable/ic_app_icon"
android:gravity="center" />
<item
android:drawable="#drawable/ic_company_mark"
android:gravity="bottom|center" />
</layer-list>

As stated in the comments I've noticed that the bottom item depends on the phone resolution on some phones. Why it depends on the resolution, I don't know.
To work around you can add padding at the bottom
<item android:bottom="50dp">
for your bottom item in your layer-list and it will show up.
I haven't found a way to dynamically set the value depending on something and therefore used a value which "looks good" for most display resolutions.

Related

How can I place white text on a black screen on Android?

Here's the XAML that I am using for a startup screen:
<?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 android:drawable="#android:color/black"/>
<TextView android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Test"
android:gravity="center"
android:layout_gravity="center"
android:textSize="40sp"
android:textStyle="bold"
android:fontFamily="sans-serif-medium"
android:textColor="#fff"
/>
</layer-list>
I was hoping to see white text centered on a black screen. The screen is black, but instead I cannot see any text appear at all.
I understand what you are trying to do.
You want to display a plain Text on your "Splash Screen" that displays when you open an app. Since you are using Xamarin, you have access to all the native API's and you can do everything that native developers can.
Unfortunately, being able to show plain text on the splash screen is not possible in native development. Android restricted it because "the view comes from the theme. When you set up the UI for your splash activity in the theme, it is available immediately".
Why can't I have plain text on the splash screen, when I can have images? As you see over here in detail, the splash screen only accepts drawable resources. And there is no way to convert plain text into XML drawable resources.
You do have another option though. You can use a "Loading screen". You can make the app show the splash screen, then a Loading screen, and then load the right page. Let me know if that makes sense
Set background attribute to black. Either
android:background="#000"
or
android:background="#android:color/black"
I'm not used to Xamarin in specific, but if you normally want to create some sort of splash screen for your activity, as far as I know, there is no way of directly adding a TextView to it, because LayerList only supports bitmaps (image drawables) as child items. So you would have to create an .img file containing your text. Then, you can add the image with the text to the layer-list like this:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- This line below is for the background colour -->
<item android:drawable="#000" />
<item>
<!-- The bitmap below contains the image with the text -->
<bitmap
android:src="#drawable/my_text_on_screen"
android:gravity="center" />
</item>
</layer-list>
To see how to create an image from a text, have a look at this StackOverflow question.
Let me know of this is what you wanted to achieve! I hope this helps.

Are the layout bounds of a layer-list windowBackground different than an inflated layout?

On an app I'm working on, we have a splash screen consisting of a RelativeLayout and a logo in the center (and some other stuff, like a loading spinner, etc):
fragment_splash_image.xml:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:background="#drawable/loading_screen_bg"
... >
<ImageView
android:id="#+id/universal_loading_logo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="#drawable/logo_large"
... />
... other stuff ...
</RelativeLayout>
To make sure there wasn't just a brief blank screen before our splash screen, we have a SplashTheme in styles.xml for the activity. Its android:windowBackground is just a layer-list with the logo in the center again, with the hopes that the logo would appear to stay in the middle of the screen while the other things in fragment_splash_image appear as well.
splash_placeholder.xml:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" android:opacity="opaque">
<item android:drawable="#drawable/loading_screen_gradient"/>
<item>
<bitmap
android:gravity="center"
android:src="#drawable/logo_large"/>
</item>
</layer-list>
Notice that #drawable/logo_large is the same logo in each, and centered on the screen in each. The intended behavior is that it shouldn't appear to move at all.
Anyway, fragment_splash_image is inflated in a class that extends from FrameLayout, in this method:
private void inflateContent() {
final View splashImageFragment = LayoutInflater.from(getContext()).inflate(R.layout.fragment_splash_image, this, true);
final ImageView brandLogo = (ImageView) splashImageFragment.findViewById(R.id.universal_loading_logo);
final int statusBarHeight = ScreenUtils.getStatusBarHeight(getResources());
final int navBarHeight = !ScreenUtils.hasSoftNavBar() ? 0 : ScreenUtils.getNavigationBarHeight(getResources());
brandLogo.setPadding(0, 0, 0, statusBarHeight - navBarHeight);
}
Now, what's going on in there is that originally, we just inflated the fragment as-is. Unfortunately, this causes the logo in the splash fragment to jump up or down a small distance compared to the splash placeholder's logo, depending on the device tested on. On my Galaxy S6 phone, I figured that perhaps the placeholder splash screen included the status bar height, so I added it as padding to the bottom of the logo. Problem solved for that device. However, on a Nexus 7 which has a soft navigation bar, the logo still jumped very far up. I concluded that maybe it was also including the navbar height in the layout bounds, and wrote what you see above: bottom padding = statusBarHeight - navBarHeight, where navBarHeight is 0 for devices with hard navigation buttons.
This works for both devices...and then I tested on a Google Pixel. The logo jumps down. This only works on the Pixel if I set the bottom padding to 0, and the top padding to the status bar height.
I'm stumped. What the heck is determining the height of both layouts here? They are clearly different and I'm not sure how to ensure that the logo does not jump from one screen to the next on any devices. Thanks in advance!
Adding <item name="android:windowDrawsSystemBarBackgrounds">false</item> on API 21+ may allow you to keep the same formula for all devices.
I am facing a similar issue, and thinking about going this route.
Sajal's answer is the way forward.
In your styles.xml file, add a theme for your splashscreen, such as:
<style name="SplashTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowBackground">#drawable/background_splash</item>
<item name="android:windowDrawsSystemBarBackgrounds">false</item>
</style>
Where #drawable/background_splash is your splashscreen <layer-list> definition. This will ensure that the splashscreen doesn't sit underneath the status bar/navigation bar.

How can use ImageView with 2 images in android to hide or show clip one of the 2 images?

I see that i can set 2 images in one ImageView in android using a new Drawable XML file under resources, called for this example my2img.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/img1" />
<item android:drawable="#drawable/img2" />
</layer-list>
and Apply to the imageView.
testimage.setImageDrawable(getResources().getDrawable(R.layout.my2img));
But how can i access one of the 2 images from Java code ?
For example on runtime i want to show the first image full overlapped by a only a slice of the other image, another moment the full second image..and so on... just like a progress bar behaviour.
Is there any code sample ?

How to vertically align text in a button with a background drawable?

I had a simple button set up with a background image defined like
android:background="?attr/button"
where ?attr/button was a reference to a simple 9-patch png. Everything worked fine, text in the button was aligned correctly.
Then I needed to have a different background for a pressed state of the button. So I changed that to
android:background="#drawable/state_button"
where #drawable/state_button is an xml with the following states
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
android:drawable="#drawable/button_pressed" /> <!-- pressed -->
<item android:state_focused="true"
android:drawable="#drawable/button_pressed" /> <!-- focused -->
<item android:drawable="#drawable/button" /> <!-- default -->
</selector>
And after that I can't align the text properly. If I put android:gravity="center_vertical" the text is drawn about 1/4 of the button height from the top.
I double-checked my 9-patch images, everything seems fine with them. And I also tried having regular pngs for the background, it also doesn't change anything.
You should double check the 9 patch drawables you're using. The standard Android buttons include a huge amount of padding at the top and bottom of the buttons, making it look like the text is always centered. You can see this by opening up the 9 patch file, zooming in closely and looking at the difference between the pixels on the left/top and the right/bottom. The left/top sides mark which parts of the image can be stretched to accomodate more text, while the right/bottom sides mark the space that will actually be filled with text. So the difference between the right/bottom side and the left/top will be the padding. It doesn't quite make sense at first, but after playing around with it it's not so bad.
Just in case you aren't familiar with it, a useful tool for editing 9patches is the draw9patch.bat program in your SDK tools folder.
I had the exact same issue however my 9 patch drawables were ok. The cause was still the same though, just i was using custom drawables using the layer-list element.
It seems that when the Button lays out its text it takes into account all of the states in your selector. Once i'd updated all of the states to match each other my text subsequently aligned correctly.

Fixed: "Android: Detecting focus/pressed color"

I'm trying to detect the focus/pressed color for button and other elements.
This is needed because I'm developing new components and it's important that those look as part of platform.
Those colors are ORANGE on android sdk and GREEN on HTC SenseUI.
If I could detect that color my component will look as part of platform on both version.
Does anyone knows how to do this?
It's possible to create "selector" which uses custom image for default state and platform default for focus/selection.
To do this follow the steps:
1) create xml file with selector in "res/drawable" (e.g. "red_button.xml"):
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
android:drawable="#android:drawable/btn_default" >
</item>
<item android:state_focused="true"
android:drawable="#android:drawable/btn_default" >
</item>
<item
android:drawable="#drawable/btn_default_red" >
</item>
</selector>
2) from folder ".../android-sdk-mac/platforms/android-1.5/data/res/drawable/" take picture "btn_default_pressed.9.png" and change color as you like (I needed to change it to red and for this GIMP is enough).
3) place altered picture in "res/drawable" (e.g. with name "btn_default_red.9.png")
4) define button:
<Button
android:id="#+id/info_button"
android:layout_width="wrap_content"
android:layout_height="37dip"
android:layout_marginTop="1dip"
android:background="#drawable/red_button"
android:text="[Info]" />
That's all.
This is result:
alt text http://img200.imageshack.us/img200/1349/custombutton.png
I had this problem too. As already stated, the problem is that the backgrounds aren't simple colors, they're Drawables that could take on all kinds of appearances. However, I found a work-around that may help. If your custom component looks something like an existing one, e.g. a Button or ListView entry, you can just steal their background/selector and set that as the background for your custom component. E.g., in your custom component constructor:
setBackgroundDrawable(new Button(context).getBackground());
or for a background more suitable for list-like components:
setBackgroundDrawable(new ListView(context).getSelector());
You may want to optimise that code somewhat, but you get the idea.
Those aren't colors. They are a few nine-patch images out of a StateListDrawable. I am skeptical that there will be a reliable way for you to determine what the color is, one that will work across all devices and all versions of Android.
This is pretty much a duplicate of: Android ListView Selector Color
Also, why do you need to detect the colours? Just do nothing and your widgets will fit in to the platform's existing look & feel.
Or if you're writing a custom theme, just make yours inherit from android:Theme.

Categories

Resources