I have a linearlayout and an imageview inside. The linearlayout has rounded corners. I want my image to be at the very top of the view, but when the image appears, the corners are not longer rounded. What can I do for this? I know in iOS there is a clip subviews option for the container (UIView). But not sure with Android.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:gravity="top"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/cell_rounded_edges">
<ImageView
android:id="#+id/prodImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:gravity="top"
android:focusable="false"
android:clickable="false"
android:adjustViewBounds="true"
/>
.....and so on
Any ViewGroup (which includes LinearLayout) has a boolean XML attribute of android:clipChildren (also settable programmatically with setClipChildren(boolean)) but according to the documentation, this is by default set to true.
I found a great and easy solution !
I had an image in the top of my layout where only the top corners had to be round (simulate the clip to subviews in iOS), since my layer have all of his corners round.
On my Image Background:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<solid android:color="#e3e3e3"/>
<corners android:bottomRightRadius="0dip"
android:bottomLeftRadius="0dip"
android:topLeftRadius="25dip"
android:topRightRadius="25dip"/>
<padding android:left="0dip" android:top="0dip" android:right="0dip" android:bottom="0dip" />
</shape>
On my Layer Background:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<solid android:color="#FFF"/>
<corners android:radius="25dip"/>
<padding android:left="0dip" android:top="0dip" android:right="0dip" android:bottom="0dip" />
</shape>
Related
I am trying to design a custom layout like below:
So far I have done as following image but that's not exactly like the intended one:
Here is the code that I have tried.
***et_rounded_corner*******
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#android:color/white" />
<corners android:radius="10dp" />
<padding
android:left="0dp"
android:top="0dp"
android:right="0dp"
android:bottom="0dp" >
</padding>
<stroke
android:width="0dp"
android:color="#color/white"/>
</shape>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/et_rounded_corner"
android:padding="5dp">
<TextView
android:id="#+id/et_search"
android:layout_width="match_parent"
android:layout_height="30dp"
android:layout_alignParentStart="true"
android:layout_toStartOf="#+id/imageView"
android:maxLines="1"
android:padding="5dp"
android:text="#string/loading"
android:textAppearance="#style/Small"
android:visibility="visible" />
<ImageView
android:id="#+id/imageView"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
android:background="#color/red"
android:padding="5dp"
android:visibility="visible"
app:srcCompat="#drawable/ic_search" />
</RelativeLayout>
For the record, I have fixed it by using the following background with imageview.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#color/red" />
<corners
android:bottomLeftRadius="0dp"
android:bottomRightRadius="20dp"
android:topLeftRadius="0dp"
android:topRightRadius="20dp" />
<padding
android:left="0dp"
android:top="0dp"
android:right="0dp"
android:bottom="0dp" >
</padding>
<stroke
android:width="0dp"
android:color="#color/red"/>
</shape>
Increase your corner radius to a big number, like 100dp.
<corners android:radius="100dp" />
Android will then create a circle at each end for you.
Apply the same trick to a red background of your `ImageView~ and make the actual image have a transparent background. That will give you the correct rounded corners on the right of the red. But the left will now be rounded.
To make the left border of the red button vertical, either overlay a white block, or better, add a negative left padding to this new red background drawable. Then the left rounded part will try to draw outside the view, so it will not show.
As stated by other answer, you also need to remove the padding from the enclosing view, because this is adding the vertical space, and the right padding on the red image.
For the same reason, remove the padding on your image.
Somebody knows how I can create container with edging and label in left side of top part?
Example: screenshots here
I tried background image, but fault with scaling on tablets.
Seems like you was right and there are layouts with rounded corners in the pictures. To make this use the code like this:
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#FFFFFF"/>
<stroke android:width="3dip" android:color="#B1BCBE" />
<corners android:radius="10dip"/>
<padding android:left="0dip" android:top="0dip" android:right="0dip" android:bottom="0dip" />
</shape>
sources:
How to make layout with rounded corners..? and
round corners with border color
In this case you will not have scaling problems.
You can use a RelativeLayout to put the background container with the stroke and text + button. And then put a TextView with property android:layout_alignParentTop=true
<RelativeLayout
...>
<LinearLayout
....
android:background="#drawable/blue_stroke">
//Text + Button
</LinearLayout>
<TextView
...
android:background="#android:color/white"
android:layout_alignParentTop="true"/>
</RelativeLayout>
I have this LinearLayout:
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:layout_width="100dp"
android:layout_height="70dp"
android:src="#drawable/ic_launcher"
android:scaleType="centerCrop"/>
<TextView
android:layout_width="100dp"
android:layout_height="30dp"
android:background="#FFD800"
android:textColor="#android:color/black"
android:gravity="center"
android:text="Text View"/>
</LinearLayout>
And I want to mask it with rounded corner, like this:
I tried to put it in a FrameLayout with another layout with shape.xml on top of it,
But the most I got was:
or
I'm looking for a way to use shape.xml background,
But with transparent inside the border, and white color outside.
My shape.xml:
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid
android:color="#FFFFFF">
</solid>
<stroke
android:width="2dp"
android:color="#000000" >
</stroke>
<padding
android:left="5dp"
android:top="5dp"
android:right="5dp"
android:bottom="5dp">
</padding>
<corners
android:radius="50dp">
</corners>
</shape>
Create a nine-patch with white rounded corners outside, transparent in the middle, ("inverse nine-patch") and put it on top on your LinearLayout. This is a common practice.
Tried out below xml file
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<stroke
android:width="1dp"
android:color="#4a6176" />
<padding
android:left="10dp"
android:right="10dp"
/>
<corners android:radius="6dp" />
</shape>
Just remove <solid> tag from your shape. Then apply that shape to the background of your LinearLayout.
Because the <solid> tag specifies the fill color of your shape.
Without that tag the center of your shape will be fully transparent.
So it will look just like a border.
make your layout background like this: android:background="#drawable/shape"
I need to draw a border to an imageview or a textview in my app, but I need to draw it only in one corner, like the image.
I do a shape but i get border in all 4 sides:
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<stroke android:width="1px" android:color="#FF000000" />
<solid android:color="#ffffffff"/>
<padding android:left="1px" android:top="1px"
android:right="0px" android:bottom="0px" />
<corners android:topLeftRadius="8px" />
</shape>
How can I to do make it like in the image?
Thanks, Mattia
Use this code will solve it :
<?xml version="1.0" encoding="utf-8" ?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#FF0000" />
<corners android:topLeftRadius="15dp" />
</shape>
</item>
<item android:left="10dp" android:top="10dp">
<shape android:shape="rectangle">
<solid android:color="#000000" />
<corners android:topLeftRadius="15dp" />
</shape>
</item>
</layer-list>
you have to make adjustment in the ( layout Xml ) also as:
android:layout_width
android:layout_height
android:paddingTop
android:paddingLeft
this is the output :
hope this help.
This is how I achieved. Using inset drawable we can achieve this easily and more customization we can do with less code. Use this twoside_border.xml
<?xml version="1.0" encoding="UTF-8"?>
<!-- inset: It can remove border from any other side-->
<inset xmlns:android="http://schemas.android.com/apk/res/android"
android:insetBottom="-15dp"
android:insetRight="-15dp">
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/rectangle">
<stroke
android:width="20dp"
android:color="#ED302F" />
<!--<corners
android:topLeftRadius="20dp"
/>-->
<!--<solid android:color="#f50a0a" />-->
</shape>
insetBottom & insetRight -dp values helps to hide the border where we do not need and as a output :
two side border image
to get corner curve remove the commented line in the above code
<corners android:topLeftRadius="20dp"/>
now we can see the curve bend
border with curve image
Use this xml in frame layout like below how I did & adjust the padding or margin according to your need, so that it fit inside the border image which look like a frame.
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:paddingTop="5dp"
android:scaleType="centerCrop"
android:src="#drawable/your_image_file" />
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/twoside_border" />
</FrameLayout>
I have the below view that I need to create. I have the following XML, but the text does not show up and the height fills the entire parent instead of wrapping the content? Any help on creating the below screenshot would be appreciated.
playing.xml
<View
android:background="#drawable/rounded_edges"
android:text="Current Track"
android:textColor="#FFFFFF"
android:id="#+id/current_track"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:editable="false">
</View>
rounded_edges.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<solid android:color="#1F1F1F"/>
<corners android:radius="5px"/>
<padding android:left="20dp" android:top="20dp" android:right="20dp" android:bottom="20dp" />
</shape>
First you have to create a one xml file for rounded edges, then create a one linear layout and set that rounded edges in that back ground and then dynamically add text view to that particular linear layout .
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/your_rounded_edges_xml_file"
android:orientation="vertical"
android:layout_marginRight="10dp"
android:id="#+id/linearLayout">
</LinearLayout>
Here i attached my rounded edge xml file
<?xml version="1.0" encoding="UTF-8"?>
<stroke android:width="1dp"
android:color="#ababab"
/>
<padding android:left="1dp"
android:top="1dp"
android:right="1dp"
android:bottom="1dp"
/>
<corners android:bottomRightRadius="7dp" android:bottomLeftRadius="7dp"
android:topLeftRadius="7dp" android:topRightRadius="7dp"/>
For a better design of your views, take 3 individual shapes for each view so that it is easier to design the UI and align the text for each shape.