Imageslider with description - java

I have a fully working imageslider with an Adapter and indicator dots. But now I want to add descriptions for each image with a TextView. Anyone have an idea how to do this? Thank you.
EDIT: see code below
MainActivity.java:
public class MainActivity extends AppCompatActivity {
private String[] imageUrls = new String[]{
"http://image1.png",
"http://image2.png",
"http://image3.png",
"http://image4.png",
"http://image5.png"
};
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ViewPager viewPager = findViewById(R.id.view_pager);
ViewPagerAdapter adapter = new ViewPagerAdapter(this, imageUrls);
viewPager.setAdapter(adapter);
TabLayout tabLayout = (TabLayout) findViewById(R.id.tabDots);
tabLayout.setupWithViewPager(viewPager);
}
}
activity_main.xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/image_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="center" />
</android.support.v4.view.ViewPager>
<android.support.design.widget.TabLayout
android:id="#+id/tabDots"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
app:tabBackground="#drawable/tab_selector"
app:tabGravity="center"
app:tabIndicatorHeight="0dp" />
</RelativeLayout>

remove image view from xml file. only keep viewpager element there.
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v4.view.ViewPager>
Then u need to create custom adapter with layout what u want. You can find steps to create custom adapter by following this https://inducesmile.com/android/understanding-android-viewpager-and-custom-pageradapter/
then u need to change viewPager.setAdapter(adapter); to set object of your custom adapter

Related

Only able to navigate to the extra layout for the first click

The following code is trivial but simulates the problem.
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<Button
android:id="#+id/btnGoToExtra"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="266dp"
android:text="Go To Extra"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
layout_extra.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/btnBackToMain"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="186dp"
android:text="Back To Main"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
MainActivity.java
public class MainActivity extends AppCompatActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
findViewById(R.id.btnGoToExtra)
.setOnClickListener(v -> {
setContentView(R.layout.layout_extra);
findViewById(R.id.btnBackToMain)
.setOnClickListener(vv -> {
setContentView(R.layout.activity_main);
});
});
}
}
Question
I can navigate to the layout_extra from activity_main and return to activity_main. Unfortunately, after this round trip, I can no longer be able to navigate to layout_extra anymore.
What causes this problem and how to fix it?
Explanation will follow in chat but that is not how it is supposed to be done, For views to change, You have other options like using Fragments or using new activity entirely, I would also like to suggest moving to kotlin.
public class MainActivity extends AppCompatActivity {
View mainView;
View extraView;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mainView = getLayoutInflater().inflate(R.layout.activity_main, null);
extraView = getLayoutInflater().inflate(R.layout.layout_extra, null);
setContentView(mainView);
mainView.findViewById(R.id.btnGoToExtra)
.setOnClickListener(v -> {
setContentView(extraView);
});
extraView.findViewById(R.id.btnBackToMain)
.setOnClickListener(vv -> {
setContentView(mainView);
});
}
}
Reading through the snippet above, here's how everything went
The line
findViewById(R.id.btnGoToExtra)
.setOnClickListener
Registers Button with id btnGoToExtra for click events and when that happens you have the nested
findViewById(R.id.btnBackToMain)
.setOnClickListener
Which registers the element with id backToMain for click events and that's all
Calling setContentView() multiple times is not recommended. The normal way to switch between layouts in the same activity is to use a ViewFlipper or FrameLayout
From here
You then have:
XML
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<ImageView
android:src="#drawable/icon"
android:scaleType="fitCenter"
android:layout_height="fill_parent"
android:layout_width="fill_parent"/>
<TextView
android:text="Learn-Android.com"
android:textSize="24sp"
android:textColor="#000000"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:gravity="center"/>
</FrameLayout>
code
private void SwitchLayout2() {
RelativeLayout Layout1 = (RelativeLayout)findViewById(R.id.layout1);
RelativeLayout Layout2 = (RelativeLayout)findViewById(R.id.layout2);
// Enable Layout 2 and Disable Layout 1
Layout1 .setVisibility(View.GONE);
Layout2.setVisibility(View.VISIBLE);
}
private void SwitchLayout1() {
RelativeLayout Layout1 = (RelativeLayout)findViewById(R.id.layout1);
RelativeLayout Layout2 = (RelativeLayout)findViewById(R.id.layout2);
// Enable Layout 1 & Disable Layout2
Layout1.setVisibility(View.VISIBLE);
Layout2.setVisibility(View.GONE);
}

Custom TabLayout Indicator - Android

I have been trying to make a custom TabLayout indicator like Google Drive's one but didn't figure it out.
I tried the following article:
https://medium.com/#adrianespi94/apply-new-google-style-to-your-android-material-tabs-4d498c993c51
It works fine, but not as good as the one in the GIF below.
Thanks in advance.
There's two thing like this.
works by clicking on tab.
works by horizontal scrolling and clicking on tab also.
I don't know what you want actually. cause, the link you gave that is no 1. which is TabHost. I am adding source code for both.
ViewPagerAdapter :
public class ViewPagerAdapter extends FragmentPagerAdapter {
private final List<Fragment> fragmentList=new ArrayList<>();
private final List<String> fragmentListTitles=new ArrayList<>();
public ViewPagerAdapter(FragmentManager fm) {
super(fm);
}
#Override
public Fragment getItem(int position) {
return fragmentList.get(position);
}
#Override
public int getCount() {
return fragmentListTitles.size();
}
//return page title
#Override
public CharSequence getPageTitle(int position) {
return fragmentListTitles.get(position);
}
public void AddFragment(Fragment fragment,String title)
{
fragmentList.add(fragment);
fragmentListTitles.add(title);
}
}
MainActivity :
private TabLayout tabLayout;
private AppBarLayout appBarLayout;
private ViewPager viewPager;
tabLayout=(TabLayout)findViewById(R.id.tablayout);
viewPager=(ViewPager)findViewById(R.id.viewpager);
//create viewpageradaper class object
ViewPagerAdapter adapter=new ViewPagerAdapter(getSupportFragmentManager());
//adding fragments using adapter object
adapter.AddFragment(new FreeFireFragment(), "Free Fire");
adapter.AddFragment(new PubgFragment(), "Pubg");
adapter.AddFragment(new CallOfDutyFragment(), "Call of Duty");
//set adapter into viewpager
viewPager.setAdapter(adapter);
//set viewpager into tablayout
tabLayout.setupWithViewPager(viewPager);
If you want to add icon :
//for set icon into tab items
final int[] ICONS = new int[]{
R.drawable.ff,
R.drawable.pubg,
R.drawable.cod
};
//enter the following source code below the MainActivity source code
//set icon to tab items
tabLayout.getTabAt(0).setIcon(ICONS[0]);
tabLayout.getTabAt(1).setIcon(ICONS[1]);
tabLayout.getTabAt(2).setIcon(ICONS[2]);
activity_home.xml :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<com.google.android.material.tabs.TabLayout
android:id="#+id/tablayout"
android:layout_width="match_parent"
android:layout_height="55dp"
app:tabBackground="#color/homeColor"
app:tabGravity="fill"
app:tabIndicatorColor="#color/tabIndicator"
app:tabMode="fixed"
app:tabSelectedTextColor="#color/tabIndicator"
app:tabTextColor="#color/tabTextColor">
</com.google.android.material.tabs.TabLayout>
<androidx.viewpager.widget.ViewPager
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/viewpager">
</androidx.viewpager.widget.ViewPager>
</LinearLayout>
Above source code works as no 2.
Now, no 1:
Layout :
<TabHost
android:id="#+id/tab_host"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#id/rl_">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/Filters"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include
layout="#layout/filters_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:id="#+id/Adjustments"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<include
layout="#layout/adjustment_layout"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
</FrameLayout>
<TabWidget
android:id="#android:id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#40cccccc" />
</LinearLayout>
</TabHost>
MainActivity
//setup tabHost
TabHost tabHost = findViewById(R.id.tab_host);
tabHost.setup();
//set item 1 in tabhost
TabHost.TabSpec Filters= tabHost.newTabSpec("Filters");
Filters.setContent(R.id.Filters);
Filters.setIndicator("Filters");
tabHost.addTab(Filters);
//set item 2 in tabhost
TabHost.TabSpec Adjustments= tabHost.newTabSpec("Adjustments");
Adjustments.setContent(R.id.Adjustments);
Adjustments.setIndicator("Adjustments");
tabHost.addTab(Adjustments);
I made the solution by myself, it seems like the solution can be done easily without libraries or any spaghetti code.
First, you need to an XML file for tab indicator:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:bottomLeftRadius="0dp"
android:bottomRightRadius="0dp"
android:topLeftRadius="8dp"
android:topRightRadius="8dp" />
<size android:height="3dp" />
<solid android:color="#color/selectedColor" />
</shape>
Then make a Selector to change the indicator color based on your selection:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#color/selectedColor" android:state_selected="true" />
<item android:color="#color/notSelectedColor" />
</selector>
Finally in your TabLayout, add these lines:
<com.google.android.material.tabs.TabLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabGravity="fill"
app:tabIconTint="#drawable/tab_selector_color" //for selection
app:tabIndicator="#drawable/tab_indicator" //for rounded corners
app:tabIndicatorAnimationMode="elastic" //for that elastic swiping effect
app:tabIndicatorColor="#color/selectedColor"
app:tabIndicatorFullWidth="false"
app:tabInlineLabel="true"
app:tabSelectedTextColor="#color/selectedColor"
app:tabTextColor="#color/notSelectedColor"/>

RecyclerView doesn't Show Data When Adding two fragments to FragmentManager

I have 2 fragments with recyclerview. InteractionsFragment and its copy InteractionsFragmentCopy (exact same replica of InteractionsFragment). When I try to add them, only the one that gets added first its recyclerview data is displayed, the other fragment's recyclerview data is blank as shown on the screenshot:
---Activity code---
public class HomeActivity extends AppCompatActivity {
private InteractionsFragment interactionsFragment = InteractionsFragment.newInstance();
private InteractionsFragmentCopy interactionsFragmentCopy = InteractionsFragmentCopy.newInstance();
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_home);
getSupportFragmentManager().beginTransaction().add(R.id.fragment_container1, interactionsFragment).show(interactionsFragment).commit();
getSupportFragmentManager().beginTransaction().add(R.id.fragment_container2, interactionsFragmentCopy).show(interactionsFragmentCopy).commit();
}
}
---Layout file---
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".activities.HomeActivity"
android:background="#color/Blue">
<FrameLayout
android:id="#+id/fragment_container1"
android:layout_width="match_parent"
android:layout_height="300dp"
android:layout_margin="16dp"
android:orientation="vertical"
app:layout_constraintHeight_default="percent"
app:layout_constraintHeight_percent=".9"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toStartOf="parent"
android:background="#color/Yellow">
</FrameLayout>
<FrameLayout
android:layout_margin="16dp"
android:background="#color/Yellow"
android:id="#+id/fragment_container2"
android:layout_width="match_parent"
android:layout_height="300dp"
android:orientation="vertical"
app:layout_constraintHeight_default="percent"
app:layout_constraintHeight_percent=".9"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toStartOf="parent">
</FrameLayout>
</LinearLayout>
Any idea why this is happening?
I have the answer here
answer
It turned out that since I'm using viewpager inside the fragment then I hade to change the viewpager adapter instantiation from:
InteractionsFragment.ViewPagerAdapter adapter = new ViewPagerAdapter(getFragmentManager());
to
InteractionsFragment.ViewPagerAdapter adapter = new ViewPagerAdapter(getChildFragmentManager());
That's fixed the issue

Tablayout animation like whatsapp

I am using TabLayout and SearcView. How can I do , when click search button to hide tab layout like whatsapp.
I try setEnabled method but it can't work properly.
I also used Visibility,setActivated method.What can I do?I don't know. I must use setAnimation method or something else?
MainActivity.java
private Toolbar toolbar;
private TabLayout tabLayout;
private ViewPager viewPager;
private CoordinatorLayout coordinatorLayout;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
coordinatorLayout = (CoordinatorLayout)findViewById(R.id.root_view);
toolbar = (Toolbar)findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
viewPager = (ViewPager)findViewById(R.id.view_pager);
setUpViewPager(viewPager);
tabLayout = (TabLayout)findViewById(R.id.tabs);
tabLayout.setupWithViewPager(viewPager);
}
private void setUpViewPager(ViewPager viewPager) {
ViewPagerAdapter viewPagerAdapter = new ViewPagerAdapter(getSupportFragmentManager());
viewPagerAdapter.addFragment(CurrencyFragment.getInstance(),"Tracker"); // `CurrencyFragment.getInstance()` should be in `FragmentPagerAdapter.getItem()`
viewPagerAdapter.addFragment(ConvertFragment.getInstance(),"Converter"); // `ConvertFragment.getInstance()` should be in `FragmentPagerAdapter.getItem()`
viewPager.setAdapter(viewPagerAdapter);
}
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/root_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
app:titleTextColor="#android:color/white"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="fixed"
app:tabGravity="fill">
</android.support.design.widget.TabLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v4.view.ViewPager>
</android.support.design.widget.CoordinatorLayout>
If you have used menu item for search then you have to follow below code:
#Override
public boolean onOptionsItemSelected(MenuItem item) {
if (item.getItemId() == android.R.id.search) // set your own id if you have different id from search.
{
tabLayout.setVisibility(View.GONE);
return true;
}
return super.onOptionsItemSelected(item);
}
When you finished with search then set tablayout visible.
tabLayout.setVisibility(View.VISIBLE);
Follow these simple steps
In your XML file create Appbar. Inside that create a Constraintlayout and keep it as match parent match parent.
Inside that keep your toolbar at the top and below that your tab layout.
Now Create the Edittext of search view as WhatsApp and keep it also as Top_to_top of parent and make the view View. Gone.
In Activity on click of the search icon
toolbar.setVisibility(View.GONE);
tabLayout.setVisibility(View.GONE);
searchViewEditText.setVisibility(View.GONE);

Why settings.xml layout is overlapping the ActionBar/Toolbar?

I'm developing a material design app.
After adding settings.xml in SettingsActivity.java & running the app, the activity is appearing like this:
Here's SettingsActivity.java file's code:
public class SettingsActivity extends AppCompatActivity {
Toolbar toolbar;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_settings);
SpannableString s = new SpannableString("Settings");
s.setSpan(new TypefaceSpan(this, "Roboto-Medium.ttf"), 0, s.length(),
Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setTitle(s);
// Display the fragment as the main content.
getFragmentManager().beginTransaction()
.replace(android.R.id.content, new SettingsFragment())
.commit();
}
public static class SettingsFragment extends PreferenceFragment implements SharedPreferences.OnSharedPreferenceChangeListener {
public static final String SHARE_APP_PREFERENCE_KEY = "pref_key_share_app";
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// Load the preferences from an XML resource
addPreferencesFromResource(R.xml.settings);
}
public void onSharedPreferenceChanged(SharedPreferences sharedPreferences,
String key) {
if (key.equals(SHARE_APP_PREFERENCE_KEY)) {
// do something
}
}
}
}
Here's activity_settings.xml file's code:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.abc.xxx.SettingsActivity">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
android:elevation="4dp"/>
</RelativeLayout>
Here's settings.xml file's code:
<?xml version="1.0" encoding="utf-8"?>
<PreferenceScreen xmlns:android="http://schemas.android.com/apk/res/android" >
<PreferenceCategory android:title="#string/pref_notification" >
<CheckBoxPreference
android:defaultValue="true"
android:key="prefNotification"
android:summary="#string/pref_notify_summary" >
</CheckBoxPreference>
</PreferenceCategory>
</PreferenceScreen>
I don't know why the settings.xml layout is overlapping the ActionBar/Toolbar!
Please let me know.
Thanks in advance.
Change your activity_settings.xml to this
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.abc.xxx.SettingsActivity">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
android:elevation="4dp"/>
<FrameLayout
android:id="#+id/fragment_container"
android:layout_width="match_parent"
android:layout_below="#id/toolbar"
android:layout_height="match_parent" />
</RelativeLayout>
And change code to this
// Display the fragment as the main content.
getFragmentManager().beginTransaction()
.replace(R.id.fragment_container, new SettingsFragment())
.commit();
When you call the fragment on the activity, don't use
// Display the fragment as the main content.
getFragmentManager().beginTransaction()
.replace(android.R.id.content, new SettingsFragment())
.commit();
Instead use
// Display the fragment as the main content.
getFragmentManager().beginTransaction()
.replace(R.id.Your_Frame_ID_On_xml, new SettingsFragment())
.commit();
I had the same problem for using android.R.id.content so changing it to the ID you use for the frame to hold the fragment on the xml fixed it.
Discovered that PreferenceActivity in Sunny's solution above may crash due to it loads a content view without a ListView. This is fixed by adding it to activity_settings.xml, but the PreferenceFragment will just ignore it. The activity_settings.xml will the look something like this
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include layout="#layout/common_actionbar" />
<ListView
android:id="#android:id/list"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<FrameLayout
android:id="#+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent" />

Categories