Develop Reference

How can I create Samsung's "Fix Now" button with gradient animation in Android Studio

How can I create this awesome button with gradient animation? I attached a GIF.

Make a drawable for background and set in on back
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<corners
android:radius="14dp"
/>
<gradient
android:angle="45"
android:centerX="34%"
android:startColor="#56ab2f"
android:endColor="#a8e063"
android:type="linear"
/>
<padding
android:left="0dp"
android:top="0dp"
android:right="0dp"
android:bottom="0dp"
/>
<size
android:width="270dp"
android:height="60dp"
/>
<stroke
android:width="3dp"
android:color="#1d5b01"
/>
</shape>

Create a capsule shaped layout with 2 different background colors

I want to create a view similar to this image.
Is there a similar tagView or drawable resource file?
The text inside can have any length, so taking its image as background is not an option.

Use something like this:
<?xml version="1.0" encoding="utf-8"?>
<corners android:radius="18dp" />
<size
android:width="200dp"
android:height="20dp" />
<solid android:color="#808080" />
This one will be your bottom drawable with grey background, and
<?xml version="1.0" encoding="utf-8"?>
<corners
android:bottomLeftRadius="16dp"
android:topLeftRadius="16dp" />
<size
android:width="140dp"
android:height="20dp" />
<solid android:color="#FFFFFFFF" />
The white one. Next place it one at other in your layout using ConstraintLayout or RecyclerView.

Try below code. First you need to create Background for Right and left capsule like this.
Left capsule Background
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<corners
android:topLeftRadius="30dp"
android:topRightRadius="0dp"
android:bottomLeftRadius="30dp"
android:bottomRightRadius="0dp"
/>
<gradient
android:angle="45"
android:centerX="35%"
android:centerColor="#f2efef"
android:startColor="#f4efef"
android:endColor="#faf6f6"
android:type="linear"
/>
<padding
android:left="0dp"
android:top="0dp"
android:right="0dp"
android:bottom="0dp"
/>
<size
android:width="270dp"
android:height="60dp"
/>
<stroke
android:width="3dp"
android:color="#878787"
/>
</shape>
Right capsule Background
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<corners
android:topLeftRadius="0dp"
android:topRightRadius="30dp"
android:bottomLeftRadius="0dp"
android:bottomRightRadius="30dp"
/>
<gradient
android:angle="45"
android:centerX="35%"
android:centerColor="#b1b1b1"
android:startColor="#cec9c9"
android:endColor="#b9b3b3"
android:type="linear"
/>
<padding
android:left="0dp"
android:top="0dp"
android:right="0dp"
android:bottom="0dp"
/>
<size
android:width="270dp"
android:height="60dp"
/>
<stroke
android:width="3dp"
android:color="#878787"
/>
Final Your Capsule like this Gives a background to textview like this.
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<TextView
android:gravity="center"
android:text="Hibernate"
android:textColor="#color/imagepicker_black"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="6"
android:background="#drawable/capsule_background_left"/>
<TextView
android:gravity="center"
android:text="1 Yr"
android:textColor="#color/imagepicker_black"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="4"
android:background="#drawable/capsule_background_right"/>
</LinearLayout>

Trapezoid drawable like in the picture?

I want to design a xml layout as in the picture. So far I have rectangle shape how to make that sharp corners from xml.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:id="#+id/listview_background_shape">
<stroke android:width="0dp" android:color="#4c71f5" />
<padding android:left="0dp"
android:top="0dp"
android:right="0dp"
android:bottom="0dp" />
<corners android:radius="2dp" />
<solid android:color="#color/colorAccent" />
</shape>

You can use something like below:
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:angle="270" />
<corners
android:radius="3dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
and refer to this link, Good Example

Custom background of button is not setting properly

Hello I am designing this page in android (style only)
.
First 3 buttons has been designed by taking the reference from this.
But DONATE NOW button which I have designed is become transparent like this
as well as click event (statepreseed = "true")is also transparent like
.
and here is my code of background for DONATE NOW button
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<shape android:shape="rectangle" >
<corners
android:radius="0dp" />
<solid android:color="#33e7d283"></solid>
<padding
android:left="0dp"
android:top="0dp"
android:right="0dp"
android:bottom="0dp"
/>
<stroke
android:width="4dp"
android:color="#00e9ca30"
/>
</shape>
</item>
<item>
<shape android:shape="rectangle" >
<corners
android:radius="0dp"
/>
<gradient
android:angle="225"
android:centerX="23%"
android:centerColor="#33f4c40e"
android:startColor="#ffdab605"
android:endColor="#ffdab605"
android:type="linear"
/>
<padding
android:left="0dp"
android:top="0dp"
android:right="0dp"
android:bottom="0dp"
/>
</shape>
</item>
</selector>
If any one is having the solution.please help

You are using ARGB instead of RGB. Because of this you are creating image with transparent background.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="0dp" />
<gradient
android:angle="225"
android:centerColor="#e7d283"
android:centerX="23%"
android:endColor="#ffdab605"
android:startColor="#ffdab605"
android:type="linear" />
<padding
android:bottom="0dp"
android:left="0dp"
android:right="0dp"
android:top="0dp" />
</shape>
Using e7d283 or ffe7d283 color-code instead of 33e7d283 might solve your problem for yellow image background.
Using 33 as alpha means you are giving only 20% opacity to your center color. That is the reason you can see background color in middle of your image.

Here you go..
Your button element should look like below.
<Button
android:id="#+id/angry_btn"
android:text="Button"
android:textColor="#FFFFFF"
android:textSize="30sp"
android:layout_width="270dp"
android:layout_height="60dp"
android:background="#drawable/buttonshape"
android:shadowColor="#474747"
android:shadowDx="0"
android:shadowDy="0"
android:shadowRadius="3"
/>
ButtonShape.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<corners
android:radius="14dp"
/>
<gradient
android:angle="45"
android:centerX="65%"
android:centerColor="#F5FAF9"
android:startColor="#F39C12"
android:endColor="##F39C12"
android:type="linear"
/>
<size
android:width="270dp"
android:height="60dp"
/>
<stroke
android:width="3dp"
android:color="#878787"
/>
</shape>
Output will look like below.

Change shape on an inflated View - Android

I have the following shapes :
1)quizgeneralanswershape.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<corners android:radius="100dp"/>
<gradient
android:angle="45"
android:centerX="35%"
android:startColor="#E8E8E8"
android:centerColor="#7995A8"
android:endColor="#000000"
android:type="linear"
/>
<padding
android:left="0dp"
android:top="0dp"
android:right="0dp"
android:bottom="0dp"
/>
<size
android:width="270dp"
android:height="60dp"
/>
<stroke
android:width="3dp"
android:color="#878787"
/>
2)quizrightanswer.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<corners android:radius="100dp"/>
<gradient
android:angle="45"
android:centerX="35%"
android:startColor="#00FF80"
android:centerColor="#66FFB2"
android:endColor="#000000"
android:type="linear"
/>
<padding
android:left="0dp"
android:top="0dp"
android:right="0dp"
android:bottom="0dp"
/>
<size
android:width="270dp"
android:height="60dp"
/>
<stroke
android:width="3dp"
android:color="#878787"
/>
there are also 2 more xml files in layout folder that I have created in order to describe my wanted layout using the shape I want. Here is one: quizrightanswer.xml:
<Button xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/quizButton"
android:text="Button"
android:textColor="#FFFFFF"
android:textSize="13sp"
android:layout_width="270dp"
android:layout_height="60dp"
android:background="#drawable/quizrightanswershape"
android:clickable="true"
/>
I have no problem inflating one specific shape and use it. However, i wanted to know if there is any way to give a new shape to a already existed object. To be more clear, I want on the OnClick event to change the shape of my button. Here is some code of my activity that works fine:
quizTableLayout = (TableLayout) findViewById(R.id.quizTableLayout);
view = LayoutInflater.from(this).inflate(R.layout.quizquestion, null);//works fine
I want in the view object to give a quizrightanswershape shape on click. How is this possible? A solution I thinked of is deleting old shape and inflate new one with using specific parameters of my old view (like text), but I think that's not right and not fast at all.

It's pretty easy. You're setting the general shape as the background to the button right? Yeah so, use findViewById to find your button in your layout and then attach an OnClickListener, in which you will use setBackground or setBackgroundDrawable to the button to change the background shape.

why you are not change background of your button simply?
in easy way you can change it like this:
mButton.setBackground(getResources().getDrawable(R.drawable.yourShape));
if you want button shape change if user click on it and if not press again have old shape so
you can use shape like this:
<selector
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content" >
<item android:state_pressed="true" android:state_focused="true">
<shape>
<gradient
android:startColor="#f00"
android:endColor="#f00"
android:angle="270"/>
<stroke
android:width="2dp"
android:color="#eee"/>
<corners
android:radius="3dp" />
</shape>
</item>
<item>
<shape>
<gradient
android:startColor="#ccc"
android:endColor="#ccc"
android:angle="270"/>
<stroke
android:width="2dp"
android:color="#ccc"/>
<corners
android:radius="3dp" />
</shape>
</item>
</selector>