How to create awesome home screen UI design
Hii Everyone in this Article I, am sharing how to create an Android App UI Design Like PayTM, and more. today market UI is the most important part of creating an attractive android App hare you can find Create Awesome Home Screen Design in Android. Home Screen is most effective for an App hare you can show all menu. The First Impression is the most important for the attraction of the user.
In these Designs, I am Using ImageSlider and TextView for UI in android. Create Awesome Android App Dashboard UI in Android
Step 1: Start Android Studio and Create a Project in your Android studio.
Setp2: Make an Activity main activity.
Step 3: Open your Manifest file and add user permission.
<uses-permission android:name=“android.permission.INTERNET” /> <uses-permission android:name=“android.permission.ACCESS_NETWORK_STATE” /> <uses-permission android:name=“android.permission.WRITE_EXTERNAL_STORAGE” /> <uses-permission android:name=“android.permission.READ_EXTERNAL_STORAGE” />
Add-In you App Build. Gradle
compile 'com.android.support:appcompat-v7:28.+' compile 'com.android.support:design:28.+' compile 'com.android.support:support-v4:28.+' compile 'com.android.support:cardview-v7:28.+' compile 'com.android.support:recyclerview-v7:28.+' compile 'com.squareup.picasso:picasso:2.5.2' compile 'de.hdodenhof:circleimageview:2.1.0' compile 'com.daimajia.slider:library:1.1.5@aar' compile 'com.nineoldandroids:library:2.4.0' compile 'com.android.volley:volley:1.0.0'
Step 1: Open your Android Studio Create an android project.
In the first step, you can open your android studio and create a project and select an activity.
Step 2: Open Your XML File and Create a UI With XML.
in your XML file add an Image slider to create an attractive screen show multiple images in Slider.
<ScrollView android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:paddingBottom="20dp" android:background="@color/colorPrimary"> <android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" xmlns:card_view="http://schemas.android.com/apk/res-auto" android:gravity="center" android:layout_marginTop="5dp" android:layout_marginBottom="5dp" android:layout_marginLeft="5dp" android:layout_marginRight="5dp" android:padding="10dp" card_view:cardBackgroundColor="@color/white" android:layout_height="wrap_content" card_view:cardCornerRadius="15dp"> <com.daimajia.slider.library.SliderLayout android:id="@+id/sliderLayout" android:layout_width="fill_parent" android:layout_height="150dp" /> </android.support.v7.widget.CardView> </LinearLayout>
After a Slider in your XML file, you can Design a Row same an image.
<View android:layout_width="match_parent" android:layout_height="1dp" android:layout_marginTop="10dp" android:background="@color/gree"/> <LinearLayout android:layout_width="match_parent" android:layout_height="100dp" android:orientation="horizontal"> <TextView android:id="@+id/Btn_Profile" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" android:paddingTop="15dp" android:layout_weight="1" android:text="Profile" android:drawableTop="@drawable/icons_administrator_male"/> <View android:layout_width="1dp" android:layout_height="match_parent" android:background="@color/gree"/> <TextView android:id="@+id/Btn_Appoint" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" android:paddingTop="15dp" android:layout_weight="1" android:text="Appointment" android:drawableTop="@drawable/ic_calendar"/> <View android:layout_width="1dp" android:layout_height="match_parent" android:background="@color/gree"/> <TextView android:id="@+id/Btn_Visit" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" android:paddingTop="15dp" android:layout_weight="1" android:text="Pending \n Visits" android:drawableTop="@drawable/ic_treatment"/> <View android:layout_width="1dp" android:layout_height="match_parent" android:background="@color/gree"/> <TextView android:id="@+id/Btn_CompleteVisit" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" android:paddingTop="15dp" android:layout_weight="1" android:text="Completed \n Visits" android:drawableTop="@drawable/icons_checkmark"/> </LinearLayout> <View android:layout_width="match_parent" android:layout_height="1dp" android:background="@color/gree"/>
Step 3: Open You Java File and implement these.
public class Fragment1 extends Fragment { private SliderLayout sliderLayout,sliderLayout1; public HashMap<String, Integer> sliderImages; public static String EMAIL; TextView Btn_Profile,Btn_Appoint,Btn_Visit,Btn_CompleteVisit,; CatLoadingView mView; @Nullable @Override public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { //just change the fragment_dashboard //with the fragment you want to inflate //like if the class is HomeFragment it should have R.layout.home_fragment //if it is DashboardFragment it should have R.layout.fragment_dashboard View rootView = inflater.inflate(R.layout.activity_fragment1, null); SessionManagement sessionManagement = new SessionManagement(); EMAIL = sessionManagement.getSavedEmail(getActivity()); mView = new CatLoadingView(); sliderLayout = (SliderLayout) rootView.findViewById(R.id.sliderLayout); sliderLayout1 = (SliderLayout) rootView.findViewById(R.id.sliderLayout1); sliderImages = new HashMap<>(); SliaderImage(); Btn_Profile=(TextView)rootView.findViewById(R.id.Btn_Profile); Btn_Profile.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Intent intent=new Intent(getActivity(),Profile.class); startActivity(intent); getActivity().finish(); } }); Btn_Appoint=(TextView)rootView.findViewById(R.id.Btn_Appoint); Btn_Appoint.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Intent intent=new Intent(getActivity(),Appointment_List.class); startActivity(intent); getActivity().finish(); } }); Btn_Visit=(TextView)rootView.findViewById(R.id.Btn_Visit); Btn_Visit.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Intent intent=new Intent(getActivity(),Visit_List.class); startActivity(intent); getActivity().finish(); } }); Btn_Package=(TextView)rootView.findViewById(R.id.Btn_Package); Btn_Package.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Intent intent=new Intent(getActivity(),MyPackage_List.class); startActivity(intent); getActivity().finish(); } }); return rootView; } private void SliaderImage() { // progress Dialog mView.show(getActivity().getSupportFragmentManager(), "Loading........."); mView.setCanceledOnTouchOutside(false); final ArrayList arraylist = new ArrayList<HashMap<String, String>>(); // json response code StringRequest stringRequest = new StringRequest(Request.Method.POST, ConfiURL.Slider_Image_URL, new Response.Listener<String>() { @Override public void onResponse(String response) { try { Log.d("JSON", response); mView.dismiss(); JSONObject jsonObject = new JSONObject(response); String error_status = jsonObject.getString("status"); if (error_status.equals("0")) { String error_msg = jsonObject.getString("msg"); // Toast.makeText(LogIn.this, error_msg, Toast.LENGTH_SHORT).show(); ContextThemeWrapper ctw = new ContextThemeWrapper(getActivity(), R.style.Theme_AlertDialog); final android.app.AlertDialog.Builder alertDialogBuilder = new android.app.AlertDialog.Builder(ctw); alertDialogBuilder.setTitle("Message"); alertDialogBuilder.setCancelable(false); alertDialogBuilder.setMessage(error_msg); alertDialogBuilder.setPositiveButton("ok", new DialogInterface.OnClickListener() { public void onClick(DialogInterface dialog, int id) { } }); alertDialogBuilder.show(); } else { JSONArray jArray = jsonObject.getJSONArray("allData"); int lengthJsonArr = jArray.length(); for(int i=0; i < lengthJsonArr; i++) { HashMap<String, String> map = new HashMap<String, String>(); JSONObject jsonChildNode = jArray.getJSONObject(i); map.put("CapriSpine", jsonChildNode.getString("banner")); arraylist.add(map); for(String name : map.keySet()){ TextSliderView textSliderView = new TextSliderView(getContext()); textSliderView .description(name) .image(map.get(name)) .setScaleType(BaseSliderView.ScaleType.Fit); sliderLayout.addSlider(textSliderView); sliderLayout1.addSlider(textSliderView); } sliderLayout.setPresetTransformer(SliderLayout.Transformer.Accordion); sliderLayout.setPresetIndicator(SliderLayout.PresetIndicators.Center_Bottom); sliderLayout.setCustomAnimation(new DescriptionAnimation()); sliderLayout.setDuration(4000); sliderLayout1.setPresetTransformer(SliderLayout.Transformer.Accordion); sliderLayout1.setPresetIndicator(SliderLayout.PresetIndicators.Center_Bottom); sliderLayout1.setCustomAnimation(new DescriptionAnimation()); sliderLayout1.setDuration(8000); } } } catch (Exception e) { Log.d("Tag", e.getMessage()); } } }, new Response.ErrorListener() { @Override public void onErrorResponse(VolleyError error) { mView.dismiss(); ContextThemeWrapper ctw = new ContextThemeWrapper(getActivity(), R.style.Theme_AlertDialog); final AlertDialog.Builder alertDialogBuilder = new AlertDialog.Builder(ctw); alertDialogBuilder.setTitle("No connection"); alertDialogBuilder.setMessage(" Network Timeout error please try again "); alertDialogBuilder.setPositiveButton("ok", new DialogInterface.OnClickListener() { public void onClick(DialogInterface dialog, int id) { } }); alertDialogBuilder.show(); } }) { @Override protected Map<String, String> getParams() throws AuthFailureError { Map<String, String> map = new HashMap<String, String>(); return map; } }; RequestQueue requestQueue = Volley.newRequestQueue(getActivity()); requestQueue.add(stringRequest); } }