Jak stworzyć własny przycisk na Androida przy użyciu stylów XML

Question

Chcę, aby ten rodzaj przycisku [samo tło & tekst] kolory za pomocą Style XML

to tylko dla przykładu, chcę napisać kilka innych tekstów, takich jak: O mnie

Nadal używam przycisku utworzonego przez projektanta w Photoshopie

<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" /> 

Uwaga: muszę tego rodzaju przycisku w każdym rozmiarze i kształcie

nie chcę użyć dowolnego obrazu w mojej aplikacji Android chcę zrobić to za pomocą XML tylko

Answer 1

Czy kiedykolwiek próbował stworzyć tło kształt dla jakichkolwiek przycisków?

to sprawdzić poniżej:

Poniżej jest oddzielona obraz z obrazu przycisku.

Teraz umieścić, że w swojej ImageButton dla Androida: src "źródło" tak:

android:src="@drawable/twitter" 

Teraz wystarczy utworzyć kształt ImageButton mieć czarne tło cieniowania.

android:background="@drawable/button_shape" 

i button_shape jest plik xml w zasobie rozciągliwej:

<?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> 

Wystarczy spróbować wdrożyć go z tym. Może być konieczna zmiana wartości koloru zgodnie z wymaganiami.

Daj mi znać, jeśli to nie zadziała.

Answer 2

<?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.Add to w swojej rozciągliwej

2.Set jako tło do przycisku

Answer 3

Wystarczy popatrzeć na Styled Button to na pewno ci pomoże. Istnieje wiele przykładów wyszukiwania w Internecie.

np: styl

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

można użyć przełącznika zamiast red_dot

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> 

Przycisk:

<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" /> 

Answer 4

kopiowaniem wklejony z przepisu napisanego przez "Adrián Santalla" na androidcookbook.com: https://www.androidcookbook.com/Recipe.seam?recipeId=3307

1. Utwórz plik XML, który reprezentuje przycisk stany

Załóż XML do rozciągliwej nazwie 'button.xml' na nazwę przycisku stanowi:

<?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 
 
    \t android:state_pressed="true" 
 
    \t android:state_enabled="true" 
 
     android:drawable="@drawable/button_pressed" /> 
 
    <item 
 
    \t android:state_focused="true" 
 
    \t android:state_enabled="true" 
 
     android:drawable="@drawable/button_focused" /> 
 
    <item 
 
    \t android:state_enabled="true" 
 
     android:drawable="@drawable/button_enabled" /> 
 
</selector>

2. Utwórz plik XML, który reprezentuje każde stanu przycisku

Utwórz jeden plik XML dla każdego z czterech stanów przycisku. Wszystkie powinny znajdować się w folderze z rysunkami. Śledźmy nazwy ustawione w pliku 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. Utwórz plik XML, który reprezentuje przycisk styl

Po utworzeniu powyższych plików nadszedł czas na utworzenie stylu przycisku aplikacji. Teraz musisz utworzyć nowy plik XML o nazwie styles.xml (jeśli jeszcze go nie masz), w którym możesz dodać więcej niestandardowych stylów do katalogu de values.

Ten plik będzie zawierał nowy styl przycisku aplikacji. Musisz ustawić w nim nowe funkcje stylu przycisków. Zauważ, że jedna z tych funkcji, tło twojego nowego stylu, powinna być ustawiona z odwołaniem do rysowania przycisku (button.xml), który został utworzony w pierwszym kroku. Aby odwołać się do nowego stylu przycisków używamy atrybutu name.

Poniższy przykład pokazuje zawartość pliku 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.Utwórz plik XML z własnym niestandardowym motywem aplikacji

Wreszcie należy zastąpić domyślny styl przycisku Android. W tym celu należy utworzyć nowy plik XML o nazwie themes.xml (jeśli jeszcze go nie masz) w katalogu wartości i zastąpić domyślny styl przycisku Android.

Poniższy przykład pokazuje zawartość themes.xml:

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

nadzieję, że faceci mają takie samo szczęście jak miałem z tym, kiedy szukałam przycisków niestandardowych . Cieszyć się.