Site icon C1CTech

Android Fragment Example

<h3><span style&equals;"color&colon; &num;000080&semi;"><strong>Fragment <&sol;strong><&sol;span><&sol;h3>&NewLine;<ol>&NewLine;<li>A <span style&equals;"color&colon; &num;008000&semi;"><strong>fragment<&sol;strong><&sol;span><em> <&sol;em>is an independent Android component which can be used by an activity&period; A fragment encapsulates functionality so that it is easier to reuse within activities and layouts&period;<&sol;li>&NewLine;<li>A fragment runs in the context of an activity&comma; but has its own <strong><span style&equals;"color&colon; &num;008000&semi;">life cycle<&sol;span><&sol;strong> and typically its own<span style&equals;"color&colon; &num;008000&semi;"><strong> user interface<&sol;strong><&sol;span>&period;<&sol;li>&NewLine;<li>Android devices exists in a variety of screen sizes and densities&period; Fragments simplify the<span style&equals;"color&colon; &num;008000&semi;"><strong> reuse<&sol;strong><&sol;span> of components in different layouts and their logic&period;<&sol;li>&NewLine;<li>You can build <span style&equals;"color&colon; &num;008000&semi;"><strong>single-pane layouts<&sol;strong><&sol;span> for handsets &lpar;phones&rpar; and <span style&equals;"color&colon; &num;008000&semi;"><strong>multi-pane layouts<&sol;strong><&sol;span> for tablets&period; You can also use fragments  supports different layout for landscape and portrait orientation on a smartphone&period;<&sol;li>&NewLine;<li>As it is possible to <span style&equals;"color&colon; &num;008000&semi;"><strong>dynamically<&sol;strong><&sol;span> add and remove fragments from an activity&period; The usage of fragments allows to design very flexible user interfaces&period;<&sol;li>&NewLine;<&sol;ol>&NewLine;<p>Get <span style&equals;"color&colon; &num;0000ff&semi;"><strong>GITHUB<&sol;strong><&sol;span> code from <span style&equals;"color&colon; &num;0000ff&semi;"><a style&equals;"color&colon; &num;0000ff&semi;" href&equals;"https&colon;&sol;&sol;github&period;com&sol;arunk7839&sol;FragmentExample"><strong>Here<&sol;strong><&sol;a><&sol;span>&period;<&sol;p>&NewLine;<p><amp-youtube layout&equals;"responsive" width&equals;"1200" height&equals;"675" data-videoid&equals;"OKd5R0rtPls" title&equals;"Android Fragment Example"><a placeholder href&equals;"https&colon;&sol;&sol;youtu&period;be&sol;OKd5R0rtPls"><img src&equals;"https&colon;&sol;&sol;i&period;ytimg&period;com&sol;vi&sol;OKd5R0rtPls&sol;hqdefault&period;jpg" layout&equals;"fill" object-fit&equals;"cover" alt&equals;"Android Fragment Example"><&sol;a><&sol;amp-youtube><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p><span style&equals;"color&colon; &num;008000&semi;"><strong>Let&&num;8217&semi;s have a look at the simple example of Fragment in Android&period;<&sol;strong><&sol;span><&sol;p>&NewLine;<p><strong><span style&equals;"color&colon; &num;0000ff&semi;">activity&lowbar;main&period;xml<&sol;span><&sol;strong><br &sol;>&NewLine;<code><&sol;code><&sol;p>&NewLine;<pre><strong>&lt&semi;&quest;xml version&equals;"1&period;0" encoding&equals;"utf-8"&quest;&gt&semi;<&sol;strong>&NewLine;<strong>&lt&semi;RelativeLayout xmlns&colon;android&equals;"http&colon;&sol;&sol;schemas&period;android&period;com&sol;apk&sol;res&sol;android"<&sol;strong>&NewLine;<strong> xmlns&colon;tools&equals;"http&colon;&sol;&sol;schemas&period;android&period;com&sol;tools"<&sol;strong>&NewLine;<strong> android&colon;layout&lowbar;width&equals;"match&lowbar;parent"<&sol;strong>&NewLine;<strong> android&colon;layout&lowbar;height&equals;"match&lowbar;parent"<&sol;strong>&NewLine;<strong> tools&colon;context&equals;"com&period;example&period;lenovo&period;fragmentapp&period;MainActivity"&gt&semi;<&sol;strong>&NewLine;&NewLine;<strong> &lt&semi;Button<&sol;strong>&NewLine;<strong> android&colon;id&equals;"&commat;&plus;id&sol;btn&lowbar;frag1"<&sol;strong>&NewLine;<strong> android&colon;layout&lowbar;width&equals;"match&lowbar;parent"<&sol;strong>&NewLine;<strong> android&colon;layout&lowbar;height&equals;"wrap&lowbar;content"<&sol;strong>&NewLine;<strong> android&colon;layout&lowbar;margin&equals;"5dp"<&sol;strong>&NewLine;<strong> android&colon;background&equals;"&commat;android&colon;color&sol;holo&lowbar;red&lowbar;light"<&sol;strong>&NewLine;<strong> android&colon;onClick&equals;"getFragment"<&sol;strong>&NewLine;<strong> android&colon;text&equals;"Fragment1" &sol;&gt&semi;<&sol;strong>&NewLine;&NewLine;<strong> &lt&semi;Button<&sol;strong>&NewLine;<strong> android&colon;id&equals;"&commat;&plus;id&sol;btn&lowbar;frag2"<&sol;strong>&NewLine;<strong> android&colon;layout&lowbar;width&equals;"match&lowbar;parent"<&sol;strong>&NewLine;<strong> android&colon;layout&lowbar;height&equals;"wrap&lowbar;content"<&sol;strong>&NewLine;<strong> android&colon;layout&lowbar;below&equals;"&commat;&plus;id&sol;btn&lowbar;frag1"<&sol;strong>&NewLine;<strong> android&colon;layout&lowbar;margin&equals;"5dp"<&sol;strong>&NewLine;<strong> android&colon;background&equals;"&commat;android&colon;color&sol;holo&lowbar;green&lowbar;light"<&sol;strong>&NewLine;<strong> android&colon;onClick&equals;"getFragment"<&sol;strong>&NewLine;<strong> android&colon;text&equals;"Fragment2"<&sol;strong>&NewLine;&NewLine;<strong> &sol;&gt&semi;<&sol;strong>&NewLine;&NewLine;<strong> &lt&semi;FrameLayout<&sol;strong>&NewLine;<strong> android&colon;id&equals;"&commat;&plus;id&sol;fl&lowbar;fragment"<&sol;strong>&NewLine;<strong> android&colon;layout&lowbar;width&equals;"match&lowbar;parent"<&sol;strong>&NewLine;<strong> android&colon;layout&lowbar;height&equals;"match&lowbar;parent"<&sol;strong>&NewLine;<strong> android&colon;layout&lowbar;below&equals;"&commat;&plus;id&sol;btn&lowbar;frag2"&gt&semi;<&sol;strong>&NewLine;&NewLine;<strong> &lt&semi;&sol;FrameLayout&gt&semi;<&sol;strong>&NewLine;&NewLine;<strong>&lt&semi;&sol;RelativeLayout&gt&semi;<&sol;strong>&NewLine;&NewLine;<&sol;pre>&NewLine;<p><strong><span style&equals;"color&colon; &num;0000ff&semi;">fragment1&period;xml<&sol;span><&sol;strong><br &sol;>&NewLine;<code><&sol;code><&sol;p>&NewLine;<pre><strong>&lt&semi;LinearLayout xmlns&colon;android&equals;"http&colon;&sol;&sol;schemas&period;android&period;com&sol;apk&sol;res&sol;android"<&sol;strong>&NewLine;<strong> xmlns&colon;tools&equals;"http&colon;&sol;&sol;schemas&period;android&period;com&sol;tools"<&sol;strong>&NewLine;<strong> android&colon;layout&lowbar;width&equals;"match&lowbar;parent"<&sol;strong>&NewLine;<strong> android&colon;layout&lowbar;height&equals;"match&lowbar;parent"<&sol;strong>&NewLine;<strong> android&colon;gravity&equals;"center&lowbar;vertical"<&sol;strong>&NewLine;<strong> android&colon;orientation&equals;"vertical"<&sol;strong>&NewLine;<strong> tools&colon;context&equals;"com&period;example&period;lenovo&period;fragmentapp&period;Fragment1"&gt&semi;<&sol;strong>&NewLine;&NewLine;&NewLine;<strong> &lt&semi;TextView<&sol;strong>&NewLine;<strong> android&colon;layout&lowbar;width&equals;"match&lowbar;parent"<&sol;strong>&NewLine;<strong> android&colon;layout&lowbar;height&equals;"wrap&lowbar;content"<&sol;strong>&NewLine;<strong> android&colon;gravity&equals;"center"<&sol;strong>&NewLine;<strong> android&colon;text&equals;"This is Fragment1"<&sol;strong>&NewLine;<strong> android&colon;textColor&equals;"&commat;android&colon;color&sol;holo&lowbar;red&lowbar;light"<&sol;strong>&NewLine;<strong> android&colon;textSize&equals;"25sp"<&sol;strong>&NewLine;<strong> android&colon;textStyle&equals;"bold" &sol;&gt&semi;<&sol;strong>&NewLine;&NewLine;<strong> &lt&semi;TextView<&sol;strong>&NewLine;<strong> android&colon;layout&lowbar;width&equals;"match&lowbar;parent"<&sol;strong>&NewLine;<strong> android&colon;layout&lowbar;height&equals;"wrap&lowbar;content"<&sol;strong>&NewLine;<strong> android&colon;gravity&equals;"center"<&sol;strong>&NewLine;<strong> android&colon;text&equals;"Fragment1"<&sol;strong>&NewLine;<strong> android&colon;textColor&equals;"&commat;android&colon;color&sol;holo&lowbar;red&lowbar;light"<&sol;strong>&NewLine;<strong> android&colon;textSize&equals;"20sp"<&sol;strong>&NewLine;<strong> android&colon;textStyle&equals;"bold" &sol;&gt&semi;<&sol;strong>&NewLine;&NewLine;<strong>&lt&semi;&sol;LinearLayout&gt&semi;<&sol;strong>&NewLine;<&sol;pre>&NewLine;<p><strong><span style&equals;"color&colon; &num;0000ff&semi;">fragment2&period;xml<&sol;span><&sol;strong><br &sol;>&NewLine;<code><&sol;code><&sol;p>&NewLine;<&excl;-- WP QUADS Content Ad Plugin v&period; 2&period;0&period;98&period;1 -->&NewLine;<div class&equals;"quads-location quads-ad2" id&equals;"quads-ad2" style&equals;"float&colon;none&semi;margin&colon;0px&semi;">&NewLine;&NewLine;<&sol;div>&NewLine;&NewLine;<pre><strong>&lt&semi;LinearLayout xmlns&colon;android&equals;"http&colon;&sol;&sol;schemas&period;android&period;com&sol;apk&sol;res&sol;android"<&sol;strong>&NewLine;<strong> xmlns&colon;tools&equals;"http&colon;&sol;&sol;schemas&period;android&period;com&sol;tools"<&sol;strong>&NewLine;<strong> android&colon;layout&lowbar;width&equals;"match&lowbar;parent"<&sol;strong>&NewLine;<strong> android&colon;layout&lowbar;height&equals;"match&lowbar;parent"<&sol;strong>&NewLine;<strong> android&colon;gravity&equals;"center&lowbar;vertical"<&sol;strong>&NewLine;<strong> android&colon;orientation&equals;"vertical"<&sol;strong>&NewLine;<strong> tools&colon;context&equals;"com&period;example&period;lenovo&period;fragmentapp&period;Fragment2"&gt&semi;<&sol;strong>&NewLine;&NewLine;&NewLine;<strong> &lt&semi;TextView<&sol;strong>&NewLine;<strong> android&colon;layout&lowbar;width&equals;"match&lowbar;parent"<&sol;strong>&NewLine;<strong> android&colon;layout&lowbar;height&equals;"wrap&lowbar;content"<&sol;strong>&NewLine;<strong> android&colon;gravity&equals;"center"<&sol;strong>&NewLine;<strong> android&colon;text&equals;"This is Fragment2"<&sol;strong>&NewLine;<strong> android&colon;textColor&equals;"&commat;android&colon;color&sol;holo&lowbar;green&lowbar;light"<&sol;strong>&NewLine;<strong> android&colon;textSize&equals;"25sp"<&sol;strong>&NewLine;<strong> android&colon;textStyle&equals;"bold" &sol;&gt&semi;<&sol;strong>&NewLine;&NewLine;<strong> &lt&semi;TextView<&sol;strong>&NewLine;<strong> android&colon;layout&lowbar;width&equals;"match&lowbar;parent"<&sol;strong>&NewLine;<strong> android&colon;layout&lowbar;height&equals;"wrap&lowbar;content"<&sol;strong>&NewLine;<strong> android&colon;gravity&equals;"center"<&sol;strong>&NewLine;<strong> android&colon;text&equals;"Fragment2"<&sol;strong>&NewLine;<strong> android&colon;textColor&equals;"&commat;android&colon;color&sol;holo&lowbar;green&lowbar;light"<&sol;strong>&NewLine;<strong> android&colon;textSize&equals;"20sp"<&sol;strong>&NewLine;<strong> android&colon;textStyle&equals;"bold" &sol;&gt&semi;<&sol;strong>&NewLine;&NewLine;<strong>&lt&semi;&sol;LinearLayout&gt&semi;<&sol;strong>&NewLine;<&sol;pre>&NewLine;<p><span style&equals;"color&colon; &num;0000ff&semi;"><strong>Fragment1&period;java<&sol;strong><&sol;span><br &sol;>&NewLine;<code><&sol;code><&sol;p>&NewLine;<pre><strong>package com&period;example&period;lenovo&period;fragmentapp&semi;<&sol;strong>&NewLine;&NewLine;<strong>import android&period;os&period;Bundle&semi;<&sol;strong>&NewLine;<strong>import android&period;support&period;v4&period;app&period;Fragment&semi;<&sol;strong>&NewLine;<strong>import android&period;view&period;LayoutInflater&semi;<&sol;strong>&NewLine;<strong>import android&period;view&period;View&semi;<&sol;strong>&NewLine;<strong>import android&period;view&period;ViewGroup&semi;<&sol;strong>&NewLine;&NewLine;&NewLine;<strong>public class Fragment1 extends Fragment &lbrace;<&sol;strong>&NewLine;&NewLine;<strong> &commat;Override<&sol;strong>&NewLine;<strong> public View onCreateView&lpar;LayoutInflater inflater&comma; ViewGroup container&comma; Bundle savedInstanceState&rpar; &lbrace;<&sol;strong>&NewLine;&NewLine;<strong> View view &equals; inflater&period;inflate&lpar;R&period;layout&period;fragment1&comma; container&comma; false&rpar;&semi;<&sol;strong>&NewLine;&NewLine;<strong> return view&semi;<&sol;strong>&NewLine; &NewLine;<strong> &rcub;<&sol;strong>&NewLine;<strong>&rcub;<&sol;strong>&NewLine;<&sol;pre>&NewLine;<p><span style&equals;"color&colon; &num;0000ff&semi;"><strong>Fragment2&period;java<&sol;strong><&sol;span><br &sol;>&NewLine;<code><&sol;code><&sol;p>&NewLine;<pre><strong>package com&period;example&period;lenovo&period;fragmentapp&semi;<&sol;strong>&NewLine;&NewLine;&NewLine;<strong>import android&period;os&period;Bundle&semi;<&sol;strong>&NewLine;<strong>import android&period;support&period;v4&period;app&period;Fragment&semi;<&sol;strong>&NewLine;<strong>import android&period;view&period;LayoutInflater&semi;<&sol;strong>&NewLine;<strong>import android&period;view&period;View&semi;<&sol;strong>&NewLine;<strong>import android&period;view&period;ViewGroup&semi;<&sol;strong>&NewLine;&NewLine;&NewLine;<strong>public class Fragment2 extends Fragment &lbrace;<&sol;strong>&NewLine;&NewLine;<strong> &commat;Override<&sol;strong>&NewLine;<strong> public View onCreateView&lpar;LayoutInflater inflater&comma; ViewGroup container&comma; Bundle savedInstanceState&rpar; &lbrace;<&sol;strong>&NewLine;&NewLine;<strong> View view &equals; inflater&period;inflate&lpar;R&period;layout&period;fragment2&comma; container&comma; false&rpar;&semi;<&sol;strong>&NewLine;&NewLine;<strong> return view&semi;<&sol;strong>&NewLine;&NewLine;&NewLine;<strong> &rcub;<&sol;strong>&NewLine;<strong>&rcub;<&sol;strong>&NewLine;<&sol;pre>&NewLine;<p><span style&equals;"color&colon; &num;0000ff&semi;"><strong>MainActivity&period;java<&sol;strong><&sol;span><br &sol;>&NewLine;<code><&sol;code><&sol;p>&NewLine;<pre><strong>package com&period;example&period;lenovo&period;fragmentapp&semi;<&sol;strong>&NewLine;&NewLine;&NewLine;<strong>import android&period;support&period;v7&period;app&period;AppCompatActivity&semi;<&sol;strong>&NewLine;<strong>import android&period;os&period;Bundle&semi;<&sol;strong>&NewLine;<strong>import android&period;view&period;View&semi;<&sol;strong>&NewLine;&NewLine;<strong>public class MainActivity extends AppCompatActivity &lbrace;<&sol;strong>&NewLine;&NewLine;<strong> &commat;Override<&sol;strong>&NewLine;<strong> protected void onCreate&lpar;Bundle savedInstanceState&rpar; &lbrace;<&sol;strong>&NewLine;<strong> super&period;onCreate&lpar;savedInstanceState&rpar;&semi;<&sol;strong>&NewLine;<strong> setContentView&lpar;R&period;layout&period;activity&lowbar;main&rpar;&semi;<&sol;strong>&NewLine;&NewLine;<strong> &rcub;<&sol;strong>&NewLine;&NewLine;<strong> public void getFragment&lpar;View view&rpar; &lbrace;<&sol;strong>&NewLine;<strong> switch &lpar;view&period;getId&lpar;&rpar;&rpar; &lbrace;<&sol;strong>&NewLine;&NewLine;<strong> case R&period;id&period;btn&lowbar;frag1&colon; &lbrace;<&sol;strong>&NewLine;<strong> Fragment1 fragment &equals; new Fragment1&lpar;&rpar;&semi;<&sol;strong>&NewLine;<strong> getSupportFragmentManager&lpar;&rpar;&period;beginTransaction&lpar;&rpar;&period;replace&lpar;R&period;id&period;fl&lowbar;fragment&comma; fragment&rpar;&period;commit&lpar;&rpar;&semi;<&sol;strong>&NewLine;<strong> break&semi;<&sol;strong>&NewLine;<strong> &rcub;<&sol;strong>&NewLine;<strong> case R&period;id&period;btn&lowbar;frag2&colon; &lbrace;<&sol;strong>&NewLine;<strong> Fragment2 fragment &equals; new Fragment2&lpar;&rpar;&semi;<&sol;strong>&NewLine;<strong> getSupportFragmentManager&lpar;&rpar;&period;beginTransaction&lpar;&rpar;&period;replace&lpar;R&period;id&period;fl&lowbar;fragment&comma; fragment&rpar;&period;commit&lpar;&rpar;&semi;<&sol;strong>&NewLine;<strong> break&semi;<&sol;strong>&NewLine;<strong> &rcub;<&sol;strong>&NewLine;&NewLine;<strong> &rcub;<&sol;strong>&NewLine;<strong> &rcub;<&sol;strong>&NewLine;&NewLine;&NewLine;<strong>&rcub;<&sol;strong>&NewLine;<&sol;pre>&NewLine;<p><strong><span style&equals;"color&colon; &num;0000ff&semi;">Now when you run the app it will look like this&colon;<&sol;span><&sol;strong><&sol;p>&NewLine;<p><img class&equals;"alignnone wp-image-211" src&equals;"https&colon;&sol;&sol;c1ctech&period;com&sol;wp-content&sol;uploads&sol;2018&sol;03&sol;Screenshot&lowbar;2018-03-13-15-11-451-180x300&period;png" alt&equals;"" width&equals;"232" height&equals;"387" &sol;>     <img class&equals;"alignnone wp-image-212" src&equals;"https&colon;&sol;&sol;c1ctech&period;com&sol;wp-content&sol;uploads&sol;2018&sol;03&sol;Screenshot&lowbar;2018-03-13-15-11-291-180x300&period;png" alt&equals;"" width&equals;"230" height&equals;"384" &sol;>&NewLine;

Exit mobile version