I want to create a family of buttons. They all look the same, except for their color. The brute force way of doing this would be to copy/paste the layout into N files, then change the colors in each one.
What’s the more elegant way of achieving this? In the sample code below, I'd like to use different colors instead of #color/round_green_button_pressed_background and #color/round_green_button_unpressed_background, but everything else should ideally stay in one place.
Doing this programmatically seems even worse than copy/pasting the files, so hopefully, there’s an answer that involves pure XML-based layouts.
Sample code: button_green.xml.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<shape>
<size android:width="120dp" android:height="120dp"/>
<solid android:color="#color/round_green_button_pressed_background"/>
</shape>
</item>
<item>
<shape>
<size android:width="120dp" android:height="120dp"/>
<solid android:color="#color/round_green_button_unpressed_background"/>
</shape>
</item>
</selector>
Related
Good evening everyone!
Is there a way to make my buttons look pressed without having to design two times each button?(one for pressed state, another for not pressed). I've designed the buttons' shapes using http://angrytools.com/android/button/, and using these shapes as the background for the buttons. I've heard about ImageButton but it doesnt seem to apply here as I need the buttons to have text.
Example of one of my background shapes:
Thanks very much in advance!
Try This Code, set this XML file as background to a button.
but_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 android:shape="rectangle">
<solid android:color="#9df20901" />
</shape>
</item>
<item>
<shape android:shape="rectangle">
<solid android:color="#892379" />
</shape>
</item>
</selector>
Background
I've made a tiny library, which shows how to mimic the style of the stock contacts app of Android Lollipop, here.
The problem
It seems that on Android 5.1 , the fast scroller looks very different than the previous one, and it's too close to the right, so it's hard to use it.
screenshot of Android 4.4 :
Here's a screenshot on Android 5 :
and on Android 5.1 :
What I've found
I've tried to go over all of the "what's new" section of Android 5.1, and also in some related classes docs, but I didn't find anything special, except for "setFastScrollStyle" . However, I couldn't find any explanation of how to use it (plus it's from API 21 , so that might not be the reason).
The question
How can I make the fast scroller to be located a bit to the left, so that it will be easier to touch it?
How do you use setFastScrollStyle? Is there any tutorial for this?
I had the same problem and after a few hours of research I came up with a solution. This AOSP commit helped me the most, it shows the changes made to the scrollbar in Android 5.1 (SDK 22): Update scrollbars to match Material spec
There are two possibilities:
A: Use the new style and add padding
This will keep the same new rectangle from API 21 (Android 5.1), but add some padding left and right.
1: Copy the fastscroll_thumb_material.xml to your drawables folder
This should be the content (removed AOSP comments to save space):
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<shape android:tint="?attr/colorControlActivated"
android:shape="rectangle">
<solid android:color="#android:color/white" />
<size android:width="8dp" android:height="48dp" />
</shape>
</item>
<item>
<shape android:tint="?attr/colorControlNormal"
android:shape="rectangle">
<solid android:color="#android:color/white" />
<size android:width="8dp" android:height="48dp" />
</shape>
</item>
</selector>
2: Edit your theme
Add the following item to your theme. I think you could put this in a style and use it with setFastScrollStyle, but I find this easier.
<item name="android:fastScrollThumbDrawable">#drawable/fastscroll_thumb_material</item>
3: Edit fastscroll_thumb_material.xml
You can edit it to your liking, but I did the following, which adds 8dp to the left and right of the scrollbar. I added a layer-list and item around each shape and added android:right="8dp" and android:left="8dp" to the new item. I tried adding that to the original items, but that didn't work, neither did adding padding to the shape.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<layer-list>
<item android:right="8dp" android:left="8dp">
<shape android:tint="?attr/colorControlActivated"
android:shape="rectangle">
<solid android:color="#android:color/white" />
<size android:width="8dp" android:height="48dp" />
</shape>
</item>
</layer-list>
</item>
<item>
<layer-list>
<item android:right="8dp" android:left="8dp">
<shape android:tint="?attr/colorControlNormal"
android:shape="rectangle">
<solid android:color="#android:color/white" />
<size android:width="8dp" android:height="48dp" />
</shape>
</item>
</layer-list>
</item>
</selector>
B: Change the scrollbar to the old style
This will use the API 21, Android 5.0 style
1: Add the old drawables to your project
You can download them from the commit above (fastscroll_thumb_mtrl_alpha.png and fastscroll_track_mtrl_alpha.9.png), but I also bundled them, you can also download them from my Google Drive.
2: Add fastscroll_thumb_material.xml to your drawables
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<bitmap android:src="#drawable/fastscroll_thumb_mtrl_alpha"
android:tint="?attr/colorControlActivated" />
</item>
<item>
<bitmap android:src="#drawable/fastscroll_thumb_mtrl_alpha"
android:tint="?attr/colorControlNormal" />
</item>
</selector>
3: Add fastscroll_track_material.xml to your drawables
<?xml version="1.0" encoding="utf-8"?>
<nine-patch xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/fastscroll_track_mtrl_alpha"
android:tint="?attr/colorControlNormal" />
4: Edit your theme
Add the following item to your theme. I think you could put this in a style and use it with setFastScrollStyle, but I find this easier.
<item name="android:fastScrollThumbDrawable">#drawable/fastscroll_thumb_material</item>
<item name="android:fastScrollTrackDrawable">#drawable/fastscroll_track_material</item>
I hope this helps to achieve your goal :)
Why not set padding on the right side of your layout containing the ListView? Google webpage # setPadding(). Personally I used android:paddingLeft for a similar issue like yours.
Another common trick is to add a (hidden) ImageView in the layout on the right side (horizontal orientation). The ImageView would be hidden and the (width) size can be set.
Glad to help a frequent SO user, hope I did. Regards, Tommy Kwee.
Hi I'm trying to make a drawable which looks like a small vertical line with a circle attached to the bottom of it. I am trying to figure out if creating such a shape in a single xml file is possible (I know I could probably place two shapes on top of each other but I'm trying to avoid doing that)
Here's what I have so far:
<?xml version="1.0" encoding="utf-8"?>
<layer-list
xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="#+id/line">
<shape
android:shape="line"
>
<stroke
android:width="2dp"
android:color="#000000" />
<size android:height="12dp"/>
</shape>
</item>
<item
android:top="5px"
android:id="#+id/circle">
<shape
android:shape="oval"
android:useLevel="false"
android:innerRadius="5dp"
android:thickness="2dp"
>
<solid
android:color="#color/silver_status"
></solid>
<stroke
android:color="#color/silver_status"
android:width="1dp"
/>
</shape>
</item>
</layer-list>
This layers the two images on top of each other (I think) but what I really want is for them to be on top of each other
Anyone know if this is possible/how it can be done?
I ended up solving this simply by using the individual shapes within a linear layout to achieve the affect. Not exactly what I wanted but definitely does the job just fine.
I have developed a listView for my app. My UI is simple flat UI, here is a snapshot:
when I searched internet for better interfaces I found this for example:
As you see in this sample, background colors have shadows at the bottom. Is there a way that I can color my Layout background like this? Thanks in advanced.
In order to achieve a shadow effect I'd guess that it's better to use a layer-list with two items, one with the solid color and the second item would be a gradient coming from transparent to a black color with an alpha value.
Here's how this would look like (needs to be placed in res/drawable/):
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#ff33b5e5" />
</shape>
</item>
<item>
<shape android:shape="rectangle">
<gradient
android:angle="-90"
android:endColor="#90000000"
android:startColor="#android:color/transparent" />
</shape>
</item>
</layer-list>
Doing it this way, you won't need to "search" for a darker color of your solid color all the time.
Output would look like this:
Create an XML file and named it as "gradient_effect" in Res -> Drawable folder and put below code in it
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:startColor="#a0a0a0"
android:endColor="#f5f5f5"
android:angle="0"
/>
Now use this file as a background in any of your layout as you can get is like
android:Background= "#Drawable/gradient_effect"
Set above line as an attribute for any of you view or layout in xml file
This can help too!
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<gradient
android:angle="90"
android:endColor="#A2000000"
android:startColor="#android:color/transparent" />
</shape>
</item>
In my application, I'm (still) trying to manipulate my Button Views to look the way I want. I'd like to attempt an experiment where I'll draw an Android Rect or RectF in the same location as the (transparent) button to highlight it's appearance.
However, I can't figure out how to get my mitts on that information. The buttons in question are defined in XML, in a Linear Layout, but something inside my Android has to know their sizes and locations. Right?
Any suggestions?
Thanks, R.
You should be able to set a background of the button to a custom xml drawable with the drawable containing only stroke element around the edge.
You will need to create this custom drawable: it would be just a few lines of XML.
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<stroke android:width="1dp" android:color="#CCCCCC" />
<corners android:radius="10dp" />
</shape>
Edit: updated to include rounded corners.
This answer is a combination of my poking around and Aleks' suggestion to use a custom drawable. Ultimately, my custom drawable needed more than three lines, but it's still not very big:
<?xml version="1.0" encoding="utf-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<gradient
android:startColor="#android:color/black"
android:endColor="#android:color/black" />
<stroke
android:width="1dp"
android:color="#cccccc" />
<corners
android:radius="5dp" />
<padding
android:left="4dp"
android:top="2dp"
android:right="4dp"
android:bottom="2dp" />
</shape>
</item>
</selector>
I needed to add all of the other detail to get the custom button to work the way I wanted -- and I'm probably not done, but if anybody is interested, this works pretty well...