How to add margin between radiobutton ant it's drawable? - android

This my current layout:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/scrollview"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#F5F5DC"
>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<RadioGroup
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
>
<RadioButton android:id="#+id/radio_red"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableLeft="#drawable/flag_dk"
android:textColor="#000000"
android:layout_gravity="center_horizontal"
android:drawablePadding="10dip"
android:text="Danish" />
<RadioButton android:id="#+id/radio_blue"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableLeft="#drawable/flag_en"
android:layout_gravity="center_horizontal"
android:layout_marginTop="5dip"
android:drawablePadding="10dip"
android:textColor="#000000"
android:text="English" />
</RadioGroup>
</LinearLayout>
</ScrollView>
I get this:
I would like to have some space (margin) between radiobutton an the flag (it's drawable). Is it even possible?


You can do like the following:
<android.support.v7.widget.AppCompatRadioButton
android:layout_width="match_parent"
android:layout_height="#dimen/view_size"
android:button="#null"
android:drawablePadding="100dp"
android:drawableLeft="?android:attr/listChoiceIndicatorSingle"
android:text="label" />


In my case, where I have a custom drawable shape, adding android:paddingDrwable attribure did not work but adding android:paddingLeft="5dp" did.


Where you are setting the image and the text give blank spaces before it.
for example: radiobutton.setText(" "+Text);.You will see the desired output.


I don't think it is possible to add space between the image and the radio button using the android apis. However, the answer to your question I think is to add some space in the image itself.


Use Relative Layout instead of Linear Layout it gives android:layout_margingleft & android:layout_margingRight to drop your radio buton & Images as well.
Also give android:padding="10dip"
Try it it will definitely work!!!!

Related

Android AutoCompleteTextView suggestions overlapping the TextView

I am making an application using Google maps. I am using AutoCompleteTextView to get suggestions of places. The output is as follows :
As you can see from the image, the border of the suggestion box is overlapping the TextView. I am using custom item layout with a Textview inside a Linear 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="fill_parent"
android:background="#fff"
android:orientation="horizontal" >
<TextView
android:id="#+id/resultValue"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#fff"
android:paddingBottom="5dp"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:paddingTop="5dp"
android:textColor="#474040"
android:textSize="15sp" />
</LinearLayout>
Is there a way to bring the suggestion window down and to remove or change the colour of the grayish border of the suggestion window ?

Was doing the same thing as in the accepted answer, but was still having the overlap issue. To fix that make this call:
autocompleteView.setDropDownVerticalOffset(0);

Try like this, android:popupBackground="#EFEEEC"// change according your border you want for the suggestion box
<AutoCompleteTextView
android:id="#+id/autocomplete"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:background="#drawable/text_area"
android:inputType="text|textNoSuggestions|textMultiLine"
android:paddingLeft="10dp"
android:popupBackground="#EFEEEC"
android:textColor="#333333"
android:textColorHint="#9c9c9c"
android:textSize="18sp"
android:completionThreshold="1" />
and auto_textview.xml
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="12dp"
android:textColor="#333333"
android:layout_margin="15dp"
android:textSize="16sp" >
</TextView>
text_area9.png
Final output will look like
Hope this help you.

Use a custom drawable like
AutoCompleteTextView txtNames= (AutoCompleteTextView)findViewById(R.id.editBox);
ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, R.drawable.customlist, restList);
txtRestNames.setAdapter(adapter);
and add customlist as
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/cust_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dip"
android:textSize="12dp"
android:singleLine="false"/>
Change the parameters/color to suit your needs. Try it....hope it helps

RelativeLayout Stack Buttons

I would like to align two buttons on the bottom of a relative layout that is wrapped inside of a linear layout.
I am unable to get the view favorites button to be on top of the search button. There is a big space as you can see in this image:
Here is my code:
<?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">
<TextView
android:text="#string/SearchRestaurantsCity"
android:textAppearance="?android:attr/textAppearanceMedium"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/tvRestaurantSearchCity" />
<EditText
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/etRestaurantSearchCity" />
<TextView
android:text="#string/SearchRestaurantsState"
android:textAppearance="?android:attr/textAppearanceMedium"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/tvRestaurantSearchState" />
<EditText
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/etRestaurantSearchState" />
<TextView
android:text="#string/SearchRestaurantsCategories"
android:textAppearance="?android:attr/textAppearanceMedium"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/tvRestaurantSearchCategories" />
<Spinner
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/spRestaurantSearchCategories" />
<RelativeLayout
android:id="#+id/InnerRelativeLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentBottom="true">
<Button
android:text="#string/btnViewFavoriteRestaurants"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/btnViewFavoriteRestaurants"
style="#style/ButtonText"
android:padding="5dp"
android:layout_below="btnSearchRestaurants" />
<Button
android:text="#string/btnSearchRestaurants"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/btnSearchRestaurants"
style="#style/ButtonText"
android:layout_alignParentBottom="true"
android:padding="5dp" />
</RelativeLayout>

There are 2 things wrong with the XML.
For starters, you can't refer to the button btnSearchRestaurants before it's defined.
Secondly, you've defined btnSearchRestaurants to align-parent-bottom, and then tried to define that btnViewFavoriteRestaurants would be below that button. It should be above it (as per your description).

If you're trying to put the first button I can see inside RelativeLayout, I'd try to change the following line:
android:layout_below="btnSearchRestaurants" />
for this one:
android:layout_above="#+id/btnSearchRestaurants" />
Part of the space is reserved for all the elements of the layout I can see inside the LinearLayout,and the + is because the button btnSearchRestaurants is below so it is not created yet

I think the problem is at
android:layout_below="btnSearchRestaurants"
It should be
android:layout_below="#id/btnSearchRestaurants"

In your xml code I think you should correct this line
android:layout_below="btnSearchRestaurants"
as you want it to be above the Search Restaurants button it should be
android:layout_above="#id/btnSearchRestaurants"
I changed below to above for obvious reasons (you want it above the other button not below it) and added #id/ because you will be searching for the button id.

Preference item-like layout

In main activity of my application I need a control which should look like ListPreference in PreferencesActivity. I mean, 2 lines: title and current value and down arrow icon on the right.
I've tried to use TwoLineListItem for this:
<TwoLineListItem android:id="#+id/twoLineListItem1"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:onClick="onButtonClick" android:focusable="true"
android:background="#android:drawable/list_selector_background">
<TextView android:layout_width="fill_parent"
android:textAppearance="?android:attr/textAppearanceLarge"
android:layout_height="wrap_content" android:id="#android:id/text1"
android:text="Upload into:" />
<TextView android:layout_below="#android:id/text1"
android:textAppearance="?android:attr/textAppearanceSmall"
android:layout_alignLeft="#android:id/text1" android:layout_height="wrap_content"
android:id="#android:id/text2" android:text="<not set>"
android:layout_width="wrap_content" />
<!-- <ImageView android:layout_width="wrap_content" android:layout_alignParentRight="true"
android:id="#android:id/selectedIcon"
android:src="???"> </ImageView> -->
</TwoLineListItem>
It all works except of arrow icon: I can't find proper resource which system uses for it.
How this could be solved?
Or maybe I should use another control instead of TwoLineListItem?
Or maybe even try to implement my activity as PreferencesActivity (thought I need some EditText controls in my activity)?
For the reference, what I need is on the left picture:
http://androinica-serve.s3.amazonaws.com/wp-content/uploads/2010/11/evernote_comp2.png

wow, this question is so old and i can't believe no one answered it correctly lol. the layout you were looking for is in the sdk tree under:
[android-sdk-root]/platforms/[your-platform]/data/res/layout/preference.xml
you'll find this and any other sdk defined layouts in this folder. fish around in the res folder and see what's available. sorry it's a year late, but there ya go.

Use this layout and modify according to your need...
<?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:background="#FFFFFF">
<LinearLayout android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_alignParentLeft="true">
<TextView android:layout_width="fill_parent"
android:text="ggggggggg"
android:layout_height="wrap_content" android:id="#android:id/text1"
/>
<TextView android:layout_below="#android:id/text1"
android:text="ssssssssssss"
android:layout_height="wrap_content"
android:id="#android:id/text2"
android:layout_width="wrap_content" />
</LinearLayout>
<ImageView android:layout_width="wrap_content"
android:layout_alignParentRight="true"
android:id="#android:id/selectedIcon"
android:layout_height="wrap_content"
android:src="#drawable/icon"
/>
</RelativeLayout>

You might try using #android:drawable/btn_dropdown to get the system resource and setting that as the background.

How can I make this layout?

I am a new comer in android. I've tried to make a layout like picture below but I can't make it.
That rectangle is an image and two others are text view. I've tried to make it but it always wrong. Looking forward to hearing from you guys, thanks for advance.

Define one layout as follows:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/rlGridRow"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
>
<ImageView
android:id="#+id/imageView01"
android:layout_width="36.0dip"
android:layout_height="36.0dip"
android:scaleType="fitCenter"
android:layout_alignParentLeft="true" />
<TextView android:id="#+id/txtLink1"
android:paddingLeft="6.0dip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#FF00FF"
android:layout_toRightOf="#id/imageView01" />
<TextView android:id="#+id/txtLink2"
android:paddingLeft="6.0dip"
android:paddingBottom="8.0dip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#00FFFF"
android:textSize="12sp"
android:layout_marginTop="-4.0dip" android:layout_toRightOf="#id/imageView01"
android:layout_below="#id/txtLink1" />
</RelativeLayout>
See this link for additional info.

android layout: This tag and its children can be replaced by one <TextView/> and a compound drawable

When I run layout on a specific XML file, I get this:
This tag and its children can be replaced by one <TextView/>
and a compound drawable
What change should be done for the following xml code:
<LinearLayout android:id="#+id/name_layout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:background="#drawable/grouplist_single_left_grey_area" >
<ImageView android:id="#+id/photo_image"
android:layout_width="#dimen/thumbnail_width"
android:layout_height="#dimen/thumbnail_height"
android:paddingBottom="5dip"
android:paddingTop="5dip"
android:paddingRight="5dip"
android:paddingLeft="5dip"
android:layout_marginRight="5dip"
android:clickable="true"
android:focusable="true"
android:scaleType="fitCenter"
android:src="#*android:drawable/nopicture_thumbnail"
android:background="#drawable/photo_highlight" />
<TextView android:id="#+id/name"
android:paddingLeft="5dip"
android:layout_weight="1"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:textAppearance="?android:attr/textAppearanceLarge" />
</LinearLayout>
This is how it looks like on the screen:
The camera icon is the default. Clicking on that will give the user an option to choose another image.

To expand on Romain Guy's answer, here is an example.
Before:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:padding="5dp" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="My Compound Button" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/my_drawable" />
</LinearLayout>
After:
<TextView
android:layout_marginTop="10dp"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="My Compound Button"
android:drawableRight="#drawable/my_drawable" android:padding="5dp" />

Merge the TextView and the ImageView into one, by using TextView's setCompoundDrawable*() methods, or using android:drawableLeft.

Thought I would try to get some extra puntos for this as well: you can add padding between the image and the text using android:drawablePadding. https://stackoverflow.com/a/6671544/1224741

Add tools:ignore="UseCompoundDrawables" to <LinearLayout>.

Sometimes it is possible to replace ImageView (or multiple) and TextView with one TextView with compound drawable(s). There are NOT many parameters which can be applied to compound drawable using native API and this TextViewRichDrawable library, but if you can manage one TextView instead of using LinearLayout you should definitely use it.
The list of attributes and parameters which can be applied to compound drawables:
Size: (YES, really):
<com.tolstykh.textviewrichdrawable.TextViewRichDrawable
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Some text"
app:compoundDrawableHeight="24dp"
app:compoundDrawableWidth="24dp"/>
Even set vector resource as drawable:
<com.tolstykh.textviewrichdrawable.TextViewRichDrawable
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Some text"
app:drawableTopVector="#drawable/some_vector_drawble"
app:drawableEndVector="#drawable/another_vector_drawable" />
Drawable's Padding using native API android:drawablePadding -> link
Here is an example:

A LinearLayout which contains an ImageView and a TextView can
be more efficiently handled as a compound drawable (a single
TextView, using the drawableTop, drawableLeft, drawableRight
and/or drawableBottom attributes to draw one or more images
adjacent to the text).
If the two widgets are offset from each other with margins, this
can be replaced with a drawablePadding attribute.
There's a lint quickfix to perform this conversion in the Eclipse
plugin.
From: Android Official API docs!

When I followed the code above, text inside the TextView doesn't set properly.
You need to set its gravity to center|start to achieve what shown in the asked question.
The textview looks like this:
<TextView
android:id="#+id/export_text"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:drawableLeft="#drawable/up_arrow"
android:drawableStart="#drawable/up_arrow"
android:gravity="center|start"
android:text="....."
android:textSize="#dimen/font_size15" >
</TextView>

the latest correct way at time of writing to add a compound drawable is using app:drawableStartCompat rather than android:drawableLeft.
<TextView
android:layout_marginTop="10dp"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="My Compound Button"
android:drawablePadding="5dp"
app:drawableStartCompat="#drawable/my_drawable" />

You can refer this code for example
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="#string/myName"
android:textAlignment="center"
android:textColor="#color/myColor"
app:drawableTopCompat="#drawable/image_name" />

If you don't want to change the ImageView and TextView, you can change the version in the AndroidManifest.xml as:
<uses-sdk`
android:minSdkVersion="8"
android:targetSdkVersion="18"
/>
If your version is android:targetSdkVersion="17" change it s "18".
Hope this will rectify. I did it and got it right

I don't know if this is an efficient solution. But using <androidx.appcompat.widget.LinearLayoutCompat> to wrap the imageView and TextView instead of <LinearLayout> will fix this error. Also by using LinearLayoutCompat, you will be able to adjust the image's width and height which you can't when using a drawableRight, drawableLeft, drawableTop or drawableBottom inside a TextView.

This warning is rather misleading. You can use a compound drawable using a TextView as others have suggested but it doesn't necessarily give you the desired result. You have very littler control over how you want your button to look like using a compound drawable, so it is better to just add tools:ignore="UseCompoundDrawables" and ignore this warning.

Another approach is embed the ViewImage into another LinearLayout (allow handle it with alone id):
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/blue_3"
android:layout_gravity="center_horizontal"
android:paddingTop="16dp" />
</LinearLayout>
<TextView
android:id="#+id/tvPrompt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:paddingTop="16dp"
android:text="#string/xy" />

This tag and its children can be replaced by one <TextView/> and a compound drawable
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:focusable="false"
android:contentDescription="."
android:padding="3dp"
android:src="#drawable/tab_home_btn">
</ImageView>
<TextView
android:id="#+id/textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="首页"
android:textSize="10sp"
android:textColor="#ffffff">
</TextView>
</LinearLayout>

Categories

Resources