web-dev-qa-db-ja.com

android


ここにある丸いボタンに似たボタンを作成しようとしました-
http://livetools.uiparade.com/index.html
（すべてのボタンは浸漬セクション内にあるように見えます）ボタンを配置して
円形の背景で、両方に同じグラデーションにならない小さなグラデーションを与える
この結果は得られましたが-

enter image description here

（できる限りコードをアップロードします）どのようにして同じ外観を実現できますか？

androidandroid-uiandroid-buttonandroid-styles
12
crazyPixel

このコードを試してください。こんな感じの画像が作れます

Android xml button

これは、次のコードを使用して、リンクする最初のボタンに似ています。重要なのは、<layer-list>シェイプを上下に重ねて、目的の効果を生み出します。

ファイル：res/drawable/button.xml

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

  <!-- Outside border/shadow -->
  <item>
    <shape Android:shape="oval">
      <size Android:width="200dp" Android:height="200dp" />
      <gradient Android:angle="90" Android:startColor="#f4f4f4" Android:endColor="#b9b9b9" />
    </shape>
  </item>

  <!-- Inset -->
  <item Android:top="1dp" Android:left="1dp" Android:right="1dp" Android:bottom="1dp">
      <shape Android:shape="oval">
        <gradient Android:angle="90" Android:startColor="#dcdcdc" Android:endColor="#c9c9c9" />
      </shape>
  </item>

  <!-- Inside border/shadow -->
  <item Android:top="15dp" Android:left="15dp" Android:right="15dp" Android:bottom="15dp">
    <shape Android:shape="oval">
      <gradient Android:angle="90" Android:startColor="#8c8c8c" Android:endColor="#cbcbcb" />
    </shape>
  </item>

  <!-- Main button -->
  <item Android:top="16dp" Android:left="16dp" Android:right="16dp" Android:bottom="16dp">
    <shape Android:shape="oval">
      <solid Android:color="#ffffff" />
    </shape>
  </item>

  <!-- Button image -->
  <item Android:top="70dp" Android:left="70dp" Android:right="70dp" Android:bottom="70dp">
    <shape Android:shape="rectangle">
      <solid Android:color="#3b88c2" />
      <corners Android:radius="20dp" />
    </shape>
  </item>

  <item Android:top="75dp" Android:left="75dp" Android:right="75dp" Android:bottom="75dp">
    <shape Android:shape="rectangle">
      <solid Android:color="#ffffff" />
      <corners Android:radius="20dp" />
    </shape>
  </item>

  <item Android:top="80dp" Android:left="80dp" Android:right="80dp" Android:bottom="80dp">
    <shape Android:shape="rectangle">
      <solid Android:color="#3b88c2" />
      <corners Android:radius="20dp" />
    </shape>
  </item>

</layer-list>

メインレイアウトに、この画像を表示するImageViewを追加します。

<ImageView
    Android:src="@drawable/button" />

JavaコードでImageViewを与えることにより、OnClickListenerをクリック可能にすることができます。

26
savanto

このリンクに移動して、カスタム3Dボタンを生成します。

http://angrytools.com/Android/button/

buttonshape.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android" Android:shape="rectangle" >
<corners
Android:radius="30dp"
/>
<gradient
Android:gradientRadius="45"
Android:centerX="35%"
Android:centerY="50%"
Android:startColor="##4CAB0B"
Android:endColor="#004507"
Android:type="radial"
/>
<padding
Android:left="0dp"
Android:top="0dp"
Android:right="0dp"
Android:bottom="0dp"
/>
<size
Android:width="270dp"
Android:height="60dp"
/>
<stroke
Android:width="3dp"
Android:color="#0B8717"
/>
</shape>

ボタンコード

<Button
Android:id="@+id/angry_btn"

Android:text="Button"
Android:textColor="#FFFFFF"
Android:textSize="30sp"

Android:layout_width="270dp"
Android:layout_height="60dp"
Android:background="@drawable/buttonshape"
Android:shadowColor="#A8A8A8"
Android:shadowDx="3"
Android:shadowDy="2"
Android:shadowRadius="8"
/>
4
Droidgeek