Develop Reference

Extra end and start margin with chips

How can i remove extra margins or (spacing) from chips inside chip group?
below is all things that i try in styles,code and xml none of these work for me.
Here is how it's looks:
And here is what i try and my code:
<HorizontalScrollView
android:id="#+id/horizontalScrollView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollbars="none"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tagsRecyclerView">
<com.google.android.material.chip.ChipGroup
android:id="#+id/subTagsChips"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:singleLine="true">
</com.google.android.material.chip.ChipGroup>
</HorizontalScrollView>
Here is how i add chips to the group
private fun generateChips(chipsList:ArrayList<SubTag>):ArrayList<Chip>{
val list = arrayListOf<Chip>()
chipsList.forEach { subTag ->
val generatedChip = Chip(requireContext())
generatedChip.apply {
text = subTag.tag
setTextColor(ContextCompat.getColorStateList(requireContext(),R.color.chip_text_color))
val drawable = ChipDrawable.createFromAttributes(context, null, 0,
R.style.ChipsStyle)
setChipDrawable(drawable)
}
list.add(generatedChip)
}
return list
}
And here is my chips style
<style name="ChipsStyle" parent="Widget.MaterialComponents.Chip.Choice">
<item name="chipBackgroundColor">#color/chip_state_bc</item>
<item name="checkedIconTint">#color/white</item>
<item name="chipCornerRadius">5dp</item>
<item name="chipSpacingHorizontal">0dp</item>
<item name="android:layout_margin">0dp</item>
<item name="ensureMinTouchTargetSize">false</item>
</style>

I found this answer from material-components/material-components-android repo and worked for me.
there's a flag on by default to ensure that chips meet Android's minimum recommended touch size. You can disable it by setting ensureMinTouchTargetSize == false
source: https://github.com/material-components/material-components-android/issues/1445

Add custom borders to Alert Dialog Builder Layout

I'm trying to add a custom layout with borders to my Alert Dialog builder, but this is the result I got:
I created a style for my dialog:
<style name="MyDialog" parent="#android:style/Theme.Dialog">
<item name="android:background">#drawable/dialog_background</item>
</style>
And this is how I defined it:
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<solid
android:color="#00000000" />
<stroke
android:width="5dp"
android:background="#00ffffff" />
<corners android:radius="20dp" />
Then, in the layout I defined this as well:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="#dimen/_100sdp"
android:layout_height="#dimen/_80sdp"
android:gravity="center"
style="#style/MyDialog">
<CheckBox
android:id="#+id/myCheckBox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginTop="#dimen/_10sdp"
android:text="Abilitare la palette di colori?" />
<EditText
android:id="#+id/nameEditText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/genderRadioGroup"
android:layout_alignParentLeft="true"
android:ems="10"
android:hint="Inserisci l'eta'">
<requestFocus />
</EditText>
<RadioGroup
android:id="#+id/genderRadioGroup"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/myCheckBox"
android:checkedButton="#+id/maleRadioButton">
<RadioButton
android:id="#+id/maleRadioButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:text="Maschio" />
<RadioButton
android:id="#+id/femaleRadioButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/maleRadioButton"
android:layout_alignParentLeft="true"
android:text="Femmina" />
</RadioGroup>
1) Why the OK button is out of the shape?
2) How can I make the background transparent since I cannot use the getWindow().setBackgroundDrawableResource(android.R.color.transparent); method?
This is the Java code of the Alert:
new AlertDialog.Builder(MainActivity.this).setView(formElementsView)
.setPositiveButton("OK", new DialogInterface.OnClickListener() {
public void onClick(DialogInterface dialog, int id) {
InputMethodManager imm = (InputMethodManager)getSystemService(Context.INPUT_METHOD_SERVICE);
imm.hideSoftInputFromWindow(v.getWindowToken(), 0);
getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_STATE_VISIBLE);
int selectedId = genderRadioGroup.getCheckedRadioButtonId();
RadioButton selectedRadioButton = (RadioButton) formElementsView.findViewById(selectedId);
Intent myIntent = new Intent(MainActivity.this, PaintingActivity.class);
myIntent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK | Intent.FLAG_ACTIVITY_CLEAR_TASK);
if (myCheckBox.isChecked()) myIntent.putExtra("palette", "yes");
else myIntent.putExtra("palette", "no");
myIntent.putExtra("gender", selectedRadioButton.getText());
String eta = nameEditText.getText().toString();
if (eta.length()!=0) myIntent.putExtra("eta", eta);
else myIntent.putExtra("eta", "0");
myIntent.putExtra("protocollo", "a");
myIntent.putExtra("cornice", "1" + "");
myIntent.putExtra("userLogged", userLogged);
myIntent.putExtra("first", "yes");
MainActivity.this.startActivity(myIntent);
dialog.cancel();
}
}).show().getWindow().setLayout(600, 600);

With the new Material Theme you can customize the shape of your component using the shapeAppearanceOverlay attribute.
Something like:
<!-- Alert Dialog -->
<style name="MyThemeOverlayAlertDialog" parent="#style/ThemeOverlay.MaterialComponents.MaterialAlertDialog">
<item name="shapeAppearanceOverlay">#style/ShapeAppearanceOverlay.MyApp.Dialog.Rounded</item>
</style>
<style name="ShapeAppearanceOverlay.MyApp.Dialog.Rounded" parent="">
<item name="cornerFamily">rounded</item>
<item name="cornerSize">8dp</item>
</style>
You can also define the style for all dialogs in you app adding this attribute in your theme:
<style name="Theme.MyApp" parent="Theme.MaterialComponents.Light">
...
<item name="materialAlertDialogTheme">#style/MyThemeOverlayAlertDialog</item>
...
</style>

Why the OK button is out of the shape? -
Beacause you have used .setPositiveButton("OK",.. If you want an OK
button define it directly on the customized xml file.
How can I make the background transparent -
Set a background to the customized layout just like you have created
the shape and adding a color to it. Place it in the root layout.
A relatable example,
<?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"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="#android:color/transparent">
<!--Transparent background for outermost layout-->
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/alert_background_xml"
android:layout_margin="20dp"
android:layout_centerInParent="true">
<!--alert_background_xml is your customized style -->
<!--Your views and buttons here including the OK Button-->
</RelativeLayout>
</RelativeLayout>

Transparent background for custom AlertDialog

Strangely, this was working fine, this is how it looks on my app released on Google Play:
And this is how it looks now:
All I did was migrate to AndroidX.
Here is my dialog layout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/dialogLinear"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="10dp">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:background="#drawable/rounded_corners">
<Button
android:id="#+id/btnAdd2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?android:attr/selectableItemBackground"
android:text="#string/import_video"
android:textColor="#color/dark_text" />
</FrameLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/rounded_corners">
<Button
android:id="#+id/btnAdd1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?android:attr/selectableItemBackground"
android:text="#string/add_student"
android:textColor="#color/dark_text" />
</FrameLayout>
</LinearLayout>
and here is how I inflate it:
View dialogView = View.inflate(getApplicationContext(), R.layout.dialog_main, null);
LinearLayout dialogLinear = dialogView.findViewById(R.id.dialogLinear);
//Here is where is set the background to transparent
dialogLinear.setBackgroundColor(0x00000000);
final AlertDialog alertD = new AlertDialog.Builder(this).create();
Button btnAdd1 = dialogView.findViewById(R.id.btnAdd1);
Button btnAdd2 = dialogView.findViewById(R.id.btnAdd2);
btnAdd1.setTypeface(mCustom_font_Bold);
btnAdd2.setTypeface(mCustom_font_Bold);
btnAdd1.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
//Do stuff
}
});
btnAdd2.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
//Do stuff
}
});
alertD.setView(dialogView);
if (alertD.getWindow() != null) {
alertD.getWindow().setBackgroundDrawable(new ColorDrawable(android.graphics.Color.TRANSPARENT));
}
alertD.show();
I searched and couldn't find why this would be happening. Can someone please give me some advise?
I have tried setting it in in the layout itself.
Edit 1:
After trying the answer below, it now looks like this, instead of above:
I resolved it by adding the following styles:
<style name="NewDialog">
<item name="android:windowIsFloating">true</item>
<item name="android:windowAnimationStyle">#android:style/Animation.Dialog</item>
<item name="android:backgroundDimEnabled">true</item>
<item name="android:background">#android:color/transparent</item>
</style>
Setting the style like this:
final AlertDialog alertD = new AlertDialog.Builder(this, R.style.NewDialog).create();
And to fix what happened in Edit 1, i changed my LinearLayout to a RelativeLayout

You Can Create a theme and assign that theme to your AlertDialog
Define theme in your styles.xml
<style name="CustomDialog" parent="android:Theme.Dialog">
<item name="android:windowIsTranslucent">true</item>
<item name="android:windowBackground">#android:color/transparent</item>
</style>
And Assign that theme to your AlertDialog
final AlertDialog alertD = new AlertDialog.Builder(this,R.style.CustomDialog).create();
Or
2.You should try and use Dialog instead of AlertDialog
As Explained in this Answer.

Customizing autocompletetextview

I need to implement a custom search functionality with autocomplete feature with custom adapter. I wrote my own custom adapter, Code is given below:
activity_main.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/icon_bg"
android:orientation="vertical"
tools:context="com.emc.kulkaa.myfinancials.MainActivity">
<AutoCompleteTextView
android:id="#+id/edt_search"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/imageView"
android:layout_alignStart="#+id/imageView"
android:layout_below="#+id/imageView"
android:layout_margin="16dp"
android:layout_marginTop="20dp"
android:background="#drawable/round_border_edittext"
android:drawableEnd="#drawable/clear"
android:drawableLeft="#drawable/white"
android:drawableStart="#drawable/white"
android:ems="10"
android:hint="#string/search_hint"
android:singleLine="true"
android:textColor="#color/colorWhite"
android:textColorHint="#color/colorWhite" />
</LinearLayout>
custom_item.xml
<?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="#color/cardview_color">
<TextView
android:id="#+id/autoCompleteItem"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp"
android:textSize="15sp"
style="#style/simple"/>
</LinearLayout>
styles.xml
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name = "android:autoCompleteTextViewStyle">#style/simple</item>
</style>
<style name="simple" parent="Widget.AppCompat.AutoCompleteTextView">
<item name="android:popupBackground">#drawable/simpleautocustom </item>
</style>
</resources>
simpleautocustom.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#color/colorWhite" />
<stroke
android:width="0dip"
android:color="#color/colorBlue" />
<corners android:radius="20dip" />
<padding
android:bottom="10dip"
android:left="25dip"
android:right="25dip"
android:top="10dip" />
</shape>
java code
public class MainActivity extends AppCompatActivity {
AutoCompleteTextView mEdtSearch;
#Override
protected void onCreate(Bundle savedInstanceState) {
String arr[] = {"DSA LSA", "CHILD", "AICHILES", "CHILDREN", "FRANCE", "FRENCH"};
final ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, R.layout.custom_item, R.id.autoCompleteItem, arr);
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mEdtSearch = (AutoCompleteTextView) findViewById(R.id.edt_search);
mEdtSearch.setFocusable(true);
mEdtSearch.setFocusableInTouchMode(true);
mEdtSearch.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
mEdtSearch.setAdapter(adapter);
}
});
}
}
Above code works fine, here is the screenshot of output:
However it doesn't still match expected output UI which is given below:
How can I change styles and custom shape so that I can achieve the output?

I have tried something for you, hope it will solve your problem and you can customize xmls i.e background of custom_item.xml TextView according to your need.
activity_main.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:background="#9A000000"
android:orientation="vertical">
<AutoCompleteTextView
android:id="#+id/edt_search"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/imageView"
android:layout_alignStart="#+id/imageView"
android:layout_below="#+id/imageView"
android:layout_margin="16dp"
android:layout_marginTop="20dp"
android:background="#drawable/round_border_edittext"
android:drawableEnd="#drawable/clear"
android:drawableLeft="#drawable/white"
android:drawableStart="#drawable/white"
android:ems="10"
android:hint="#string/search_hint"
android:popupBackground="#android:color/transparent"
android:singleLine="true"
android:textColor="#color/colorWhite"
android:textColorHint="#color/colorWhite"/>
</LinearLayout>
custom_item.xml
<?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="wrap_content"
android:background="#android:color/transparent">
<TextView
android:id="#+id/autoCompleteItem"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:background="#drawable/bg_rounded_border"
android:maxLines="1"
android:padding="15dp"
android:singleLine="true"
android:textColor="#color/white"
android:textSize="15sp"/>
</RelativeLayout>
bg_rounded_border.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#color/hint_color"/>
<corners android:radius="#dimen/padding_less"/>
</shape>
rest your MainActivity (java) code is same, there is no need to set a style to your list item text view.
Here is the screen shot of the output.

You can remove styles.
Only you should add android:padding="7dp" to parent LinearLayout and android:background="#drawable/simple_auto" to TextView in custom_item. It is working.
custom_item:
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:padding="7dp"
android:background="#color/cardview_color">
<TextView
android:id="#+id/autoCompleteItem"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/simple_auto"
android:padding="10dp"
android:textSize="15sp"/>
</LinearLayout>

Android - Styling Spinner within TabView

I've got an app that uses tabs for navigation, and on one of those tabs there is a spinner. However, when the spinner is selected and the actual select window comes up, all the text is white on a white background.
I've tried styling the layout but nothing I do changes the color of the font.
the main class
public class RealmsOfWickedry extends TabActivity {
/** Called when the activity is first created. */
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.tab);
TabHost tabHost = (TabHost)findViewById(android.R.id.tabhost);
TabSpec firstTabSpec = tabHost.newTabSpec("tid1");
TabSpec secondTabSpec = tabHost.newTabSpec("tid1");
firstTabSpec.setIndicator("Home").setContent(new Intent(this,FirstTab.class));
secondTabSpec.setIndicator("Catalog").setContent(new Intent(this,SecondTab.class));
tabHost.addTab(firstTabSpec);
tabHost.addTab(secondTabSpec);
}
public static View makeSpinner(Context context) {
View v = LayoutInflater.from(context).inflate(R.layout.spinner, null);
Spinner spinner = (Spinner) v.findViewById(R.id.spinner);
ArrayAdapter<String> adapter = new ArrayAdapter<String>(context, android.R.layout.simple_spinner_dropdown_item);
adapter.add("Item 1");
adapter.add("Item 2");
adapter.add("Item 3");
adapter.add("Item 4");
spinner.setAdapter(adapter);
return v;
}
}
the class with the spinner
public class SecondTab extends Activity {
/** Called when the activity is first created. */
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
/* Second Tab Content */
TextView textView = new TextView(this);
textView.setText("Choose a Category");
setContentView(textView);
setContentView(RealmsOfWickedry.makeSpinner(getParent()));
}
}
tab.xml
<?xml version="1.0" encoding="utf-8"?>
<TabHost android:layout_width="fill_parent"
android:layout_height="fill_parent" xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/tabhost">
<LinearLayout android:id="#+id/LinearLayout01"
android:orientation="vertical" android:layout_height="fill_parent"
android:layout_width="fill_parent">
<TabWidget android:id="#android:id/tabs"
android:layout_height="wrap_content" android:layout_width="fill_parent"></TabWidget>
<FrameLayout android:id="#android:id/tabcontent"
android:layout_height="fill_parent" android:layout_width="fill_parent"></FrameLayout>
</LinearLayout>
</TabHost>
spinner.xml
<?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">
<Spinner
android:id="#+id/spinner"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:prompt="#string/cat_prompt"
android:theme="#style/DropdownStyle"
/>
</LinearLayout>
themes.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="OverallStyle" parent="#android:Theme.Light">
<item name="android:windowBackground">#drawable/bg</item>
<item name="android:textColor">#color/white</item>
</style>
<style name="WelcomeStyle" parent="#android:Theme.Light">
<item name="android:typeface">monospace</item>
<item name="android:gravity">center</item>
</style>
<style name="CustomStyle" parent="#android:Theme.Light">
<item name="android:typeface">monospace</item>
<item name="android:gravity">top</item>
</style>
<style name="DropdownStyle" parent="#android:Theme.Light">
<item name="android:textColor">#color/red</item>
</style>
</resources>
Can anyone help me out with this?

It looks like you're trying to override the system theme to show a different color which is the right path to be on. Your spinner xml contains a reference to android:theme I haven't see that one before and it doesn't appear to be part of the API for this widget. To get your DropdownStyle to work, first, add it as part of your OverallStyle style with an item name of #android:attr/spinnerDropDownItemStyle. Second, change DropdownStyle's parent to #android:Widget.DropDownItem.Spinner. I'm assuming that OverallStyle is applied to the Activity or Application in the Manifest already. This will change the style for all Spinner drop down Items.
To apply only to this view's drop down items do only step two above then add style="#style/OverallStyle" to the spinner in its layout.
Additional Information:
<style name="DropdownStyle" parent="#android:Widget.DropDownItem.Spinner">
<item name="android:textColor">#color/red</item>
</style>
<style name="OverallStyle" parent="#android:Theme.Light">
<item name="android:windowBackground">#drawable/bg</item>
<item name="#android:attr/spinnerDropDownItemStyle">#style/DropdownStyle</item>
<item name="android:textColor">#color/white</item>
</style>
-OR-
themes.xml
<style name="DropdownStyle" parent="#android:Widget.DropDownItem.Spinner">
<item name="android:textColor">#color/red</item>
</style>
spinner.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<Spinner
android:id="#+id/spinner"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:prompt="#string/cat_prompt"
style="#style/DropdownStyle"
/>
</LinearLayout>