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>
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 am trying to get my buttons to fit within the border of the bottom toolbar. Right now my bottom toolbar looks like this.
and the following xml files for the bottom toolbar.
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_alignParentBottom="true"
android:layout_alignParentStart="true"
android:background="#drawable/white_grey_border_bottom"
android:gravity="bottom"
android:minHeight="?attr/actionBarSize"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingEnd="16dp"
android:paddingStart="16dp">
<Button
android:id="#+id/homeIcon"
style="?android:attr/buttonBarButtonStyle"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginBottom="8dp"
android:background="#drawable/home" />
<Button
android:id="#+id/calendarIcon"
style="?android:attr/buttonBarButtonStyle"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginBottom="8dp"
android:layout_marginStart="32dp"
android:background="#drawable/calendar_alt" />
<Button
android:id="#+id/heartIcon"
style="?android:attr/buttonBarButtonStyle"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginStart="124dp"
android:background="#drawable/oval_84" />
<Button
android:id="#+id/userIcon"
style="?android:attr/buttonBarButtonStyle"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginEnd="16dp"
android:layout_marginStart="32dp"
android:background="#drawable/user" />
</LinearLayout>
</android.support.v7.widget.Toolbar>
<Button
android:id="#+id/floatingActionButton"
android:layout_width="58dp"
android:layout_height="58dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="24dp"
android:background="#drawable/group" />
the floating action button is intended to protrude out of the toolbar however the rest of my icons should be within the border. I used this drawable resource to set my border.
white_grey_border xml:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="1dp">
<item
android:bottom="-1dp"
android:right="-1dp"
android:left="-1dp"
android:top="11dp">
<shape
android:shape="rectangle">
<stroke android:width="0.5dp"
android:color="#color/colorGrey"/>
<solid android:color="#color/colorWhite"/>
</shape>
</item>
Previously my buttons were within the toolbar and linear layout height, but after adding the border it doesnt fit the toolbar's height and hence why the grey icons protrusion. Thank you in advance :)
you can use a component "View" instead of drawable background with "1dp" height.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<View android:layout_height="1dp" android:layout_width="match_parent"/>
<Toolbar />
...
</LinearLayout>
I think bottom tool bar border not matching the height of the toolbar, because u set layout_height="1dp" for your drawable-layout and it's override "layout_height" of toolbar component.
p.s. u need to use bottom-navigation component instead of toolbar
Oops i think i resolved it already i can just change the top in white grey border xml from 11dp to 1 dp or sth . Thanks for the answers.
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.
Does anyone know, is there any library on Github for example, or something else for adding a circle counter on top of an image:
Actually, I can create a new FrameLayout and position every element, but I am not sure that this is the right way. I searched for something like that, but I didn't find anything.
Create a drawable file name badge_background.xml and paste the code below.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval" >
<solid android:color="#FF0000" />
</shape>
Then set this drawable to the background of the textview, like below.
<FrameLayout android:id="#+id/viewLayout" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:layout_weight="1" android:padding="12dp">
<ImageView android:id="#+id/view" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:contentDescription="#string/imageDescription" android:src="#drawable/view" />
<TextView android:id="#+id/viewBad" android:layout_width="20dip" android:layout_height="20dip" android:clickable="false" android:layout_marginStart="5dp" android:layout_gravity="top|center_horizontal" android:background="#drawable/badge_background" android:gravity="top|center_horizontal" android:text="5" android:textColor="#color/white" android:visibility="gone" />
</FrameLayout>