0

Requirement: I want to design a round button embedded with image and if i click once on button, then the image gets changed to another image as well as it should navigate to another screen. how can i make it possible.

here I am able to do the round button, and when by clicking on image gets changed to another image. But my problem is: Image displayed as it is with the size in square modal but not in the round button. It is displayed out of the boundaries of the button. I need to show the image in circular manner and it should be in the round button. How can I make it possible: here is my code:

MainActivity.java:

      package com.example.circularbutton;

        import android.support.v7.app.ActionBarActivity;
     import android.content.Context;
      import android.content.Intent;
       import android.os.Bundle;
         import android.view.Menu;
           import android.view.MenuItem;
     import android.view.View;
       import android.view.View.OnClickListener;
           import android.widget.Button; 

    public class MainActivity extends ActionBarActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    CircleImageView b1=(CircleImageView)  findViewById(R.id.btn);//showing issue here
    b1.setImageResource(R.drawable.my);


        final Context context=this;
        b1.setOnClickListener(new OnClickListener() {


            @Override
            public void onClick(View arg0) {

            Intent intent = new Intent(context, Hello.class);
                           startActivity(intent);   
            }
            } );
    }

    }




   my *myborder3.xml* it shapes the button

 <?xml version="1.0" encoding="utf-8"?>

         <shape xmlns:android="http://schemas.android.com/apk/res/android">

  <solid android:color="#FFFFFF"/>    

  <stroke android:width="5dp"
    android:color="#000000"
    />

   <padding android:left="45dp"
     android:top="45dp"
     android:right="45dp"
     android:bottom="45dp"
     /> 

 <corners android:bottomRightRadius="55dip" android:bottomLeftRadius="55dip" 
     android:topLeftRadius="55dip" android:topRightRadius="55dip"/> 

       </shape>




   *my.xml* is:

 <selector xmlns:android="http://schemas.android.com/apk/res/android">

  <item android:state_focused="true" android:drawable="@drawable/mine">
   </item>
     <item android:state_pressed="true"   android:drawable="@drawable/mine1"></item>
 <item android:drawable="@drawable/mine10" ></item>
        </selector>

activiyt_main.xml:

   <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.example.circularbutton.MainActivity" >


   <de.hdodenhof.circleimageview.CircleImageView
  android:id="@+id/btn"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
   android:background="@drawable/myborder3"
       android:text="Test" />

       </RelativeLayout>


  build.gradile:

      buildscript {
    repositories {
    mavenCentral()
    jcenter()
    }
  dependencies {



      compile de.hdodenhof.circleimageview.CircleImageView //added here


   classpath 'de.richsource.gradle.plugins:gwt-gradle-plugin:0.6'
    classpath 'com.android.tools.build:gradle:1.0.0'
  }
   }

       allprojects {
   apply plugin: "eclipse"
   apply plugin: "idea"

   version = '1.0'
    ext {
    appName = 'CircularBUtton'
    gdxVersion = '1.5.3'
    roboVMVersion = '1.0.0-beta-03'
    box2DLightsVersion = '1.3'
    ashleyVersion = '1.3.1'
    aiVersion = '1.4.0'
}

     repositories {
    mavenCentral()
    maven { url "https://oss.sonatype.org/content/repositories/snapshots/" }
    maven { url "https://oss.sonatype.org/content/repositories/releases/" }
  }
  }

  project(":desktop") {
apply plugin: "java"


dependencies {
    compile project(":core")
    compile "com.badlogicgames.gdx:gdx-backend-lwjgl:$gdxVersion"
    compile "com.badlogicgames.gdx:gdx-platform:$gdxVersion:natives-desktop"
    compile "com.badlogicgames.gdx:gdx-box2d-platform:$gdxVersion:natives-desktop"
}
}

    project(":android") {
apply plugin: "android"

configurations { natives }

    dependencies {
    compile project(":core")
    compile "com.badlogicgames.gdx:gdx-backend-android:$gdxVersion"
    natives "com.badlogicgames.gdx:gdx-platform:$gdxVersion:natives-armeabi"
    natives "com.badlogicgames.gdx:gdx-platform:$gdxVersion:natives-armeabi-v7a"
    natives "com.badlogicgames.gdx:gdx-platform:$gdxVersion:natives-x86"
    compile "com.badlogicgames.gdx:gdx-box2d:$gdxVersion"
    natives "com.badlogicgames.gdx:gdx-box2d-   platform:$gdxVersion:natives-armeabi"
    natives "com.badlogicgames.gdx:gdx-box2d-platform:$gdxVersion:natives-armeabi-v7a"
    natives "com.badlogicgames.gdx:gdx-box2d- platform:$gdxVersion:natives-x86"
   }
   }

       project(":html") {
  apply plugin: "gwt"
   apply plugin: "war"


  dependencies {
    compile project(":core")
    compile "com.badlogicgames.gdx:gdx-backend-gwt:$gdxVersion"
    compile "com.badlogicgames.gdx:gdx:$gdxVersion:sources"
    compile "com.badlogicgames.gdx:gdx-backend-gwt:$gdxVersion:sources"
    compile "com.badlogicgames.gdx:gdx-box2d:$gdxVersion:sources"
    compile "com.badlogicgames.gdx:gdx-box2d-gwt:$gdxVersion:sources"
   }
   }

    project(":core") {
      apply plugin: "java"


     dependencies {
    compile "com.badlogicgames.gdx:gdx:$gdxVersion"
    compile "com.badlogicgames.gdx:gdx-box2d:$gdxVersion"
    }
    }

  tasks.eclipse.doLast {
  delete ".project"
    }

enter image description here

I am beginner in android development. Please help me.

more clearly:

Button and image should be circular and when user clicks on that it should display another image in same button in circular and should navigate to another screen

like this pic: this I've downloaded from some reference site

Vishwak
  • 89
  • 1
  • 11
  • can u add some screenshots of what's the output? – Andro Selva Jan 21 '15 at 18:57
  • you don't have a button click listener anywhere - how does the app know what to do when the button is clicked? – WOUNDEDStevenJones Jan 21 '15 at 19:05
  • If i click on button it gets changed to another image. Sorry i ddint provided the listener I will provide further. But How can I shape the Image to circle(it should fit in the round button). If i clicked on the image(mine10 in my.xml) shown in screen shot it is displaying another image (mine1 in my.xml) for 1-2 seconds and again it showing first image only. – Vishwak Jan 21 '15 at 19:06
  • can you post your button onclicklistener code as well? – Andro Selva Jan 21 '15 at 19:11
  • I don't think it is necessary for my requirement. Ok any way I will update the code with the listener. – Vishwak Jan 21 '15 at 19:14
  • If you want to navigate to a new screen when you click the button, some sort of button click listener is absolutely necessary. Otherwise the app will just 'animate' your button based on `my.xml`, but it won't actually do anything. – WOUNDEDStevenJones Jan 21 '15 at 19:16
  • I've done with my code.. it gets navigated to another screen after showing the second image for 1-2 seconds. – Vishwak Jan 21 '15 at 19:19

4 Answers4

2

Maybe CircleImageView could be what you are looking for. All you need to do is include this line in you application's build.gradle file inside dependencies:

compile 'de.hdodenhof:circleimageview:1.2.1'

And then inside your xml layout use de.hdodenhof.circleimageview.CircleImageView instead of plain ImageView.

Update: In case of using Eclipse you're gonna have to import the library manually. Clone the project from github and import into your workspace.

Update 2: You're inflating your view as a Button which is wrong. You should cast it to CircleImageView.

CircleImageView b1=(CircleImageView) findViewById(R.id.btn);

You can also use setImageResource instead of setting the background since it is an ImageView.

b1.setImageResource(R.drawable.my);
2hamed
  • 8,719
  • 13
  • 69
  • 112
  • Can you please make it simple if possible. Thank you. I am unable to analysis on that View. I am getting new questions while learning. because I am very beginner to android. – Vishwak Jan 22 '15 at 08:36
  • I didn't find build.gridle in my app. I am doing in eclipse – Vishwak Jan 22 '15 at 14:32
  • I've done with above updates but application is not launched instead shown issue as 'application has stopped unexpectedly' – Vishwak Jan 22 '15 at 18:57
  • 'CircleImageview cannot be resolved to a type' error is shown. – Vishwak Jan 22 '15 at 19:30
  • Then you have not correctly imported the `CircleImageView` library as a dependency for your project. – 2hamed Jan 22 '15 at 19:32
  • Sorry but I can't make sense of you build.gradle file! – 2hamed Jan 23 '15 at 10:35
  • I've tried with the various changes in build.gradle and again enhanced with respect to that changes. But still issue is same. – Vishwak Jan 23 '15 at 13:29
  • @MaheshKurapati Why don't you migrate to Android Studio. It's way easier to handle dependencies there. – 2hamed Jan 23 '15 at 17:03
1

You can use this widget.

Just replace your Button view in activiyt_main.xml with the following 

<at.markushi.ui.CircleButton
    android:layout_width="64dip"
    android:layout_height="64dip"
    android:src="@drawable/ic_action_tick"
    app:cb_color="#99CC00"
    app:cb_pressedRingWidth="8dip" />
arsent
  • 6,975
  • 3
  • 32
  • 31
0

If you look at the answer at How to make a round button?, the xml should be like

<shape
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="rectangle">
    <solid .../>
    <corners .../>
</shape>

(see http://developer.android.com/guide/topics/resources/drawable-resource.html#Shape) the solid and corners should be children of shape.

You can also try using android:shape="oval"

Community
  • 1
  • 1
WOUNDEDStevenJones
  • 5,150
  • 6
  • 41
  • 53
  • Thank you Steven. But I am able to create round button also implemented that one image is changed to another after click once on that button. But my problem is: Rounded image is not being displayed inside the rounded type button. Actual size is being displayed instead of rounded type image. how can I make that image in circular form and have to embed that into circular button. – Vishwak Jan 22 '15 at 08:33
  • Can you update the question with an image of what you're describing? – WOUNDEDStevenJones Jan 22 '15 at 15:06
  • You're going to need to explain the issue further. Based on that latest image, those look like they're correctly round images. Is the issue that in `CircleImageView` it works correctly, but in your app it doesn't? If so, you'll probably need to post more code so we can see what is and isn't working in both apps. – WOUNDEDStevenJones Jan 22 '15 at 21:30
0

CircleImageView implements setOnClickListener

Example:

Layout:

<de.hdodenhof.circleimageview.CircleImageView
                xmlns:app="http://schemas.android.com/apk/res-auto"
                android:id="@+id/btn_interior"
                android:layout_width="96dp"
                android:layout_height="96dp"
                android:src="@drawable/interior"
                app:civ_border_width="2dp"
                app:civ_border_color="#FF4081"/>

Java:

CircleImageView b1=(CircleImageView) findViewById(R.id.btn_interior);
    b1.setOnClickListener(new View.OnClickListener(){
    public void onClick(View v) {
    Log.i("Debug", "Click en el boton");
    }
});
Mandrake
  • 1
  • 2