web-dev-qa-db-ja.com

Android丸い角、波及効果、影なしのボタン

Android丸い角のボタン。ただし、丸い角（左下と右下）に沿って、周囲に不要な灰色の影があります。

rounded corner button

私のコードは次のとおりです。

drawable/my_button.xml

<?xml version="1.0" encoding="utf-8"?>
  <selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item>
      <shape Android:shape="rectangle">
        <stroke Android:width="1dp" Android:color="#ffa6c575" />
        <solid Android:color="#ffa6c575"/>
        <corners Android:radius="15dp" />
      </shape>
    </item>
  </selector>

次に、レイアウトxmlファイルには、次のものがあります。

<LinearLayout
  <Button
    Android:id="@+id/buy_button"
    Android:layout_width="0dp"
    Android:layout_weight="1"
    Android:layout_height="35dp"
    Android:layout_gravity="center"
    Android:background="@drawable/my_button"
    Android:textColor="@Android:color/white"
    Android:text="BUY" />

  <View
    Android:layout_width="10dp"
    Android:layout_height="match_parent"
    Android:background="@Android:color/transparent" >
  </View>

  <Button
    Android:id="@+id/sell_button"
    Android:layout_width="0dp"
    Android:layout_weight="1"
    Android:layout_height="35dp"
    Android:layout_gravity="center"
    Android:background="@drawable/my_button"
    Android:textColor="@Android:color/white"
    Android:text="SELL" />

</LinearLayout>

1）丸い角（左下と右下）の周りの余分な灰色の影を取り除くにはどうすればよいですか？

2）ボタンにはデフォルトのリップル効果があります。デフォルトのリップル効果を維持するにはどうすればよいですか？

androidbuttonrounded-cornersripple
15
Shuwn Yuan Tee

私は最終的に以下のコードでそれを解決しました。これにより、ボタンの角が丸くなります。また、Androidバージョン> = V21では、波及効果が使用されます。以前のAndroidバージョンでは、Android:state_pressed, Android:state_focusedなど.

layout xmlファイル：

<Button
    style="?android:attr/borderlessButtonStyle"
    Android:id="@+id/buy_button"
    Android:layout_width="0dp"
    Android:layout_weight="1"
    Android:layout_height="match_parent"
    Android:gravity="center"
    Android:background="@drawable/green_trading_button_effect"
    Android:textColor="@Android:color/white"
    Android:text="BUY" />

ボタンonclickリップル効果（Android> = v21）：

drawable-v21/green_trading_button_effect.xml

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:color="@color/ripple_material_dark">

    <item Android:id="@Android:id/mask">
        <shape Android:shape="rectangle">
            <solid Android:color="@Android:color/white" />
            <corners Android:radius="5dp" />
        </shape>
    </item>

    <item Android:drawable="@drawable/green_trading_button" />
</ripple>

以前のAndroidバージョンの場合、onclick中に背景色を変更するだけです。

drawable/green_trading_button_effect.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item Android:state_pressed="true" Android:drawable="@drawable/green_trading_button_selected" />
    <item Android:state_focused="true" Android:drawable="@drawable/green_trading_button_selected" />
    <item Android:state_selected="true" Android:drawable="@drawable/green_trading_button_selected" />
    <item Android:drawable="@drawable/green_trading_button" />
</selector>

drawable/green_trading_button.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:shape="rectangle">

    <solid Android:color="#ffa6c575"/>
    <!-- rounded corners -->
    <corners Android:radius="5dp" />
</shape>

drawable/green_trading_button_selected.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:shape="rectangle">

    <solid Android:color="#ffc5dca8"/>
    <!-- corners corners -->
    <corners Android:radius="5dp" />
</shape>
26
Shuwn Yuan Tee

drawable/ripple_circle.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item Android:drawable="@drawable/circle" Android:state_pressed="true">
        <shape Android:shape="rectangle">
            <corners Android:bottomLeftRadius="25dp" Android:bottomRightRadius="25dp" Android:topLeftRadius="25dp" Android:topRightRadius="25dp" />
        </shape>
    </item>
    <item Android:drawable="@Android:color/transparent" />
</selector>

drawablev21/ripple_circle.xml

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:color="@color/ripple_white">
    <item Android:id="@Android:id/mask">
        <shape Android:shape="rectangle">
            <corners
                Android:bottomLeftRadius="25dp"
                Android:bottomRightRadius="25dp"
                Android:topLeftRadius="25dp"
                Android:topRightRadius="25dp" />
            <solid Android:color="?android:colorAccent" />
        </shape>
    </item>
</ripple>

drawable/button_circle_background.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:shape="rectangle">
    <corners
        Android:bottomRightRadius="25dp"
        Android:topRightRadius="25dp"
        Android:bottomLeftRadius="25dp"
        Android:topLeftRadius="25dp"/>
    <solid Android:color="@color/colorAccent" />
</shape>

drawable/circle.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:shape="rectangle">
    <corners
        Android:bottomRightRadius="25dp"
        Android:topRightRadius="25dp"
        Android:bottomLeftRadius="25dp"
        Android:topLeftRadius="25dp"/>
    <solid Android:color="@color/ripple_white" />
</shape>

スタイルとリップルをボタンに設定する

<Button
            Android:id="@+id/choose_folder"
            style="@style/Base.Widget.AppCompat.Button.Borderless"
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            Android:layout_margin="8dp"
            Android:background="@drawable/button_circle_background"
            Android:foreground="@drawable/ripple_circle"
            Android:text="Chose Folder"
            Android:textColor="@Android:color/white" />

link に触発された

これは、丸い角のある形状で影のないボタンに完璧な丸い角リップル効果を追加します

ボタンを押すGIF

9
Legend Mortal

Xmlでこれを設定してみてください。これは私のために働いた。

style="?android:attr/borderlessButtonStyle"

また、APIレベル21以上をターゲットにしている場合は、

Android:stateListAnimator="@null"

このリンクにはさらに回答があります ボタンの影を削除する方法（Android）

3
wick.ed

描画可能なファイルで、次のようなファイルを作成します。

button_background.xml：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:shape="rectangle">
    <corners
        Android:bottomRightRadius="15dp"
        Android:topRightRadius="15dp"
        Android:bottomLeftRadius="15dp"
        Android:topLeftRadius="15dp"/>
    <solid Android:color="@color/blue_500" />
</shape>

半径を大きくして、より湾曲させます。

また、ボタンのXMLで、上部のように作成したボタンと背景に境界線のないスタイルを指定します。

<Button
    Android:id="@+id/task_action_btn"
    style="@style/Base.Widget.AppCompat.Button.Borderless"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:gravity="center"
    Android:background="@drawable/button_background"
    Android:textAppearance="@style/Base.TextAppearance.AppCompat.Body1"
    Android:textColor="@Android:color/white" />
2
Meikiem

コードでこれを試してください

Button buyButton = (Button) findViewById(R.id.buy_button);
Button sellButton = (Button) findViewById(R.id.sell_button);

hideShadow(buyButton);
hideShadow(sellButton);


public void hideShadow(Button button) {
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Lollipop) {
        button.setElevation(0);
    }
}
0
VinayagaSundar