Custom layout using layer-list xml not exactly - android

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>

Related

How to make textview as card view in android using background resource

This is Textview :
<TextView
android:id="#+id/text_naer_me"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text=“Hello”
android:background="#drawable/rounded_white_border"
/>
This background resource
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke
android:width="1dp"
android:color="#color/light_gray" />
<solid android:color="#color/white" />
<corners android:radius="2dp" />
</shape>
current view is below
enter image description here
expected view is below
enter image description here
please suggest me how to achieve this i want make textview as card view you can see my given screen
There are lots of ways and here they are Use that which one suits you
Create your own drawable
border.xml
<?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="#android:color/darker_gray" />
<corners android:radius="5dp"/>
</shape>
</item>
<item android:right="1dp" android:left="1dp" android:bottom="2dp">
<shape
android:shape="rectangle">
<solid android:color="#android:color/white"/>
<corners android:radius="5dp"/>
</shape>
</item>
</layer-list>
and your_layout.xml
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:padding="10dp"
android:background="#drawable/border"
/>
You can also use use a drawable from android
android:background="#android:drawable/toast_frame"
or:
android:background="#android:drawable/dialog_frame"
or:
android:background="#android:drawable/dialog_holo_light_frame"
Use a 9-patch image with a shadow and set it as the background to your
Linear layout
Use this website to create 9 patch with shadow
http://inloop.github.io/shadow4android/
Use android:elevation="20dp" and background same effect
like
cardview without wrap cardview
<TextView
android:layout_margin="10dp"
android:elevation="20dp"
android:padding="20dp"
android:background="#drawable/background"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Submit"
/>

Edittext as spinner

I have a editext which I would like to show as drop down. SO for that I have background.xml file:
<?xml version="1.0" encoding="utf-8" ?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<layer-list>
<item>
<shape>
<solid android:color="#ffffff" />
<stroke android:width="1dp" android:color="#000000" />
<padding android:bottom="3dp" android:left="3dp" android:right="3dp" android:top="3dp" />
</shape>
</item>
<item>
<bitmap android:gravity="right" android:src="#drawable/ic_arrow_drop_down" />
</item>
</layer-list>
</item>
</selector>
And added that as background for my edittext. This is what I get:
As you can see there is slight gap between the image and editext border. I would like to make my edittext like this:
How can I achieve this?
Try this
<?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:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/bg"
android:orientation="horizontal">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#android:color/transparent" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerInParent="true"
android:background="#drawable/bgnew"
android:src="#drawable/ic_android_black_24dp" />
</LinearLayout>
</LinearLayout>
Create bg.xml like this
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Background Color -->
<solid android:color="#ffffff" />
<!-- Border Color -->
<stroke android:width="1dp" android:color="#ff9900" />
</shape>
create a bgnew.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Background Color -->
<solid android:color="#ffffff" />
<!-- Border Color -->
<stroke android:width="1dp" android:color="#color/colorAccent" />
</shape>
Output
Create a RelativeLayout with EditText and ImageView UI Components :).
Don't complicate yourself.
Just try Linear layout with layout orientation horizontal of EditText and ImageView. It is simple.

How to set line as a background using xml (shape) below to EditText?

I want to set the line as background below EditText using shape xml but when I set it line set on center
I want like below
but when I set the shape below
drawable/line.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="line" >
<stroke
android:height="4dp"
android:color="#color/crabfx_dark_gray" />
</shape>
activity_main.xml
<EditText
android:id="#+id/edt"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#android:color/black"
android:layout_margin="20dp"
android:background="#drawable/line"/>
I got below output
is any solution ?
Try this one i hope you will get perfect solution..
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape>
<solid android:color="#color/gray" />
</shape>
</item>
<!-- main color -->
<item
android:bottom="1dp"
android:left="1dp"
android:right="1dp">
<shape>
<solid android:color="#color/white" />
</shape>
</item>
<!-- draw another block to cut-off the left and right bars -->
<item android:bottom="1dp">
<shape>
<solid android:color="#color/white" />
</shape>
</item>
</layer-list>
Or Try this
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape>
<solid android:color="#color/gray" />
</shape>
</item>
<item
android:bottom="1px"
android:left="0px">
<shape android:shape="rectangle" >
<solid android:color="#FFFFFF" />
</shape>
</item>
</layer-list>
Try this way,hope this will help you to solve your problem.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="20dp">
<EditText
android:id="#+id/edt1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#android:color/black"/>
<View
android:layout_width="match_parent"
android:layout_height="4dp"
android:background="#drawable/line"/>
<EditText
android:id="#+id/edt2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#android:color/black"/>
<View
android:layout_width="match_parent"
android:layout_height="4dp"
android:background="#drawable/line"/>
</LinearLayout>
Try this code just below your EDIT_text:
<View
android:id="#+id/dividerView"
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#191919"
>
</View>

Pass color attribute from custom view to drawable shape in Android

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.

How to create a xml drawable like this

I need to create a drawable with a 3dp height line/rectangle on top, a black rectangle with 70% opacity and 2dp height line/rectangle on the bottom. How can I do this?
Here is the code I'm using:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:top="0dp" android:left="0dp" android:right="0dp">
<shape android:shape="rectangle" >
<size android:height="3dp"></size>
<solid android:color="#C81F25"></solid>
</shape>
</item>
<item android:top="2dp">
<shape android:shape="rectangle">
<solid android:color="#99000000"></solid>
</shape>
</item>
</layer-list>
PS: Ignore the gray gradient around the image, it's from Android Studio preview.
Case 1: Rectangle inside another rectangle.
Case 2: 3 Rectangles of which 2 are transparent which have negative paddings and strokes. On eclipse previews the case 2 shows wrong but it is correct and works when deployed.
case 1:
actionbarbg.xml in your drawable folder:
<?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="#F00" />
</shape>
</item>
<item android:top="3dp" android:right="0dp" android:bottom="2dp"
android:left="0dp">
<shape android:shape="rectangle">
<solid android:color="#9000" />
</shape>
</item>
</layer-list>
case 2: (sort of a hack)
<?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="#9000" />
</shape>
</item>
<item
android:top="-2dp"
android:left="-2dp"
android:right="-2dp">
<shape>
<solid android:color="#android:color/transparent" />
<stroke
android:width="2dp"
android:color="#C81F25" />
</shape>
</item>
<item
android:left="-3dp"
android:right="-3dp"
android:bottom="-3dp">
<shape>
<solid android:color="#android:color/transparent" />
<stroke
android:width="3dp"
android:color="#C81F25" />
</shape>
</item>
</layer-list>
Is it possible to build the layout without drawables using linearlayouts. I dont know which one of the two cases below you ment:
On the top layout there is a black alphamask with top and bottom margins of 2dp/3dp nested inside a red layout.
On the bottom layout there is a rectangle of 3dp height on top of a black alphamask and a rectangle of 2dp height below the alpha mask.
`
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="2dp"
android:layout_marginTop="3dp"
android:background="#9000" >
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Content"
android:textColor="#android:color/white" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Content"
android:textColor="#android:color/white" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Content"
android:textColor="#android:color/white" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Content"
android:textColor="#android:color/white" />
</LinearLayout>
</LinearLayout>`
OR
`
<LinearLayout
android:layout_width="match_parent"
android:layout_height="3dp"
android:background="#C81F25" >
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="#9000" >
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Content"
android:textColor="#android:color/white" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Content"
android:textColor="#android:color/white" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Content"
android:textColor="#android:color/white" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="#C81F25" >
</LinearLayout>
</LinearLayout>`

Categories

Resources