“This is the third day of my participation in the Gwen Challenge in November. Check out the details: The last Gwen Challenge in 2021.”

👉 About the author

As we all know, life is a long process of constantly overcoming difficulties and reflecting on progress. In this process, there will be a lot of questions and thoughts about life, so I decided to share my thoughts, experiences and stories to find resonance!!

Focus on Android/Unity and various game development tips, as well as various resource sharing (websites, tools, materials, source code, games, etc.)

Welcome to pay attention to the public account [Mr. Empty name] for more resources and communication!

👉 premise

This is small empty stay up late to write Android novice series, welcome to taste.

A Button has a shape property and a selecter property.

Selector is a background Selector that controls changes in the background of a button, such as when it’s pressed to lift the selected state.

Shape is used to set button backgrounds such as circles, rectangles, gradients, rounded corners, etc

They can be used individually on a Button or embedded in a Shape to achieve more Button effects.

The advantage of them is that we can easily customize the background, reduce the size of the installation package compared to using images, and better without distortion on different devices.

The downside is that it takes you longer to develop. After all, instead of using images directly, you are now using code. Depending on the actual development situation, choose to use images or custom shape.

👉 Practice

Today, we’ll start with Shape.

Select * from res-drawable and create a drawable Resource File. Select * from res-drawable and create a drawable Resource File.

Let’s look at the first layer properties of our shape:


      
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid></solid>
    <gradient></gradient>
    <corners></corners>
    <padding></padding>
    <size></size>
    <stroke></stroke>
</shape>
Copy the code

We can roughly guess the meaning from the name:

Corners: This property is used to define corners.

Gradient: Used to define the gradient color, which does not occur at the same time as solid.

Solid: is used to draw the filling color of the solid interior, which does not appear at the same time as gradient.

Stroke effect, solid line, dashed line color, etc.

Size and padding: more than size and padding. Padding is not used in most cases.

The following is an example:


      
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white"
    tools:context=".TextActivity">
    <! -- the round -- -- >
    <Button
        android:id="@+id/mtBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="50dp"
        android:layout_marginTop="10dp"
        android:background="@drawable/btn_shape"
        android:elevation="10dp"
        android:rotationX="- 23"
        android:rotationY="- 31"
        android:rotationZ="- 31"
        android:text="Here's the button."
        android:translationX="2dp"
        android:translationZ="10dp" />
    <! -- Hollow circular background -->
    <Button
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_marginLeft="50dp"
        android:layout_marginTop="70dp"
        android:background="@drawable/btn_shape0"
        android:elevation="10dp"
        android:text="Sesame seeds"
        android:translationX="2dp"
        android:translationZ="10dp" />
    <! This is the rounded corner button -->
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="50dp"
        android:layout_marginTop="150dp"
        android:background="@drawable/btn_shape1"
        android:elevation="10dp"
        android:rotationX="To 10"
        android:rotationY="20"
        android:rotationZ="To 30"
        android:text="Mr. Empty Name"
        android:translationX="2dp"
        android:translationZ="10dp" />
 
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:elevation="30dp"
        android:text="this button"
        android:textAllCaps="false" />
 
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="30dp"
        android:padding="6dp"
        android:layout_marginTop="220dp"
        android:autoLink="web"
        android:background="@drawable/btn_shape2"
        android:gravity="center"
        android:text="Text: Zhihu - Digging gold"
        android:textColor="#ffffff"
        android:textSize="16sp" />
</RelativeLayout>
Copy the code

btn_shape0.xml


      
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:innerRadius="30dp"
    android:shape="ring"
    android:thickness="2dp"
    android:useLevel="false">
    <solid android:color="#ff0000" />
</shape>
Copy the code

btn_shape1.xml


      
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#00ff00" />
    <corners android:radius="12dp" />
</shape>
Copy the code

btn_shape2.xml


      
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="50dp" />
    <gradient
        android:angle="0"
        android:centerColor="#0000ff"
        android:endColor="#00ff00"
        android:startColor="#ff0000"/>
</shape>
Copy the code

👉 other

📢 author: Kom and Kom in Kom

📢 reprint instructions – be sure to specify the source: Zhim Granular’s personal home page – column – Nuggets (juejin. Cn)

📢 welcome to like 👍 collect 🌟 message 📝