Develop Reference

How to change the shape of a switch in android

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

How do I put a background under a transparent ListView?

right now what I have is just a listview with a custom gradient as the background color. When I have 2 items in my list, the rest of the background beneath it is just all black. I can't set a background image anywhere that would make a background show up. My desired outcome is to have a background image in the back of the entire view where a transparent listview would overlay it. How could this be done? Let me know if you guys need more info/code from my project.
Thanks!
This is my listview in main.xml
<ListView
android:id="#+id/store_list2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/store_div2"
android:divider="#000000"
android:dividerHeight="1dp"
android:listSelector="#drawable/list_selector"/>
This is the list_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_selected="false"
android:state_pressed="false"
android:drawable="#drawable/gradient_bg" />
<item android:state_pressed="true"
android:drawable="#drawable/gradient_bg_hover" />
<item android:state_selected="true"
android:state_pressed="false"
android:drawable="#drawable/gradient_bg_hover" />
</selector>
this is my list_row.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/list_selector"
android:orientation="horizontal"
android:padding="10dp" >
<!-- Application Icon -->
<LinearLayout
android:id="#+id/gmg_thumbnail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="3dp"
android:layout_alignParentLeft="true"
android:background="#drawable/image_bg"
android:layout_marginRight="5dp">
<ImageView
android:id="#+id/gmg_list_image"
android:layout_width="50dp"
android:layout_height="50dp" />
</LinearLayout>
<!-- Title-->
<TextView
android:id="#+id/gmg_title"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:paddingLeft="10dp"
android:layout_toRightOf="#id/gmg_thumbnail"
android:textColor="#040404"
android:typeface="sans"
android:textSize="15sp" />
<!-- Rightend Arrow -->
<ImageView
android:contentDescription="#string/right_arrow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/scaled_arrow"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"/>
</RelativeLayout>

Set your desired background on the Parent Layout containing ListView.
android:background="#drawable/ic_launcher"
Like this (Assuming RelativeLayout is yout parent 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:background="#drawable/ic_launcher" >
<ListView
android:id="#+id/store_list2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/store_div2"
android:divider="#000000"
android:dividerHeight="1dp"
android:listSelector="#drawable/list_selector"/>
</RelativeLayout>

Add this property android:cacheColorHint="#00000000" to ListView

Add semi-transparent overlay to activity backround at runtime

I have an app that i set the background to an image from xml. I get the view by calling
setContentView(R.)
.
How can i place a semi-transparent overlay on this background at runtime depending on a condition. I would like to have a red overlay with its alpha set to 50%.
I have tried creating a seperate xml file with the view duplicated and a different image/overlay but its messy as i have to inflate all the buttons/textview when i use the new view.
thanks matt
[edit1]
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<LinearLayout android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/carefreebgscaledlighting"
android:orientation="vertical" xmlns:android="http://schemas.android.com/apk/res/android">
<TextView
android:id="#+id/textviewcompanyname"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#003F87" />
<TextView
android:id="#+id/textViewYouAreSignedIn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_alignParentTop="true"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#003F87"
/>
<TextView
android:id="#+id/textViewUnsentTransactions"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_below="#id/textViewYouAreSignedIn"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#003F87"
/>
[edit2]
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<RelativeLayout
android:id="#+id/transparentOverlay"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#color/red_transparent" >
<LinearLayout android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/carefreebgscaledlighting"
android:orientation="vertical" xmlns:android="http://schemas.android.com/apk/res/android">
<TextView
android:id="#+id/textviewcompanyname"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#003F87" />
<TextView
android:id="#+id/textViewYouAreSignedIn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_alignParentTop="true"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#003F87"
/>
[edit3]
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<LinearLayout
android:id="#+id/ll1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/carefreebgscaledlighting"
android:orientation="vertical" xmlns:android="http://schemas.android.com/apk/res/android">
<TextView
android:id="#+id/textviewcompanyname"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#003F87" />
.
if(status.equalsIgnoreCase(IN)){
youAreSignedInAt.setText("You are signed in at " + name);
LinearLayout layout =(LinearLayout)findViewById(R.id.ll1);
layout.setBackgroundResource(R.drawable.carefreebgscaledlightingred);
}else{
youAreSignedInAt.setText("You are not signed in");
LinearLayout layout =(LinearLayout)findViewById(R.id.ll1);
layout.setBackgroundResource(R.drawable.carefreebgscaledlighting);
}

Off the top of my head, you could declare the background color including alpha component in a resource file (i.e. colors.xml)
<color name="red_transparent">#66FF0000</color>
And then put a view (i.e. RelativeLayout), on top of the rest of the views.-
<RelativeLayout 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" >
<!-- All your views -->
<!-- Transparent layer -->
<RelativeLayout
android:id="#+id/transparentOverlay"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/red_transparent" />
</RelativeLayout>
All you need to do is changing visibility of R.id.transparentOverlay as you desire.

ListSelector on Listview not working

I have my custom listselector like this :
<?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/bg_list_hover"></item>
<item
android:state_focused="true"
android:drawable="#drawable/bg_list"></item>
</selector>
and my listview :
<?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"
android:background="#drawable/bg_dasar" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="StoreCategory"
android:textSize="15sp"
android:paddingLeft="10dip"
android:paddingTop="10dip"
android:paddingRight="10dip"
android:textColor="#color/textcolor"/>
<ListView
android:id="#+id/listView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dip"
android:listSelector="#drawable/listselector">
</ListView>
my problem is, when i do not click on listview, listview item do not use focused state background (#drawable/bg_list) ...
any one can help me please???

For those still need it: The key is to set the listSelector as background for the list item!
<?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:background="#819FF7"
android:orientation="vertical" >
<ListView
android:id="#+id/mainList"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:cacheColorHint="#819FF7"
/>
</LinearLayout>
list_item.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/lineItem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/list_selector">
<ImageView android:id="#+id/imageView"
android:layout_width="96dp"
android:layout_height="64dp"
android:layout_centerVertical="true"
android:layout_alignParentLeft="true"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp" />
<TextView
android:id="#+id/textView"
android:layout_toRightOf="#+id/imageView"
android:layout_height="wrap_content"
android:layout_marginLeft="10dip"
android:layout_centerVertical="true"
android:textSize="18sp"
android:textColor="#ff000000"
android:layout_width="wrap_content"
/>
<Button
android:id="#+id/button"
android:gravity="center"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_centerVertical="true"
android:layout_marginRight="10dp"
android:layout_alignParentRight="true"
android:focusable="false"
android:text="Delete" />
</RelativeLayout>

I have solved my problem, by read some reference..
my listselector should be like this :
<?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/bg_list_hover" />
<item
android:drawable="#drawable/bg_list" />
</selector>
my listview 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"
android:background="#drawable/bg_dasar" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="StoreCategory"
android:textSize="15sp"
android:paddingLeft="10dip"
android:paddingTop="10dip"
android:paddingRight="10dip"
android:textColor="#color/textcolor"/>
<ListView
android:id="#+id/listView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dip"
**android:listSelector="#android:color/transparent"**>
</ListView>
</LinearLayout>
and my also adding my list selector into my list item background :
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="55dip"
android:orientation="horizontal"
android:padding="15dip"
android:gravity="center_vertical"
**android:background="#drawable/listselector"**>
<ImageView
android:id="#+id/imageViewlogo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="10dip" />
<TextView
android:id="#+id/textViewcategory"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
android:textColor="#color/textcolor"
android:textSize="15sp"/>
</LinearLayout>
thankyou for Jay & danwilkie for answer my question..
:))

Have you tried calling "requestFocus()" on the listView in your code after setting android:focusable="true" in the xml? From the View docs:
"Call this to try to give focus to a specific view or to one of its descendants. A view will not actually take focus if it is not focusable (isFocusable() returns false), or if it is focusable and it is not focusable in touch mode (isFocusableInTouchMode()) while the device is in touch mode. See also focusSearch(int), which is what you call to say that you have focus, and you want your parent to look for the next one. This is equivalent to calling requestFocus(int, Rect) with arguments FOCUS_DOWN and null."

It looks like your selector xml at the moment is saying to use bg_list_hover when you click on an item, and bg_list when you focus on an item (using a trackball, for example).
If you want to use a custom drawable in the default case when the item is neither clicked nor focused, you need to add an entry for that:
I would use something like this:
<?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/bg_list_pressed"></item>
<item
android:state_focused="true"
android:drawable="#drawable/bg_list_focused"></item>
<item
android:drawable="#drawable/bg_list"></item>
</selector>

Button with custom XML layout

Is it possible to create a button with a custom xml layout?
I have this layout:
<?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="wrap_content"
android:padding="1dp"
android:background="#7e7e7e">
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="10dp"
android:background="#f9f9f9">
<TextView
android:id="#+id/TextView01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:text="ButtText"
android:textColor="#000000">
</TextView>
<ImageView
android:id="#+id/ImageView01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/arrow"
android:layout_alignParentRight="true">
</ImageView>
</RelativeLayout>
</LinearLayout>
Now I want to use this on a button. Anyone know how I can do this?
I was thinking if I had Button.java file that extended Button. And then setView(R.layout.mylayout.xml); ... but that was to easy, and it clearly not working
Regards Martin

I've been dealing with this recently because I wanted to put two textviews in a button. You have to choose:
Extend Button class and use it in your layout
Use a Layout insted of a button and drag inside everithing you need and make it clickable by adding this parametter to it:
android:clickable="true"
After that you can modify te apperance of your layout by defining the
android:background="#drawable/my_background"
to give to it a "button-like" face and behavior
/res/drawable/mi_background.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true" android:drawable="#color/black"/>
<item android:state_pressed="true" android:state_enabled="false" android:drawable="#color/black" />
<item android:drawable="#color/white"/>
</selector>

You cannot literally use that layout on the face of a Button. You can achieve a similar look using the android:drawableRight property on a Button, though.

You can use a RelativeLayout to simply overlay your custom button view on top of a real Button like this:
<?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">
<Button
android:id="#+id/button1"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<!-- Your custom button layout -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#7e7e7e"
android:padding="1dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#f9f9f9"
android:padding="10dp">
<TextView
android:id="#+id/TextView01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:text="ButtText"
android:textColor="#000000" />
<ImageView
android:id="#+id/ImageView01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:background="#drawable/jobs_menu" />
</RelativeLayout>
</LinearLayout>
</RelativeLayout>