1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

Drain Droids

Android Studio For Beginners.Mobile Apps.Android Games.

Tuesday, January 1, 2019

How to to Centralize Button with Text,Place Icon on Left or Right and Texting Vice Versa

Today, I am going to show you three button patterns I normally use if I am developing informative applications. I mostly used this if I am developing informative or book apps. It is a Cool thing to learn. You may want to use it in one of your project.
1-How to centralize your button with text on it.
2-How to make image or Icon placed at left position while your text on right side.
3-Again, your image or icon on right and your text on left. It all your choices which one you want to do.

How to Centralize Your Button with Text on it
I am not going to talk much here, to achieve this just copy the code to your XML Text and view it in Design. You will see the result in the pattern Bellow.



<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="16dp">

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:orientation="horizontal">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#000000"
            android:paddingBottom="5dp"
            android:paddingLeft="16dp"
            android:paddingRight="16dp"
            android:paddingTop="8dp"
            android:text="Drain Droids"
            android:textColor="#e8e9e9" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="16dp"
            android:layout_marginRight="16dp"
            android:background="#000000"
            android:paddingBottom="5dp"
            android:paddingLeft="16dp"
            android:paddingRight="16dp"
            android:paddingTop="8dp"
            android:text="Drain Droids"
            android:textColor="#e8e9e9" />

    </LinearLayout>
</LinearLayout>

How to make image or Icon placed at left position while your text on right side.
From the image bellow, you can see the Icon right while your text goes to the left. Copy the code bellow and view it.


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="16dp">



    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:background="#000000"
        android:drawableLeft="@mipmap/iconn"
        android:paddingBottom="16dp"
        android:paddingLeft="16dp"
        android:paddingRight="36dp"
        android:paddingTop="10dp"
        android:text="Drain Droids"
        android:textColor="#e8e9e9" />
</LinearLayout>

How do you then replace this Icon with Yours? Follow this simple steps
Just drop your icon or image in the mipmap folder from RES-mipmap then replace iconn with your image name android:drawableRight="@mipmap/iconn"

How to make an Icon or image on the Right while your Text on the Left
This time the icon will be on the right while the text on the left, all most the same with the above the only different is the code changing from Left to right. android:drawableLeft="@mipmap/iconn"


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="16dp">



    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="26dp"
        android:background="#000000"
        android:drawableRight="@mipmap/iconn"
        android:paddingBottom="16dp"
        android:paddingLeft="16dp"
        android:paddingRight="36dp"
        android:paddingTop="10dp"
        android:text="Drain Droids"
        android:textColor="#e8e9e9" />
</LinearLayout>


        Change the icon using the same method we used in the above