web-dev-qa-db-ja.com

XMLスタイルを使用してAndroidにカスタムボタンを作成する方法

XMLスタイルを使用して、このようなボタン[同じ背景とテキスト]の色を作成したい

enter image description here

それは単なる例であり、次のような他のテキストを書きたいと思います。About Me

それでも私はPhotoshopでデザイナーが作成したボタンを使用しています

    <ImageButton
        Android:id="@+id/imageButton5"
        Android:contentDescription="AboutUs"
        Android:layout_width="wrap_content"
        Android:layout_marginTop="8dp"
        Android:layout_height="wrap_content"
        Android:layout_below="@+id/view_pager"
        Android:layout_centerHorizontal="true"
        Android:background="@drawable/aboutus" />

注：すべてのサイズと形状でこの種のボタンが必要です

XMLのみを使用して作成したいAndroidアプリで画像を使用したくない

androidandroid-widget
55
Sneha

ボタンの背景シェイプを作成しようとしたことがありますか？

以下をご覧ください。

以下は、ボタンの画像から分離した画像です。

enter image description here

次に、Android：src "source"のImageButtonに次のように入力します。

Android:src="@drawable/Twitter"

次に、ImageButtonのシェイプを作成して、シェーダーの背景を黒にします。

Android:background="@drawable/button_shape"

button_shapeは、描画可能なリソースのxmlファイルです。

    <?xml version="1.0" encoding="UTF-8"?>
<shape 
    xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <stroke 
        Android:width="1dp" 
        Android:color="#505050"/>
    <corners 
        Android:radius="7dp" />

    <padding 
        Android:left="1dp"
        Android:right="1dp"
        Android:top="1dp"
        Android:bottom="1dp"/>

    <solid Android:color="#505050"/>

</shape>

これで実装してみてください。要件に応じて色の値を変更する必要がある場合があります。

機能しない場合はお知らせください。

69
iDroid Explorer

Androidcookbook.comの「AdriánSantalla」によって作成されたレシピからコピーアンドペースト： https://www.androidcookbook.com/Recipe.seam?recipeId=3307

1。ボタンの状態を表すXMLファイルを作成します

「button.xml」という名前のドロアブルにxmlを作成して、ボタンの状態に名前を付けます。

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item
        Android:state_enabled="false"
        Android:drawable="@drawable/button_disabled" />
    <item
        Android:state_pressed="true"
        Android:state_enabled="true"
        Android:drawable="@drawable/button_pressed" />
    <item
        Android:state_focused="true"
        Android:state_enabled="true"
        Android:drawable="@drawable/button_focused" />
    <item
        Android:state_enabled="true"
        Android:drawable="@drawable/button_enabled" />
</selector>

2。各ボタンの状態を表すXMLファイルを作成します

4つのボタン状態ごとに1つのxmlファイルを作成します。それらはすべて、drawablesフォルダーの下になければなりません。 button.xmlファイルに設定されている名前をフォローしましょう。

button_enabled.xml：

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:Android="http://schemas.Android.com/apk/res/Android" Android:shape="rectangle">
    <gradient
        Android:startColor="#00CCFF"
        Android:centerColor="#0000CC"
        Android:endColor="#00CCFF"
        Android:angle="90"/>
    <padding Android:left="7dp"
        Android:top="7dp"
        Android:right="7dp"
        Android:bottom="7dp" />
    <stroke
        Android:width="2dip"
        Android:color="#FFFFFF" />
    <corners Android:radius= "8dp" />
</shape>

button_focused.xml：

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:Android="http://schemas.Android.com/apk/res/Android" Android:shape="rectangle">
    <gradient
        Android:startColor="#F7D358"
        Android:centerColor="#DF7401"
        Android:endColor="#F7D358"
        Android:angle="90"/>
    <padding Android:left="7dp"
        Android:top="7dp"
        Android:right="7dp"
        Android:bottom="7dp" />
    <stroke
        Android:width="2dip"
        Android:color="#FFFFFF" />
    <corners Android:radius= "8dp" />
</shape>

button_pressed.xml：

<shape xmlns:Android="http://schemas.Android.com/apk/res/Android" Android:shape="rectangle">
    <gradient
        Android:startColor="#0000CC"
        Android:centerColor="#00CCFF"
        Android:endColor="#0000CC"
        Android:angle="90"/>
    <padding Android:left="7dp"
        Android:top="7dp"
        Android:right="7dp"
        Android:bottom="7dp" />
    <stroke
        Android:width="2dip"
        Android:color="#FFFFFF" />
    <corners Android:radius= "8dp" />
</shape>

button_disabled.xml：

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:Android="http://schemas.Android.com/apk/res/Android" Android:shape="rectangle">
    <gradient
        Android:startColor="#F2F2F2"
        Android:centerColor="#A4A4A4"
        Android:endColor="#F2F2F2"
        Android:angle="90"/>
    <padding Android:left="7dp"
        Android:top="7dp"
        Android:right="7dp"
        Android:bottom="7dp" />
    <stroke
        Android:width="2dip"
        Android:color="#FFFFFF" />
    <corners Android:radius= "8dp" />
</shape>

3。ボタンのスタイルを表すXMLファイルを作成します

上記のファイルを作成したら、アプリケーションボタンスタイルを作成します。ここで、styles.xmlという名前の新しいXMLファイルを作成する必要があります（まだ持っていない場合）。ここで、より多くのカスタムスタイルをde valuesディレクトリに含めることができます。

このファイルには、アプリケーションの新しいボタンスタイルが含まれます。新しいボタンスタイル機能を設定する必要があります。これらの機能の1つである新しいスタイルの背景には、最初の手順で作成されたボタン（button.xml）ドロアブルへの参照を設定する必要があります。新しいボタンスタイルを参照するには、name属性を使用します。

以下の例は、styles.xmlファイルのコンテンツを示しています。

<resources>
    <style name="button" parent="@Android:style/Widget.Button">
        <item name="Android:gravity">center_vertical|center_horizontal</item>
        <item name="Android:textColor">#FFFFFFFF</item>
        <item name="Android:shadowColor">#FF000000</item>
        <item name="Android:shadowDx">0</item>
        <item name="Android:shadowDy">-1</item>
        <item name="Android:shadowRadius">0.2</item>
        <item name="Android:textSize">16dip</item>
        <item name="Android:textStyle">bold</item>
        <item name="Android:background">@drawable/button</item>
        <item name="Android:focusable">true</item>
        <item name="Android:clickable">true</item>
    </style>
</resources>

4。独自のカスタムアプリケーションテーマでXMLを作成します

最後に、デフォルトのAndroidボタンスタイルをオーバーライドする必要があります。そのためには、themes.xml（まだ持っていない場合）という新しいXMLファイルをvaluesディレクトリに作成し、デフォルトのAndroidボタンスタイルをオーバーライドする必要があります。

以下の例は、themes.xmlのコンテンツを示しています。

<resources>
    <style name="YourApplicationTheme" parent="Android:style/Theme.NoTitleBar">
        <item name="Android:buttonStyle">@style/button</item>
    </style>
</resources>

カスタムボタンを探していたとき、皆さんと同じ運が得られることを願っています。楽しい。

89
Gramowski

Styled Button をご覧ください。きっと役に立ちます。インターネット上で検索してください多くの例があります。

例：スタイル

<style name="Widget.Button" parent="Android:Widget">
    <item name="Android:background">@drawable/red_dot</item>
</style>

red_dotの代わりにセレクターを使用できます

赤い点：

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

    <solid Android:color="#f00"/>
    <size Android:width="55dip"
        Android:height="55dip"/>
</shape>

ボタン：

<Button
        Android:id="@+id/button1"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_alignParentTop="true"
        Android:layout_centerHorizontal="true"
        Android:layout_marginTop="49dp"
        style="@style/Widget.Button"
        Android:text="Button" />
19
Siddhesh
<?xml version="1.0" encoding="utf-8"?>
<shape 
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:shape="oval">

   <solid 
       Android:color="#ffffffff"/>

   <size 
       Android:width="@dimen/shape_circle_width"
        Android:height="@dimen/shape_circle_height"/>
</shape>

1.これをドロアブルに追加します

2.ボタンの背景として設定

5
Gru
<gradient Android:startColor="#ffdd00"
    Android:endColor="@color/colorPrimary"
    Android:centerColor="#ffff" />

<corners Android:radius="33dp"/>

<padding
    Android:bottom="7dp"
    Android:left="7dp"
    Android:right="7dp"
    Android:top="7dp"
    />
0
Rajneesh Shukla