I want to implement this ui in android xml.
I have created a list layer like this for top view:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:bottom="180dp"
android:left="50dp"
android:right="0dp"
android:top="0dp">
<rotate android:fromDegrees="110">
<shape android:shape="rectangle">
<solid android:color="#ffffff" />
</shape>
</rotate>
</item>
<item
android:bottom="430dp"
android:left="0dp"
android:right="0dp"
android:top="0dp">
<rotate android:fromDegrees="0">
<shape android:shape="rectangle">
<solid android:color="#ffffff" />
<corners
android:topLeftRadius="30dp"
android:topRightRadius="30dp" />
</shape>
</rotate>
</item>
</layer-list>
Result:
But I can't implement the bottom corner radius in this shape. How to implement these corners radius?
And here is the code for bottom view:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:bottom="0dp"
android:left="0dp"
android:right="0dp"
android:top="0dp">
<rotate android:fromDegrees="110">
<shape android:shape="rectangle">
<solid android:color="#ffffff" />
</shape>
</rotate>
</item>
<item
android:bottom="0dp"
android:left="0dp"
android:right="0dp"
android:top="300dp">
<rotate android:fromDegrees="0">
<shape android:shape="rectangle">
<solid android:color="#ffffff" />
<corners
android:bottomLeftRadius="30dp"
android:bottomRightRadius="30dp" />
</shape>
</rotate>
</item>
</layer-list>
Result:
And here is layout for screen:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/login_2_background"
android:padding="16dp">
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="LOGIN"
android:textColor="#color/white"
android:textSize="20dp"
android:layout_marginBottom="16dp"
android:textStyle="bold" />
<RelativeLayout
android:id="#+id/form"
android:layout_below="#id/title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/card_login_2_shape">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="32dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="EMAIL/MOBILE"
android:textStyle="bold"
android:textSize="16sp"/>
</RelativeLayout>
</RelativeLayout>
<RelativeLayout
android:layout_below="#id/form"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/card_login_2_shape_2">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="32dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="EMAIL/MOBILE"
android:textStyle="bold"
android:textSize="16sp"/>
</RelativeLayout>
</RelativeLayout>
</RelativeLayout>
Result:
But the top view fills the screen and bottom view not shown and if I set margin to one of the layouts it's not working correctly.
How can I change this codes or write new shapes for this UI?
Related
How to generate views as shown below,
I tried to adding stroke to cardView(Material cardView) and using it in a recyclerView. I have used multiple views, below is the xml code for the outer ring
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<LinearLayout
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginStart="6dp"
android:layout_marginEnd="6dp"
android:gravity="center">
<com.google.android.material.circularreveal.cardview.CircularRevealCardView
android:id="#+id/selectedCardColor"
android:layout_width="40dp"
android:layout_height="40dp"
android:visibility="visible"
app:cardBackgroundColor="#color/app_color_white"
app:strokeColor="#color/app_color_green"
app:strokeWidth="1dp"
app:cardCornerRadius="28dp"
app:cardPreventCornerOverlap="true"
app:cardUseCompatPadding="false">
<com.google.android.material.circularreveal.cardview.CircularRevealCardView
android:id="#+id/selectedCardInnerColor"
android:layout_width="32dp"
android:layout_height="32dp"
android:layout_gravity="center"
android:layout_margin="6dp"
app:cardBackgroundColor="#color/app_color_green"
app:cardCornerRadius="28dp"
app:cardPreventCornerOverlap="true"
app:cardUseCompatPadding="false" />
</com.google.android.material.circularreveal.cardview.CircularRevealCardView>
</LinearLayout>
and the code for circle shape,
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/parent"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginStart="6dp"
android:layout_marginEnd="6dp">
<com.google.android.material.card.MaterialCardView
android:id="#+id/unSelectedCardColor"
android:layout_width="35dp"
android:layout_height="35dp"
android:layout_marginTop="3dp"
android:layout_marginBottom="3dp"
app:cardBackgroundColor="#color/app_color_green"
app:cardCornerRadius="28dp"
app:cardPreventCornerOverlap="true"
app:cardUseCompatPadding="false" />
</LinearLayout>
It works only in pie(android 9) and above. Other devices it appears as below,
The ring should appear on selected views. I should be able to change color programmatically. Thanks.
Try if it works .....Make a ring.xml in your Drawable folder
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:top="20dp" android:left="20dp" android:bottom="20dp" android:right="20dp" >
<shape >
<solid android:color= "#FF0000"/>
<corners android:radius="300dp"/>
</shape>
</item>
<item android:left="40dp" android:bottom="40dp" android:top="40dp" android:right="40dp" >
<shape >
<solid android:color= "#ffffff"/>
<corners android:radius="300dp"/>
</shape>
</item>
<item android:left="60dp" android:bottom="60dp" android:right="60dp" android:top="60dp" >
<shape >
<gradient
android:startColor="#00ffff"
android:endColor="#0000ff"
android:angle="90"/>
<corners android:radius="300dp"/>
<stroke android:width="1dp"/>
</shape>
</item>
</layer-list>
please replace the white color with the color of YOUR BACKGRAOUND
use it wherever you like.eg as the background of your button
You may change the color of the ring in the first item and change the color of circle shape in the last item.
Please Try Below code
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:top="5dp"
android:left="5dp"
android:bottom="5dp"
android:right="5dp" >
<shape >
<solid android:color= "#090909"/>
<corners android:radius="400dp"/>
</shape>
</item>
<item android:left="10dp"
android:bottom="10dp"
android:top="10dp"
android:right="10dp">
<shape >
<solid android:color= "#ffffff"/>
<corners android:radius="300dp"/>
</shape>
</item>
<item
android:left="20dp"
android:bottom="20dp"
android:right="20dp"
android:top="20dp" >
<shape
android:shape="oval">
<solid
android:color="#9C27B0"/>
<size
android:width="200dp"
android:height="200dp"/>
</shape>
</item>
I am trying to achieve following layout :
I want to expand each view on click.
How do I obtain the shadow over each view?
I have tried the following drawable :
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<gradient
android:startColor="#cacaca"
android:centerColor="#b6b6b6"
android:endColor="#e9e9e9"
/>
</shape>
<gradient
android:startColor="#6586F0"
android:centerColor="#D6D6D6"
android:endColor="#4B6CD6"
android:angle="90"/>
</item>
<item
android:left="0dp"
android:right="0dp"
android:top="5dp"
android:bottom="2dp">
<shape android:shape="rectangle">
<solid android:color="#ffffff"/>
<corners android:radius="20dp"/>
</shape>
</item>
</layer-list>
But it is showing following view :
Please help me to achieve the proper view.
you can achieve this by nesting multiple cardViews inside the FrameLayout.
Change the android:layout_marginTop and app:cardElevation properties to give this stack effect.
Try below code :
For Drawable:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- Drop Shadow Stack -->
<item>
<shape android:shape="rectangle">
<padding
android:left="1dp"
android:right="1dp"
android:top="1dp" />
<corners android:topLeftRadius="20dp"
android:topRightRadius="20dp"/>
<solid android:color="#14000029" />
</shape>
</item>
<item>
<shape android:shape="rectangle">
<padding
android:left="1dp"
android:right="1dp"
android:top="1dp" />
<corners android:topLeftRadius="20dp"
android:topRightRadius="20dp"/>
<solid android:color="#14000029" />
</shape>
</item>
<item>
<shape
android:shape="rectangle">
<padding
android:left="1dp"
android:right="1dp"
android:top="1dp" />
<corners android:topLeftRadius="20dp"
android:topRightRadius="20dp"/>
<solid android:color="#14000029" />
</shape>
</item>
<!-- Background -->
<item>
<shape
android:shape="rectangle">
<corners android:topLeftRadius="20dp"
android:topRightRadius="20dp"/>
<solid android:color="#android:color/white"/>
</shape>
</item>
</layer-list>
Code in Layout file
<?xml version="1.0" encoding="utf-8"?>
<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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".CardViewShadowActivity"
android:layout_marginTop="30dp">
<LinearLayout
android:id="#+id/linear_1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:paddingTop="10dp"
android:paddingBottom="30dp"
android:background="#drawable/custom_bg">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello"/>
</LinearLayout>
<LinearLayout
android:id="#+id/linear_2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:paddingTop="10dp"
android:paddingBottom="30dp"
android:background="#drawable/custom_bg"
android:layout_below="#id/linear_1"
android:layout_marginTop="-20dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello"/>
</LinearLayout>
<LinearLayout
android:id="#+id/linear_3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:paddingTop="10dp"
android:paddingBottom="30dp"
android:background="#drawable/custom_bg"
android:layout_below="#id/linear_2"
android:layout_marginTop="-20dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello"/>
</LinearLayout>
<LinearLayout
android:id="#+id/linear_4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:paddingTop="10dp"
android:paddingBottom="30dp"
android:background="#drawable/custom_bg"
android:layout_below="#id/linear_3"
android:layout_marginTop="-20dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello"/>
</LinearLayout>
</RelativeLayout>
Customize layout and drawable according to your need.
Output for above code is:
I hope this helps you
I really appreciate if someone can help me with using how to drawable circle view with count as like my below image.
I wrote some code for my requirement but it's showing rectangular shape but i want circular shape..
linear_layout_border(drawable file)
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<stroke
android:width="1dp"
android:color="#color/colorPrimary" />
<solid android:color="#color/colorLightSky" />
<padding
android:bottom="2dp"
android:left="10dp"
android:right="10dp"
android:top="2dp" />
</shape>
xml:
<FrameLayout
android:id="#+id/group_attachment_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_margin="3dp"
android:background="#drawable/linear_layout_border">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:src="#drawable/ic_group"
android:tint="#color/rosecolor" />
</RelativeLayout>
<TextView
android:id="#+id/members_count_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|right"
android:layout_marginBottom="3dp"
android:background="#drawable/test_circle"
android:gravity="center"
android:minWidth="15dp"
android:paddingLeft="2dp"
android:paddingRight="2dp"
android:text="0"
android:textColor="#fff"
android:textStyle="bold"
android:visibility="visible" />
</FrameLayout>
image:-
Try this it looks as you want
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<corners
android:radius="10dip"/>
<solid
android:color="#2196F3" />
<stroke
android:width="2dip"
android:color="#FFF" />
<padding
android:left="2dip"
android:right="2dip"
android:top="2dip"
android:bottom="2dip" />
</shape>
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid
android:color="#666666"/>
<size
android:width="120dp"
android:height="120dp"/>
</shape>
Use this code to draw a circle and put it as background of your TextView and make its android:gravity="center"
Change height and width according to your need.
Try following drawable
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item xmlns:android="http://schemas.android.com/apk/res/android">
<shape>
<solid android:color="#58050505" />
<corners
android:topLeftRadius="3dp"
android:topRightRadius="3dp"
android:bottomLeftRadius="3dp"
android:bottomRightRadius="3dp"
/>
</shape>
</item>
</selector>
Use this for the TextView background
inside drawable folder
badge_background.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:endColor="#color/purple"
android:startColor="#color/purple"></gradient>
<corners android:radius="100dp"></corners>
<stroke
android:width="0.5dp"
android:color="#color/white" />
</shape>
The TextView
<TextView
android:id="#+id/serial_no"
android:layout_width="22dp"
android:layout_height="22dp"
android:layout_gravity="top|start"
android:layout_marginTop="5dp"
android:background="#drawable/badge_background"
android:gravity="center|center_vertical"
android:maxLines="1"
android:text="1"
android:textColor="#android:color/white"
android:textSize="13sp"
android:textStyle="bold" />
I custom my layout by using layer-list xml in Android. But, I done for layer-list and see exactly what i want to custom. But, when I apply in my layout, it show not exactly what i want, I don't know why.Help me, please!
This is my layer-list.xml:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<size
android:width="#dimen/dp35"
android:height="#dimen/dp35" />
<solid android:color="#color/colorAccent" />
</shape>
</item>
<item android:right="12dp"
android:top="#dimen/dp20"
android:bottom="-5dp">
<rotate
android:fromDegrees="25">
<shape android:shape="rectangle">
<solid android:color="#color/colorAccent" />
</shape>
</rotate>
</item>
<item android:left="12.5dp"
android:top="#dimen/dp20"
android:bottom="-5dp">
<rotate
android:fromDegrees="-25">
<shape android:shape="rectangle">
<solid android:color="#color/colorAccent" />
</shape>
</rotate>
</item>
Preview 1
My layout using layer-list.xml
<RelativeLayout 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="100dp"
android:layout_height="100dp"
android:background="#drawable/bg_sale_off"
android:text="Textview"
android:layout_centerInParent="true" />
</RelativeLayout>
Preview 2 ( without triangle at bottom)
you can try
<RelativeLayout 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:background="#drawable/bg_sale_off"
android:text="Textview"
android:layout_centerInParent="true" />
</RelativeLayout>
I have created a custom view that uses two <shape>'s as background in the view xml. Right now I have hardcoded the <solid color=""/> of the shape, but I would like to pass the color as an argument from code to the custom view and forward to the shape.
How do I achieve this? I'd like to pass a color reference to both #+id/rectangle and #+id/triangle from code.
Shape:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="1dp"/>
<solid android:color="#color/giddyologyOrange"/>
<padding
android:left="0dp"
android:top="0dp"
android:right="0dp"
android:bottom="0dp"
/>
<size android:height="60dp"
/>
<stroke
android:width="1dp"
android:color="#C95800"
/>
</shape>
View:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:id="#+id/rectangle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/rectangle"
android:orientation="horizontal"
android:padding="5dp">
<ImageView
android:id="#+id/iconImageView"
android:layout_width="32dp"
android:layout_height="32dp"
android:layout_gravity="center_vertical|left"
android:contentDescription="Icon"
android:src="#drawable/iconplaceholder"
android:scaleType="fitCenter"/>
<View
android:id="#+id/spaceView"
android:layout_height="match_parent"
android:layout_width="10dip"/>
<TextView
android:id="#+id/labelTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|left"
android:textColor="#color/white"
android:gravity="center|left"
android:textSize="16dip"
android:maxWidth="150dip"
android:text="This is a really long text that should wrap"/>
</LinearLayout>
<View
android:id="#+id/triangle"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_gravity="center_horizontal"
android:layout_marginTop="-1dp"
android:background="#drawable/triangle"
android:rotation="180"/>
</LinearLayout>
did you try this?
LinearLayout myView;
myView = (LinearLayout)findViewById(R.id.rectangle);
myView.setBackgroundColor(current_color);
I have a layout that has an ImageButton
<ImageButton
android:id="#+id/color_swatch"
android:layout_width="#dimen/standard_btn_width"
android:layout_height="#dimen/standard_btn_width"
android:background="#drawable/checker_tile"
android:contentDescription="#string/paint"
android:src="#drawable/paint" />
my src is a layer-list drawable--
layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="rectangle" >
<stroke
android:width="2dp"
android:color="#FF999999" />
<solid android:color="#00000000" />
<padding
android:bottom="0dp"
android:left="0dp"
android:right="0dp"
android:top="0dp" />
</shape>
</item>
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<stroke
android:width="4dp"
android:color="#FF999999" />
<solid android:color="#00000000" />
<corners android:radius="0dp" />
</shape>
</item>
</layer-list>
the background is a layer-list drawable-
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<gradient
android:type="radial" android:gradientRadius="500"
android:startColor="#17568A"
android:endColor="#494C4F" />
</shape>
</item>
<item>
<bitmap
android:src="#drawable/checkerpattern"
android:tileMode="repeat" />
</item>
</layer-list>
I am able to setBackgroundColor to any color with 50% opacity and see the checkerpattern below
I ended up using a color filter to colorize the background image.
rectangle.getBackground().setColorFilter(color, PorterDuff.Mode.SRC);
Since the color comes from my model object this seemed like a pretty easy and maintainable solution.