I have figured out how to achieve the above two images. I am including the code here for anyone who wants to use it. I have also commented the code in detail to explain what is happening.
First create a class that extends DialogPreference and add the folloing:
import android.app.Dialog;
import android.content.Context;
import android.content.Intent;
import android.net.Uri;
import android.preference.DialogPreference;
import android.util.AttributeSet;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
public class SocialPref extends DialogPreference implements OnClickListener
{
public SocialPref(Context paramContext, AttributeSet paramChar)
{
super(paramContext, paramChar);
//Use setWidgetLayoutResource to display the setting how you
//want it in the settings screen
setWidgetLayoutResource(R.layout.pref_social);
//Set the title of the setting
setTitle(R.string.SocialTitle);
//Set the summary for the setting
setSummary(R.string.SocialSummary);
//Here you set the title for the Dialog
setDialogTitle(R.string.SocialTitle);
//Here you declare the layout for the Dialog
setDialogLayoutResource(R.layout.pref_social_dialog);
setNegativeButtonText(R.string.Cancel);
}
//Void a,b,c,and d are called when each icon is pressed
//on the setting or when each list item is selected within the dialog.
//allowing the user to select each social site from the setting or the dialog.
//each action includes an intent that launches the corresponding social site.
private void a(View paramView, int paramInt)
{
if (paramView != null)
{
View localView = paramView.findViewById(paramInt);
if (localView != null)
localView.setOnClickListener(new View.OnClickListener()
{
public final void onClick(View paramView)
{
this.gPlus();
}
private void gPlus()
{
Dialog localDialog = getDialog();
if (localDialog != null)
localDialog.dismiss();
Context localContext = getContext();
if (localContext != null)
{
Intent localIntent = new Intent();
localIntent.setAction("android.intent.action.VIEW");
//Important: put your G+ page where it says "gplus_account_here" or it won't work
localIntent.setData(Uri.parse("https://plus.google.com/gplus_account_here"));
localContext.startActivity(localIntent);
}
}
});
}
}
private void b(View paramView, int paramInt)
{
if (paramView != null)
{
View localView = paramView.findViewById(paramInt);
if (localView != null)
localView.setOnClickListener(new View.OnClickListener()
{
@Override
public void onClick(View v) {
this.faceBook();
}
private void faceBook()
{
Dialog localDialog = getDialog();
if (localDialog != null)
localDialog.dismiss();
Context localContext = getContext();
if (localContext != null)
{
Intent localIntent1 = new Intent();
localIntent1.setAction("android.intent.action.VIEW");
//Important: put your FaceBook id and page in their respective locations
//or it won't work.
localIntent1.setData(Uri.parse("fb://profile/profile_id"));
Intent localIntent2 = ac.a(localContext, localIntent1, false);
if (localIntent2 == null)
{
localIntent2 = new Intent();
localIntent2.setAction("android.intent.action.VIEW");
localIntent2.setData(Uri.parse("https://facebook.com/profile_page"));
}
localContext.startActivity(localIntent2);
}
}
});
}
}
private void c(View paramView, int paramInt)
{
if (paramView != null)
{
View localView = paramView.findViewById(paramInt);
if (localView != null)
localView.setOnClickListener(new View.OnClickListener()
{
@Override
public void onClick(View v) {
this.twitter();
}
private void twitter()
{
Dialog localDialog = getDialog();
if (localDialog != null)
localDialog.dismiss();
Context localContext = getContext();
if (localContext != null)
{
Intent localIntent1 = new Intent();
localIntent1.setAction("android.intent.action.VIEW");
//Important: put your Twitter screen name where it says
//"screen_name_here" or it won't work
localIntent1.setData(Uri.parse("twitter://user?screen_name=screen_name_here"));
Intent localIntent2 = ac.a(localContext, localIntent1, false);
if (localIntent2 == null)
{
localIntent2 = new Intent();
localIntent2.setAction("android.intent.action.VIEW");
localIntent2.setData(Uri.parse("https://twitter.com/intent/user?screen_name=screen_name_here"));
}
localContext.startActivity(localIntent2);
}
}
});
}
}
private void d(View paramView, int paramInt)
{
if (paramView != null)
{
View localView = paramView.findViewById(paramInt);
if (localView != null)
localView.setOnClickListener(new View.OnClickListener()
{
@Override
public void onClick(View paramView) {
this.youTube();
}
private void youTube()
{
Dialog localDialog = getDialog();
if (localDialog != null)
localDialog.dismiss();
Context localContext = getContext();
if (localContext != null)
{
Intent localIntent = new Intent();
localIntent.setAction("android.intent.action.VIEW");
//Important: Put your YouTube channel name where it
//says "username_here" or it won't work
localIntent.setData(Uri.parse("http://www.youtube.com/user/username_here"));
localContext.startActivity(localIntent);
}
}
});
}
}
//This instantiates the view for the dialog
//and allows each icon to be clickable
protected final View onCreateDialogView()
{
View localView = super.onCreateDialogView();
//For example: when a(localView, d.tv_social_gplus); is
//called, public void a(); is started taking the user
//to the related social site or app
a(localView, d.tv_social_gplus);
b(localView, d.tv_social_facebook);
c(localView, d.tv_social_twitter);
d(localView, d.tv_social_ytube);
return localView;
}
//This instantiates the view for the setting within the setting
//screen and allows each icon to be clicked, invoking
//the corresponding action.
protected final View onCreateView(ViewGroup paramViewGroup)
{
View localView = super.onCreateView(paramViewGroup);
a(localView, d.iv_social_gplus);
b(localView, d.iv_social_facebook);
c(localView, d.iv_social_twitter);
d(localView, d.iv_social_ytube);
return localView;
}
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
}
}
Then create an empty class called "d" to store the integers:
public final class d
{
public static final int iv_social_facebook = R.id.iv_social_facebook;
public static final int iv_social_gplus = R.id.iv_social_gplus;
public static final int iv_social_twitter = R.id.iv_social_twitter;
public static final int iv_social_ytube = R.id.iv_social_ytube;
public static final int tv_social_facebook = R.id.tv_social_facebook;
public static final int tv_social_gplus = R.id.tv_social_gplus;
public static final int tv_social_twitter = R.id.tv_social_twitter;
public static final int tv_social_ytube = R.id.tv_social_ytube;
}
This is the xml for the setting, name it "pref_social":
<LinearLayout
android:gravity="center"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
xmlns:android="http://schemas.android.com/apk/res/android">
<ImageView
android:layout_gravity="center"
android:id="@+id/iv_social_ytube"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="@dimen/value_margin_half"
android:src="@drawable/selector_ytube" />
<ImageView
android:layout_gravity="center"
android:id="@+id/iv_social_gplus"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="@dimen/value_margin_half"
android:src="@drawable/selector_gplus" />
<ImageView
android:layout_gravity="center"
android:id="@+id/iv_social_facebook"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="@dimen/value_margin_half"
android:src="@drawable/selector_fb" />
<ImageView
android:layout_gravity="center"
android:id="@+id/iv_social_twitter"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="@dimen/value_margin_half"
android:src="@drawable/selector_twitter" />
</LinearLayout>
This xml is the layout for the Dialog, name it "pref_social_dialog.xml":
<LinearLayout android:gravity="left" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_margin="@dimen/value_margin_half"
xmlns:android="http://schemas.android.com/apk/res/android">
<TextView android:gravity="left|center" android:id="@+id/tv_social_ytube" android:clickable="true" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_margin="@dimen/value_margin_half" android:text="@string/Social_YouTube" android:drawableLeft="@drawable/selector_ytube" android:drawablePadding="@dimen/value_margin" />
<View android:background="?android:listDivider" android:layout_width="fill_parent" android:layout_height="1.0dip" />
<TextView android:gravity="left|center" android:id="@+id/tv_social_gplus" android:clickable="true" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_margin="@dimen/value_margin_half" android:text="@string/Social_GooglePlus" android:drawableLeft="@drawable/selector_gplus" android:drawablePadding="@dimen/value_margin" />
<View android:background="?android:listDivider" android:layout_width="fill_parent" android:layout_height="1.0dip" />
<TextView android:gravity="left|center" android:id="@+id/tv_social_facebook" android:clickable="true" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_margin="@dimen/value_margin_half" android:text="@string/Social_Facebook" android:drawableLeft="@drawable/selector_fb" android:drawablePadding="@dimen/value_margin" />
<View android:background="?android:listDivider" android:layout_width="fill_parent" android:layout_height="1.0dip" />
<TextView android:gravity="left|center" android:id="@+id/tv_social_twitter" android:clickable="true" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_margin="@dimen/value_margin_half" android:text="@string/Social_Twitter" android:drawableLeft="@drawable/selector_twitter" android:drawablePadding="@dimen/value_margin" />
<View android:background="?android:listDivider" android:layout_width="fill_parent" android:layout_height="1.0dip" />
</LinearLayout>
Create an xml file for the icons in the drawable folder. This will change the icon when selected. Call it " selector_fb.xml" Create the same for YouTube, Twitter, and GPlus like this: "selector_ytube.xml", "selector_twitter.xml", "selector_gplus.xml"
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_pressed="false" android:drawable="@drawable/fb" />
<item android:state_pressed="true" android:drawable="@drawable/fb_pressed" />
</selector>
You'll have to use your own images. Just make sure the selected one is grayscale and that all images are sized correctly for each size of device. Hope this helps someone else.