how to make a ios dial pad interface in android

问题:

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.

回答1:

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.

5. 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:

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 ;)