aI have been looking at the stock apps on my Google nexus running Jelly Bean, and there are some nice panel styles I would like to use in my own App I was wondering if they are part of the stock UI elements that are available to use?
Here's a screenshot of the panel I'd like to use:
This screenshot is taken from the Google Maps apps but can be seen in other applications, it has a thin grey border and the bottom border is slightly thicker. Some panels have rounded corners, some I've seen have square corners.
No, this is not a standard widget.
You can however choose a library which provides these (or equivalent) widgets:
Cardslib
Cards-UI
Also, you could try to see if some of the 9 patches (*.9.png) which are in the folder (on Windows):
C:\Program Files\Eclipse\adt-bundle-windows-x64\sdk\platforms\android-16\data\res\drawable-mdpi
May help you in your design.
The part in bold is to be replaced by your installation path.
I indicated API level 16, but you can choose among all the ones you have installed
And, of course, you're not limited to look into the mdpi folder. That's just the DEFAULTone.
If anyone finds this question, right now you can use CardView to make cards like the ones shown in the picture.
Related
An Android App development beginner here. I created a simple app which converts KMs to Miles and vice versa. Issue seems to be with the interface. The interface for activity_main.xml is as below:
Interface on Android Studio compiler
But once I emulate it on an Nexus 6 API 29 emulator, it looks weird and doesn't work properly. Tried it on a Nexus 5 emulator as well, same issue. Here's a screenshot:
Nexus 6 API 29 Emulator
Moreover, when I tried installing the apk file on my Samsung Note 8, it doesn't install, even after changing the settings and allowing unknown apps to be installed. Please help.
Judging from first screenshot (red alert icons in "Component Tree" window) the issue is the fact that You did't constrained Your Views.
When using ConstraintLayout You can't just 'place' views in editor, they need to be constrained to something in order to be displayed in desired place.
For example: Your button with text "Convert miles to kms" should be constrained as follows:
left to parent left
right to parent right
top to EditText above it or to TextView "KMs".
But other views need to also be constrained to get desired behavior.
You can read about ConstraintLayout and how to use it in this tutorial from official documentation: https://developer.android.com/training/constraint-layout
I will set a square app icon for my Android App made with Android Studio.
I set my own app icon with File -> New -> Vector Asset
This creates a normal and a round app icon.
If I copy and rename (ic_launcher_round.png) the quadratic app icon and install it for example on OnePlus Launcher i get the round icon, too.
My Logo is square, so it is really ugly to see it round.
How I can force a quadratic app icon? Is this possible?
If I set only android:icon="#mipmap/ic_launcher" instead of this and android:roundIcon="#mipmap/ic_launcher_round" in my Manifest.xml nothing change.
Your app's icon will be rounded when a launcher decides to make it rounded.
The "launcher" is just another app, like yours, but it is not your app - it is separated completely from it, and you can't normally influence any process that is separated from your app's process, OS will forbid that.
Only sometimes you would be able to do something like that by utilizing some form of Inter Process Communication (IPC) offered by your OS, assuming of course that the process you want to communicate with is also 'willing to talk' with you [utilizes the same form of IPC to allow other process to change some of its behaviors].
Also the purpose of the Android Studio's wizard you used was to help you generate ready-to-use drawable files and it was just to save your time on making these drawables all by yourself in some image editor.
Any drawable set inside XML manifest file for being your app's round icon will be rounded a t the end and that is no matter how it actually looks. I don't think you can expect any currently available major launcher application to display some apps' icons as round and some as square. It would significantly harm its user experience.
I'm afraid you will have to adapt to this situation and make your square app's logo a little bit smaller and leave some empty space around it to allow end user's launcher app to draw a circle around this logo.
Here you can find official recommendations for designing Android apps' launcher icons: https://material.io/guidelines/style/icons.html#icons-icons-for-android and here you can read about the most current approach in a subject of Android apps' icons: Adaptive ones. Any other type of icon can be treated as 'legacy' and used only for compatability reasons when targeting APIs below 26.
Edit:
In the comments section OP mentioned some apps that do currently have square icons in their newest versions and that turned out to actually be a small UX design flaw of its developers.
Just as an example, I've downloaded Bytecoin app OP mentioned, and this is how it looks like on my phone, Android 7.0:
The red object in the corner has ben cut off. I think we can assume that every other app on the Google Play that displays there with square logo [which looks good in their store pages because Google Play allows square logos] will look bad when installed on phones with modern versions of launchers, especially api >=26.
If your target SDK is 26 and android device version is 8, the app icon will be round.
One of the ways to achieve this is (Not sure if it is the right/best way to do it)
In AndroidManifest.xml I had to set
android:targetSdkVersion=“20”
<uses-sdk android:minSdkVersion=“16" android:targetSdkVersion=“20” />
android:roundIcon=“#mipmap/ic_launcher_round”
<application android:hardwareAccelerated=“true” android:icon=“#mipmap/ic_launcher” android:label=“#string/app_name” android:roundIcon=“#mipmap/ic_launcher_round” android:supportsRtl=“true”>
Ensure the ic_launcher_round images are Squared one.
I used the android studio to generate adaptive and legacy icons…
I deleted the ic_launcher_round images generated by the android studio.
I copied ic_launcher images(Generally the Square icons) to ic_launcher_round.
Now my ic_launcher_round is Squared icons.
(ic_launcher_round.png, ic_launcher.png, icon.png) all of them are the same images
After making this changes, rebuild the app. Now you should see Square icon when you install the app.
Since Android 8.0 (Oreo)
The new way of designing app icons for Android now is described there :
Adaptive icons
Android 8.0 (API level 26) introduces adaptive launcher icons, which can display a variety of shapes across different device models.
When using adaptative icons, launcher icons have 2 layers : foreground and background (see Creating adaptive icons in XML).
The shape (round, square...) can vary depending of the system / launcher settings.
Before Android 8.0
Legacy icons can be generated this way : Create a legacy launcher icon
My question is not about how to create white icons.
I'm just trying to understand WHEN, exactly, the automatic white filter kicks in.
I've read notification icons, from Lollipop onwards, automatically become white 'silhouettes', so even if you use a multicolored image with setSmallIcon, any non-transparent part of it will turn fully white when displayed in the status bar.
And that's precisely what it actually does on every nexus/pixel emulator I start from android studio. Any android version, among 5, 6, 7, 8, does this.
But I actually didn't find out about this lollipop feature until recently, because all this time, and even now, by loading the exact same app on real devices, I always see the original multicolor image in the status bar. This happens on a samsung s5neo, on a huawei p8lite, and many others.
I asked my users, and apparently some see them white, some see them colored. Some with Oreo see them white, some with Oreo see them colored. It seems it also depends on which specific icons I use, because some users report they see, on the very same device, some of them white and some of them colored.
I use with setSmallIcon either my ic_launcher, so applying it from the resources, or Icon objects created from some Drawables I get from external sources.
And I use pixeled sprites of characters as icons, so when I say colored I don't mean a 'green thing', I mean a really colorful image.
My app has sdk target 27, it also uses some oreo functionalities.
So, what's going on? I read everywhere that it should do the silhouettes on ANY >=lollipop device, but that's obviously not all there is to know about it, and I want to understand better.
How can, for example, my oreo users, see multicolored images, set with setSmallIcon, if I have sdk target 27?
Can someone explain? Thanks!
Create your notification icon using white pixels plus the alpha channel, as documented, and you will get consistent results.
Some device manufacturers tinker with Android. For some, apparently, that tinkering includes supporting non-standard notification icons. You have no good way, ahead of time, of knowing exactly which devices (out of 10,000+ models) will have this behavior.
If a device manufacturer hires you to build an app, or wishes to license an app from you, you might inquire about their notification icon policy and make adjustments to take advantage of whatever they offer.
I am looking for the image resources that are used on my android device(s). I have one device running Froyo (Platform version 2.2.1, API Level 8, Samsung Galaxy tab) and one running Homeycomb_MR2 (Platform version 3.2, API level 13, Motorola Xoom). With help from this post I was able to locate image resources...
The problem is that for my Froyo device, the resources in "...platforms\android-8\data\res\drawable-hdpi\ and ...\drawable-mdpi\" do not look like the check boxes or radio buttons I see on screen. Specifically, the widgets I see have a larger green fill circle in radio buttons and checks that extend outside the box for check boxes. Can anyone explain why I can't find the resource images I am seeing on screen? Are these widgets getting displayed using some other images?
The resources that your see in your res folders are overridden by the system resources.
Let me give you an example :
The spinner will look differently on the emulator and that on your galaxy tab. As samsung has made changes in the Android os as per its requirement and overriden the controls for optimising its look
I'm new to Android programming, and i'm building a small test program.
My problem is that in the graphical layout of the .xml files the widgets(Spinners,Buttons...) looks nice and round, but when I put my program into my phone(Nexus S, if that matters) or in the emolator, they come out with rounded edges,making the whole program look really ugly.
Is theres something i'm doing wrong?
Thanks!
The problem is that you have set the build target to 2.2 or earlier and Nexus S is running 2.3, which has redesigned UI elements. If you set build target to 2.3 it sould show the same (not rounded) buttons and other elements in the Eclipse XML viewer as they are in the Nexus S.
I believe the Nexus S doesn't use the default android theme. Many of the standard UI items (radio buttons, buttons, check boxes etc) will have a different look than the UI builder will show.
Edit: wait...its showing up different in the emulator too?? my answer may not apply in that case, sorry :-\
So the unrounded buttons are the new ones? Isn't that stupid? The are uglier.
And I set the build target to 1.6, and both the emulator and the nexus s are running 2.3,so that explains it.
Does anyone has a guide that explains how to change the UI items to nicer ones?