Please I am facing a challenge creating and getting the right angles of a shape in XML using android studio. I want the shape to cut out through the screen, but I am not getting the right angles.
I have already created an oval shape in my drawable folder, and I need the shape to position in the left corner of the screen. Can someone pls help? I have included the code snippet and the picture of the required screen needed. Thanks
<TextView
android:layout_width="300dp"
android:layout_height="200dp"
android:rotationY="14"
android:background="#drawable/ellipse_shape"/>
You can try this:-
custom_shape.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/white" />
<!-- Replace with your dimensions-->
<size
android:width="10dp"
android:height="10dp" />
<corners android:bottomRightRadius="10dp" />
</shape>
it output be like this
And the textView code:-
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/custom_shape"/>
Hope You Helpful!
Related
Good day,
I'm currently building a chat app like WhatsApp and I have this problem that I have no clue on how to solve.
Below is the screenshot of my chat screen toolbar.
Problem: No touch event/sign whenever the user clicks on the back icon and contact name.
I wanted something like this,
Here's a simple android ripple effect but it works only with API 21 and above
Create button_effect.xml in drawable-v21
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#FFAEAE">
<item android:id="#android:id/mask">
<shape android:shape="rectangle">
<solid android:color="#FFAEAE" />
</shape>
</item>
</ripple>
I was using it with red color if you want a whatsapp like effect use with translucent black colors
use it simply like this
android:background="#drawable/button_effect" on your layout's
EXAMPLE
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/button_effect" <!-- putting is as background-->
android:clickable="true"
android:focusable="true">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Stackoverflow" />
</RelativeLayout>
How to add top rounded corners to an ImageView.
I've tried with the following method and it doesn't work.
imgView.setClipToOutline(true);
its better to create drawable file with radius just on top and set as a background.
You can create custom backgroung
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<solid android:color="#android:color/darker_gray"/>
<corners android:topRightRadius="10dp"
android:bottomRightRadius="0dp"
android:topLeftRadius="10dp"
android:bottomLeftRadius="0dp"/>
</shape>
set in imageview like this
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher"
android:background="#drawable/shape"/>
you can create a drawable for this or use this library for better result
https://github.com/vinc3m1/RoundedImageView
CompileSdkVersion 26, if it's important. I want to create LinearLayout with rounded corners, and background color.
I created 2 LinearLayouts, one with corners, and one with color, but their shapes do not match my expectations.
Code from activity
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/whitegrey"
android:layout_marginTop="340dp"
android:id="#+id/layout"
android:layout_marginStart="10dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/custom_border"
android:orientation="vertical"
android:padding="6dp"
android:textColor="#color/black">
...
</LinearLayout>
</LinearLayout>
custom_border.xml:
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<corners android:radius="20dp"/>
<padding android:left="8dp" android:right="8dp" android:top="8dp" android:bottom="8dp"/>
<stroke android:width="2dp" android:color="#444444" />
</shape>
Actually, there is rounded border, and behind, there is rectangular layout with target color. I want to fill with target color only what is inside borders.
Is there any way to set the fill color, preferably in custom_border.xml?
Here, what I have at the moment:
Here, what I want to achieve:
View from phone, the letters on the left are cut off:
From the code samples you provide us, it doesn't seem necessary to me to have two LinearLayout. Only the layout with android:background="#drawable/custom_border" is required.
To achieve the expected result, just add the property <solid android:color="#color/whitegrey" /> to your custom_border.xml :
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<corners android:radius="20dp"/>
<padding android:left="8dp" android:right="8dp" android:top="8dp" android:bottom="8dp"/>
<stroke android:width="2dp" android:color="#444444" />
<solid android:color="#color/whitegrey" />
</shape>
I wish I was able to help you!
As you can see here, the background to the button is transparent. I can't seem to find where it's set to white in either xml files. The button is identified as btnCapture the code is below.
activity_main.xml
<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:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<TextureView
android:id="#+id/textureView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/btnCapture" />
<Button
android:text="#string/capture"
android:id="#+id/btnCapture"
android:layout_width="wrap_content"
android:layout_height="92dp"
android:background="#drawable/rounded_button"
android:layout_alignParentBottom="true"
android:layout_centerInParent="true"
tools:layout_editor_absoluteX="157dp"
tools:layout_editor_absoluteY="202dp" />
</RelativeLayout>
rounded_button.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<stroke android:color="#80000000"
android:width="2dp"></stroke>
<stroke android:color="#D3D3D3"></stroke>
<size android:width="60dp"
android:height="80dp"></size>
</shape>
You do not change anything related to the UI of the button in your Java code, so no, it's not because of the Java code. It's XML related.
Your background of the button is a drawable named 'rounded_button', but you haven't posted the contents of that drawable file. So all we can do is guess that the rounded_button drawable is white?
There are two quick steps you can take to make this work the exact way you desire:
First, change your view from a Button to a TextView and apply your rounded-button.xml background. This should work instantly. It's a bit tricky trying to set a background to a button as seen here.
Secondly, I noticed that your rounded-button.xml file has no solid element. The solid element allows you to set the background of a layout. For this reason, I changed one of your stroke elements to a solid element (there shouldn't be two stroke elements anyway). Your updated rounded_button.xml code is as shown below:
PS: Don't forget to change the view in your activity_main.xml from Button to TextView!
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<stroke android:color="#80000000"
android:width="2dp">
</stroke>
<solid
android:color="#D3D3D3">
</solid>
<size
android:width="60dp"
android:height="80dp">
</size>
</shape>
I hope this helps. Merry coding!
I want to add shadow effect to my ImageView, like a transparent from bottom side. Here two images with and without shadow effect. Has any possible ways to make like this? Or is it better to take shadow svg file from the internet and put on the original imageView?
You can put your image in the same space with a gradient image using a RelativeLayot like this:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/your_image"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/grad"/>
</RelativeLayout>
The "grad" image is this:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:angle="270"
android:endColor="#181818"
android:startColor="#00000000 " />
<corners android:radius="5dp" />
</shape>