Text on right of CheckBox in Android - android

I'm trying to imitate the CheckBoxs like in the Settings app on my phone.
It looks like that:
I've tried using separate TextViews, but that way only the checkmark is clickable, rather than the text and the checkmark.
Is there a way to accomplish that?
I also tried a CheckedTextView but couldn't find the right drawable to use.

As far as I know this should work
<?xml version="1.0" encoding="utf-8"?>
<CheckBox xmlns:android="http://schemas.android.com/apk/res/android"
android:text="Text"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:button="#null"
android:drawableRight="?android:attr/listChoiceIndicatorMultiple"/>
With android:button="#null" you remove standard checkbox button / image, and after you just add checkbox image as right drawable (or use drawableEnd to support RTL)
android:drawableRight="?android:attr/listChoiceIndicatorMultiple"

Is there a way to accomplish that?
I also tried a CheckedTextView but couldn't find the right drawable to use.
CheckedTextView will solve your issue perfectly:
Please look for example on simple_list_item_checked.xml (it is android embedded layout)
CheckedTextView have next attribute:
<!-- Drawable used for the check mark graphic. -->
<attr name="checkMark" format="reference"/>
So you only need to set checkMark to proper selector (If you do not have resource you could use btn_check.xml. It is inside android):
<CheckedTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:checkMark="#drawable/your_selector_with_proper_checked_states"
/>

try the following Xml
<LinearLayout 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"
android:orientation="horizontal"
android:weightSum="10"
tools:context="com.example.pager.MainActivity" >
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="2"
android:text="Anything you want here" />
<CheckBox
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="8" />
</LinearLayout>
It works fine

Related

Android set different styles to Views in code / dynamically

I want to dynamically add a custom styles to textviews in code. I can use the following workaround to do this when there is only textview in question:
android set style in code
However, if I try this method and create a template.xml file with 2 textview, each with a different style applied, this no longer works.
i.e. my template file will look something like this instead:
<?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"
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="This is a template"
style="#style/my_style" />
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="This is another template"
style="#style/my_style2" />
</LinearLayout>
How do I extend this solution so it works with more than one textview and more than one style?

Overlay over an ImageView on Android

So I have a list of images that come from the web, I don't know which color are they and I want to place a text over the ImageView.
My idea is to place the ImageView, an image overlay with transparency gradient over that ImageView and the text above it. I want to mimic this behaviour:
Is there anyway to do this via XML?
When you write the XML for your list items which get inflated in the getView(...) of whatever ListAdapter you've written you can surely do this.
Something like this for the list item:
<?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">
<ImageView
android:layout_width="320dp"
android:layout_height="240dp"
android:background="#ACACAC"/>
<RelativeLayout
android:layout_width="320dp"
android:layout_height="240dp"
android:background="#drawable/gradient">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Here is your text"
android:textColor="#000000"
android:layout_alignParentBottom="true"/>
</RelativeLayout>
</RelativeLayout>
Then you create that drawable/gradient. For that you can recycle the answer from here.
Thanks to adityajones I managed to get there :)
So although this is my right answer, I'll mark his as the correct one!
<?xml version="1.0" encoding="utf-8"?>
<ImageView
android:layout_width="fill_parent"
android:layout_height="200dp"
android:scaleType="centerCrop"
android:src="#drawable/image" />
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="200dp"
android:background="#drawable/gradient_image" >
<TextView
android:id="#+id/text"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_margin="6dp"
android:layout_marginBottom="18dp"
android:shadowColor="#000"
android:shadowRadius="7.0"
android:text="This is some random text"
android:textColor="#color/white"
android:textSize="22sp" />
</RelativeLayout>
I'd use a FrameLayout or RelativeLayout. The first View you add to either should be the background ImageView, then obviously you'll need some TextViews and Other ImageViews [or Buttons, or ImageButtons, etc]
Seems like a reasonable layout: a background image, and then one additional view in each corner.
For the gradient, you'll probably want a separate Layout/View at the bottom with a gradient drawable as the background, although I can imagine you might be able to get away with setting the background of one of your TextViews as the gradient.
You do not have to use a gradient drawable file or set it in your xml..
you can do this pragmatically using GradientDrawable Class as explained in this related Question (Create a radial gradient programmatically) then set it as a background for a layout that covers your ImageView, this gives you ability to use different colors and orientations

Change background color dynamically and use a border

I have the following template
<?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="wrap_content"
android:orientation="vertical"
android:background="#drawable/borders" >
<RelativeLayout
android:id="#+id/layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp">
<ImageView
android:id="#+id/category_starred_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/rating_not_important"
android:contentDescription="#string/app_name" />
<TextView
android:id="#+id/category_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/category_starred_icon"
android:textIsSelectable="false"
android:textSize="18sp"
android:paddingLeft="5dp"
android:paddingTop="5dp"
android:paddingRight="5dp"
android:textColor="#android:color/white"
android:hint="#string/category" />
</RelativeLayout>
</LinearLayout>
i get a warning This RelativeLayout layout or its LinearLayout parent is possibly useless; transfer the background
attribute to the other view, i want solve it, but i have the follow problem i have a border in the LinearLayout is like a drop shadow but when i change the background color in my code
mLayout.setBackgroundColor(Color.paseColor(mColorString));
i lost the border, how i can solve the warning witout lose the border, the main problem is the background colors are dynamically
Have a look at this: http://developer.android.com/guide/topics/resources/drawable-resource.html#LayerList
This is an drawable that organizes other drawables in a layer list (one on top of the other). With it, you can use other drawables, like shape, to define the borders and the background the way you want.
I can't make a complete answer now, but if you search for this, I'm sure you can do it. When I have more time, I may come back to help you, if you haven't found out how to solve this yet.

Radio Button Text over Button

I'm trying to create a view in android that looks like:
Text
Radio Button 1
...
...
I thought it was simple enough but at least in the layout preview and emulator I'm seeing the text for the RadioButton appear on top of the actual radio button (the circle), see the attached screen shot. I'm guessing this is something very trivial but I'm messed around with gravity and every other setting I can think of and nothing. Android 3.1 if that matters.
Here's my layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:background="#color/white"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView android:id="#+id/question_text"
android:textColor="#color/primary_gray"
android:layout_width="match_parent"
android:text="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
android:layout_height="wrap_content"/>
<RadioGroup android:id="#+id/multiple_choice_one_answer_group"
android:background="#color/white"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RadioButton
android:background="#color/primary_gray"
android:textColor="#color/black"
android:textSize="10sp"
android:text="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX" />
</RadioGroup>
</LinearLayout>
Screenshot:
The problem is setting the background. If you remove the background from the RadioButton and keep it on the RadioGroup, it has the effect you're looking for. In general, setting the background of a Button to everything removes the button look; try it on a regular Button and you'll see. This is because the background for a Button is already set to something, and you're replacing it with a flat color.
Try this instead:
<RadioGroup android:id="#+id/multiple_choice_one_answer_group"
android:background="#color/primary_gray"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RadioButton
android:textColor="#color/black"
android:textSize="10sp"
android:text="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX" />
</RadioGroup>
Setting the background in the java code instead of the layout solves this as well.

Gradient styles

In my Android application I've hidden the default title bar, introduced a TabView and added my own titlebar under that TabView's tabs. At the moment, I'm using the ?android:attr/windowTitleStyle style which makes my new titlebar look gray and gradient. It looks pretty good, but my screens are looking pretty grayscale. I'd like to spice things up a bit by making this titlebar a different color gradient.
What am I looking at here? Creating my own image and using it? The ?android:attr/windowTitleStyle style seems to expand depending on the height of your custom titlebar; so I'm not sure it's actually a single image.
I've attempted to throw a LinearLayout over it with a bit of translucency (ex: making the color #800000FF), but the gradient style I have behind this LinearLayout disappears.
Thanks for your help
Update:
Per my answer down below, I've figured out that I can create an XML file that defines a gradient and use that. It works fine inside a LinearLayout (titlebar_gradient) I have on my layout. However, it is not working on the outer-most LinearLayout (background_gradient). Could someone tell me why? As I understand it, the ListView should be transparent...
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/background_gradient"
>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="47dip"
android:background="#drawable/titlebar_gradient"
android:gravity="center">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Item"
style="?android:attr/windowTitleStyle"
android:paddingLeft="5dip"
android:maxLines="1"
android:ellipsize="end" />
</LinearLayout>
<ListView
android:id="#+id/android:list"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:paddingTop="10dip"
android:clickable="false"
/>
<TextView
android:id="#+id/android:empty"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
/>
</LinearLayout>
I understand my problem now.
I've created an XML file in my drawables folder that looks like this
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:startColor="#00CC66"
android:endColor="#009966"
android:angle="270"/>
/shape>
In my toolbar, I set the background to this drawable.

Categories

Resources