I need a template for my list view with the following item design
I've tried some code I found but I did not get the result I need.
<item
android:bottom="-32dp"
android:left="-3dp"
android:right="-2dp"
android:top="2dp">
<shape android:shape="rectangle" >
<corners android:radius="32dp"/>
<stroke
android:width="2dp"
android:color="#fff" />
<solid android:color="#android:color/transparent" />
<padding
android:bottom="10dp"
android:left="10dp"
android:right="10dp"
android:top="0dp" />
</shape>
</item>
this is my linearlayout background.
Though we can use png for this or or image to get this .
but if you really want to do this this drawable then here the code .
I tried and result was pretty same .
I have created a drawable using two layer list , that contains two different rectangle .
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:bottom="10dip">
<shape
android:shape="rectangle"
android:useLevel="false">
<corners android:radius="12dp" />
<stroke
android:width="2dp"
android:color="#ffffff" />
<size
android:width="60dp"
android:height="60dp" />
<solid android:color="#android:color/transparent" />
</shape>
</item>
<item android:top="20dip">
<shape android:shape="rectangle">
<solid android:color="#800080" />
</shape>
</item>
You can use this in your view as background . I have used this in mine , so i am adding code of my item view .
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#800080">
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="#dimen/text_18"
android:background="#drawable/sample">
<TextView
android:id="#+id/crime_title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="16dp"
android:text="Crime Title"
android:textColor="#color/colorAccent"
android:textSize="18sp"
app:layout_constraintEnd_toStartOf="#+id/crime_solved"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/crime_date"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:paddingBottom="8dp"
android:text="Crime Date"
android:textColor="#color/colorAccent"
app:layout_constraintEnd_toEndOf="#id/crime_title"
app:layout_constraintStart_toStartOf="#id/crime_title"
app:layout_constraintTop_toBottomOf="#+id/crime_title" />
<ImageView
android:id="#+id/crime_solved"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
app:layout_constraintBottom_toBottomOf="#+id/crime_date"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/crime_title"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_solved" />
</android.support.constraint.ConstraintLayout>
Hope this will be helpful .
Instead of using xml drawable, you can Create a 9-patch image for that shape, that might help.
Create that shape in your favourite image-editor and copy that to drawable directory of your project.
In Android Studio, right-click the PNG image you'd like to create a NinePatch image from, then click Create 9-patch file.
Type a file name for your NinePatch image, and click OK. Your image will be created with the .9.png file extension.
Double-click your new NinePatch file to open it in Android Studio. Your workspace will now open.
The left pane is your drawing area, in which you can edit the lines for the stretchable patches and content area. The right pane is the preview area, where you can preview your graphic when stretched.
Click within the 1-pixel perimeter to draw the lines that define the stretchable patches and (optional) content area. Right-click (or hold Shift and click, on Mac) to erase previously drawn lines.
When done, click File > Save to save your changes.
Related
I have some issue with styling of my buttons. I use drawable to change shape and style my app buttons. When I add background in activity xml my buttons change shape but doesn't change background color but when I add background programmatically with "setBackgroundResource" method everything is ok.
There is my piece of code:
activity xml:
`<Button
android:id="#+id/button_traditional"
android:background="#drawable/button_default_main_app"
android:textColor="#color/mustard"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="75dp"
android:layout_marginEnd="32dp"
android:onClick="newGame"
android:text="#string/standard_game"
app:layout_constraintEnd_toStartOf="#+id/button_extended"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/text_gameChose" />
`
res/drawable:
<solid
android:color="#color/black"
/>
<corners
android:topLeftRadius="10dp"
android:topRightRadius="100dp"
android:bottomLeftRadius="100dp"
android:bottomRightRadius="10dp"
/>
Thanks in advance for your help.
Edit:
Whole drawable code:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<solid
android:color="#color/black"
/>
<corners
android:topLeftRadius="10dp"
android:topRightRadius="100dp"
android:bottomLeftRadius="100dp"
android:bottomRightRadius="10dp"
/>
</shape>
By default the button tint is the primary color. You need to set it to null for the drawable to take effect by setting.
app:backgroundTint="#null"
So your whole button would look like this:
<Button
android:id="#+id/button_traditional"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="75dp"
android:layout_marginEnd="32dp"
android:background="#drawable/button_default_main_app"
android:onClick="newGame"
android:text="Standard game"
android:textColor="#a00"
app:backgroundTint="#null" />
The result:
I have a button
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="45dp"
android:onClick="loginIsClicked"
android:layout_marginStart="8dp"
android:layout_marginTop="12dp"
android:layout_marginEnd="8dp"
android:background="#drawable/button"
android:text="#string/Auth"
android:textAllCaps="false"
android:textColor="#color/white"
android:textSize="16sp"
android:enabled="false" />
<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle" xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#color/red"/>
<corners android:radius="10dp"/>
</shape>
How can I add animation to the button used in the default buttons?
Example:
enter image description here
If I understood correctly, what you are looking for is a ripple. Wrap your shape in a ripple as follows and provide your ripple color:
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#color/rippleColor">
<item>
<shape android:shape="rectangle">
<solid android:color="#color/red"/>
<corners android:radius="10dp"/>
</shape>
</item>
</ripple>
Add MaterialButton.
<com.google.android.material.button.MaterialButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:text="Button" />
Also do not forget to change theme Theme.AppCompat.Light.DarkActionBar to Theme.MaterialComponents.Light.DarkActionBar in styles.xml file.
I want to made the present rectangular button into round shape and add the picture of share button in it. I mean the button should be of round share and it should have only image(fit) of "share"
<Button
android:id="#+id/button3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="10dp"
android:layout_marginTop="8dp"
android:text="03"
android:textStyle="bold"/>
Create drawable file as bg_share.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid
android:color="#color/colorPrimaryDark">
</solid>
<corners
android:radius="500dp">
</corners>
<padding
android:top="0dp"
android:right="10dp"
android:left="10dp"
android:bottom="0dp">
</padding>
</shape>
And in your main.xml create imageview instead of button like
<ImageView
android:id="#+id/share"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/bcshare"
android:padding="10dp"
android:src="#drawable/ic_share_black_24dp" />
In MainActivity.java do something like this
share.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
//Your code...
}
});
You can find the answer Here
create a resource drawable
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<stroke android:width="1dp" android:color="#FF404040" />
<corners android:radius="6dp" />
<gradient android:startColor="#FF6800" android:centerColor="#FF8000" android:endColor="#FF9700" android:angle="90" />
</shape>
then set to the button background .
android:background="#drawable/button_background"
you can create a separate drawable and implement round shape. Then set the drawable to the background of the button as below
Create a drawable file as circle_button.xml
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid
android:color="#008577"/>
<size
android:width="120dp"
android:height="120dp"/>
</shape>
Then change the layout as follows
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/circle_button"
android:text="Button"/>
Create an xml in drawable folder and name it like: "round.xml" and use this xml in your given button background.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#eeffffff" />
<corners android:bottomRightRadius="8dp"
android:bottomLeftRadius="8dp"
android:topRightRadius="8dp"
android:topLeftRadius="8dp"/>
</shape>
and to your button in layout xml you can use the last line to set background
<Button
android:id="#+id/button3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="10dp"
android:layout_marginTop="8dp"
android:text="03"
android:textStyle="bold"
android:background="#drawable/round"/>
You can use the standard MaterialButton with the Widget.MaterialComponents.Button.Icon style.
Something like:
<com.google.android.material.button.MaterialButton
android:layout_width="48dp"
android:layout_height="48dp"
style="#style/Widget.MaterialComponents.Button.Icon"
app:icon="#drawable/ic_share"
app:iconSize="24dp"
app:iconPadding="0dp"
android:insetLeft="0dp"
android:insetTop="0dp"
android:insetRight="0dp"
android:insetBottom="0dp"
app:shapeAppearanceOverlay="#style/ShapeAppearanceOverlay.MyApp.Button.Rounded"
/>
Use the app:shapeAppearanceOverlay to get rounded corners. In this way you will have a circle.
<style name="ShapeAppearanceOverlay.MyApp.Button.Rounded" parent="">
<item name="cornerFamily">rounded</item>
<item name="cornerSize">32dp</item>
</style>
I wanted to make border for my TextView with these lines of xml code which I make in res/drawable. But border did not appear.
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<solid android:color="#android:color/white" />
<stroke android:width="4dip" android:color="#FAF9F9"/>
</shape>
and this is my activityMain.xml where textView is:
<TextView
android:background="#drawable/border_style"
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:text="1. If you somehow found a way to extract all of the gold from the bubbling core of our lovely little planet, you would be able to cover all of the land in a layer of gold up to your knees."
android:textSize="24sp"
app:layout_constraintBottom_toTopOf="#+id/button2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.96"
app:layout_constraintStart_toEndOf="#+id/imageView"
app:layout_constraintTop_toBottomOf="#+id/imageView"
app:layout_constraintVertical_bias="1.0" />
example border_bg.xml
`
<!-- View background color -->
<solid
android:color="#color/background_color" >
</solid>
<!-- View border color and width -->
<stroke
android:width="1dp"
android:color="#color/border_color" >
</stroke>
<!-- The radius makes the corners rounded -->
<corners
android:radius="2dp" >
</corners>
`
and set it as a background in your textview
android:background="#drawable/border_bg"
this is working for me:
<stroke
android:width="2dp"
android:color="#FFFFFF" />
<corners android:radius="20dp" />
<solid android:color="#android:color/transparent"/>
Border not Appear because you have give border color same as background color. give it different like below
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#android:color/white" />
<stroke android:width="4dip" android:color="#000000"/>
</shape>
now set this xml as background of text view like below
<TextView
android:background="#drawable/border_style"
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:text="1. If you somehow found a way to extract all of the gold from the
bubbling core of our lovely little planet, you would be able to cover all of the
land in a layer of gold up to your knees."
android:textSize="24sp"
app:layout_constraintBottom_toTopOf="#+id/button2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.96"
app:layout_constraintStart_toEndOf="#+id/imageView"
app:layout_constraintTop_toBottomOf="#+id/imageView"
app:layout_constraintVertical_bias="1.0" />
that its.!
try to give boundary color little bit dark as your code is working totally fine as color is so lights it is barely visible so try with black color or any color you want and even after giving dark color also it is not working let me know . make change it your code like this
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<solid android:color="#android:color/white" />
<stroke android:width="4dip" android:color="#000000"/> /*change here android:color*/
</shape>
you cannot see the border because it blends with your background color
a drawable like that will "work" for you to see
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<solid android:color="#android:color/transparent" />
<stroke android:width="4dip" android:color="#FAF9F9"/>
</shape>
also consider adding a padding to your TextView with the same size as your border (so 4dp) android:padding="4dp"
<TextView
android:background="#drawable/border_style"
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:padding="4dp"
android:text="1. If you somehow found a way to extract all of the gold from the bubbling core of our lovely little planet, you would be able to cover all of the land in a layer of gold up to your knees."
android:textSize="24sp"
app:layout_constraintBottom_toTopOf="#+id/button2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.96"
app:layout_constraintStart_toEndOf="#+id/imageView"
app:layout_constraintTop_toBottomOf="#+id/imageView"
app:layout_constraintVertical_bias="1.0" />
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.