0

i want to make a dial pad just like IOS 7 in android with circle button. Any one can help me to make a circle button dial pad interface with different mobile screen supported in android.

user3835770
  • 37
  • 12
  • 1
    First, few people monitoring this tag will know what "a dial pad just like IOS 7" means. Upload a screenshot somewhere and link to it from your question. Second, please explain what you have tried and what specific problems you encountered. – CommonsWare Feb 22 '15 at 12:03
  • This is the link where you can see the dial pad http://www.iphonehacks.com/2013/06/8-ios-7-features.html – user3835770 Feb 23 '15 at 04:50
  • i make this layout but the problem i'm facing is different mobile screen size. The layout is not adjust automatically in mobile. i also used the "weight" but using this weight the shape of the button is changed. – user3835770 Feb 23 '15 at 04:55
  • Here you can find a library includes a sample with ios dial pad appearance : https://github.com/Ali-Rezaei/PadLayout – Ali Mar 15 '18 at 11:41

1 Answers1

0

It will take a lot of time if I want to write the code for that dial pad. So I write some steps that might help you plus some parts of a code that can show you the way:

  1. Make 2 drawable shape files. 2 oval shapes for buttons. (1 for default the other for pressed state)

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

    <stroke android:width="1dp" android:color="COLOR" />

</shape>

  2. Make a selector drawable file for your button that will change the background when user pushes the button.

    <?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

       <item android:state_pressed="true"
           android:drawable="@drawable/drawable2" />

       <item android:drawable="@drawable/drawable1" />

</selector>

  3. Make a style for your keypad. Set your selector as the background for your buttons.

    <style name="keypad">

    <item name="android:layout_margin">4dp</item>
    <item name="android:layout_width">0dp</item>
    <item name="android:layout_height">match_parent</item>
    <item name="android:layout_weight">1</item>
    <item name="android:textSize">@dimen/text_size_large</item>
    <item name="android:textStyle">bold</item>
    <item name="android:textColor">@color/black</item>
    <item name="android:background">@drawable/btn_blue</item>

</style>

  4. Provide different sizes for different screen sizes in dimens folder then use it as the size of your buttons.

enter image description here

  1. Make a Linear-layout and add 4 or 5 other Linear-layouts inside that layout.

    <LinearLayout
    style="@style/linearLayouts.vertical"
    android:id="@+id/layout_keypad"
    android:layout_marginBottom="4dp">

    <LinearLayout
        style="@style/linearLayouts.horizontal"
        android:id="@+id/bar_1to3">

        <Button
            style="@style/keypad"
            android:text="@string/btn_1"
            android:id="@+id/btn_1"
            android:layout_weight="1"/>

        <Button
            style="@style/keypad"
            android:text="@string/btn_2"
            android:id="@+id/btn_2"/>

        <Button
            style="@style/keypad"
            android:text="@string/btn_3"
            android:id="@+id/btn_3"/>

    </LinearLayout>

    <LinearLayout
        style="@style/linearLayouts.horizontal"
        android:id="@+id/bar_4to6">

        <Button
            style="@style/keypad"
            android:text="@string/btn_4"
            android:id="@+id/btn_4"/>

        <Button
            style="@style/keypad"
            android:text="@string/btn_5"
            android:id="@+id/btn_5"/>

        <Button
            style="@style/keypad"
            android:text="@string/btn_6"
            android:id="@+id/btn_6"/>

    </LinearLayout>

    <LinearLayout
        style="@style/linearLayouts.horizontal"
        android:id="@+id/bar_7to9">

        <Button
            style="@style/keypad"
            android:text="@string/btn_7"
            android:id="@+id/btn_7"/>

        <Button
            style="@style/keypad"
            android:text="@string/btn_8"
            android:id="@+id/btn_8"/>

        <Button
            style="@style/keypad"
            android:text="@string/btn_9"
            android:id="@+id/btn_9"/>

    </LinearLayout>

    <LinearLayout
        style="@style/linearLayouts.horizontal"
        android:id="@+id/bar_0toH">


        <Button
            style="@style/keypad"
            android:text="*"
            android:id="@+id/btn_s"/>

        <Button
            style="@style/keypad"
            android:text="@string/btn_0"
            android:id="@+id/btn_0"/>

        <Button
            style="@style/keypad"
            android:text="#"
            android:id="@+id/btn_h"/>

    </LinearLayout>
</LinearLayout>

This is the output:

enter image description here

I didn't provide dimens for my button size. So these buttons are not circle. I hope this shows you the way. Don't forget to vote up ;)