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
Related
I have a SearchableSpinner and I want to display the text in the center of it
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<com.toptoche.searchablespinnerlibrary.SearchableSpinner
android:id="#+id/spinner_client"
style="#style/spinner_style_v2"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:padding="5dp"
android:drawSelectorOnTop="true"/>
</LinearLayout>
and here the custom style. I tried adding <item name="android:textAlignment">center</item> but it's not working also I've tried <item name="android:paddingTop">10dp</item>
to see if the text will move to the bottom a little bit but it's not moving.
<style name="spinner_style_v2">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:background">#drawable/gradient_spinner</item>
<item name="android:popupBackground">#DFFFFFFF</item>
</style>
Spinner adapter
try {
if (clientList != null && clientList.size() > 0) {
ArrayAdapter<Client> clientArrayAdapter = new ArrayAdapter<Client>(getApplicationContext(), R.layout.support_simple_spinner_dropdown_item, clientList);
clientArrayAdapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
clientSpinner.setAdapter(clientArrayAdapter);
clientSpinner.setTitle("Choose Client");
}
} catch (Exception ex) {
Log.d(TAG, ex.toString());
}
To center item in your Spinner create a Custom layout and center TextView with android:gravity="center" like the XML below:
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center">
</TextView>
and in your java code use this layout as #LayoutRes in your Adapter :
ArrayAdapter<Client> clientArrayAdapter = new ArrayAdapter<Client>(getApplicationContext(),R.layout.simple_text, clientList);
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>
I tried to create my own custom loading dialog on android. That was no problem, but the dialog creates a really ugly shadow when it appears
I tried to use a default color theming my android and not my own. And i tried to set a transparent windows background and set the elevation already to 0dp
Screenshot
enter link description here
styles.xml
<style name="AppTheme.Dark" parent="Theme.AppCompat.NoActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<!--<item name="android:windowBackground">#color/colorPrimary</item>-->
<item name="android:windowBackground">#color/colorAccent</item>
</style>
<style name="AppTheme.Dark.Loading.Dialog" parent="Theme.AppCompat.Dialog.Alert">
<item name="android:windowBackground">#android:color/transparent</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="android:textColorPrimary">#FFFFFF</item>
<item name="android:background">#color/colorPrimary</item>
</style>
dialog-layout.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:theme="#style/AppTheme.Dark.Loading.Dialog"
android:padding="16dp"
>
<TextView
android:id="#+id/text_view_loading_dialog"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Authenticating..."
android:textSize="16sp"
android:textStyle="bold"
android:gravity="center"
/>
<ProgressBar
android:id="#+id/progress_bar_loading_dailog"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_toRightOf="#id/text_view_loading_dialog"
android:indeterminate="true" />
</LinearLayout>
Dialogclass
public class LoadingDialog extends AppCompatDialogFragment {
private TextView messageTextView;
#Override
public Dialog onCreateDialog(Bundle savedInstanceState) {
AlertDialog.Builder builder = new AlertDialog.Builder(getActivity());
LayoutInflater inflater = getActivity().getLayoutInflater();
View view = inflater.inflate(R.layout.layout_loading_dialog, null);
builder.setView(view);
messageTextView = view.findViewById(R.id.text_view_loading_dialog);
return builder.create();
}
Activity
LoadingDialog loadingDialog = new LoadingDialog();
loadingDialog.show(getSupportFragmentManager(), "loading dialog");
I expected a normal black or light grey shadow, like the depracted ProgressDialog by Google
In your activity, add the clearFlags() method, like this:
LoadingDialog loadingDialog = new LoadingDialog();
loadingDialog.getWindow().clearFlags(LayoutParams.FLAG_DIM_BEHIND);
loadingDialog.show(getSupportFragmentManager(), "loading dialog");
Yes that helps! Thank you very much. But removing this flag, remoes the whole dimming background. I build a workaround with a invisible dimmed View on my activity, which i make visible everytime my dialog pops up.
I added that to my activity layout
<View
android:id="#+id/dimBackground"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorDimBackground"
android:visibility="invisible">
</View>
My color is this:
<color name="colorDimBackground">#B3000000</color>
The #B3 is the hexcode for 70% opacity. You can find the a table with all hex values here:
Hex values for opacity
And before a I show the dialog, i make the view visible
findViewById(R.id.dimBackground).setVisibility(View.VISIBLE);
LoadingDialog loadingDialog = new LoadingDialog();
loadingDialog.show(getSupportFragmentManager(), "loading dialog");
Maybe there is a more practical solution for this problem, but i have no idea!?
This is the result:
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.
I am using default rating bar in android and there is a weird grey border is been showing, I want to remove them.
Please Note :: Many answers on stackoverflow suggest to use own images but I don't want to, Is there is any method to remove border?
My code ::
<RatingBar
android:id="#+id/layout_fragment_home_recycler_view_rating_bar1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:numStars="5"
android:stepSize="1.0"
android:rating="4.0"
style="?android:attr/ratingBarStyleSmall"
android:layout_marginTop="10dp"
android:layout_marginBottom="7dp"
android:layout_marginLeft="7dp" />
What I am getting
Just remove
style="?android:attr/ratingBarStyleSmall"
From your layout
Create custom style to your rating bar
<style name="RatingBarStyle" parent="#android:style/Widget.RatingBar">
<item name="android:progressDrawable">#drawable/ratingbar_selector</item>
<item name="android:minHeight">34dp</item>
<item name="android:maxHeight">34dp</item>
</style>
your rating bar selector
drawable/ratingbar_selector.xml
<item android:id="#+android:id/background"
android:drawable="#drawable/..." />
<item android:id="#+android:id/secondaryProgress"
android:drawable="#drawable/..." />
<item android:id="#+android:id/progress"
android:drawable="#drawable/..." />
This worked for me:
RatingBar coachRating = (RatingBar) findViewById(R.id.rcoach_rbr_rating);
LayerDrawable stars = (LayerDrawable) coachRating.getProgressDrawable();
stars.getDrawable(2).setColorFilter(ContextCompat.getColor(itemView.getContext(),
R.color.colorAccent),PorterDuff.Mode.SRC_ATOP); // for filled stars
stars.getDrawable(1).setColorFilter(ContextCompat.getColor(itemView.getContext(),
R.color.white), PorterDuff.Mode.SRC_ATOP); // for half filled stars
stars.getDrawable(0).setColorFilter(ContextCompat.getColor(itemView.getContext(),
R.color.white), PorterDuff.Mode.SRC_ATOP); // for empty stars
Reference: How can I set the color of android rating bar's stroke? (Not the color of the stars but the BORDER)
Try this, it don't need images.
public static void setRatingStyle(RatingBar ratingbar, int ratingNormalColor, int ratingProgressColor) {
LayerDrawable stars = (LayerDrawable) ratingbar.getProgressDrawable();
stars.getDrawable(0).setColorFilter(ratingNormalColor, PorterDuff.Mode.SRC_ATOP);
stars.getDrawable(2).setColorFilter(ratingProgressColor, PorterDuff.Mode.SRC_ATOP);
}