I have used the following code to add ripple effect to my button, but the border around it has disappeared and the button has merged with the back ground. I want to add border around it to distinguish it.
This is the code of my button:
<Button
android:id="#+id/email_sign_in_button"
style="?android:textAppearanceLarge"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/selectableItemBackground"
android:textColor="#ffffff"
android:text="#string/action_sign_in" />
This is the drawable for the button:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:bottomLeftRadius="1dp"
android:bottomRightRadius="1dp"
android:radius="0.1dp"
android:topLeftRadius="1dp"
android:topRightRadius="1dp" />
<solid android:color="#android:color/transparent" />
<stroke
android:width="1dp"
android:color="#E8E6E7" />
</shape>
You can actually have both by using background and foreground properties, like so:
android:background="#drawable/the_name_of_your_button_file"
android:foreground="?android:attr/selectableItemBackground"
android:background="?attr/selectableItemBackground"
is causing the button to take on the theme, and blend into the background as if transparent. You are not pointing to the drawable file for the button, which has the stroke element, which gives the border.
If you want a border, you must use the stroke element in your drawable by pointing to it with:
android:background="#drawable/the_name_of_your_button_file"
Related
can anyone explain and give me an example - how to add blurred shadow around edittext with rounded corners
like on a picture
I think it's an elevation. What you need to do is you need to add background with rounded corners to EditText and set margin to the EditText because without margin your shadow will be cutted off.
edittext_background.xml
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#color/white"/>
<corners android:bottomRightRadius="8dp" android:bottomLeftRadius="8dp"
android:topLeftRadius="8dp" android:topRightRadius="8dp"/>
</shape>
EditText:
<EditText
android:layout_width="match_parent"
android:layout_height="40dp"
android:elevation="8dp"
android:background="#drawable/edittext_background"
android:layout_margin="16dp" />
I am developing an app in java, android studio, where the user can choose the style color of the app.
With most components just use the .setBackground(colorUser);
The problem is in my buttons.
My buttons are all rounded, I created a shape for that.
My shape is in other file...
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:padding="10dp"
android:shape="rectangle">
<solid android:color="#color/colorJetway" />
<corners
android:bottomLeftRadius="80dp"
android:bottomRightRadius="80dp"
android:topLeftRadius="80dp"
android:topRightRadius="80dp" />
</shape>
<Button
android:id="#+id/btnAdc"
android:layout_width="84dp"
android:layout_height="84dp"
android:layout_marginTop="12dp"
android:layout_marginEnd="205dp"
android:background="#drawable/btns_border"
android:onClick="btnAdicionar_click"
android:text="+"
android:textColor="#FFFFFF"
android:textSize="40dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/txtQuantidade" />
That way if at runtime I make mybutton.setBackground(colorUser) my button loses its style ... it will have no rounded edges.
How can I do it?
It is not exactly what you are looking for.
However using the MaterialButton component it is very simple to have rounded buttons.
Just use app:cornerRadius to define the corner radius and app:backgroundTint to change the background color.
<com.google.android.material.button.MaterialButton
app:backgroundTint="#color/myselector"
app:cornerRadius="xxdp"
.../>
You can programmatically change these values using:
button.setCornerRadius(...);
button.setBackgroundTintList(..);
if your colors is limited you can create some drawables with the colors you want.
for example :
blackButton.xml :
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:padding="10dp"
android:shape="rectangle">
<solid android:color="#color/black" />
<corners
android:bottomLeftRadius="80dp"
android:bottomRightRadius="80dp"
android:topLeftRadius="80dp"
android:topRightRadius="80dp" />
whiteButton.xml :
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:padding="10dp"
android:shape="rectangle">
<solid android:color="#color/white" />
<corners
android:bottomLeftRadius="80dp"
android:bottomRightRadius="80dp"
android:topLeftRadius="80dp"
android:topRightRadius="80dp" />
and when you want change your button's background just use button.setBackground(getResources().getDrawable(R.drawable.blackButton)) or button.setBackground(getResources().getDrawable(R.drawable.whiteButton))
I want to create a button in an Android application which will be round with a color of my choosing and a plus sign as its text.
Is it better (in terms of space, efficiency etc.) to create an image of the above description and set it as a background image, or it it better to make a shape with a color and add that as a background?
To do that you can create a circle shape with the help of shape drawable, but the better way to do this is to use the FloatingActionButton which is circular in shape and you can provide the icon of your choice.
-First of You create drawable xml
-ic_round_shape_background
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#000" /><!--color code which you are use instead #000-->
<corners android:bottomRightRadius="8dp"
android:bottomLeftRadius="8dp"
android:topRightRadius="8dp"
android:topLeftRadius="8dp"/>
</shape>
//Create xml and use background like below
activity_main.xml
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/ic_round_shape_background"
/>
please try the below code.
create a background.xml in drawable folder and paste this code.
`
<solid android:color="#color/colorPrimary"></solid>
<stroke
android:width="2dp"
android:color="#color/colorPrimary"></stroke>
<padding
android:left="5dp"
android:right="5dp"
android:top="5dp"></padding>
<corners android:radius="5dp"></corners>
`
in Layout
<LinearLayout
android:id="#+id/place_holder"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/background"
android:gravity="center"
android:orientation="horizontal">
` <ImageView
android:layout_gravity="center_vertical"
android:layout_width="20dp"
android:layout_height="20dp"
android:background="#drawable/image" />
</LinearLayout>`
I have a linearlayout background set to a drawable file in order to create that rounded corner look as such:
<LinearLayout
android:id="#+id/layout_top"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#drawable/rectangle_topcorner">
<TextView android:layout_width="fill_parent"
android:id="#+id/textView1"
android:layout_height="wrap_content"
android:text="Impact"
android:layout_gravity="center"
android:textColor="#android:color/white"
android:layout_marginLeft="10dip" />
</LinearLayout>
In my adapter, after I inflate the layout item, I am trying to change the backgroundColor to a 'different' drawable, in order to change the background color:
LinearLayout top = (LinearLayout) view.findViewById(R.id.layout_top);
top.setBackgroundColor(R.drawable.rectangle_topcorner_high);
The problem is, after doing that, the rectangle loses its rounded corner look and its just a plain old square.
The 2 drawables:
rectangle_topcorner
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
android:id="#+id/background_shape" >
<corners android:topLeftRadius="30dp"
android:topRightRadius="30dp" />
<solid android:color="#005577"/>
</shape>
rectangle_topcorner_high
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
android:id="#+id/background_shape" >
<corners android:topLeftRadius="30dp"
android:topRightRadius="30dp" />
<solid android:color="#83162D"/>
</shape>
I'm missing something to preserve the rounded corners ?
Try using:
top.setBackgroundResource(R.drawable.rectangle_topcorner_high);
setBackgroundColor are for color resources
Thought I would share my eventual fix -
As I was trying variants of
top.setBackgroundColor(R.drawable.rectangle_topcorner_high);
The correct (working) code is:
top.setBackground(context.getResources().getDrawable(R.drawable.rectangle_topcorner_high));
I'm trying to set the margin of the buttons to 0, (so no spacing between the buttons).
Basically, I want my buttons to look something like that(with the following style and colors):
Any idea how can I accomplish this kind of task? I do not want to create a 9 patch image by myself (since I don't have any knowledge doing that).
In this specific case, you can do this task easily with XMLs.
This is how you can achieve it in two steps:
Step 1
Create 3 shapes in drawable folder:
First shape is for the left button: shape_button_left.xml. This shape has radial left corners and gradient background.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<stroke
android:width="1dp"
android:color="#BFBFBF" >
</stroke>
<corners
android:bottomLeftRadius="10dp"
android:topLeftRadius="10dp" >
</corners>
<gradient android:startColor="#D2D2D2" android:endColor="#F2F2F2" android:angle="90"/>
</shape>
Second shape is for the center button: shape_button_center.xml. This shape doesn't define anything for corners and also has gradient background.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<stroke
android:width="1dp"
android:color="#BFBFBF" >
</stroke>
<gradient android:startColor="#D2D2D2" android:endColor="#F2F2F2" android:angle="90"/>
</shape>
Third shape is for the right button: shape_button_right.xml. This shape has radial right corners and gradient background.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<stroke
android:width="1dp"
android:color="#BFBFBF" >
</stroke>
<corners
android:bottomRightRadius="10dp"
android:topRightRadius="10dp" >
</corners>
<gradient android:startColor="#D2D2D2" android:endColor="#F2F2F2" android:angle="90"/>
</shape>
Step 2
Now, we can use these shapes in simple views to get the effect of buttons.
In your layout XML add the next code:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center" >
<!-- Button Left -->
<LinearLayout
android:id="#+id/button_left"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:background="#drawable/shape_button_left"
android:gravity="center"
android:padding="10dp" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Left"
android:textColor="#333333"
android:textSize="20sp" />
</LinearLayout>
<!-- End Button Left -->
<!-- Button Center -->
<LinearLayout
android:id="#+id/button_center"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:background="#drawable/shape_button_center"
android:gravity="center"
android:padding="10dp" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Center"
android:textColor="#333333"
android:textSize="20sp" />
</LinearLayout>
<!-- End Button Center -->
<!-- Button Right -->
<LinearLayout
android:id="#+id/button_right"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:background="#drawable/shape_button_right"
android:gravity="center"
android:padding="10dp" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Right"
android:textColor="#333333"
android:textSize="20sp" />
</LinearLayout>
<!-- End Button Right -->
</LinearLayout>
That's it
Now, you can add onClick listener in your code to LinearLayouts and work with it like a button.
Testing this code on my mobile gives next result:
Any idea how can I accomplish this kind of task? I do not want to create a 9 patch image by myself (since I don't have any knowledge doing that).
I'm afraid you may not have much choice. The inherent spacing found in between each button is a result of extra transparent pixels built directly into the existing 9-patch backgrounds that the framework uses. To replace this behavior you must set the background of the buttons to a different Drawable that doesn't include this inherent spacing.
Another option would be for you that could be done in code is to create XML drawable shapes to use for each background. You can create an individual shape that has corner radii, a fill gradient, and a stroke just like your image. You can read more about creating XML Drawables in the docs.