I have been searching for the straight answer to this question for quite some time now. What I want to know is how to implement a custom highlight on a ListView that will only hightlight (over top, preferably) a sub layout of the ListView item (in this case, I'm looking to highlight the RelativeLayout of the item).
Here is a screen shot of what I've got going on:Fail
Here is the code for list_item.xml:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="72dp"
android:clickable="false">
<RelativeLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"
android:background="#drawable/card_layout">
<LinearLayout android:id="#+id/linearLayout_thumbnail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center_vertical">
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:id="#+id/imageView_thumbnail"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="50dp"
android:orientation="vertical"
android:layout_toRightOf="#+id/linearLayout_thumbnail"
android:gravity="center_vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textView_title"
android:paddingLeft="5dp"
android:textSize="18dp"
android:text="SOME TEXT" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textView_subtitle"
android:paddingLeft="5dp"
android:textSize="12dp" />
</LinearLayout>
<TextView
android:id="#+id/textView_other"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="12dp"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"/>
</RelativeLayout>
</FrameLayout>
And the code for the ListView for that picture:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#e5e5e5">
<ListView android:id="#+id/listView_something"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:divider="#android:color/transparent"
android:dividerHeight="0dp"
android:listSelector="#drawable/list_item_selector"
android:drawSelectorOnTop="true"/>
</LinearLayout>
The code for list_item_selector.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/list_item_selected" android:state_pressed="true"/>
<item android:drawable="#android:color/transparent" android:state_focused="true"/>
<item android:drawable="#android:color/transparent"/>
</selector>
Here's the file for the card_layout.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="7dp"
android:left="5dp"
android:right="5dp"
android:top="5dp" />
</shape>
</item>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/list_item_selected" android:state_pressed="true"/>
<item android:drawable="#android:color/transparent" android:state_focused="true"/>
<item android:drawable="#android:color/transparent"/>
</selector>
Here's what happens when I switch the RelativeLayout's background to the selector that the ListView is using, and change the ListView so that it's selector is transparent: Sort of working
So for whatever reason, the card_layout.xml file isn't allowed to have the two items before the selector information and everything goes weird. Can anyone tell me how this is properly implemented? Like Google Play Music (This might not be the best example because it looks like a GridView or something along those lines)
Do I have to implement a GridView to display this list?
I found a solution, I don't know if it's the best solution, but it got what I wanted done.
Put simply, I've found that adding the selector code inside the card_layout.xml file does not work. What you should do is create a layout xml file for each state that you wish to implement on the button or list item and embed that layout in the selector itself, like in the answer for this SO post here: Android Using layer-list for button selector.
Since I didn't want to bother finding out colors and transparencies I would need to implement the background for three different states I've basically placed a RelativeLayout which lies over top of the entire list item to act as the select-able part of the item.
The code for this is here:
<?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="72dp">
<RelativeLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"
android:background="#drawable/card_layout">
<LinearLayout android:id="#+id/linearLayout_thumbnail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center_vertical">
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:id="#+id/imageView_thumbnail"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="50dp"
android:orientation="vertical"
android:layout_toRightOf="#+id/linearLayout_thumbnail"
android:gravity="center_vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textView_title"
android:paddingLeft="5dp"
android:textSize="18dp"
android:text="SOME TEXT" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textView_subtitle"
android:paddingLeft="5dp"
android:textSize="12dp"
android:text="SOME TEXT" />
</LinearLayout>
<TextView
android:id="#+id/textView_extra"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingRight="12dp"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"/>
</RelativeLayout>
<RelativeLayout
android:layout_height="match_parent"
android:layout_width="match_parent"
android:background="#drawable/list_item_selector"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"/>
</FrameLayout>
So, now this is working, screenshot here:
Related
I am very new to android and trying to create a design like this in xml.
I was able to create the left most portion of the design which has circle within a circle and a textview.
Following are the files i have created for the above.
/drawable/design_circle.xml
<?xml version="1.0" encoding="utf-8"?><layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:top="6dp"
android:right="6dp"
android:bottom="6dp"
android:left="6dp">
<shape
android:shape="oval">
<stroke
android:width="1dp"
android:color="#78d9ff"/>
</shape>
</item>
<item>
<shape
android:shape="oval">
<stroke android:width="4dp"
android:color="#78d9ff"/>
</shape>
</item>
/layout/view.xml
<?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"
xmlns:app="http://schemas.android.com/apk/res-auto">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="150dp"
android:layout_gravity="center"
>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<TextView
android:id="#+id/ec_txtDate"
android:layout_width="120dp"
android:layout_height="120dp"
android:background="#drawable/design_circle"
android:text="09"
android:textAlignment="center"
android:gravity="center_vertical"
android:textStyle="bold"
android:textSize="50dp"/>
</RelativeLayout>
</android.support.v7.widget.CardView>
But i am not able to create * OCTOBER * section of the design which has to adjacent to the circle. Thank you in advance.
If you don't want to give clicks on each of that sub sections use the image instead.You completed the left side, when looking i think you will be expecting click on the circle so make the image into two give an image view right of the shape you created
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="150dp"
android:layout_gravity="center"
>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"//give this to align the objects in this view center alignment
android:orientation="vertical"//remove this because it is not relevant for a relative layout but relevant for linearlayout>
<TextView
android:id="#+id/ec_txtDate"
android:layout_width="120dp"
android:layout_height="120dp"
android:background="#drawable/design_circle"
android:text="09"
android:textAlignment="center"
android:gravity="center_vertical"
android:textStyle="bold"
android:textSize="50dp"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toRightOf="#+id/"ec_txtDate
android:src="#drawable/your_image.png" />
</RelativeLayout>
</android.support.v7.widget.CardView>
I created a layout file using a switch. Now I want to change shape of its selector.Also I want to remove text on this switch.
Currently it has a rectangular shape . I want to change it to a circular shape.
This is my layout file ,
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/activity_remind_me"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="com.example.pvt.RemindMeActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="3">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/remind_me_head_txt"
android:layout_marginTop="5dp"
android:textSize="20sp"
android:text="Example one"
android:textStyle="bold"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="120dp"
android:layout_weight="1">
<Switch
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:showText="false"
android:id="#+id/remind_me_switch"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_weight="1">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:id="#+id/remind_me_list_img"
android:src="#drawable/list_menu" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/remind_me_title_txt"
android:text="Sample Head"
android:textSize="12sp"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/remind_me_content_txt"
android:text="Content"
android:textSize="12sp"/>
</LinearLayout>
</LinearLayout>
Currently I have no idea about how to achieve this.
Can we change the shape of a switch ? Is it possible ?
These shape changes according to devices, for instance it will appear rectangular in Redmi Note and circular in Moto .
Although, In order to achieve this you can have a toggle implementation such as below :
Having three styles :
offToggle ( Style Off )
onToggle ( Style On )
custom_toggle ( Style Custom Toggle )
Style Off
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval"
android:visible="true">
<solid android:color="#android:color/holo_blue_dark" />
</shape>
Style On
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval"
android:visible="true">
<solid android:color="#android:color/black" />
</shape>
Now the collective style which we will use in our layout Style Custom Toggle
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/offToggle" android:state_enabled="false"/>
<item android:drawable="#drawable/onToggle" android:state_pressed="true"/>
<item android:drawable="#drawable/onToggle" android:state_checked="true"/>
<item android:drawable="#drawable/onToggle" android:state_focused="true"/>
<item android:drawable="#drawable/offToggle"/>
</selector>
Now just use this style in your layout, for instance :
<ToggleButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textOn=""
android:textOff=""
android:background="#drawable/custom_toggle" />
Tip : To remove text from switch/Toggle use android:textOn="" android:textOff="" .
Use any shapes and styles u like for switch in android
This library will help u a lot
SwitchButton
I am building a page with a Linearlayout and numerous elements within it. At the bottom of the screen, I want to add a line, separating the "footer". How can this be achieved? I was thinking for something as a TextView, and the line to be the text added, but am sure there is a better way to be done. Thanks!
just add a view with specify background into the xml layout like below:
<View
android:layout_width="match_parent"
android:layout_height="0.5dp"
android:background="#android:color/darker_gray"/>
use this xml for your purpose ...... It just example ....
<?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">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="5">
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!" />
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#000"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Footer" />
</LinearLayout>
</LinearLayout>
Note:- 2nd Linear layout is For main content .... 3rd Linear layout for footer .....
output of above xml ..
To Seperate Footer from the Container you can add line as a Seperator. But I can give better approach you have to add Shadow to the LinearLayout it will make sense that your Main Container and Footer will be seperate.
My Approach.
footer.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="60dp"
android:background="#drawable/linearlayout_upper_shadow"
android:layout_alignParentBottom="true">
<LinearLayout
android:id="#+id/below_linear_layout"
android:layout_width="0.0dp"
android:layout_height="match_parent"
android:layout_weight="50.0"
android:orientation="vertical"
android:weightSum="1">
<TextView
android:layout_width="wrap_content"
android:layout_height="0.0dp"
android:layout_marginLeft="#dimen/normal_margin15"
android:layout_marginTop="#dimen/normal_margin5"
android:layout_weight="0.50"
android:text="$1,605"
android:textSize="#dimen/textsize20"
android:textColor="#color/black1" />
<TextView
android:layout_width="wrap_content"
android:layout_height="0.0dp"
android:layout_marginLeft="#dimen/normal_margin15"
android:layout_weight="0.50"
android:text="View price detail"
android:textColor="#color/colorPrimary"
android:textSize="#dimen/textsize13"
android:layout_marginTop="-5dp" />
</LinearLayout>
<Button
android:id="#+id/continue_button"
android:layout_width="0.0dip"
android:layout_height="match_parent"
android:layout_margin="#dimen/normal_margin8"
android:layout_weight="50.0"
android:background="#color/colorPrimary"
android:gravity="center"
android:text="#string/continue_string"
android:textColor="#color/white1"
android:textSize="#dimen/textsize13" />
</LinearLayout>
for separator.
separator.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="#color/linear_layout_shadow"/>
/>
</shape>
</item>
<item
android:left="0dp"
android:right="0dp"
android:top="1dp"
android:bottom="0dp">
<shape android:shape="rectangle">
<solid android:color="#android:color/white"/>
<corners android:radius="2dp" />
</shape>
</item>
</layer-list>
OutPut :
Please see the layout below. I want to show a selection highlight on the entire LinearLayout if the user touches the ImageView or preferably entire layout. This is like a onclick effect. Although I have a selector its not working. How can I make this work?
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:background="#drawable/layout_selector"
android:orientation="vertical">
<ImageView
android:id="#+id/btnFromEasy"
android:layout_width="#dimen/normal_button_size"
android:layout_height="#dimen/normal_button_size"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:src="#drawable/animals" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:text="#string/easy"
android:textColor="#color/subtitle_text_color"
android:textSize="#dimen/text_size_small"
android:textStyle="bold" />
</LinearLayout>
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<color android:color="Blue" />
</item>
<item>
<color android:color="White" />
</item>
</selector>
Try this simple code.
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
android:drawable="#drawable/background_image_pressed" /> // image
<item
android:drawable="#drawable/background_image_default" /> // image
</selector>
and inside LinearLayout add android:clickable="true"
<LinearLayout
...
android:clickable="true"
...>
Hope this help.
Add android:clickable="true" to properties of LinearLayout and it work
Your code:
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:background="#drawable/layout_selector"
android:orientation="vertical">
-> add
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:background="#drawable/layout_selector"
android:orientation="vertical"
android:clickable="true">
Line android:layout_width="0dp" makes the layout can't be visible so I change it to "wrap_content"
I use this code for making this layout.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="20dp"
android:background="#android:color/transparent">
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_centerInParent="true"
android:background="#drawable/rounded_white_bg">
<EditText
android:id="#+id/login"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:background="#drawable/dialog_edittex"
android:layout_margin="10dp"/>
<EditText
android:id="#+id/password"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:layout_margin="10dp"
android:background="#drawable/dialog_edittex"/>
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:textColor="#android:color/black"
android:text="AAAAAAAAAAAA"
android:layout_gravity="center"
android:textSize="20sp"
/>
<ImageView
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:src="#drawable/dialog_button_bg"/>
</LinearLayout>
</RelativeLayout>
rouded_whiite.bg.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#ffffff" />
<corners
android:radius="20dp"/>
</shape>
But when I do this I have see this result. As you can see there is some margin below of red button. I didn't set any margin or something but there is some space there. What should I do here for getting exact result as in fist image.
Remove the margin from your RelativeLayout and make your LinearLayout gravity android:layout_centerHorizontal="true"
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/transparent">
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_centerHorizontal="true"
android:background="#drawable/rounded_white_bg">
Use :
android:layout_centerHorizontal="true"
instead of
android:layout_centerInParent="true"
and remove margin from bottom...
<LinearLayout
android:layout_height="wrap_content"
it is because of this. remove the imageview from the linear layout and set in the relative layout and give property as alignparent bottom and for the linear layout give alignparent top and above the image view property,
Try This
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="20dp"
android:background="#android:color/transparent">
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:orientation="vertical"
android:background="#drawable/rounded_white_bg">
<EditText
android:id="#+id/login"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:background="#drawable/dialog_edittex"
android:layout_margin="10dp"/>
<EditText
android:id="#+id/password"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:layout_margin="10dp"
android:background="#drawable/dialog_edittex"/>
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:textColor="#android:color/black"
android:text="AAAAAAAAAAAA"
android:layout_gravity="center"
android:textSize="20sp"
/>
<ImageView
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:src="#drawable/dialog_button_bg"/>
</LinearLayout>
</RelativeLayout>
If your using drawable for imageview as .png or .jpg use the following drawable for your image may be it would help. save this as backgroung_bg.xml or anything else as you wish
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item >
<shape >
<corners android:bottomLeftRadius="20dp"
android:bottomRightRadius="20dp"
android:topLeftRadius="0dp"
android:topRightRadius="0dp"/>
<solid android:color="#CF4647"/>
<padding android:left="5dp"
android:top="5dp"
android:right="5dp"
android:bottom="5dp"/>
</shape>
</item>
when you apply this you would get following warning just ignore and run it. if you need gradient type of color ask me
The graphics preview in the layout editor may not be accurate:
Different corner sizes are not supported in Path.addRoundRect. (Ignore for this session)