I want to apply custom check box design. I followed this post How to apply custom image to checkbox in android, but unfortunately it didn't work for me (in preview screen and also on physical device, I see gray square, which becomes lighter gray on checking). Here is my code:
File where I am applying custom checkbox design (see CheckBox definition) category_spinner_dropdown_item.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<CheckBox
android:id="#+id/categorySpinnerDropdownItemCheckBox"
android:layout_width="35dp"
android:layout_height="20dp"
android:button="#drawable/custom_checkbox_selector"
android:background="#android:color/transparent"/>
<TextView
android:id="#+id/categorySpinnerDropdownItemTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:textAppearance="#style/toolbar_text_white"/>
</LinearLayout>
<Space
android:layout_width="match_parent"
android:layout_height="7dp"/>
</LinearLayout>
Here is definition of selector: custom_check_box_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/custom_checkbox"
android:state_checked="false"/>
<item android:drawable="#drawable/custom_checkbox_checked"
android:state_checked="true"/>
<item android:drawable="#drawable/custom_checkbox"/>
</selector>
Here are custom_checkbox and custom_checkbox_checked
What am I doing wrong? Thanks!
Solution that works for me is usage of
<androidx.appcompat.widget.AppCompatCheckBox
instead of regular CheckBox. I left everything else unchanged.
Related
I'm using an image view like a button but one of image didn't show up when I tried to create an xml fie in the drawable folder to change the image of the button when pressed
xml layout file:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
//the button below don't appear
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content" app:srcCompat="#drawable/boutton_animation"
android:id="#+id/play_button"
android:layout_marginStart="61dp"
android:layout_alignStart="#+id/play_bg"
android:layout_alignTop="#+id/play_bg"
android:layout_marginTop="320dp" android:layout_marginEnd="542dp" android:layout_alignEnd="#+id/play_bg"
android:scaleType="fitXY" android:layout_marginBottom="33dp" android:layout_alignBottom="#+id/play_bg"
android:visibility="visible"/>
</RelativeLayout>
xml file of the image of the button:
<?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/boutton_animation_2" /> <!-- pressed -->
<item android:drawable="#drawable/boutton_animation_1" /> <!-- default -->
</selector>
I didn't have error messages and the only thing I expected is the button to appear on the device
You are not seeing your image because you are using fixed sizes on your view.
Different phones got different screen size, in your layout you are using fixed size on your view (fixed size is android:layout_marginStart="61dp" for example) and the result is that what may look good on one screen (your android studio preview screen) will not look good on another screen (your actual phone).
If you want to see your image the same way on every device you can use ConstraintLayout like this:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
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:layoutDirection="ltr"
android:orientation="vertical">
<ImageView
android:id="#+id/play_button"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHeight_percent=".5"
app:layout_constraintWidth_percent=".5"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:scaleType="fitXY"
app:srcCompat="#drawable/rose" />
</android.support.constraint.ConstraintLayout>
If you want to change your image size just change those attributes values:
app:layout_constraintHeight_percent
app:layout_constraintWidth_percent
I'm trying to use a list view control on Lollipop under the following conditions:
The theme type is the default Theme.Material (dark theme).
The list view is contained inside of larger layout which has a white background.
The list view should have a list selector that appears with the white background.
NOTE: I am forced to use a custom list selector color because if I use a white background, the dark material themed selector uses the theme's colorControlHighlight color for the ripple, which is 40ffffff, and does not show up.
I first tried the following:
layout xml
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="#android:color/white" >
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<ListView
android:id="#+id/list_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:listSelector="#drawable/list_selector" />
</LinearLayout>
list_selector xml
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#ff0000" >
</ripple>
And list view row xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:gravity="center_vertical"
android:orientation="horizontal"
tools:ignore="UseCompoundDrawables" >
<ImageView
android:id="#+id/list_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/list_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
What I am expecting to see is when I select an item, the item is selected with a ripple colored as #ff0000. However, this is what I end up seeing:
What I am hoping for is somewhat close to this behavior - but confined within the selected list row! What am I doing wrong?
Thanks,
Zach
You're using an unbounded ripple, e.g. a ripple with no content or mask layer, so the ripple is projecting onto the background of its parent ListView. You should set a mask layer to constrain the ripple bounds.
res/drawable/my_list_selector.xml:
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?attr/colorControlHighlight">
<item android:id="#android:id/mask">
<color android:color="#color/white" />
</item>
</ripple>
Standard ListView selector in android L developer preview uses colorControlHighlight for the ripple effect on touch and has a transparent background in unfocused state.
I would like to define a ListView item that has a colored background and still shows the ripple effect on touch with the same highlight color. Now, if I define the following drawable:
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?android:colorControlHighlight">
<item android:drawable="#color/my_background_color"/>
</ripple>
it works, but the ripple starts in the middle of the ListView item, regardless of the touch position. If I use the same background outside of the ListView, e.g. for a LinearLayout, it works like expected (the ripple starts on the touch position).
I've managed to get individually colored list items while maintaining the ripple effect. Set the background of your list items using whatever adapter you have and set the listview to show the selector on top:
<ListView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:drawSelectorOnTop="true" />
This will draw the ripple effect above the background.
As far as I can tell this bug is only in Android 5.0, not 5.1. The trick seems to be to use Drawable#setHotspot as a Google dev hints to here https://twitter.com/crafty/status/561768446149410816 (because obscure twitter hints are a great form of documentation!)
Assume you have a row layout something like this
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/row_content"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="?attr/selectableItemBackground">
.... content here .....
</LinearLayout>
</FrameLayout>
The following worked for me
row.setOnTouchListener(new View.OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent event) {
v.findViewById(R.id.row_content)
.getBackground()
.setHotspot(event.getX(), event.getY());
return(false);
}
});
I've found that it only seems to work correctly if you apply the background to the root element of the list item.
Also, consider using the new RecyclerView instead of a ListView
List item view example:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/list_padding"
android:layout_marginLeft="#dimen/list_padding"
android:layout_marginRight="#dimen/list_padding"
android:padding="#dimen/list_padding"
android:background="#drawable/ripple_bg">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Large Text"
android:id="#+id/tvTitle"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Small Text"
android:id="#+id/tvSubtitle" />
</RelativeLayout>
i adapted #ArhatBaid 's answer a littlebit, tested it and it works perfectly:
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?android:colorControlHighlight">
<item android:drawable="#color/light_grey_header_navigation_drawer"/>
</ripple>
So, this allows you to set a background color and still have the ripple effect.
for me target and minSdk are 21.
The sample layout, which contains the Ripple effect as Background of the the parent layout.
<RelativeLayout
android:id="#+id/id4"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/ripple_effect"
android:clickable="true">
<ImageView
android:id="#+id/id3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:background="#drawable/image"
android:layout_centerVertical="true"/>
<LinearLayout
android:id="#+id/id2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_alignParentRight="true"
android:layout_centerVertical="true">
<TextView
android:id="#+id/id1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/text"/>
</LinearLayout>
</RelativeLayout>
Ripple_effect.xml
Here you can use any colour of you choice.
Make sure that you use sdk version 21 and have drawable-v21 and style-v21 folder and put all the file related to v21 in them.
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?android:colorControlHighlight">
<item android:id="#android:id/mask">
<shape android:shape="oval">
<solid android:color="?android:colorAccent" />
</shape>
</item>
Here you can use different shape like rectangle instead of oval...
You can achieve this with a nested Layout. Just create e.g. a LinearLayout as root layout around your existing layout, set the ripple effect on the root layout and your background color to the nested one.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/ripple_effect"
android:orientation="vertical">
<RelativeLayout xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/containterContent"
android:background="#color/yourCOLOR"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- Your content -->
</RelativeLayout>
</LinearLayout>
I am working with android app..I created a web view.Now I want to add top and bottom menu bar like header and footer to my app.. my app start with a splash screen..then followed by web view .how can I add these menu to top and bottom of these web view..??? please help me and thanks.
here is my 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="fill_parent"
android:id="#+id/layout"
>
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="center"
android:src="#drawable/appinc"
android:visibility="visible"
/>
<WebView android:id="#+id/webview"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:visibility="gone"
/>
<ProgressBar
android:id="#+id/progressBar1"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_marginBottom="114dp" />
</RelativeLayout>
If you are taking about option menu no you cannot change position of menus. See this: https://stackoverflow.com/a/8236188/2741586
However you can actually split you action bar(in 4.0+ versions or older usingmActionBarSherlock). By splitting action bar, menu will appear in both top and button like this: .
If this is what you want: Follow this link
UPDATE:
I found another option! If you want menu like this Google Play
If you want these overflow 3 dot icons: Follow this link.
If none of these suits with your need, you should probably create custom view and modify according to your choice!
Hope this helps!
To apply in your xml try:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layout"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ImageView
android:id="#+id/image"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:scaleType="center"
android:src="#drawable/appinc"
android:visibility="visible" />
<LinearLayout
android:id="#+id/bottom_bar"
android:layout_width="match_parent"
android:layout_height="80dp"
android:layout_alignParentBottom="true"
android:background="#550055" >
</LinearLayout>
<ProgressBar
android:id="#+id/progressBar1"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#id/bottom_bar" />
<WebView
android:id="#+id/webview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="#id/progressBar1"
android:layout_below="#id/image"
android:visibility="visible" />
</RelativeLayout>
You should use the android:layout_weight="0dp"
Android gives us many components to make a fast and premium application. TextView, ImageView, etc are the general and important components in android. In this tutorial, you will read to add a border to the top and bottom of an Android view. Border to the android views can be added in several ways. Here, I am going to show the easiest and simplest method to add the border to the Android [TextView, Button] views. So, Just Check this below carefully/.
You need to build an XML drawable file inside res/drawable directory For adding the border. This is worked in android 2.2 and higher.
Adding Border to the Top and Bottom of an Android View
Step By Step Guide to Add Border to the Top and Bottom of an Android View
#1: XML Drawable File
First, you need to create an XML drawable file border_top_bottom.xml in /res/drawable folder like /res/drawable/border_top_bottom.xml and link it to TextView. Your drawable XML file will look 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">
<stroke
android:width="2dp"
android:color="#e10606" />
<solid android:color="#9bce64" />
</shape>
</item>
<item
android:bottom="2dp"
android:top="2dp">
<shape android:shape="rectangle">
<stroke
android:width="2dp"
android:color="#9bce64" />
</shape>
</item>
</layer-list>
border_top_bottom.xml hosted with ❤ by GitHub
#2: XML Layout File
Following is the content of XML layout file where I have added a TextView.
res/layout/top_bottom_border_in_android_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"
android:layout_margin="16dp"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Adding Border in Top and Bottom of View" />
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:background="#drawable/border_top_bottom"
android:padding="30dp"
android:text="Top Bottom Border in TextView"
android:textColor="#000000"
android:textSize="18sp" />
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:background="#drawable/border_top_bottom"
android:text="Top Bottom Border in Button" />
<TextView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:autoLink="web"
android:gravity="center|bottom"
android:text="ViralAndroid.com"
android:textSize="25sp"
android:layout_marginTop="8dp"
android:textStyle="bold" />
</LinearLayout>
top_bottom_border_in_android_view.xml hosted with ❤ by GitHub
#3: Strings.xml File
res/values/strings.xml
<resources>
<string name="app_name">Adding Border to the Top and Bottom of an Android View</string>
</resources>
strings.xml hosted with ❤ by GitHub
Now, run your Adding Border to the Top and Bottom of an Android View application, you will see the border at the top and bottom of TextView.
The AutoCompleteTextView displays a ListView in a popup for auto completion. Attached is the image detailing the problem. Just before the first item, there is little white margin. This margin is only visible on the top of the list. This problem is seen on device running 2.3, while on 4.x this problem is not visible.
Can somebody point out the reason for this behavior and a way to fix it.
The code for Layout containing AutoCompleteTextview
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:paddingLeft="8dp"
android:paddingRight="8dp"
android:layout_height="wrap_content"
android:layout_width="match_parent">
<AutoCompleteTextView
android:id="#+id/menu_search_field"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/textfield_searchview_holo_light"
android:clickable="true"
android:hint="#string/search_hint"
android:imeOptions="actionSearch"
android:lines="1"
android:singleLine="true"
android:textColor="#color/header_text_color"
android:textColorHint="#color/header_hint_text_color"
android:textSize="14dip"/>
</LinearLayout>
The layout defining the item in the Listview.
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="10dp"
android:textSize="16sp"
android:textColor="#android:color/white"
android:background="#android:color/black"
android:ellipsize="end"
>
</TextView>
And the drawable for textfield_searchview_holo_light
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true" android:drawable="#drawable/textfield_search_default_holo_dark" />
<item android:drawable="#drawable/textfield_search_default_holo_dark" />
</selector>
Thanks.
Try to add XML attribute to your AutoCompleteTextView:
android:popupBackground="color_what_you_want_to_background"
in your case something like
android:popupBackground="#android:color/black"
Hope, it helps you