I want to cut a transparent oval from a linear layout like below image
any idea?
You cannot cut layouts, instead what you can do is make the circular arrow image transparent by declaring the button opacity like the example given below:
Make an XML file like this:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<!--apply button background transparent, full opacity-->
<solid android:color="#00ffffff"/>
<!--make button border solid color, nontransparent-->
<stroke android:color="#483D8B" android:width="2dp"/>
<corners android:radius="2dp"/>
</shape>
</item>
</selector>
Then simply add this file to your layout:
<Button
android:id ="#+id/push_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button Background Transparent"
android:background="#drawable/button_bg_transparent"
android:padding="15dp"
/>
You will get the result like this:
Related
I need to make custom shape like below:
in order to do that I've wrote below xml:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
>
<item android:id="#+id/ring1">
<shape
android:innerRadiusRatio=""
android:shape="ring"
android:tint="#color/white"
android:useLevel="false"></shape>
</item>
<item>
<shape
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:innerRadius="0dp"
android:shape="ring"
android:thickness="140dp"
android:useLevel="false">
<gradient
android:centerColor="#00F913"
android:endColor="#006A10"
android:startColor="#006A10" />
</shape>
</item>
</layer-list>
which it's result is:
And there is 3 problems:
1st: when I give it to any views background the outer white line
wouldn't appear
2nd: the shape is not a ring when i give it to views background
3rd: the original view has a color at center and it has other color
around but with gradient I can add color to start, center, end and
in the middle the middle gradient is extends to borders
1st: when I give it to any views background the outer white line wouldn't appear
You can use oval shape instead of using ring for the white part., and add padding as much you need the radius of the outer white part as modified below
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval">
<solid android:color="#color/white" />
<padding
android:bottom="7dp"
android:left="7dp"
android:right="7dp"
android:top="7dp" />
</shape>
</item>
<item>
<shape android:shape="oval">
<size
android:width="36dp"
android:height="36dp" />
<gradient
android:centerColor="#00F913"
android:endColor="#006A10"
android:startColor="#006A10" />
</shape>
</item>
</layer-list>
2nd: the shape is not a ring when i give it to views background
You can use ShapeableImageView
First: add below dependency in gradle module level
implementation 'com.google.android.material:material:1.3.0-alpha04'
Second: create below style in style.xml
<style name="circled">
<item name="cornerSize">50%</item>
</style>
Third: apply the style to a ShapeableImageView using app:shapeAppearanceOverlay attribute
3rd: the original view has a color at center and it has other color around but with gradient I can add color to start, center, end and in the middle the middle gradient is extends to borders
This should be solved by using ShapeableImageView, please check below result after running the app
Sample test
<?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:background="#color/colorAccent"
android:layout_height="match_parent">
<com.google.android.material.imageview.ShapeableImageView
android:layout_width="100dp"
android:layout_height="100dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:shapeAppearanceOverlay="#style/circled"
app:srcCompat="#drawable/some_circle" />
</androidx.constraintlayout.widget.ConstraintLayout>
I am recently struggling with one thing in Android Studio. I don't know how to set (or if it's even possible) the text in button to have the same color (or no color at all) as the background in the Activity. What I mean:
I want this white text in black button to be the same color as App background (gradient)
Button XML:
<Button
android:id="#+id/startButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="90dp"
android:background="#drawable/button"
android:fontFamily="#font/amiko"
android:text="START"
android:textColor="#ffffff"
android:textStyle="bold" />
Button shape XML:
<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle"
xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#000000"/>
<corners android:radius="30dp" />
</shape>
I've tried to set text color in Button as transparent, but it became black just like the button color.
You can use transparent color for your background color of Button. Just fix Button shape XML color to this value:#00000000. The first 2 values represent alpha channel and with this additional 00 you are setting your color to transparent.
Button shape XML:
<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle"
xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#00000000"/>
<corners android:radius="30dp" />
</shape>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval" >
<stroke
android:color="#388e3c"
android:width="2dp"/>
<corners
android:radius="5dp"/>
<solid
android:color="#ffff"/>
</shape>
I want to create buttons in my android application, just like shown in the image below
you can se all the four buttons below.
I want to give them a custom color background and then an icon on the top. There is no way I'm able to adjust the icon at the centre of button.
How can I achieve the desired effect?
You can do this with FrameLayout and for circle background you need to create a shape drawable file. Refer my answer here.
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/round_shape"
android:clickable="true"
android:focusable="true"
android:visibility="visible"
android:foreground="?android:attr/selectableItemBackground"
android:padding="4dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_star_border_black_24dp"/>
</FrameLayout>
round_shape.xml add this file in drawable folder
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<gradient
android:angle="270"
android:startColor="#color/profile_grey"
android:endColor="#color/profile_grey"/>
</shape>
Create Drawable and use that drawable as Button Background.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval">
<stroke android:color="#e1e1e1"
android:width="0.5dp"/>
<solid android:color="#android:color/white"/>
</shape>
</item>
</selector>
This Code create a circle with white background.
I'm making an activity to my app, and I have to divide some sections of my window with a line. I would like to do something like this:
I only tried with android:elevation="2dp on View in XML layout:
<View
android:layout_width="fill_parent"
android:layout_height="12dip"
android:layout_marginTop="15dp"
android:background="#E0E0E0"
android:elevation="2dp"
/>
But this only put depth on the bottom.
Higher elevation values will also add some shadow at the top of your View.
If you want more "shadow" at the top you can mimic it using a custom XML Drawable with white background and a top border of grey color and really small size (it can also be a gradient if you don't like the solid line):
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Background -->
<item>
<shape android:shape="rectangle">
<solid android:color="#android:color/white" />
</shape>
</item>
<!-- Top "line" -->
<item android:gravity="top">
<shape android:shape="rectangle">
<size android:height="1dp" />
<solid android:color="#ccc"/>
</shape>
</item>
</layer-list>
If it's a ViewGroup you can also add a View with a small height value aligned right to its top with a grey background or gradient. It's simpler, but also a bit dirtier and worse for layout performance.
I have a .png image which is a circular shape and is just a shadow. What I have is an ImageButton which has an image for its android:src property. For its background I can have an xml file in drawable file. What I want now is to have the shadow image which is a png to go behind another solid shape -> android:shape="oval".
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/shadowimg" />
<item>
<shape android:shape="oval">
<solid
android:color="#d63a33"/>
<size
android:width="70dp"
android:height="70dp"/>
</shape>
</item>
</layer-list>
As you see in the code I am adding an item with the shadow image with the android:drawable property. However this does not let the shadow show. It simply shows the red circle shape. But I want the shadow image behind the solid red circle shape. From my tiny knowledge of layer-list the top item goes in the back and the one on bottom comes first.
UPDATE: After moving the image shadow to bottom I got the effect however the size of the solid red circle shape is too big and changing the size doesn't change the size.
UPDATED Code:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval">
<solid
android:color="#d63a33"/>
<size
android:width="5dp"
android:height="5dp"/>
</shape>
</item>
<item android:drawable="#drawable/shadowimg" />
</layer-list>
**** UPDATE 2: ****
I noticed when I remove <item android:drawable="#drawable/shadowimg" /> I can change size of solid circle shape but when I add this it defaults to a bigger size.
This is what happens:
Here's the shadow image if anyone needs:
I think this should be your solution:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="oval" >
<solid android:color="#d63a33" />
<size
android:height="5dp"
android:width="5dp" />
</shape>
</item>
<item>
<bitmap android:src="#drawable/shadowimg" />
</item>
<item>
<shape android:shape="oval" >
<solid android:color="#00000000" />
<size
android:height="5dp"
android:width="5dp" />
</shape>
</item>
</layer-list>
I added another transparent layer with the desired size.
Actually the issue is in the shadow you are using, the shadow itself leaves some padding. so what we can do is, leave some space in the solid color we are filling in the first item by using stroke.
use this code:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="oval" >
<solid android:color="#d63a33" />
<stroke
android:width="7dp"
android:color="#00000000" />
</shape>
</item>
<item android:drawable="#drawable/shadowimg"/>
</layer-list>
and then use with 30dp of height and 30dp of width, like
<TextView
android:id="#+id/titleText"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_centerVertical="true"
android:layout_marginLeft="16dp"
android:background="#drawable/circle_white"
android:fontFamily="sans-serif-thin"
android:gravity="center"
android:text="Hi"
android:textColor="#FF000000"
android:textSize="16sp" />
if you want to increase the height and width of the view, simply increase the width of the stroke too..