I'm trying to change my ListView item's visual but it doesn't change, I'm using this tutorial http://ryanharter.com/blog/2013/01/31/how-to-make-an-android-card-list/ but my listview item doesn't change.
I made the bg_card.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle"
android:dither="true">
<corners android:radius="2dp"/>
<solid android:color="#ccc" />
</shape>
</item>
<item android:bottom="2dp">
<shape android:shape="rectangle"
android:dither="true">
<corners android:radius="2dp" />
<solid android:color="#android:color/white" />
<padding android:bottom="8dp"
android:left="8dp"
android:right="8dp"
android:top="8dp" />
</shape>
</item>
</layer-list>
and put in my ListView but this doesn't change the visual, was thus:
My listview is:
<ListView
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:id="#+id/listView"
android:dividerHeight="5dp"
android:layout_margin="16dp"
android:background="#drawable/bg_card"
/>
Please if someone has a suggestion, I don't know how to deal with this issue.
Thank you
Set the background to the listItem layout, not to the listview.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="#drawable/bg_card"
>
<ImageView
android:id="#+id/image"
android:layout_height="wrap_content"
android:layout_width="match_parent" />
<TextView
android:id="#+id/text"
android:layout_height="wrap_content"
android:layout_width="match_parent" />
</LinearLayout>
Related
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 am using CardView to show List Items, where each and every List Item contains two textviews, namely - BOOK NOW/BOOK and DETAIL/DETAILS.
I would like to achieve rounded bottom TextView, but getting in rectangular shape
I have to design something like this:
Here is my XML:
<?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="match_parent">
<android.support.v7.widget.CardView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:clickable="true"
android:focusable="true"
android:layout_margin="5dp"
app:cardCornerRadius="5dp"
app:cardElevation="2dp">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_height="match_parent"
android:layout_width="match_parent"
android:layout_weight="1">
.......
<LinearLayout
android:layout_height="match_parent"
android:layout_width="match_parent"
android:orientation="horizontal"
android:layout_marginTop="5dp"
android:background="#color/more"
android:layout_weight="1">
<TextView
android:id="#+id/btnBook"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="BOOK"
android:textColor="#android:color/background_light"
android:padding="5dp"
android:background="#null"
android:textAppearance="?android:textAppearanceMedium"
android:gravity="center" />
<TextView
android:id="#+id/btnDetail"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="DETAILS"
android:background="#null"
android:textColor="#android:color/background_light"
android:padding="10dp"
android:textAppearance="?android:textAppearanceMedium"
android:gravity="center" />
</LinearLayout>
</LinearLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
Where I have to make change to get it done ?
set this background to the LinearLayout containing the textViews
<item>
<shape android:shape="rectangle">
<solid android:color="#color/colorPrimary" />
<corners android:bottomLeftRadius="cardview_corner_radius_value"
android:bottomRightRadius="cardview_corner_radius_value" />
</shape>
</item>
and add background of TextView as transparent
You have to make selector for this in 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">
<stroke android:width="2dp" android:color="#color/more" />
<dotted android:color="#00FF0000" />
<padding android:bottom="1dp"/>
</shape>
</item>
</layer-list>
Then set background to your view. Use this
android:background="#drawable/corner_selector"
instead of
android:background="#color/more"
make a file rounded_border.xml in drawable folder
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<stroke
android:width="1dp"
android:color="#color/common_border_color" />
<solid android:color="#fff" />
<padding
android:left="1dp"
android:right="1dp"
android:top="1dp" />
<corners android:radius="5dp" />
</shape>
and keep it as a background of linear layout
<LinearLayout
android:layout_height="match_parent"
android:layout_width="match_parent"
android:orientation="horizontal"
android:layout_marginTop="5dp"
android:background="#drawable/rounded_border"
android:layout_weight="1">
1. make button.xml file and put it in drawable folder
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_pressed="true" >
<shape android:shape="rectangle" >
<corners android:radius="3dip" />
<stroke android:width="1dip" android:color="#5e7974" />
<gradient android:angle="-90" android:startColor="#345953" android:endColor="#689a92" />
</shape>
</item>
<item android:state_focused="true">
<shape android:shape="rectangle" >
<corners android:radius="3dip" />
<stroke android:width="1dip" android:color="#5e7974" />
<solid android:color="#58857e"/>
</shape>
</item>
<item >
<shape android:shape="rectangle" >
<corners android:radius="3dip" />
<stroke android:width="1dip" android:color="#5e7974" />
<gradient android:angle="-90" android:startColor="#8dbab3" android:endColor="#58857e" />
</shape>
</item>
</selector>
2. then change your xml background of Linearlayout
android:background="#color/more"
to
android:background="#drawable/button"
Try with this simplest way to do this your Layout
<?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" >
<Button
android:id="#+id/btn"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/btnbackground"
android:layout_margin="20dp"
android:text="My Profile"
/>
</LinearLayout>
after that make a xml in drawable folder btnbackground.xml
<?xml version="1.0" encoding="UTF-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/llabeforeclick3"
android:state_pressed="true"/>
<item android:drawable="#drawable/llaafterclick3"/>
</selector>
then make another llabeforeclick3.xml in drawable directory
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid android:color="#19384A" >
</solid>
<corners
android:bottomLeftRadius="10dp"
android:bottomRightRadius="10dp"
android:topRightRadius="10dp"
android:topLeftRadius="10dp" />
<stroke
android:width="0dp"
android:color="#19384A" />
<padding
android:left="4dp"
android:top="4dp"
android:right="4dp"
android:bottom="4dp"
android:color="#19384A" />
</shape>
after that make another xml llaafterclick3.xml in drawable
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
//background color
<solid android:color="#204A60" >
</solid>
<corners
android:bottomLeftRadius="10dp"
android:bottomRightRadius="10dp"
android:topRightRadius="10dp"
android:topLeftRadius="10dp" />
//before clicked
<gradient
android:angle="45"
android:centerColor="#204A60"
android:centerX="20"
android:centerY="20"
android:endColor="#204A60"
android:gradientRadius="25"
android:startColor="#204A60" />
</shape>
if some buddy wants to make more rounded corners then use to increase size of
android:bottomLeftRadius="10dp"
android:bottomRightRadius="10dp"
android:topRightRadius="10dp"
android:topLeftRadius="10dp"
That solve here your color code is depends on you you need to put color code only and radious.
The following is my ListView with a background. List items when pressed are showing unwanted areas at upper right and lower right corners. I want them to disappear. What can I do?
I have attached the XML code for the background here:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:right="15dp">
<shape android:shape="rectangle" >
<solid android:color="#6bb726" />
<size android:width="3dp" android:height="0dp" />
</shape>
</item>
<item android:left="5dp">
<shape android:shape="rectangle" >
<solid android:color="#aaaaaa" />
<corners
android:bottomLeftRadius="0.1dp"
android:bottomRightRadius="15dp"
android:topLeftRadius="0.1dp"
android:topRightRadius="15dp" />
</shape>
</item>
<item android:left="5dp" android:top="2dp" android:bottom="2dp" android:right="2dp">
<shape android:shape="rectangle">
<gradient
android:type="radial"
android:centerX="150%"
android:centerY="50%"
android:startColor="#999999"
android:endColor="#eeeeee"
android:gradientRadius="100"/>
<corners
android:bottomLeftRadius="0.1dp"
android:bottomRightRadius="12dp"
android:topLeftRadius="0.1dp"
android:topRightRadius="12dp" />
</shape>
</item>
</layer-list>
ListView layout
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ListView
android:id="#+id/denko_station_list"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:layout_marginTop="50dp"
android:divider="#android:color/transparent"
android:dividerHeight="10dp" />
</RelativeLayout>
just add the following line in listview layout code:
android:listSelector="#android:color/transparent"
like below
<ListView
android:id="#+id/lvId"
android:layout_width="match_parent"
android:listSelector="#android:color/transparent"
android:layout_height="match_parent"/>
Set
android:listSelector="#android:color/transparent"
for your listView in xml file.
I have a ViewPager which contains a couple of Fragments which are available by swiping left/right. I want these Fragments to look like cards but I can't seem to get it right.
The fragment occupies the whole space and the shadow is surrounding the card. Instead I would like to have some padding between the fragment layout and the ViewPager one so when I scroll there would be some space between fragments. This is what I want it to look like more or less
This is my layout for the fragment:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
tools:context=".Main"
android:layout_marginLeft="25dp"
android:layout_marginRight="25dp"
android:layout_marginTop="35dp"
android:layout_marginBottom="35dp"
android:background="#drawable/bg_card"
>
<EditText
android:layout_marginTop="100dp"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:inputType="number" />
<EditText
android:layout_marginTop="150dp"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:inputType="number" />
<EditText
android:layout_marginTop="50dp"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:inputType="number" />
</RelativeLayout>
And this is the card drawable:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle"
android:dither="true">
<corners android:radius="2dp"/>
<solid android:color="#aaa" />
<padding android:bottom="8dp"
android:left="8dp"
android:right="8dp"
android:top="8dp" />
</shape>
</item>
<item android:bottom="2dp">
<shape android:shape="rectangle"
android:dither="true">
<corners android:radius="2dp" />
<solid android:color="#fff" />
<padding android:bottom="8dp"
android:left="8dp"
android:right="8dp"
android:top="8dp" />
</shape>
</item>
</layer-list>
Can anyone help me with this? Thanks!
You might be looking for CardView: http://developer.android.com/reference/android/support/v7/widget/CardView.html
https://developer.android.com/training/material/lists-cards.html#CardView
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>