How to draw button like below image in xml? Basically, it has two different buttons. One is for I. another one is for Pick Up. Thanks.
Try this:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp">
<TextView
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#drawable/bg_btn_coner"
android:gravity="center"
android:text="Pickup"
android:textColor="#android:color/white"
android:textSize="20sp" />
<TextView
android:layout_width="50dp"
android:layout_height="50dp"
android:background="#drawable/bg_btn_coner"
android:gravity="center"
android:text="i"
android:textColor="#android:color/white"
android:textSize="20sp" />
</RelativeLayout>
and bg_btn_coner.xml
<solid android:color="#737373" />
<stroke
android:width="3dp"
android:color="#android:color/white"></stroke>
<corners android:radius="50dp"></corners>
Result:
Try this. Example image is shown.
Note: you will have to fix the path to make the image perfect.
button_circle.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#android:color/darker_gray" />
</shape>
button_rectangle.xml
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="720dp"
android:height="576dp"
android:viewportWidth="720"
android:viewportHeight="576">
<path
android:fillColor="#android:color/darker_gray"
android:pathData="M700.461,426.359c0,51.164-7.764,92.641-17.336,92.641H76.369
c-9.575,0,17.191-101.692,17.191-152.855l-1.444-173.699c0-51.164-25.321-136.646-15.747-136.646h606.756
c9.572,0,17.336,41.476,17.336,92.64V426.359z" />
</vector>
You will have to fix the vector to make the shape perfect. but this a good example for u.
my_layout.xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:layout_width="match_parent"
android:layout_height="42dp"
android:background="#drawable/button_rectangle"/>
<Button
android:layout_width="42dp"
android:layout_height="42dp"
android:background="#drawable/button_circle"/>
</RelativeLayout>
Hope this helps!
Related
I'm trying to use Android Elevation to achieve the 'shadow' look for a view. The following is the layout xml:
<android.support.constraint.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="com.sample.app.Main2Activity">
<LinearLayout
android:layout_width="395dp"
android:layout_height="match_parent"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:orientation="vertical"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:clipChildren="false">
<TextView
android:id="#+id/textView2"
android:layout_width="match_parent"
android:layout_height="165dp"
android:background="#FFFFFF"
android:padding="30dp"
android:layout_margin="30dp"
android:elevation="10dp"
android:text="TextView" />
</LinearLayout>
</android.support.constraint.ConstraintLayout>
This is how the layout looks:
Look ma, no shadows!
Any suggestions to fix this?
Here you go.... maybe you need someone to do it for you then....
I used a card view instead...
xml layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<android.support.v7.widget.CardView
android:id="#+id/card_view"
android:layout_width="fill_parent"
android:layout_height="100dp"
android:layout_gravity="center"
android:layout_margin="5dp"
card_view:cardCornerRadius="5dp"
card_view:contentPadding="10dp">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:id="#+id/textView"
android:text="hello"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:textStyle="bold"/>
<TextView
android:id="#+id/textView2"
android:text="world"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/textView"
android:layout_marginTop="10dp"/>
</RelativeLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
Add these to your app gradle file
compile 'com.android.support:appcompat-v7:25.1.0'
compile 'com.android.support:cardview-v7:25.1.0'
result:
and if you dont want to use a card view.....
xml -> layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/border"
android:layout_margin="5dp"
android:padding="5dp">
<TextView
android:id="#+id/textView"
android:text="hello"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:textStyle="bold"/>
<TextView
android:id="#+id/textView2"
android:text="world"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/textView"
android:layout_marginTop="10dp"/>
</RelativeLayout>
</LinearLayout>
#drawable/border
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Drop Shadow Stack -->
<item>
<shape>
<gradient
android:centerColor="#D5E2ED"
android:endColor="#0000"
android:angle="90"/>
</shape>
</item>
<item android:bottom="10dp">
<shape>
<solid android:color="#D5E2ED"/>
</shape>
</item>
<!-- base background -->
<item android:bottom="5dp" android:top="1dp">
<shape android:shape="rectangle">
<solid android:color="#fff"/>
<padding android:bottom="10dp" android:top="10dp"/>
</shape>
</item>
</layer-list>
result:
happy coding....
I'll get to the answer, but some background first. I was trying to achieve the look with a custom view that used a ConstraintLayout. This view would be used in another layout. I was when I tried using a simple TextView that I realised that the shadows weren't being rendered because, thus destroying my assumption that it was something ConstraintLayout related.
What worked?
I know, from the documentations, that shadows and rendered using a View's background. This, I have, and indeed, it was a solid color with no alpha value (as others on SO have mentioned).
Much like so:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#ffffff" />
</shape>
It was after I added android:radius to this, and then the shadows were rendered.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#ffffff" />
<corners android:radius="1dp" />
</shape>
And if you were wondering, why not set it to 0dp? Well, the shadows disappear again when the radius values were set to 0dp.
I am very new to android and trying to create a design like this in xml.
I was able to create the left most portion of the design which has circle within a circle and a textview.
Following are the files i have created for the above.
/drawable/design_circle.xml
<?xml version="1.0" encoding="utf-8"?><layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:top="6dp"
android:right="6dp"
android:bottom="6dp"
android:left="6dp">
<shape
android:shape="oval">
<stroke
android:width="1dp"
android:color="#78d9ff"/>
</shape>
</item>
<item>
<shape
android:shape="oval">
<stroke android:width="4dp"
android:color="#78d9ff"/>
</shape>
</item>
/layout/view.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="150dp"
android:layout_gravity="center"
>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<TextView
android:id="#+id/ec_txtDate"
android:layout_width="120dp"
android:layout_height="120dp"
android:background="#drawable/design_circle"
android:text="09"
android:textAlignment="center"
android:gravity="center_vertical"
android:textStyle="bold"
android:textSize="50dp"/>
</RelativeLayout>
</android.support.v7.widget.CardView>
But i am not able to create * OCTOBER * section of the design which has to adjacent to the circle. Thank you in advance.
If you don't want to give clicks on each of that sub sections use the image instead.You completed the left side, when looking i think you will be expecting click on the circle so make the image into two give an image view right of the shape you created
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="150dp"
android:layout_gravity="center"
>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"//give this to align the objects in this view center alignment
android:orientation="vertical"//remove this because it is not relevant for a relative layout but relevant for linearlayout>
<TextView
android:id="#+id/ec_txtDate"
android:layout_width="120dp"
android:layout_height="120dp"
android:background="#drawable/design_circle"
android:text="09"
android:textAlignment="center"
android:gravity="center_vertical"
android:textStyle="bold"
android:textSize="50dp"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toRightOf="#+id/"ec_txtDate
android:src="#drawable/your_image.png" />
</RelativeLayout>
</android.support.v7.widget.CardView>
I am new to Android and this is my first question here.
I am trying to add a colored vertical border at the beginning of the cardview. How can I achieve it on xml ? I tried adding it with empty textview but it is messing up the whole cardview itself. Please check the picture link posted below for example.
activity_main.xml
<android.support.v7.widget.CardView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
card_view:contentPadding="16dp"
card_view:cardElevation="2dp"
card_view:cardCornerRadius="5dp">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
style="#style/Base.TextAppearance.AppCompat.Headline"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Title" />
<TextView
style="#style/Base.TextAppearance.AppCompat.Body1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Content here" />
</LinearLayout>
</android.support.v7.widget.CardView>
Many thanks
Start From the material design update, it support app:strokeColor and also app:strokeWidth. see more
to use material design update. add following code to build.gradle(:app)
dependencies {
// ...
implementation 'com.google.android.material:material:1.0.0'
// ...
}
and Change CardView to MaterialCardView
try doing:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
card_view:cardElevation="2dp"
card_view:cardCornerRadius="5dp">
<FrameLayout
android:background="#FF0000"
android:layout_width="4dp"
android:layout_height="match_parent"/>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="16dp"
android:orientation="vertical">
<TextView
style="#style/Base.TextAppearance.AppCompat.Headline"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Title" />
<TextView
style="#style/Base.TextAppearance.AppCompat.Body1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Content here" />
</LinearLayout>
</android.support.v7.widget.CardView>
this removes the padding from the cardview and adds a FrameLayout with a color. You then need to fix the padding in the LinearLayout then for the other fields
Update
If you want to preserve the card corner radius create card_edge.xml in drawable folder:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<solid android:color="#F00" />
<size android:width="10dp"/>
<padding android:bottom="0dp" android:left="0dp" android:right="0dp" android:top="0dp"/>
<corners android:topLeftRadius="5dp" android:bottomLeftRadius="5dp"
android:topRightRadius="0.1dp" android:bottomRightRadius="0.1dp"/>
</shape>
and in the frame layout use android:background="#drawable/card_edge"
As the accepted answer requires you to add a Frame Layout, here how you can do it with material design.
Add this if you haven't already
implementation 'com.google.android.material:material:1.0.0'
Now change to Cardview to MaterialCardView
<com.google.android.material.card.MaterialCardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
app:cardCornerRadius="8dp"
app:cardElevation="2dp"
app:strokeWidth="1dp"
app:strokeColor="#color/black">
Now you need to change the activity theme to Theme.Material. If you are using Theme.Appcompact I will suggest you to move to Theme.Material for future projects for having better material design in you app.
<style name="AppTheme" parent="Theme.MaterialComponents.DayNight">
I think this solution may not be efficient but it serves the purpose and adds flexibility with the border width.
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="40dp"
android:layout_gravity="center"
card_view:cardBackgroundColor="#color/some_color"
card_view:cardCornerRadius="20dp"
card_view:contentPadding="5dp"> <!-- Change it to customize the border width -->
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
card_view:cardCornerRadius="20dp"
card_view:contentPadding="5dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- Add your UI elements -->
</RelativeLayout>
</android.support.v7.widget.CardView>
</android.support.v7.widget.CardView>
CardView extends FrameLayout, so it support foreground attribute. Using foreground attribute can also add border easily.
layout as follows:
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/link_card"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:foreground="#drawable/bg_roundrect_ripple_light_border"
app:cardCornerRadius="23dp"
app:cardElevation="0dp">
</androidx.cardview.widget.CardView>
bg_roundrect_ripple_light_border.xml
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#color/ripple_color_light">
<item>
<shape android:shape="rectangle">
<stroke
android:width="0.5dp"
android:color="#DDDDDD" />
<corners android:radius="23dp" />
</shape>
</item>
<item android:id="#android:id/mask">
<shape android:shape="rectangle">
<corners android:radius="23dp" />
<solid android:color="#color/background" />
</shape>
</item>
</ripple>
my solution:
create a file card_view_border.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#color/white_background"/>
<stroke android:width="2dp"
android:color="#color/red" />
<corners android:radius="20dip"/>
</shape>
and set programmatically
cardView.setBackgroundResource(R.drawable.card_view_border);
I would like to improve the solution proposed by Amit. I'm utilizing the given resources without adding additional shapes or Views. I'm giving CardView a background color and then nested layout, white color to overprint yet with some leftMargin...
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
card_view:cardElevation="2dp"
card_view:cardBackgroundColor="#color/some_color"
card_view:cardCornerRadius="5dp">
<!-- The left margin decides the width of the border -->
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="16dp"
android:layout_marginLeft="5dp"
android:background="#fff"
android:orientation="vertical">
<TextView
style="#style/Base.TextAppearance.AppCompat.Headline"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Title" />
<TextView
style="#style/Base.TextAppearance.AppCompat.Body1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Content here" />
</LinearLayout>
</android.support.v7.widget.CardView>
I solved this by putting two CardViews in a RelativeLayout. One with background of the border color and the other one with the image. (or whatever you wish to use)
Note the margin added to top and start for the second CardView. In my case I decided to use a 2dp thick border.
<android.support.v7.widget.CardView
android:id="#+id/user_thumb_rounded_background"
android:layout_width="36dp"
android:layout_height="36dp"
app:cardCornerRadius="18dp"
android:layout_marginEnd="6dp">
<ImageView
android:id="#+id/user_thumb_background"
android:background="#color/colorPrimaryDark"
android:layout_width="36dp"
android:layout_height="36dp" />
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:id="#+id/user_thumb_rounded"
android:layout_width="32dp"
android:layout_height="32dp"
app:cardCornerRadius="16dp"
android:layout_marginTop="2dp"
android:layout_marginStart="2dp"
android:layout_marginEnd="6dp">
<ImageView
android:id="#+id/user_thumb"
android:src="#drawable/default_profile"
android:layout_width="32dp"
android:layout_height="32dp" />
</android.support.v7.widget.CardView>
You can keep <androidx.cardview.widget.CardView
with android:foreground="#drawable/black_border"
black_border :
<?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" />
<stroke
android:width="1dp"
android:color="#android:color/black" />
</shape>
I am trying to make a round Android ImageButton. To do so, I write the following code according to the link.
In my main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_gravity="center"
android:textColor="#333"
android:textSize="18sp"
android:text="Invite Activity." />
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageButton"
android:src="#drawable/round"
android:background="#drawable/roundcorner"
android:padding="50dp" />
</LinearLayout>
In my res/drawable/roundcorner.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#33DDFF" />
<corners android:radius="100dp" />
</shape>
But the code doesn't work. The output is like below
However, when I change ImageButton to ImageView in main.xml
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageButton"
android:src="#drawable/round"
android:background="#drawable/roundcorner"
android:padding="50dp" />
It works as below
I am confused since as I know ImageButton inherits from ImageView. Why does it work differently? Is there anyway to fix this? Thanks in advance!
Make your src as android:src="#drawable/roundcorner", or make it transparent so you can see the rounded background behind it.
I am trying to make a imageview Rounded corners
I am trying to set it through XML and not programatically !
I have set background for my reference
Is it not possible to to set round corners through xml & we have to use bitmap ?
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:orientation="vertical" >
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/round_cornered_imageview"
android:src="#drawable/image" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="My-Text"
android:textColor="#color/textbody"
android:layout_gravity="bottom|center"
android:textSize="40sp" />
<Button
android:id="#+id/button1"
android:layout_width="108dp"
android:layout_height="74dp"
android:background="#color/textbody"
android:layout_gravity="top|center"
android:text="Button" />
</FrameLayout>
</LinearLayout>
OUTPUT
What i have tried ::
rounded_cornered_imageview.xml
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<corners android:bottomRightRadius="10dp" android:bottomLeftRadius="10dp"
android:topLeftRadius="10dp" android:topRightRadius="10dp"/>
<stroke
android:color="#color/black"
android:width="1dp"
/>
</shape>
But its not working ... where i need to correct myself ?
you can follow this below:
on your gradle in dependencies
implementation 'com.makeramen:roundedimageview:2.3.0'
on your xml file
<com.makeramen.roundedimageview.RoundedImageView
android:id="#+id/img_home_assistance"
android:layout_width="match_parent"
android:layout_height="123dp"
app:riv_corner_radius="#dimen/padding_margin_15"
android:layout_marginTop="6.8dp"
android:layout_marginLeft="7.3dp"
android:layout_marginRight="7.5dp"
android:src="#drawable/migrate"
android:scaleType="centerCrop"/>