I am an Android newbie trying to learn the UI side of things and it's doing my head in. Here's what I have right now:
breeds_listing.xml
<?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">
<ListView android:id="#+id/breedsListView"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:dividerHeight="0px" android:divider="#00000000"></ListView>
</LinearLayout>
breeds_listing_item.xml
<?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:background="#drawable/list_item_background"
android:orientation="horizontal" >
<TextView android:id="#+id/allbreeds_single_item"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:gravity="center_horizontal"></TextView>
</LinearLayout>
list_item_background.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#043402" />
<stroke android:width="3dp" color="#ffff8080" />
<corners android:radius="8dp" />
<padding android:left="10dp" android:top="10dp" android:right="10dp"
android:bottom="10dp" />
</shape>
What I am struggling to figure out is how do I style the selected item? At the moment the selected item has a ghastly orange background which, under the rounded green rectangle, gives an orange outline effect. I'm sure I have not done things in line with best practices so any suggestions or improvements would be greatly appreciated.
Many thanks,
D.
I do this :
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<shape >
<solid android:color="#929292" />
</shape>
</item>
<item>
<shape >
<solid android:color="#FFFFFF" />
</shape>
</item>
</selector>
So you can use this property android:state_pressed="true"
In my example, the cell background will only be white, and grey when pressed.
I hope it helps!
You have to use a StateListDrawable.
You can find an example for ListView items here.
If you want a certain color/drawable when the item is selected, use android:state_focused="true".
Related
I have a ListView. I want to set Border for the listView item so I use 'shape' xml.
shape_panel_drawable.xml file
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid android:color="#ffffff" />
<padding
android:bottom="8dp"
android:left="8dp"
android:right="8dp"
android:top="8dp" />
<stroke
android:width="1dp"
android:color="#dadada" />
<corners android:radius="8dp" />
</shape>
list_view_item.xml file
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/shape_panel_drawable" >
</RelativeLayout>
My issue is
If I use android:background="#drawable/shape_panel_drawable" - When I touch/press on a List item, I didn't see a Selected background color on the item. I see it if I remove 'background'.
Anyone has any ideas? Did I miss anything in order to be able to see selected background color if I use background drawable - 'shape_panel_drawable'?
Thank you!
Setting this on your ListView might help:
android:drawSelectorOnTop="true"
I want to create Check in Screen layout in android like this
please help me how can i create layout like this.
please somebody help me
First create two shapes, one for Default state of Button, second for pressed state:
default_shape.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<corners
android:radius="5dp"/>
<gradient
android:startColor="#ffd700"
android:endColor="#daa520"
android:angle="90"/>
</shape>
pressed_shape.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<corners
android:radius="5dp"/>
<gradient
android:startColor="#ffF8dc"
android:endColor="#daa520"
android:angle="90"/>
</shape>
then create a selector:
your_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/pressed_shape"
android:state_pressed="true" />
<item android:drawable="#drawable/default_shape"
android:state_pressed="false" />
<item android:drawable="#drawable/Default_shape" />
</selector>
and then give the selector to Your button as Background:
<?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:orientation="vertical" >
<Button
android:id="#+id/your_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/your_selector" />
</LinearLayout>
You could Play a Little bit with the Colors from the shape...this is just an example how to do it...
Add given file in to drawable folder and make changes for background color. use this as background of your TextView.<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:endColor="#color/something"
android:centerColor="#color/something_else"
android:startColor="#color/something_else_still"
android:angle="270" />
<corners
android:radius="3dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
I have a listactivity it should look like the following (ie listview with border and an arrow pointing upwards at right side of the listview),
So far i have the listview with border and rounded corners. But i have no idea how to add upward arrow at top right side.
My code:
list_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="#CCCCCC" />
<padding
android:bottom="3dp"
android:left="3dp"
android:right="3dp"
android:top="3dp" />
<corners android:radius="5dp" />
</shape>
</item>
</layer-list>
listborder.axml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="325dp"
android:layout_gravity="center_horizontal"
android:layout_marginTop="30dp"
android:background="#drawable/notification_list_border"
android:layout_height="300dp">
<ListView
android:id="#android:id/list"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:cacheColorHint="#00000000" />
</LinearLayout>
I tried to add arrow image in xml. But it isnt working
<item android:right="10dp">
<bitmap
android:src="#drawable/up_icon"
android:gravity="top|right" />
</item>
Please help,
Thanks.
I want to create a listView of cards, but after reading this blog post goolge-plus-layout, I'm cards are a viable solution for a list of anything. The animation part seems too memory intensive to load say a listview with more than 40 elements simultaneously.
Is there a better way to achieve a cards UI in listView?
You can create a custom drawable, and apply that to each of your listview elements.
I use this one for cards in my UI. I don't think there is significant performance issues with this approach.
The drawable code (in drawable\big_card.xml) looks like this:
<?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="#color/second_grey" />
</shape>
</item>
<item
android:bottom="10dp"
android:left="10dp"
android:right="10dp"
android:top="10dp">
<shape android:shape="rectangle" >
<corners android:radius="3dp" />
<solid android:color="#color/card_shadow" />
</shape>
</item>
<item
android:bottom="12dp"
android:left="10dp"
android:right="10dp"
android:top="10dp">
<shape android:shape="rectangle" >
<corners android:radius="3dp" />
<solid android:color="#color/card_white" />
</shape>
</item>
</layer-list>
I apply the background to my listview elements like this:
<ListView
android:id="#+id/apps_fragment_list"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:listSelector="#drawable/big_card" />
If you want to add this as a background to any View (not just a list), you just make the custom drawable that View's background element:
<TextView
android:id="#+id/any_view"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/big_card" />
EDIT: Google provides a nice class called CardView. I didn't check it but it looks promising.
Here's the previous way, which also works fine (that's what I wrote before the edit) :
There is a nice tutorial here and a nice sample of it here .
in short , these are the files you can create:
listView definition:
android:divider="#null"
android:dividerHeight="10dp"
android:listSelector="#android:color/transparent"
android:cacheColorHint="#android:color/transparent"
android:headerDividersEnabled="true"
android:footerDividersEnabled="true"
also this:
m_list.addHeaderView(new View(this));
m_list.addFooterView(new View(this));
res/drawable/selector_card_background.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_pressed="true"
android:drawable="#drawable/layer_card_background_selected" />
<item android:drawable="#drawable/layer_card_background" />
</selector>
listView item :
res/layout/list_item_card.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="15dp"
android:paddingRight="15dp"
android:descendantFocusability="beforeDescendants">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="15dp"
android:paddingTop="15dp"
android:paddingBottom="15dp"
android:paddingRight="15dp"
android:background="#drawable/selector_card_background"
android:descendantFocusability="afterDescendants">
<TextView
android:id="#+id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView
android:id="#+id/text2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView
android:id="#+id/text3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
</FrameLayout>
res/drawable/layer_card_background_selected.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="#CABBBBBB"/>
<corners android:radius="2dp" />
</shape>
</item>
<item
android:left="0dp"
android:right="0dp"
android:top="0dp"
android:bottom="2dp">
<shape android:shape="rectangle">
<solid android:color="#CCCCCC"/>
<corners android:radius="2dp" />
</shape>
</item>
</layer-list>
res/drawable/layer_card_background.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="#CABBBBBB"/>
<corners android:radius="2dp" />
</shape>
</item>
<item
android:left="0dp"
android:right="0dp"
android:top="0dp"
android:bottom="2dp">
<shape android:shape="rectangle">
<solid android:color="#android:color/white"/>
<corners android:radius="2dp" />
</shape>
</item>
</layer-list>
If all you want is a ListView that simulates the cards-look you can use a 9-patch as background for your listitems to make them look like cards. You can find a 9-patch and some more tips and explanation here: http://www.tiemenschut.com/simply-get-cards-ui-look/
Add divider for the Listview item and padding :
android:divider="#android:color/transparent"
android:dividerHeight="1dip"
Add RelativeLayout into your LinearLayout for ListItem with some desired padding :
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="100dp"
android:orientation="vertical"
android:padding="3dp" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/rowshadow" >
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
...
Add Background to the listview item , like :
<?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="0dp"/>
</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="0dp"/>
</shape>
</item>
</layer-list>
Use https://github.com/elcrion/demo.cardlistview as an example. It is somehow close to google style
As "android developer" briefly mentions in his answer, the CardView class can be used to easily create card views.
Just wrap you UI widgets in a CardView element and you are ready to go. See the short introduction to the CardView widget at https://developer.android.com/training/material/lists-cards.html#CardView.
The CardView class requires a v7 support library, remember to add the dependencies to your .gradle file!
compile 'com.android.support:cardview-v7:21.0.+'
I'm trying to define a nice rounded corner square shape in Android, but I can only get a nice rounded corner rectangle.
My xml in /res/drawable looks like this:
<?xml version="1.0" encoding="utf-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res/uk.co.alexlydiate.sequencer">
<item android:state_pressed="true"
app:state_playing = "true" >
<shape>
<stroke
android:width="2dp"
android:color="#color/red" />
<corners
android:radius="3dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
<solid
android:color="#color/blue" />
<size
android:width="3dp"
android:height="3dp" />
</shape>
</item>
</selector>
And all works fine except
<size android:width="3dp" android:height="3dp" />
Which I'd have hoped made the thing square, but no such luck.
My layout looks like this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/grid8x8"
android:gravity="center"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<uk.co.alexlydiate.sequencer.Key android:background="#drawable/key"
android:id="#+id/keyA1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1" android:layout_margin="2px"
/>
<uk.co.alexlydiate.sequencer.Key android:background="#drawable/key"
android:id="#+id/keyA2"
android:layout_below="#+id/keyA1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1" android:layout_margin="2px"
/>
</RelativeLayout>
Anybody got any bright ideas? Thanks!
AFAIK: shapes stretch themselves according to the View's layout.
Instead you can define the Square View and set shape background.
OR
Use an Image as background