I am trying just to set the left and right space for Checkbox, to increase the tap area range.
Unfortunately, when I am trying to set the paddingStart in xml layout it does the wrong change and make the checkbox right padding. WTF, is there a bug in Android API or something?
<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:parentTag="androidx.constraintlayout.widget.ConstraintLayout">
<CheckBox
android:id="#+id/cc_checkbox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:paddingStart="16dp"
android:paddingEnd="16dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</merge>
Preview from Android Studio:
is there a bug in Android API or something?
Not really. The reason why you saw the padding on the right even though you set it to the left is because the paddingStart is applied to the text the checkbox contains. Therefore, you could not see the expected padding on the left of the box.
As long as you use android:text (not a TextView aligned right next to the box), clicking on either the box or the text will activate the checkbox, meaning that it gives you what you want in terms of the click area.
However, I suppose you meant the area on the left of the box. One thing to achieve that is to create a new drawable resource file and use it in the checkbox's android:drawableStart.
Supposing that you named your drawable file checkbox_selector, the file should look like this:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/ic_checkbox_default"
android:state_checked="false"/>
<item android:drawable="#drawable/ic_checkbox_checked"
android:state_checked="true"/>
<item android:drawable="#drawable/ic_checkbox_default"/>
</selector>
Then you need to remove the default box to apply the selector above as a drawable resource. For that:
android:button="#null"
Right after that, you need to call android:drawableStart to use the drawable you just created, and set the padding as you would like.
android:drawableStart="#drawable/checkbox_selector"
android:drawablePadding="10dp"
android:paddingStart="20dp"
The final code should look like this:
<CheckBox
android:id="#+id/cc_checkbox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:button="#null"
android:drawableStart="#drawable/checkbox_selector"
android:text="#string/app_name"
android:drawablePadding="10dp"
android:paddingStart="20dp"
android:background="#android:color/white"
tools:ignore="RtlSymmetry" />
Related
I wanted to place my left icon(Please refer image below), vertically centred to first line of the text in TextView. I couldn't find a way, I tried drawableLeft on text view, gravity & constraints but that didn't help. Can anybody help me?
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp">
<ImageView
android:id="#+id/iv_itm_tick"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_tick_mark"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
app:layout_constraintStart_toEndOf="#+id/iv_itm_tick"
app:layout_constraintTop_toTopOf="parent"
android:text="Concepts of deep learning and machine learning workflow" />
</androidx.constraintlayout.widget.ConstraintLayout>
If the ImageView were a TextView you could simply constrain its baseline to the baseline of the other TextView. Unfortunately, ImageViews don't really have a workable concept of baselines, so you can't simply constrain the baseline of the ImageView to the TextView. (Try it to see what happens.)
One way to go is to replace the ImageView with a TextView, set the icon as the TextView's background and constrain the two baselines. Without special consideration, this technique will result in scaling of the tick mark and will result in distortion. To get around this, place the tick mark drawable in a layer-list drawable and specify a gravity. It is the gravity that prevents scaling:
tick_background.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="#drawable/ic_tick_mark"
android:gravity="center" />
</layer-list>
The tick mark can look like this:
ic_tick_mark.xml
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:tint="#66A8DD"
android:viewportWidth="24"
android:viewportHeight="24">
<path
android:fillColor="#FFFFFFFF"
android:pathData="M9,16.17L4.83,12l-1.42,1.41L9,19 21,7l-1.41,-1.41z" />
</vector>
The layer-list could also be an XML bitmap drawable if the underlying icon is a bitmap.
Another way, which will also work, is to create an empty TextView that has the same characteristics of the TextView you want to attach the tick mark to. Constrain the empty TextView to the baseline of the other TextView. This will position the empty textview alongside the first line of the other TextView.
Now, take the ImageView and constrain its top and bottom to the empty TextView. The tick mark will line up as is wanted.
This is an XML-only solution. Other solutions may involve some coding.
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
tools:context=".MainActivity">
<ImageView
android:id="#+id/iv_itm_tick"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_tick_mark"
app:layout_constraintBottom_toBottomOf="#id/dummyView"
app:layout_constraintEnd_toStartOf="#id/textView"
app:layout_constraintTop_toTopOf="#id/dummyView" />
<TextView
android:id="#+id/textView"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:text="Concepts of deep learning and machine learning workflow"
android:textAppearance="#style/TextAppearance.AppCompat.Display1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/dummyView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="#style/TextAppearance.AppCompat.Display1"
app:layout_constraintBaseline_toBaselineOf="#id/textView"
app:layout_constraintEnd_toStartOf="#+id/textView"/>
</androidx.constraintlayout.widget.ConstraintLayout>
Edit your xml like this:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp">
<ImageView
android:id="#+id/iv_itm_tick"
android:layout_width="30dp"
android:layout_height="30dp"
android:src="#drawable/ic_tick_mark"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:text="Concepts of deep learning and machine learning workflow"
app:layout_constraintStart_toEndOf="#+id/iv_itm_tick"
android:layout_marginTop="10dp"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
How to animate a TextView to act like a Button when long pressed?
I've created a TextView using this code
<TextView
android:text="Start"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/btnStart"
android:layout_alignParentBottom="true"
android:gravity="center"
android:clickable="true"
android:focusable="true"
android:longClickable="true"
android:paddingTop="20dp"
android:paddingBottom="20dp"
android:textAllCaps="true"
android:textStyle="bold"
android:background="#drawable/rectangle"
android:textSize="20sp"/>
but even setting android:longClickable="true" the TextView does not show the bubble animation when is long pressed. The expected result is here.
You need to set selectable background:
<TextView
android:background="?attr/selectableItemBackground"
.../>
But seeing that you already use android:background you can also use android:foreground instead of it:
<TextView
android:foreground="?attr/selectableItemBackground"
.../>
But beware that android:foreground will work only starting with API 21 (Lollipop).
If you need to have your #drawable/rectangle AND to support Android <5.x then you'll have to create a custom drawable for this to work. See the RippleDrawable documentation for details.
I think you are looking for ripple effect in listview. please add
android:background="?attr/selectableItemBackground". in your textview
If you need to set your custom background you can do 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/state_one"></item>
<item android:state_enabled="true" android:drawable="#drawable/state_two"></item>
<transition
android:fromId="#+id/usual"
android:toId="#+id/selected" >
<animation-list>
<!--fill in your animation here-->
</animation-list>
</transition>
</selector>
You have to use the xml above instead android:background="#drawable/rectangle".
Also you need to design state_one and state_two in your drawables.
I've been trying to make a GUI for my app (using ConstraintLayout) where I have images that act like buttons aligned, however, those buttons (or anything actually) have this weird issue where even if I move (and save) the constraint position, it just goes back to some number (in this case 16).
What am I doing wrong here? What causes this/Why is the editor resetting the position?
http://i.imgur.com/OFndFb7.gifv (GIF - 40s)
Versions:
ConstraintLayout for Android - v 1.0.2
Android Studio - 2.3.3 #AI-162.4069837
XML for the Layout:
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:layout_editor_absoluteY="25dp"
tools:layout_editor_absoluteX="0dp">
<Button
android:id="#+id/Button_Color_Red"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginTop="80dp"
android:layout_marginStart="16dp"
android:background="#drawable/btn_red_color_menu"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent" />
<Button
android:id="#+id/Button_Color_Indigo"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginTop="80dp"
android:layout_marginStart="8dp"
android:background="#drawable/btn_indigo_color_menu"
app:layout_constraintLeft_toRightOf="#+id/Button_Color_Yellow"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/Button_Color_Green"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginTop="80dp"
android:layout_marginStart="8dp"
android:background="#drawable/btn_green_color_menu"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toRightOf="#+id/Button_Color_Indigo"/>
<Button
android:id="#+id/Button_Color_Yellow"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginTop="80dp"
android:layout_marginStart="8dp"
android:background="#drawable/btn_yellow_color_menu"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toRightOf="#+id/Button_Color_Red" />
</android.support.constraint.ConstraintLayout>
XML for btn_x_color_menu:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#color/Red_Primary"/>
</shape>
</item>
</selector>
There are two attributes on the button Button_Color_Green that are in conflict.
android:layout_marginLeft="16dp"
android:layout_marginStart="8dp"
The designer creates android:layout_marginLeft when you move the button, but android:layout_marginStart remains unchanged and in conflict. That is why the margin reverts after you move the widget.
These two attributes should be the same for a left-to-right layout, but the designer seems to want to change android:layout_marginLeft but honors android:layout_marginStart if it is present.
This may be a bug in ConstraintLayout 1.0.2. Until a fix or better solution is found, you can just manually change these attributes to be the same or just use android:layout_marginLeft and manually add android:layout_marginStart back in at a later time. (Lint should remind you to do this.)
Now that you know the issue, you may be able to work out a better solution.
I hope this helps.
I searched a lot but I didn't find how to remove the background color from the button which is appearing on the right and left side of button. Can anybody help?
My screen looks like
No matter what I try I am not able to remove the black portion.
Code:
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Button
android:id="#+id/btn_base"
android:text="#string/base"
android:layout_margin="2dp"
android:textColor="#000000"
android:background="#drawable/selector_button"
android:layout_weight="0.5"
android:layout_width="0dp"
android:layout_height="30dp"/>
<Button
android:id="#+id/btn_care"
android:text="#string/care"
android:layout_margin="2dp"
android:textColor="#000000"
android:background="#drawable/selector_button"
android:layout_weight="0.5"
android:layout_width="0dp"
android:layout_height="30dp"/>
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Button
android:id="#+id/btn_daily_prize"
android:layout_margin="2dp"
android:textColor="#000000"
android:background="#drawable/selector_button"
android:layout_weight="0.5"
android:layout_width="0dp"
android:layout_height="30dp"
android:text="#string/daily_prize" />
<Button
android:id="#+id/btn_winner"
android:layout_margin="2dp"
android:textColor="#000000"
android:background="#drawable/selector_button"
android:layout_weight="0.5"
android:layout_width="0dp"
android:layout_height="30dp"
android:text="#string/winner" />
</LinearLayout>
</LinearLayout>
#Drawable/selector_button
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_pressed="true"
android:drawable="#drawable/pressed"> </item>
<item android:state_focused="true"
android:drawable="#drawable/focused"/>
<item android:drawable="#drawable/change"></item>
</selector>
this is the image used with name change.9.png
according to your scenario i can surely say that either you are not using a 9-patch image (an image with extension like .9.png ) or the 1 pixel borders of 9-patch at left and top are not drawn in correct manner. thats why the edges and the side border shade get expanded with the button with long width. either you should show what 9-patch button background you have used or try some correct 9-patch and check results for that.
Why don't you use some other control element like TextView instead of buttons? I just saw that TextView has onClickListner and so you can use it as sort-of button, though I have not done it; button is meant to aid you defining your layout, but as this seems to only be a problem for you, just do not use it).
By the way I seriously recommend you to use android styles, as you copy-paste a lot of attributes. If you use Eclipse for development, open your layout xml, select the item you want to extract the style of, press ctrl + 1 and then select extract style. That way you should avoid copy-pasting all these style attributes.
Try removing the android:textColor attribute. These can be misleading and sometimes alter the colour of more than just the text. If the text is supposed to be black then you don't need it.
I built a screen that looks like this:
but if login fails the screen turns out to look like this:
I used EditText and the code looks like this:
<TextView android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="email"></TextView>
<EditText
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:id="#+id/username"
android:hint=""
android:textStyle="normal"
android:singleLine="true"
android:inputType="textEmailAddress">
</EditText>
<TextView android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="password">
</TextView>
<EditText
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:id="#+id/uc_txt_password"
android:hint=""
android:textStyle="normal"
android:singleLine="true"
android:inputType="textPassword">
</EditText>
Any ideas?
Update:
It seems that the bogus display is the way it displays on Ice-cream-sandwich by default. I am using an older version of android (2.2) on which the display looks like the first attached pic.
ICS Introduces a more "open" text layout (look at the gmail app) where edit text's default style lack borders. You should more rigidly define your style to be how you want it on all devices if you don't want it to look like how the device sets it. Perhaps use some 9 patch images and state selector xml files. So if you're setting the background to something like white and not defining any other styles it might be inheriting from Holo.Dark and using this as the edit text bg: https://github.com/android/platform_frameworks_base/blob/master/core/res/res/drawable-hdpi/textfield_default_holo_dark.9.png
Thus, no visible text. Define your style more rigidly, or set your themes better and don't override the other backgrounds.
try to use android selector
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/editbox_dropdown_background" android:state_focused="false"/>
<item android:drawable="#drawable/editbox_background_focus_yellow" android:state_focused="true"/>
/>
</selector>