I created a gradient in my Drawable Resource File (.xml) and then connected it to button's (in activity_main.xml) background. Unfortunately, all structures in this file didn't occur on this button. I am a beginner. Is this problem with the code or something else?
The gradient works as an ImageView and even as a Switch but does not work as a button's background.
Code from gradient.xml:
<?xml version="1.0" encoding="UTF-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<item>
<shape>
<gradient
android:angle="90"
android:endColor="#b5b6d2"
android:startColor="#555994"
android:type="linear" />
<corners
android:radius="0dp"/>
<padding
android:right="10dp"
android:top="10dp"
android:bottom="10dp"
android:left="10dp"/>
</shape>
</item>
</selector>
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<Button
android:id="#+id/button2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:background="#drawable/gradient"
android:text="#string/button"
android:textColor="#android:color/white"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
You use selector when you want to show different background / color according to different states of the widget . For your case replace your code with this code in your drawable file :
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:angle="90"
android:endColor="#b5b6d2"
android:startColor="#555994"
android:type="linear" />
<corners
android:radius="0dp"/>
</shape>
Correction : The Button widget is taking colorAccent as default background strangely change the widget to AppCompatButton and it will solve the problem .
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<androidx.appcompat.widget.AppCompatButton
android:id="#+id/button2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:text="Button"
android:background="#drawable/gradient"
android:textColor="#android:color/white"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
selectors are used to change the view when states change. You haven't supplied any states in your selector, so that's probably why it doesn't get applied.
If you want the gradient applied in all states, then remove the selector and item in the xml, and just provide the shape.
Related
I have a shape drawable resource file.
it's the drawable.xml code below.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:left="-2dp"
android:bottom="-2dp"
android:top="-2dp">
<shape android:shape="rectangle">
<stroke android:width="#dimen/px02"
android:color="#color/white" />
</shape>
</item>
</layer-list>
and this is layout xml code.
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/gray333"
xmlns:app="http://schemas.android.com/apk/res-auto">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!!!"
android:textColor="#color/black"
android:background="#drawable/bg_category_border"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
and the result is this.
you can see the white bar on the left side.
and i want to make the bar size shorter top and bottom as high as the TextView's text.(the red line)
i tried to give a padding and size in the drawable.xml.
and i set android:includeFontPadding on the TextView.
but it didn't work.
how can i make it??
i was able to do it like this
It was little bit tricky to remove padding from bottom and top, but you can try the following xml and do some adjustments as u like.
bg_category_border.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item >
<shape android:shape="rectangle">
<stroke
android:width="1dp"
android:color="#color/white" />
</shape>
</item>
</layer-list>
layout xml
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#3C3C3C"
xmlns:app="http://schemas.android.com/apk/res-auto">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:background="#drawable/bg_category_border"
>
<TextView
android:textSize="50sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!!!"
android:includeFontPadding="false"
android:layout_marginBottom="-8dp"
android:layout_marginTop="-10dp"
android:textColor="#color/black"
/>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
I'm trying to create a half oval shaped button, which was easy in the mockup but I found it to be quite difficult doing in the XML file. Also I would like the ripple effect to be constrained only to the oval.
There may be a way to cut an oval in the shape XML file that I am not aware of.
What I'm trying to achieve:
But the closest I got is:
Using the following code:
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#8C9AEE"/>
<size
android:width="120dp"
android:height="60dp"/>
<corners
android:topLeftRadius="140dp"
android:topRightRadius="140dp"/>
</shape>
Any advice would be appreciated. Non of the options I saw achieved the desired result.
Try the following code
custom_shape.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#8C9AEE" />
<size
android:width="120dp"
android:height="60dp" />
</shape>
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#8C9AEE"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<View
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#drawable/custom_shape"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Output
Hope you helpful!
I'm trying to achieve a text box styling similar to the image below.
I tried creating a text view dynamically and I achieved something like this. Can someone help me achieve the styling similar to above image?
Below is the code block I used to achieve the above style.
chat_bubble.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#D8000000" />
<corners android:bottomLeftRadius="1dp" android:radius="4dp" />
</shape>
Activity.kt
fun createTextView(activity: PlacesActivity){
var textView = TextView(this)
textView.setText("Text ABCDD")
textView.textSize = 24F
textView.alpha = 0F
textView.setTextColor(Color.MAGENTA)
textView.setBackgroundResource(R.drawable.chat_bubble)
textView.setPadding(10,10,10,10)
var params =
LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,
LinearLayout.LayoutParams.WRAP_CONTENT);
params.setMargins(50,50,50,50)
textView.setLayoutParams(params)
linearLayout.addView(textView, params);
fadeMarker(textView)
}
Thanks in advance.
Create a shape for your chat bubble background:
shape_pill_background.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:bottomLeftRadius="40dp"
android:bottomRightRadius="40dp"
android:radius="40dp"
android:topLeftRadius="40dp"
android:topRightRadius="40dp" />
<solid android:color="#555555" />
<padding
android:bottom="0dp"
android:left="0dp"
android:right="0dp"
android:top="0dp" />
<size android:height="40dp" />
</shape>
create your arrow drawable:
shape_arrow_down.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<rotate
android:fromDegrees="45"
android:pivotX="230%"
android:pivotY="30%"
android:toDegrees="45">
<shape android:shape="rectangle">
<solid android:color="#555555" />
</shape>
</rotate>
</item>
</layer-list>
find an asset that best represents your "gold" arrow, i took the in built android studio vector asset which will be referred to as ic_arrow_forward_wattle_24dp.xml. Create your layout:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.constraint.ConstraintLayout
android:id="#+id/constraintLayoutTextBubble"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#drawable/shape_pill_background"
android:padding="16dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/textViewInput"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="#919191"
android:padding="4dp"
android:text="This is a text message"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/imageViewArrow"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/imageViewArrow"
android:layout_width="32dp"
android:layout_height="32dp"
android:layout_marginEnd="8dp"
app:layout_constraintBottom_toBottomOf="#+id/textViewInput"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/textViewInput"
app:layout_constraintTop_toTopOf="#+id/textViewInput"
app:srcCompat="#drawable/ic_arrow_forward_wattle_24dp" />
</android.support.constraint.ConstraintLayout>
<View
android:id="#+id/viewDownArrow"
android:layout_width="22dp"
android:layout_height="40dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:background="#drawable/shape_arrow_down"
app:layout_constraintEnd_toEndOf="#+id/constraintLayoutTextBubble"
app:layout_constraintStart_toStartOf="#+id/constraintLayoutTextBubble"
app:layout_constraintTop_toBottomOf="#+id/constraintLayoutTextBubble" />
</android.support.constraint.ConstraintLayout>
The result will look like this:
There is a few problems with this however. When you have a fairly large message it will push the arrow ImageView out of the bubble because of how wrap_content works in chains and constraint layout. I suggest you try giving your message TextView a fixed width or set its width to match constraints. This will give your text the grey background where there is no text. Play around with it and see what works best for you.
We have a linearlayout that has a background which is partially rounded (only the right side), at a determinate moment we need to migrate that background to a not rounded one, so I thought about using the TransitionDrawable, but for some reason this is not working. This are my files:
R.drawable.bg_right_rounded:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#color/blue" />
<padding android:left="0dip" android:top="0dip" android:right="10dip" android:bottom="0dip" />
<corners android:topLeftRadius="0dp" android:topRightRadius="10dp"
android:bottomLeftRadius="0dp" android:bottomRightRadius="10dp"/>
</shape>
R.drawable.bg_blue:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#color/blue" />
</shape>
R.drawable.bg_transition:
<?xml version="1.0" encoding="utf-8"?>
<transition xmlns:android=
"http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/bg_right_rounded"/>
<item android:drawable="#drawable/bg_blue"/>
</transition>
Then the layout is something like:
<LinearLayout
android:id="#+id/vg_chat_typer_inner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="#drawable/bg_transition">
....
</LinearLayout>
Then at a given moment we do:
TransitionDrawable transition = (TransitionDrawable) layout.getBackground();
transition.startTransition(1000);
If I do it in a normal situation it works fine, but when I put that linearlayout inside another linear layout with another one, then it stops working. The situation where it fails is the following one:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:layout_alignParentBottom="true">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="horizontal"
android:background="#drawable/bg_transition">
....
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_weight="0">
....
</LinearLayout>
</LinearLayout>
Is it because of weight? Why is it not working?
Thanks in advance
I want to add a gradient on the bottom of my image . Something like this :
I tried something like this but I only get the gradient no image..
<ImageView
android:id="#+id/trendingImageView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/trend_donald_sterling"
android:src="#drawable/trending_gradient_shape"
/>
trending_gradient_shape:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<gradient
android:angle="90"
android:endColor="#android:color/darker_gray"
android:startColor="#android:color/darker_gray" />
<corners android:radius="0dp" />
</shape>
You need two layers: An ImageView, and a View on top of that with your gradient as android:background. Put these two Views in a FrameLayout:
<FrameLayout
... >
<ImageView
...
android:src="#drawable/trend_donald_sterling" />
<View
...
android:background="#drawable/trending_gradient_shape"/>
</FrameLayout>
Simply set the alpha value in your gardient.xml:
Your imageView:
android:background="#drawable/trend_donald_sterling"
android:src="#drawable/trending_gradient_shape"
Your gradient xml file:
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<gradient
android:angle="90"
android:endColor="#00ffffff"
android:startColor="#aa000000"
android:centerColor="#00ffffff" />
<corners android:radius="0dp" />
</shape>
In the color value, the first two places after # correspond to the alpha value, while the rest are the actual color value in R G B format, two for each.
try using the "foreground" attribute in your imageview
<ImageView
...
android:src="#drawable/trend_donald_sterling"
android:foreground="#drawable/trending_gradient_shape" />
it worked for me.
Use android:foreground="..." instead of android:background="..."
Now you won't need to put ImageView and View inside a FrameLayout!
So your final code will be:
ImageView
<ImageView
...
android:foreground="#drawable/trend_donald_sterling"/>
Drawable
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<gradient
android:angle="90"
android:endColor="#00ffffff"
android:startColor="#aa000000"
android:centerColor="#00ffffff" />
<corners android:radius="0dp" />
</shape>
this is how im gonna do,
i used relative layout as my parent layout, use the following code
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="#drawable/img_sample"/>
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/gradiant"/>
<LinearLayout
android:layout_marginLeft="10dp"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="1">
<View
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.55"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="0.25"
android:text="Events"
android:gravity="bottom"
android:textStyle="bold"
android:textSize="18sp"
android:textColor="#ffffff"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="0.25"
android:text="Some description about the events goes here"
android:textSize="14sp"
android:textColor="#ffffff"/>
</LinearLayout>
</RelativeLayout>
hope you can figure out, here i attach my gradiant code below.use it inside the drawable folder....
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<gradient
android:angle="90"
android:endColor="#00ffffff"
android:startColor="#aa000000"
android:centerColor="#00ffffff" />
<corners android:radius="0dp" />
</shape>
This is an easy way that creates a similar effect yet doesn't actually have the image disappear. Sometimes using the foreground attribute is not the best for the gradient, especially if using a motionlayout or you have nested scrollviews. Create an entirely new imageview and set the background to the gradient.
XML With Both Imageviews
<ImageView
android:id="#+id/main_imageView"
android:layout_width="0dp"
android:layout_height="0dp"
android:scaleType="centerCrop"
android:src="#drawable/peakpx__1_"
ads:layout_constraintHeight_percent=".55"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/main_imageView_gradient"
android:layout_width="0dp"
android:layout_height="0dp"
ads:layout_constraintHeight_percent=".55"
android:background="#drawable/gradient_theme_background"
app:layout_constraintEnd_toEndOf="#id/main_imageView"
app:layout_constraintBottom_toBottomOf="#id/main_imageView"
app:layout_constraintStart_toStartOf="#id/main_imageView" />
Then for the gradient, I use black #000000 for darker themes, and white #ffffff for lighter ones. A lot of answers I see on this are not adding the center color. This is important if you want to have the gradient start closer to the edge of the image.
gradient_background
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<gradient
android:angle="270"
android:type="linear"
android:endColor="#ff000000"
android:centerColor="#00000000"
android:startColor="#00000000"/>
</shape>
**1> Create file black_shadow.xml**
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<gradient
android:angle="270"
android:startColor="#00000000"
android:centerColor="#9c000000"
android:endColor="#000000"
android:type="linear" />
</shape>
</item>bla
</selector>
**2> Just add below line in Imageview.**
android:foreground="#drawable/black_shadow"