Today I tried to change the color of the button by adding a gradient, stroke and rounded corners.
(Done in a Drawable Resource File)
I almost succeeded, the corners were rounded, but the button color remained standard (purple_500).
I tried to solve this problem in different ways, but it didn't work out, then I tried using these styles for other elements, and they changed their color
The question is why did they change the color and the button didn't?
Code with styles:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<corners android:radius="180dp"/>
<stroke android:width="5dip" android:color="#color/white"/>
<gradient android:angle="360" android:startColor="#color/black" android:endColor="#color/white" />
</shape>
</item>
</selector>
activity code:
<TextView
android:id="#+id/textView"
android:layout_width="62dp"
android:layout_height="46dp"
android:layout_marginStart="180dp"
android:layout_marginTop="192dp"
android:background="#drawable/abc"
android:text="TextView"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:id="#+id/editTextTextPersonName"
android:layout_width="210dp"
android:layout_height="55dp"
android:layout_marginStart="108dp"
android:layout_marginTop="260dp"
android:background="#drawable/abc"
android:ems="10"
android:inputType="textPersonName"
android:text="Name"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/button"
android:layout_width="226dp"
android:layout_height="56dp"
android:layout_marginStart="92dp"
android:layout_marginTop="336dp"
android:background="#drawable/abc"
android:text="Button"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
Screen with result:
I was trying to figure out how the button knows its color, of course it takes it from color.xml , but its change did not lead to the desired result, since a gradient is needed
Use "androidx.appcompat.widget.AppCompatButton" instead of Button.
android:background="#drawable/abc"
android:gravity="center"
app:backgroundTint="#null"
android:textColor="#color/black"
Related
I can't tell if this is an issue with the material library or from my end.
I'm trying to show two buttons aligned horizontally. However, the first one is showing as it's supposed to show but the other one is not showing as expected.
Here's how the buttons look in Android Studio's layout editor: (expected behavior)
And this is how it shows on a mobile device: (wrong behavior)
My XML is like this:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="17dp">
<com.google.android.material.button.MaterialButton
android:id="#+id/btn_share"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignEnd="#+id/view"
android:layout_centerHorizontal="true"
android:layout_marginStart="12dp"
android:layout_marginEnd="7dp"
android:layout_marginBottom="10dp"
android:insetTop="0dp"
android:insetBottom="0dp"
android:text="#string/share_btn_txt"
android:textColor="#FFFFFF"
android:textSize="14sp"
app:backgroundTint="#424242"
app:cornerRadius="#dimen/buttons_corners_radius"
app:elevation="5dp"
app:fontFamily="#font/whitney"
app:icon="#drawable/round_share_white_48dp"
app:iconGravity="textStart"
app:rippleColor="#2D2D2D" />
<View
android:id="#+id/view"
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_centerHorizontal="true" />
<com.google.android.material.button.MaterialButton
android:id="#+id/btn_download"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignStart="#+id/view"
android:layout_centerHorizontal="true"
android:layout_marginStart="7dp"
android:layout_marginEnd="12dp"
android:layout_marginBottom="10dp"
android:insetTop="0dp"
android:insetBottom="0dp"
android:text="#string/download_btn_txt"
android:textColor="#FFFFFF"
android:textSize="14sp"
app:backgroundTint="#color/colorPrimary"
app:cornerRadius="#dimen/buttons_corners_radius"
app:elevation="5dp"
app:fontFamily="#font/whitney"
app:icon="#drawable/round_get_app_white_48dp"
app:iconGravity="textStart"
app:rippleColor="#color/colorPrimaryDark" />
</RelativeLayout>
I'm avoiding using the weight attribute. (tested it as well but still getting the same behavior).
If you guys have any idea how to solve this issue is appreciated.
You can create an xml drawable file for MaterialButton.
btn_drawble.xml =>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#2D2D2D">
<item android:id="#android:id/background">
<shape android:shape="rectangle" >
<corners android:radius="12dp" />
<gradient
android:startColor="#color/color_blue"
android:endColor="#color/color_blue"
android:angle="0"/>
</shape>
</item>
</ripple>
And Set background of button created xml file =>
<com.google.android.material.button.MaterialButton
android:id="#+id/btn_download"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignStart="#+id/view"
android:layout_centerHorizontal="true"
android:layout_marginStart="7dp"
android:layout_marginEnd="12dp"
android:layout_marginBottom="10dp"
android:text="#string/download_btn_txt"
android:textColor="#FFFFFF"
android:textSize="14sp"
app:elevation="5dp"
app:fontFamily="#font/whitney"
android:background="#drawable/btn_drawble"
app:icon="#drawable/round_share_white_48dp"
app:iconGravity="textStart"/>
You'll need to use a material theme.
Set the parent of your app of your AppTheme to a material theme ex: Theme.MaterialComponents.Light.NoActionBar.
Material components require a material theme as parent to work correctly
It seems like it was my fault, I didn't notice that I was changing the button shape dynamically.
Unfortunately, I can't delete this question because Stackoverflow doesn't allow me.
:(
I am new to android Studio and I am trying to create a rounded button using a drawable ressource. Here is the code I used and it seems to work fine when looking to the preview :
<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="oval" xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content"
android:layout_height="wrap_content">
<stroke android:color="#color/grey" android:width="5dp" />
<solid android:color="#color/blue"/>
<size android:width="80dp" android:height="80dp"/>
</shape>
[1][1]: https://i.stack.imgur.com/jjiwd.png
The thing is that when I use this design in my layout (using the background), the shape will apply but not the colors and I don't know why. Here is the code and what it does :
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_centerHorizontal="true"
android:layout_marginTop="400dp">
<Button
android:id="#+id/play"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="40dp"
android:text="Play"
android:background="#drawable/circle_button"
/>
<Button
android:id="#+id/stop"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Stop"
android:background="#drawable/circle_button"/>
</LinearLayout>
[2] [2]: https://i.stack.imgur.com/aqGCB.png
I know I could use another shape like rectangle and do some modifications on the angle but I found it frustrating not being able to use the oval shape.
What should I do in order for this to work ?
Thanks in advance
I designed an app on adobe xd and I exported some assests in my drawable folder on android studio. In my activity xml, I added the TextView background as the rectangle shape in my drawable. It worked but when I tried aligning the text but not the shape nothing happens. I guess I can't separate the text from the background
don't use a picture as background create a drawable file and use it as background
for example, create TextViewBackground.xml in drawable folder
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#color/Color_White_4" />
<corners android:radius="10dp" />
</shape>
and use this in your TextView
<TextView
.
.
.
android:background="#drawable/TextViewBackground"/>
try to create custom TextView
<RelativeLayout
android:id="#+id/Login_Username_TextView"
android:layout_width="match_parent"
android:layout_height="70dp"
android:layout_below="#+id/Login_Title"
android:layout_centerHorizontal="true"
android:layout_marginTop="40dp"
android:background="#drawable/TextViewBackground">
<TextView
android:id="#+id/Login_Username_Hint"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_marginEnd="38dp"
android:layout_marginTop="8dp"
android:text="#string/User_Name"
android:textColorHint="#color/Color_Gray_1"
android:textSize="12sp" />
<EditText
android:id="#+id/Login_Username_Text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_below="#id/Login_Username_Hint"
android:layout_marginEnd="32dp"
android:layout_marginStart="32dp"
android:inputType="textPersonName"
android:lines="1"
android:padding="1dp"
android:textColor="#color/Color_Gray_1"
android:textSize="14sp"
android:textStyle="bold" />
</RelativeLayout>
I am working on an Android project in which I have a login page where I want to add Username and password fields. The design I have requires me to put them in this translucent manner and with an image inside. Any ideas what I can change for EditText to make it translucent and shape it, there are many threads to make it transparent by setting the background to null or by color and so on, but nothing like this I found.
Design :
I am using Relative layout, and those icons on right side, I have them in separate PNG files. I can directly add them inside Edittext, but I am concerned that if the username and password is long, it will start going over the image. Any strategies for that? Thank you.
Code :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:background="#drawable/background"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Text"
android:id="#+id/textView"
android:textSize="32sp"
android:textColor="#color/common_signin_btn_dark_text_default"
android:layout_marginTop="75dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/editText"
android:layout_below="#+id/textView"
android:layout_marginTop="41dp"
android:layout_alignRight="#+id/textView"
android:layout_alignEnd="#+id/textView"
android:layout_alignLeft="#+id/textView"
android:layout_alignStart="#+id/textView" />
</RelativeLayout>
Updated screenshot
Updated EditText
<EditText
android:layout_width="wrap_content"
android:layout_height="45dp"
android:id="#+id/emailEditText"
android:inputType="textEmailAddress"
android:layout_below="#+id/textView"
android:layout_marginTop="41dp"
android:drawableEnd="#drawable/Mail"
android:drawableRight="#drawable/Mail"
android:maxLines="1"
android:ellipsize="end"
android:hint="Email"
android:textColorHint="#color/common_signin_btn_dark_text_focused"
android:background="#drawable/layout_bg"
android:layout_alignRight="#+id/textView"
android:layout_alignEnd="#+id/textView"
android:layout_alignLeft="#+id/textView"
android:layout_alignStart="#+id/textView" >
</EditText>
layout_bg.xml :
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#color/traslucent_background" />
<stroke android:width="1dip" android:color="#B1BCBE" />
<corners android:radius="17dip"/>
<padding android:left="0dip" android:top="0dip" android:right="0dip" android:bottom="0dip" />
</shape>
For the image you should be able to use android:drawableEnd="#drawable/..." and android:drawableRight="#drawable/..." which also will limit the text length.
For the background you can define a custom drawable like this:
<!-- background_edittext.xml -->
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="8dp" />
<solid android:color="#color/traslucent_background" />
</shape>
Where traslucent_color would be defined in colors.xml, for example, like this:
<color name="shadow_lighter_color">#64000000</color>
EDIT: this would be an example of how to use drawableEnd / drawableRight with a space between text and icon:
<EditText
android:background="#drawable/background_edittext"
android:drawablePadding="16dp"
android:drawableEnd="#drawable/icon"
android:drawableRight="#drawable/icon"
android:maxLines="1"
android:ellipsize="end"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
Try this:
Define a shape drawable in your project like this:
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#88ff0000"/>
<corners android:radius="32dp"/>
</shape>
And set it as the background for your EditTexts. Also, add this as an attribute to your EditText in the XML:
android:drawableRight="#drawable/any_drawable_file"
If you're concerned about the text overlapping with the drawable, you could add a custom paddingRight to your EditText to tackle that. It would save you the effort of inflating a custom layout.
I want to have a gap in a border which is around a LinearLayout. In this gap there should be text.
I think the image explains it very well:
Is this possible? I know how to create a border around the Layout but not how to do this gap with the text. I hope someone can help me.
Make my_drawable.xml file in your project's res/drawable folder:
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke
android:width="2dp"
android:color="#000066" />
<corners
android:radius="10dp" />
<solid
android:color="#android:color/white"/>
</shape>
After it you can add it as a background for a LinearLayout:
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="300dp" <!-- Or whatever you want -->
android:layout_height="200dp" <!-- Or whatever you want -->
android:background="#drawable/my_drawable">
</LinearLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/white"
android:layout_marginLeft="20dp"
android:textColor="#android:color/black"
android:textStyle="bold"
android:paddingLeft="10dp"
android:paddingRight="10dp"/>
</RelativeLayout>