问题
I want to design a TextView
and EditText
with round corner.
There is one straight forward solution for this. Using custom shape background.
But since material design 1.1.0 introduces shapeAppearance
theme attribute to apply a different shape to the corner which works fine for all Material components like MaterialButton
, BottomSheet
, MaterialCardView
, etc.
But it does not work for EditText
and TextView
. I tried using MaterialTextView
as well but it did not work. This how I am setting up style for EditText
which is similar to TextView
also.
<style name="ThemeOverlay.Chat" parent="AppTheme">
<item name="editTextStyle">@style/Overlay.Chat.EditText</item>
</style>
<style name="Overlay.Chat.EditText" parent="Widget.AppCompat.EditText">
<item name="shapeAppearanceOverlay">@style/ShapeAppearance.Overlay.FullRound</item>
</style>
<style name="ShapeAppearance.Overlay.FullRound" parent="ShapeAppearance.MaterialComponents.LargeComponent">
<item name="cornerSize">50dp</item>
</style>
回答1:
You can apply the MaterialShapeDrawable
introduced by the Material Components Library also to a TextView
or EditText
.
In this case you can't use the shapeAppearanceOverlay
attribute in your layout or style because these components don't have a MaterialShapeDrawable
defined by default as the MaterialButton
, MaterialCardView
.
But you apply the same ShapeAppearence
programmatically.
For example:
<TextView
android:id="@+id/textview"
android:backgroundTint="@color/secondaryColor"
../>
Programmatically you can use something like:
float radius = getResources().getDimension(R.dimen.default_corner_radius);
TextView textView = findViewById(R.id.textview);
Define the ShapeAppearanceModel
with rounded corners:
ShapeAppearanceModel shapeAppearanceModel = new ShapeAppearanceModel()
.toBuilder()
.setAllCorners(CornerFamily.ROUNDED,radius)
.build();
Create a MaterialShapeDrawable
with this ShapeAppearanceModel
:
MaterialShapeDrawable shapeDrawable = new MaterialShapeDrawable(shapeAppearanceModel);
Apply this background to your view:
ViewCompat.setBackground(textView,shapeDrawable);
You can achieve the same behavior with an EditText
(but you can also use a TextInputLayout
in this case):
Define in your layout:
<EditText
android:id="@+id/edittext"
android:paddingLeft="4dp"
android:drawableLeft="@drawable/ic_add_24px"
android:drawableTint="@color/..."
android:hint="@string/...."
..>
Then apply the MaterialShapeDrawable
:
EditText editText = findViewById(R.id.edittext);
//Apply the rounded corners
ShapeAppearanceModel shapeAppearanceModel = new ShapeAppearanceModel()
.toBuilder()
.setAllCorners(CornerFamily.ROUNDED,radius)
.build();
MaterialShapeDrawable shapeDrawable =
new MaterialShapeDrawable(shapeAppearanceModel);
//Fill the background color
shapeDrawable.setFillColor(ContextCompat.getColorStateList(this,R.color....));
//You can also apply a stroke
shapeDrawable.setStroke(2.0f, ContextCompat.getColor(this,R.color....));
//Apply the shapeDrawable to the background.
ViewCompat.setBackground(editText,shapeDrawable);
If you would like to use ShapeAppareace
defined in the styles you can use
the different ShapeAppearanceModel
constructors. For example:
ShapeAppearanceModel shapeAppearanceModel =
ShapeAppearanceModel.builder( this,
R.style.ShapeAppearance_MaterialComponents_MediumComponent,
R.style.ShapeOverlay).build();
with:
<style name="ShapeOverlay">
<item name="cornerSize">16dp</item>
</style>
回答2:
Create a drawable resource file with rounded_edittext.xml
<?xml version="1.0" encoding="utf-8"?>
<!-- res/drawable/rounded_edittext.xml -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" android:padding="10dp">
<solid android:color="#FFFFFF"/>
<corners
android:bottomRightRadius="15dp"
android:bottomLeftRadius="15dp"
android:topLeftRadius="15dp"
android:topRightRadius="15dp"/>
</shape>
Then in your editText call the created drawable as andriod:background
<?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"
>
<EditText
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="5dip"
android:background="@drawable/rounded_edittext" />
</LinearLayout>
I think you are good to go.
来源:https://stackoverflow.com/questions/62317455/how-to-apply-shapeappreanace-in-edittext-and-textview-using-material-design-in-a