Create Button with Rounded Corners

Rounded corners buttons are very common for most of the applications. For this, it is more useful if you define a resource file in drawable folder for rounded corners. Define a custome style for button in styles file. Textcolor and background of button depends on your choice. You simply need to replace textcolor and background as per your needs. If you need only one button with rounded corners then you don't need to define style. Otherwise, for multiple buttons style will be very useful.

1. Create a resource rounded_corners.xml layout for rounded corners in @drawable.

This is rounded_corners_button.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:padding="10dp"
        android:shape="rectangle" >

        <!-- This is background color-->
        <solid android:color="#ffffff"/>
        <corners android:radius="5dp"/>
    </shape>
</resources>

2. Now, in styles file, define a custom style for a button with rounded corners. This style can be used for multiple Buttons of your application. Here is style for the button.

<style name="CutomButton" parent="android:style/Widget.Button" >

   <item name="android:layout_width">wrap_content</item>

   <item name="android:layout_height">wrap_content</item>

   <item name="android:textColor">#34bdab</item></item>  

   <item name="android:textSize">20sp</item></item>                   <item name="android:background">@drawable/rounded_corners_button</item>    

 </style>

3. Finally, in your activity layout, create a button and use above mentioned style for button as below:

<Button
             android:id="@+id/btn_signup"
             style="@style/CustomButton"
             android:text="@string/signup"
             android:layout_gravity="center_horizontal"/>

That's all you need for a rounded corner button.

RCPlease don't hesitate to contact me.
Thank you

RadioGroup - Radio Buttons with Selectors

In this post, I created a layout with three Radio buttons. Since all three radio buttons are distinct, therefore, one selector for each radio button. Selector is used to switch between Checked and Un-Checked states and load different images when radio button is checked and un-checked.

First things first, we create three selectors.

Selector One for First Radio Button:

<?xml version="1.0" encoding="UTF-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
          <item android:drawable="@drawable/one_selected" android:state_checked="true"/>
          <item android:drawable="@drawable/one_unselected" android:state_checked="false"/>
</selector>

Selector Two for Second Radio Button:

<?xml version="1.0" encoding="UTF-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
          <item android:drawable="@drawable/two_selected" android:state_checked="true"/>
          <item android:drawable="@drawable/two_unselected" android:state_checked="false"/>
</selector>

Selector Three for Third Radio Button:

<?xml version="1.0" encoding="UTF-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
          <item android:drawable="@drawable/three_selected" android:state_checked="true"/>
          <item android:drawable="@drawable/three_unselected" android:state_checked="false"/>
</selector>

*one_selected / one_unselected etc. are two images which are shown when button is checked OR unchecked accordingly. Similarly, images required for other two radio buttons.

Now, create a layout and use aforementioned three selectors in respective radio buttons as below:

<?xml version="1.0" encoding="UTF-8"?>
<RadioGroup xmlns:android="http://schemas.android.com/apk/res/android"
                 android:padding="5dp"
                 android:gravity="center"
                 android:layout_height="wrap_content"
                 android:layout_width="wrap_content"
                 android:layout_gravity="center_horizontal"
                 android:orientation="horizontal">

<RadioButton
                 android:layout_height="wrap_content"
                 android:layout_width="wrap_content" "
                 android:button="@null"
                 android:background="@drawable/selector_one"
                 android:layout_margin="5dp"
                 android:id="@+id/one"/>

<RadioButton
                 android:layout_height="wrap_content"
                 android:layout_width="wrap_content"
                 android:button="@null"
                 android:background="@drawable/selector_two"
                 android:layout_margin="5dp"
                 android:id="@+id/two"/>

<RadioButton
                 android:layout_height="wrap_content"
                 android:layout_width="wrap_content"
                 android:button="@null"
                 android:background="@drawable/selector_three"
                 android:layout_margin="5dp"
                 android:id="@+id/three"/>
</RadioGroup>

That's it.

Please don't hesitate to contact me.
Thank you

ImageView with Multiple TextViews - Custom Row

This is a custom row for a Listview. In this row, there is an ImageView to hold an image, and three TextViews for different texts. I created this layout for my Gym list, which contains the Picture / Thumbnail, Name, City, and Distance of the Gym.


<?xml version="1.0" encoding="UTF-8"?>
-<RelativeLayout
                xmlns:android="http://schemas.android.com/apk/res/android"
                android:padding="5dp"
                android:gravity="center"
                android:layout_height="wrap_content"
                android:layout_width="fill_parent" >

<!-- ImageView -->
-<LinearLayout
                android:padding="5dp"
                android:layout_height="wrap_content"
                android:layout_width="wrap_content"
                android:layout_alignParentLeft="true"
                android:id="@+id/gym_image">

<ImageView
                android:layout_height="80dp"
                android:layout_width="110dp"
                android:id="@+id/list_image"
                android:background="@drawable/gym_thumbnail"/>

</LinearLayout>

<!-- Gym Name-->
<TextView
                android:layout_height="wrap_content"
                android:layout_width="wrap_content"
                android:id="@+id/gym_name"
                android:textStyle="bold"
                android:textSize="20sp"
                android:typeface="sans"
                android:textColor="#040404"
                android:text="@string/gym_name"
                android:layout_toRightOf="@+id/gym_image"
                android:layout_marginTop="20dp"/>

<!-- Gym City -->
<TextView
                android:layout_height="wrap_content"
                android:layout_width="fill_parent"
                android:id="@+id/gym_location"
                android:textSize="15sp"
                android:textColor="#888888"
                android:text="@string/gym_city"
                android:layout_toRightOf="@+id/gym_image"
                android:layout_marginTop="1dip"
                android:layout_below="@id/gym_name"/>

<!-- Gym Distance -->
<TextView
                android:gravity="right"
                android:layout_height="wrap_content"
                android:layout_width="wrap_content"
                android:layout_marginRight="5dp"
                android:id="@+id/gym_distance"
                android:textStyle="bold"
                android:textSize="15sp"
                android:textColor="#888888"
                android:text="@string/gym_distance"
                android:layout_alignTop="@id/gym_name"
                android:layout_alignParentRight="true"/>

</RelativeLayout

While development, it isn't easy to create layouts from scratch and customize it as per needs. Therefore, it is more time saving to pick a readymade layout and require few changes only.

Please don't hesitate to contact me.

Thank you