Basically what I want is to have is a checkbox with the icon and the text below to the icon, something like this:
-------------------
| CheckBox Icon |
| |
| CheckBox Text |
| |
-------------------
By default the icon is placed in the left and the text in the right, both of them at the same level. Below the layout I'm using:
<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Switch state"
android:button="#drawable/my_custom_selector" />
Any idea about how can I achieve to have the icon on top and the text below the icon?. Thanks in advance :)
I had the same problem and I have solved it using this:
android:button="#null"
android:drawableTop="?android:attr/listChoiceIndicatorMultiple"
CheckedTextView + state list with checked and unchecked drawables:
<CheckedTextView
android:drawableTop="#drawable/checkmark"
android:checked="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Checked text"/>
#drawable/checkmark
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/unchecked" android:state_checked="false"></item>
<item android:drawable="#drawable/checked"></item></selector>
(checkmark.xml is simplified).
You can make the LinearLayout vertical and put the CheckBox (without text) on top and the text in a TextView below.
Finally make the LinearLayout clickable and check/uncheck programmatically.
I just made it by using a linear layout (vertical) as i don't use any custom checkbox xml
my case is like a text is on top of a checkbox
<androidx.appcompat.widget.LinearLayoutCompat
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
>
<androidx.appcompat.widget.AppCompatTextView
android:layout_width="15dp"
android:layout_height="15dp"
android:text="text1"
android:layout_gravity="center"
android:textSize="15dp"/>
<CheckBox android:id="#+id/textcheckbox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="onCheckboxClicked"/>
</androidx.appcompat.widget.LinearLayoutCompat>
The above solution did not work for me. What was missing is the Kotlin/Java code in it.
So add it in your Kotlin code
cb_twitter.setOnClickListener({
(it as CheckedTextView).toggle()
})
Here is my XML Code:
<CheckedTextView
android:id="#+id/cb_twitter"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:checked="false"
android:drawableTop="#drawable/checkbox_selector_twitter"
android:gravity="center_horizontal"
android:text="#string/Twitter"
android:textAlignment="gravity"/>
Here I have also made text to center by
android:gravity="center_horizontal"
android:textAlignment="gravity"
Related
ToggleButton has default padding around text if android:layout_width="wrap_content" is set. I wanted to remove all padding around text and I found out that it is achieved by setting android:minWidth="0dp". Now I could set padding to 10dp, but it will cut text at the end. Is there any way how to fix that?
<?xml version="1.0" encoding="utf-8"?>
<ToggleButton
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:minWidth="0dp"
android:layout_height="26dp"
android:background="#color/colorTextBlue"
android:textSize="12sp"
android:text="TextB"
android:textOff="#null"
android:textOn="#null"
android:button="#null"
android:paddingStart="10dp"
android:paddingEnd="10dp"
android:textColor="#color/toggle_color_selector" />
I will use custom drawable background for this button but here is some look of that button in preview:
Im trying to build my multiple choice layout according to latest material design guidelines with CheckedTextView widget. But I can't find the way to set left padding for checkbox and textview separately (16dp for icon, 72 for text).
The most acceptable solution i could find is to use android:drawablePadding attribute but i think it is not quite right.
Is it possible to set padding values separately inside CheckedTextView?
<?xml version="1.0" encoding="utf-8"?>
<CheckedTextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/text1"
android:layout_width="match_parent"
android:layout_height="48dp"
android:gravity="center_vertical"
android:textSize="16sp"
android:textColor="#000000"
android:paddingLeft="16dp"
android:drawableLeft="?android:attr/listChoiceIndicatorMultiple"
android:drawablePadding="36dp"/>
Try this, it work for me, add a "padding" property:
<CheckedTextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/text1"
android:background="#color/grey"
android:textColor="#color/white"
android:singleLine="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp"
android:ellipsize="marquee"/>
Try this one: (This is under RelativeLayout)
<CheckedTextView
android:id="#+id/checkedTextView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:paddingStart="16dp"
android:paddingEnd="16dp"
android:text="#string/text"
android:checkMark="?android:attr/textCheckMark"
android:checked="false" />
It will stay like this:
Layout:
| |
| Text for checkedTextView: V |
| |
I'm late to the party, but just in case someone is looking for a solution, here is how I did it using the CheckBox widget:
<CheckBox
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
android:minHeight="30dp"
android:textColor="#ffffff"
android:layout_centerVertical="true"
android:layout_marginStart="16dp"
android:paddingStart="56dp"/>
android:layout_marginStart="16dp" sets margin to both icon and text, while android:paddingStart="56dp" sets padding between text and icon.
My definition XML is:
<CheckedTextView android:textSize="18.0dip"
android:text="#string/text"
android:textColor="#color/white"
android:id="#+id/test"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:checkMark="?android:attr/textCheckMark" />
Everything works fine but
the text always at the top left of the view and the checkbox is center vertical.
They are not at the same line.
How to align them.
add this line
android:gravity="center_vertical"
I'm trying to create a button-like component, with a left-aligned ImageView and then 2 TextViews to the right of the ImageView, stacked one above the other and formatted differently, like the following example:.
__________________________
| |
| |-----| Bold Main Text |
| |Image| |
| |-----| Small Sub Text |
|__________________________|
I also want the ImageView to change depending on the click state of the outer container, much like a standard button would do with a selectable resource associated with it. So that when I click anywhere in the outer box the image selectable state is changed.
I know I can use a Button, setting the 'drawableLeft' property to create a single line of text associated with an Image as a button, but it seems I can only have a single item of text using this strategy.
Has anyone implemented any UI components like this in the past?
Thanks!
You can add android:duplicateParentState="true" to the ImageView widget. Also you need to make the ImageView's parent clickable and focusable.
The RelativeLayout in the following code will act as a Button:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout:height="match_parent"
android:orientation="vertical">
<RelativeLayout
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:focusable="true">
<ImageView
android:id="#+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:duplicateParentState="true"
android:src="#drawable/icon" />
<TextView
android:id="#+id/text1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/image"
android:layout_alignTop="#+id/image"
android:layout_alignWithParentIfMissing="true"
android:duplicateParentState="true" />
<TextView
android:id="#+id/text2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/image"
android:layout_below="#+id/text1"
android:layout_alignWithParentIfMissing="true"
android:duplicateParentState="true" />
</RelativeLayout>
</LinearLayout>
I want to let it looks like this:
| two |
| lines |
Here is the current layout, not working at all.
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="two\nlines"
android:layout_gravity="center_vertical"
android:layout_centerInParent="true"/>
</RelativeLayout>
Any idea?
Thanks!
If you just want to center it (I'm assuming the \n is working to split the lines), just add android:gravity="center_horizontal" rather than layout_gravity.
Using layout gravity moves the actual TextView, using gravity affects the content of the TextView.
Had to add both gravity and layout_gravity to align both TextView and its content
android:gravity="center_horizontal"
android:layout_gravity="center_horizontal"
if your width is wrap_content, you have to set gravity and layout_gravity both as "center_horizontal"
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="two\nlines"
android:layout_gravity="center_horizontal"
android:gravity="center_horizontal"/>
However, if your width is "match_parent, you will only have to set gravity as "center_horizontal"
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="two\nlines"
android:gravity="center_horizontal"/>
Hope it helps!
You can use:
TextView tv = (TextView) findViewById(R.id.the_text_view);
tv.setText(Html.fromHtml("two"+"\n"+"lines"));
I use:
android:gravity="center_horizontal"
to center two line text
I think you must do it from Java:
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical">
<TextView
android:id="#+id/the_text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_centerInParent="true"/>
</RelativeLayout>
Then:
TextView tv = (TextView) findViewById(R.id.the_text_view);
tv.setText(Html.fromHtml("two<br/>lines"));
Add property
android:lines="2"
where 2 is no of lines you can set this no as your requirment