ListView Item doesnt change Visual in Background - android

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

Custom layout using layer-list xml not exactly

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>

Rounded Corner Bottom TextView inside CardView

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.

Android rounded corners in rectangles have ugly edges that show up when pressed

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.

Android: design fragments as cards

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

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>

Categories

Resources