Android custom buttons layout - android

How can I create buttons like the "ABN Amro Bankieren" application for the Netherlands with onclick handlers?
Screenshot ABN Amro app

You have to make 2 pressed and normal (it may be 4 for focused and disabled) xml layout for each 3 top, center and bottom buttons.
This is example xml for the center button for normal state is
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#F7FCF6"/>
<stroke android:width="2sp" android:color="#9FA89F"/>
</shape>
to make it rounded corner you may use corner tag for top button
<corners android:bottomLeftRadius="0.1sp"
android:bottomRightRadius="0.1sp" android:topLeftRadius="7sp"
android:topRightRadius="7sp" />
this may cause problem in xml layout editer but will be fine on emulator or real device

Related

Android button border stay deafault after adding drawable file

I'm working on a project in android studio and I'm trying to change the border to my button.
My default button when I just add it to my grid look like this:
After adding new XML file (called box_solid_border.XML) in the drawable file that looks like this:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<stroke
android:width="4dp"
android:color="#000000" />
</shape>
the result is that it's creating the next shape that I can see:
and that exactly what I want to add to my button.
when I come back to my XML at the main file and add to my button the next line:
as you can see in line 226 I'm adding the background that I just created for this button to the button. and near the line, there is the exact border that I want.
but in the application, the button still stays the same as the default one with no border added to him.
Like this:
Does someone know the reason that the drawable file doesn't affect the button?
If I'm doing the same thing for a textView or something else its works perfectly fine, just the button looks like not affected by the drawable extension to him.
Thank you!
You need to add this attribute to your button:
app:backgroundTint="#null"
If it has both attributes android:background and app:backgroundTint(if you are using the default theme for your application, it has a default value), the color specified by app:backgroundTint will be cover on the shape of drawable.
For border to button try to edit box_solid_border.xml in drawable folder
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android">
<stroke
android:color="#color/black"
android:width="5dp"/>
<corners
android:radius="8dp"/>
<solid
android:color="#color/colorAccent"/>
</shape>
In layout xml file
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/box_solid_border"
android:text="Button"
android:textColor="#fff"
android:textSize="30sp" />

Remove the top and bottom padding in a SeekBar

I am trying make a simple music player. When I try to use the android's default seek bar in my music playback controls section, there is a default padding at the top and bottom of the seekbar. The effect I am trying to achieve is similar to the seekbar used in shuttle music player.
But this the effect I'm getting. I would be grateful if any would tell me how to achieve the desired result.I'm using linear layout as the root container.
Because the option of specifying
android:background="#color/your_colour"
will not work because you have two colors there one for the Top and one for the Bottom.
The working solution is by using a layerlist as follows:
Go to your drawable folder create a file call it lets say
back_ground_seek_bar.xml and add the following code inside it:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:bottom="10dp">
<shape android:shape="rectangle" >
<size android:height="10dp" />
<solid android:color="#colour/your_top_color" />
</shape>
</item>
<item android:top="10dp">
<shape android:shape="rectangle" >
<size android:height="10dp" />
<solid android:color="#color/your_bottom_color" />
</shape>
</item>
</layer-list>
Replace the colours with your own colors when you paste this.
Remember we have added top and height of as 10.But because we want our SeekBar to have colour then we have to set the height of seekbar to twice the value so It should be twice and thats 20dp. So we should add our new height of the seekbar to be 20dp as well set the background as the xml we have defined as follows. Go to your SeekBar and paste this:
android:layout_height="20dp"
android:background="#drawable/back_ground_seek_bar"
For customization you can also change the values of height and whatsoever in the drawable/back_ground_seek_bar.xml but it should always be twice. The given height set in SeekBaraim is to divide it equally.

Add border around an image view selectively

I have an image view on my Android UI. While I can add a border around it using a style, I need to be able to add a border selectively (so that it is only on the top and bottom or left and bottom or any other permutation from 1 to all 4 sides).
I've googled around to try and find a solution and most say go the style route (which I don't think will work in this instance).
Is there a way to add a border selectively around an UI element on android?
You can try this following code
<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
android:insetLeft="-3dp"
android:insetRight="-2dp">
<shape android:shape="rectangle">
<stroke
android:width="2dp"
android:color="#android:color/black" />
</shape>
</inset>
It will remove the left and right border of any view.

How to change the background color of EditText without removing the standard bottom border

After the call of EditText.setBackgroundColor(Color.RED) I see only a red rectangle with text inside it, but I want to change only the text background and to keep the standard bottom border which is grey when the field has no focus and blue if it has focus. Can I do it programmatically?
I want to change the text background to red if the input is invalid and to transparent if it is valid.
I think the best way is to work with drawable/shape.xml as background and upon logic code situation call EditText.setBackground(some_other_shape.xml). Here is an example for shape file xml demonstrating how to use:
Border color ("stroke"): In this example some custom color from colors.xml
Fill color ("solid"): In this example Android default transparent color
Even image icon inside
<!--Example for custom shape file xml design-->
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#mipmap/icon_image" />
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#android:color/transparent" />
<stroke android:width="1dp" android:color="#color/orange_primary" />
</shape>
</item>
</layer-list>
So just prepare several shapes for each situation you need. Another approach is to work with layout params etc. but I think this one is faster and gives more control for custom design in easy to understand code.

Android Shape - Gradient should go to the right side

What I try to do
I'm trying to create a Backgroud-Shape for my App. For This I created a gradient witch starts in the middle, but I want that it starts on the right side. You can imagine you this like the gradient comes in from the right side.
Question
What do I need to change in my Shape or Gradient that this works?
Code
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient android:gravity="right" android:type="radial" android:gradientRadius="280"
android:startColor="#FFFFFF" android:endColor="#CBCBCB" /><!-- #e0dede" -->
</shape>
Image
This how it looks at the moment!
Like you see the gradient is in the middle, I want that exactly this gradient starts from the right side into the middle of the screen.
Try this and see the magic:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient android:layout_gravity="right" android:type="radial" android:gradientRadius="280"
android:centerX="100%" android:centerY="50%"
android:startColor="#FFFFFF" android:endColor="#CBCBCB" /><!-- #e0dede" -->
</shape>
Tags android:centerX and android:centerY lets you start your gradient from any point on your screen.You just need to give related % values as i did here.It worked like magic for me!
I didn't change other tags settings of your code but you will have to change the radius as per how much white portion you need to make visible.
Hope,It helped.

Categories

Resources