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))
Related
I tried to set a drawable as a background for a button, but just the corners are rounded now.
Here is the code for the drawable:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="1000dp"/>
<solid android:color="#color/light_notlight_themebased_accentColor" />
<padding
android:bottom="7dp"
android:top="7dp"
android:left="7dp"
android:right="7dp" />
<stroke
android:color="#color/ContrastAndText"
android:width="10dp" />
</shape>
And here is the code for the Button:
<Button
android:id="#+id/loginButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
android:background="#drawable/login_loginbutton_default"
android:text="#string/login_loginButton"
android:textAllCaps="true"
android:textColor="#color/NavbarAccent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.498"
app:layout_constraintStart_toStartOf="parent" />
The stroke and the color is not shown (it stays the backgroundcolor), only the corners are rounded...
Here is what it looks like:
In the AndroidStudio Preview (Canary 4.1):
Final result on the device:
Whats my fault? Thanks in advance!
If you are using a MaterialComponents Theme there is no difference between <Button /> and <com.google.android.material.button.MaterialButton />. Check this answer for more details.
If you want to use the android:background attribute in your Button you have to use the version 1.2.0-alpha06 or higher.
<MaterialButton
app:backgroundTint="#null"
android:background="#drawable/button_gradient"
... />
Otherwise you have to use the AppCompatButton component.
Checking your shape you don't need to set a background.
Just use
<com.google.android.material.button.MaterialButton
app:cornerRadius="#dimen/..."
app:strokeColor="#color/.."
app:strokeWidth="#dimen/.."
..>
I am using android studio, and I try to do some work on UI using some buttons.
I have created a background for some buttons, but when I apply this background on the buttons, the text inside the butons is not centered.
I think the marginof the button remains the same, whereas the applied background creates a smaller square than the marginn of the button. I don't know how to make the margin of the button fit the margin of the square coded in the background xml file.
Here the picture of the problem :
pic1
Here is the code of the background (bg_rectangle_grey.xml) :
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:width="#dimen/_34sdp" android:height="#dimen/_34sdp">
<shape android:shape="rectangle">
<stroke android:width="1dp" android:color="#ff6c7780" />
<corners android:radius="3dp" />
</shape>
</item>
</layer-list>
And here is the code of the xml file with the button :
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginTop="#dimen/_15sdp"
android:style="?android:attr/buttonBarStyle">
<Button
android:style="?android:attr/buttonBarButtonStyle"
android:background="#drawable/bg_rectangle_grey"
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="M" />
I have looked for answers on google but it was never exactly what I am looking for.
If anyone can help.
Thank you in advance
Just use gravity center in button
<Button
android:style="?android:attr/buttonBarButtonStyle"
android:background="#drawable/bg_rectangle_grey"
android:id="#+id/button4"
android:gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="M" />
Please remove android:width="#dimen/_34sdp" android:height="#dimen/_34sdp" from below code and try again.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:width="#dimen/_34sdp" android:height="#dimen/_34sdp">
<shape android:shape="rectangle">
<stroke android:width="1dp" android:color="#ff6c7780" />
<corners android:radius="3dp" />
</shape>
</item>
</layer-list>
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 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"
I am trying to implement button in android with following layout.How to make it??
i have already implemented button like this
i used following code to make
<TextView
android:id="#+id/action_text_share"
style="#style/mediumTextSize"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="5dip"
android:gravity="center"
android:singleLine="false"
android:text="Share by Text"
android:padding="10dp"
android:layout_weight="1"
android:background="#drawable/white_broder_round_with_transparent_bg"
android:textColor="#color/blackColor" />
and have drawable like this
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#color/removeContactRedColor"/>
<stroke android:width="2dip" android:color="#color/removeContactRedColor" />
<corners
android:radius="5dip"
/>
</shape>
You can do like this in drawable, <item android:right="-2dp"> will remove stroke from the right end.
<item android:right="-2dp">
<shape>
<corners android:radius="4dp"/>
<solid android:color="#android:color/transparent" />
<stroke
android:width="1dp"
android:color="#color/app_white" />
</shape>
</item>
Some suggestions:
Create a drawable image of the background and use this one as background.
Assuming you created this with xml, create a solid blue shape and place it over the circle.
Design a Background Image and Set it to Button with correct Padding and Margin
Set Text with The Background of Similar Above Image according to your Need