Hello Again, We are going to implement the ui design of “News Feed Concept” (Link: https://material.uplabs.com/posts/news-feed-app-concept).
We are going to learn :
- Draw a customize layout design
- Using a TextInputLayout View
- Using Fonts to apply to Text
- Set Screen Orientation programmatically
- Set Status Bar color as you want.
For learning fonts, screen orientation,status bar color ,please checkout my previous post: A News Feed Design
Let’s start with the Layout:
Final Layout seems like this:

Resources required:
- Background Color: “#ff1940” Red Color Shade
- Logo of deliva
- icons for facebook ,google, right arrow
- Font : lato.ttf
1. We are going to use color at more than one place, so better is to keep is globally defined in colors.xml(add below tag statement under resources tag):
<color name="deliBackgnd">#ff1940</color>
2,3. For logo,icons :You can get Resources from Photoshop Design File (.psd file : Download it and open in photoshop)
4. For Fonts you can visit your systems font folder (location: C:\Windows\Fonts)
So we are ready with our resources,
Now let’s start layout designing,
So ,we are going to use Views and ViewGroups as follows:
- Relative Layout
- ImageView
- Custom Linear Layout
- TextInputLayout with TextInputEditText
- Floating Action Button
- TextView
We will put the UI into groups:
- First Group: Relative Layout which is going to hold all groups which contains data.
- Second Group: ImageView for showing Deliva Logo
- Third Group: Custom Linear Layout with vertical orientation holding TextInputLayout with TextInputEditText for input username, TextInputLayout with TextInputEditText for input password, Floating Action Button for Log-in.
- Fourth Group: Relative Layout with ImageView for facebook and google sign-in indicators.
- Fifth Group: TextView For Sign-up Message.
content_delivery.xml Layout:
<?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" app:layout_behavior="@string/appbar_scrolling_view_behavior" tools:context="***Your Package Name***.DeliveryActivity" tools:showIn="@layout/activity_delivery" android:id="@+id/container" android:background="@color/deliBackgnd"> <ImageView android:id="@+id/imglogo" android:layout_marginTop="15dp" android:layout_width="120dp" android:layout_height="120dp" android:src="@drawable/deliverylogo" android:layout_centerHorizontal="true"/> <***Your Package Name***.CustomCut android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/customeLogin" android:layout_below="@+id/imglogo" android:layout_above="@+id/otheroptns" android:layout_marginRight="5dp" android:layout_marginLeft="5dp" android:background="@color/deliBackgnd" android:visibility="visible" android:orientation="vertical" > <TextView android:id="@+id/tvdelivery" android:text="Login" android:textSize="20dp" android:textColor="@color/deliBackgnd" android:layout_marginTop="10dp" android:gravity="center" android:layout_width="match_parent" android:layout_height="wrap_content" /> <android.support.design.widget.TextInputLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="15dp" android:layout_marginLeft="50dp" android:layout_marginRight="50dp" android:id="@+id/tilusername"> <android.support.design.widget.TextInputEditText android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="Username" /> </android.support.design.widget.TextInputLayout> <android.support.design.widget.TextInputLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="5dp" android:layout_marginLeft="50dp" android:layout_marginRight="50dp" android:id="@+id/tilpassword"> <android.support.design.widget.TextInputEditText android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="Password" /> </android.support.design.widget.TextInputLayout> <TextView android:id="@+id/tvfordelipass" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Forget Password?" android:layout_marginRight="50dp" android:layout_gravity="end"/> <android.support.design.widget.FloatingActionButton android:id="@+id/fab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="bottom|end" android:layout_marginTop="60dp" android:layout_marginRight="25dp" app:fabSize="auto" app:srcCompat="@drawable/ic_gonext_64dp" /> </***Your Package Name****.CustomCut> <RelativeLayout android:id="@+id/otheroptns" android:gravity="center" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_above="@+id/tvsignupin" android:layout_centerHorizontal="true" android:layout_margin="5dp"> <ImageView android:id="@+id/fbhandle" android:src="@drawable/ic_facebook_92dp" android:layout_width="45dp" android:layout_marginRight="5dp" android:layout_height="45dp" /> <ImageView android:id="@+id/googlehandle" android:layout_toRightOf="@+id/fbhandle" android:src="@drawable/ic_google_64dp" android:layout_width="45dp" android:layout_height="45dp" /> </RelativeLayout> <TextView android:id="@+id/tvsignupin" android:text="@string/divertmsgtosignup" android:layout_marginBottom="10dp" android:layout_marginLeft="40dp" android:layout_centerHorizontal="true" android:textColor="#fcfcfc" android:layout_alignParentBottom="true" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </RelativeLayout>
Note: Do pay attention on bold highlighted text. You may noticed something like CustomeCut in Third Group.
Its a custom view inherited from Linear Layout View Group. Now we are going to customize linear layout using some methods and put them to work as we want in design.
Go to java folder, Create a class CustomCut under the package, and extend it with Linear Layout.
CustomCut.java Code:
public class CustomCut extends LinearLayout{ private Context mcontext; private int parentWidth; private int parentHeight; public CustomCut(Context context, @Nullable AttributeSet attrs) { super(context, attrs); mcontext=context; } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { parentWidth = MeasureSpec.getSize(widthMeasureSpec); parentHeight = MeasureSpec.getSize(heightMeasureSpec); this.setMeasuredDimension(parentWidth, parentHeight); super.onMeasure(widthMeasureSpec, heightMeasureSpec); } @Override protected void onDraw(Canvas canvas) { Path path = new Path(); Paint paint = new Paint(); CornerPathEffect corner=new CornerPathEffect(120f); paint.setPathEffect(corner); if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) { paint.setColor(mcontext.getColor(android.R.color.white)); }else{ //You can give support for below marshmellow android version } parentHeight=parentHeight-180; parentWidth=parentWidth-30; int x=50,y=0; path.moveTo(x, y); //start point Top Left path.lineTo(parentWidth, 0); //Top Right path.lineTo(parentWidth, parentHeight); // Bottom right path.lineTo(x,(parentHeight)-(parentHeight/4) ); // Bottom Left path.lineTo(x,y); //Back to Top Left first point. path.close(); canvas.drawPath(path, paint); super.onDraw(canvas); } }
To Give a Rounded Corners to Layout, we used CornerPathEffect and set to Paint.
This is how we can design layout using Path class and then Paint it using Paint class. If you want to draw any new dimensions to layout you can go with changes in onDraw method.
Using onMeasure() we get the dimension of layout, and we can use it on onDraw method to take changes accordingly.
Now ,lets move to ActivityDelivery.java:
- We are going to hide toolbar
- Setting layout only for potrait mode.
- Setting up status bar color only if android version is above lollipop version.
- Applying fonts.
package ***Your-Package-Name***; import android.content.pm.ActivityInfo; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Typeface; import android.os.Build; import android.os.Bundle; import android.support.design.widget.FloatingActionButton; import android.support.design.widget.Snackbar; import android.support.design.widget.TextInputEditText; import android.support.design.widget.TextInputLayout; import android.support.v7.app.AppCompatActivity; import android.support.v7.widget.Toolbar; import android.view.View; import android.view.ViewGroup; import android.widget.EditText; import android.widget.RelativeLayout; import android.widget.TextView; public class DeliveryActivity extends AppCompatActivity { TextView tvlogin,tvforgetpasswd; EditText etusername,etpassword; FloatingActionButton fbtnsubmit; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_delivery); Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(toolbar); getSupportActionBar().hide(); setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT); getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_STABLE|View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN); if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { getWindow().setStatusBarColor(getResources().getColor(R.color.deliBackgnd)); } tvlogin=(TextView)findViewById(R.id.tvdelivery); tvforgetpasswd=(TextView)findViewById(R.id.tvfordelipass); etpassword=((TextInputLayout)findViewById(R.id.tilpassword)).getEditText(); etusername=((TextInputLayout)findViewById(R.id.tilusername)).getEditText(); Typeface typefont=Typeface.createFromAsset(getAssets(),"fonts/lato.ttf"); tvlogin.setTypeface(typefont); tvforgetpasswd.setTypeface(typefont); fbtnsubmit = (FloatingActionButton) findViewById(R.id.fab); fbtnsubmit.setImageResource(R.drawable.ic_gonext_64dp); fbtnsubmit.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { Snackbar.make(view, "Redirecting to Home..", Snackbar.LENGTH_LONG).show(); } }); } }
That’s it, now its time to run your app . It’s great yaa.. Any douts ,questions are welcome.
Thank You. Don’t Forget to share it with Your Needy Friends. They will learn and love it. Also do comment, if you like it or if you feel useful.
Check out project file we implemented .Click on FoodDeliveryConcept .Thank You.
Shrenik,thanks so much for the post.Much thanks again. Really Cool.
Hello my friend! I wish to say that this post is awesome, nice written and come with almost all vital infos. I?¦d like to see extra posts like this .
Sure,Soon I will complete ur wish. Thank You for your feedback. Keep Visiting. Do visit previous articles related to same category.Till then wish you like it
Hello my friend! I wish to say that this post is awesome, nice written and come with almost all vital infos. I?¦d like to see extra posts like this .
Sure Friend. Will back Soon with new interesting content.
BtNm3A This blog inspired me to write my own blog.
WzgruE Muchos Gracias for your blog.Really looking forward to read more. Awesome.
N3IgZz pretty handy stuff, overall I consider this is well worth a bookmark, thanks
bRcnRw I truly appreciate this article.Much thanks again. Really Cool.
yYTQgz Wow, great blog article.Much thanks again. Much obliged.
k61hsY I really liked your post.Really looking forward to read more. Keep writing.
KU9j8l Woah! I am really loving the template/theme of this blog.
k84odm very nice publish, i actually love this website, carry on it
GQeBLV That could be the good reason that pay check services are becoming quite popular super real the challenge
rNGNCV Say, you got a nice article post.Much thanks again.
1hEQ0x well, our bathroom sink is always made from stainless steel because they are long lasting
4aFnK9 Very interesting information!Perfect just what I was looking for! аАТаЂаI have great faith in fools аАааАТбТТ self confidence my friends call it.аАТаЂа by Edgar Allan Poe.
rn8P9F Kalbos vartojimo uduotys. Lietuvi kalbos pratimai auktesniosioms klasms Gimtasis odis
n8yt2u I truly appreciate this post.Thanks Again. Really Cool.
9IQohi It was hard It was hard to get a grip on everything, since it was impossible to take in the entire surroundings of scenes.
IbyHFV Regards for helping out, excellent info. аЂааЂ You must do the things you think you cannot do.аЂ аЂа by Eleanor Roosevelt.
ARJRPr It is actually a strain within the players, the supporters and within the management considering we arrived in.
bDI4o7 This very blog is without a doubt awesome as well as factual. I have discovered a lot of handy things out of this amazing blog. I ad love to go back again soon. Thanks a bunch!
yZXKlq You have observed very interesting points! ps decent internet site.
sJSjaz standard parts you happen to be familiar with but might not know how to utilize properly, along with other unique offerings in the car that ensure it is more hard to.
UNNPHA Some really good information, Sword lily I discovered this. What you do speaks therefore loudly that i cannot hear that which you say. by Ron Waldo Emerson.
oQLxC8 I truly appreciate this post. I ave been looking everywhere for this! Thank goodness I found it on Bing. You have made my day! Thank you again
9w2J88 Keep up the fantastic piece of work, I read few content on this internet site and I conceive that your site is rattling interesting and has circles of superb information.
1GLekV Really appreciate you sharing this post.
EPXCLd This is a great blog. Thank you for the very informative post.
rjgKZv I will bookmark your blog and check again here regularly.
DOW9gR The information and facts talked about within the write-up are several of the best obtainable
HJwBL3 Very good article post.Really thank you! Awesome.
Gqmn31 There is clearly a bunch to realize about this. I think you made certain nice points in features also.
CkfoOs There is evidently a bundle to know about this. I consider you made some good points in features also.
WVOd21 Well I definitely liked reading it. This tip procured by you is very effective for accurate planning.
khZVpI Really nice blog! posts are relevant and quality! I publish a blog too and I hope to get the same result one day Bye, Slevin!
jhywo2 stiri interesante si utile postate pe blogul dumneavoastra. dar ca si o paranteza , ce parere aveti de inchiriere vile vacanta ?.
aQ8pjr Some were practical, of course, but others were psychological
BGRWmJ I was recommended this website by my cousin. I am not sure whether this post is written by him as no one else know such detailed about my problem. You are wonderful! Thanks!
Fantastic website. Plenty of useful info here. I’m sending it to a few friends ans also sharing in delicious. And of course, thanks for your sweat!
xXwqlz Wow! This can be one particular of the most useful blogs We have ever arrive across on this subject. Actually Excellent. I am also a specialist in this topic so I can understand your effort.
Pw5k0G Major thanks for the post.Really thank you! Great.
Bw7VkW Really appreciate you sharing this blog post.Much thanks again. Really Cool.
eh9W4i woh I love your content , saved to favorites !.
tqZPsx It’аs really a cool and helpful piece of info. I am satisfied that you shared this useful info with us. Please stay us informed like this. Thank you for sharing.
mKON4L Im no pro, but I consider you just crafted the best point. You certainly understand what youre talking about, and I can truly get behind that. Thanks for staying so upfront and so straightforward.
wukyaH Usually I don at read article on blogs, however I wish to say that this write-up very compelled me to take a look at and do it! Your writing style has been amazed me. Thank you, very great post.
i0J3jF Really wonderful information can be found on web blog.
ZbaCnN Only wanna input that you have a very nice internet site , I love the design and style it really stands out.
UkmCRf some money on their incredibly very own, particularly considering of the very
ppWRtc This site truly has all the information and facts I needed concerning this subject and didn at know who to ask.
NU8qhK This site was how do I say it? Relevant!! Finally I have found something which helped me. Thanks a lot!
Lk39gK Just what I was looking for, thanks for putting up.
JifhPR P.S. аА аАТаА аЂааА бТТаАабТТ, аА аБТаАааАТаАабТТаА аЂааАабТТаА аБТ, аАааБТ аА аАТаА аЂааАааАТ аА аБТаАааАТаА аБТаА аБТаА аБТаА аЂааАааАТаА аАТ аА аБТ аАааАТаА аАТаА аЂааАааАТаАааАТаАабТТаА аЂааА аАТ
gGb8p8 Thanks so much for the article.Really looking forward to read more. Cool.
bKJDun Merely wanna input that you have a very decent internet site , I like the style it actually stands out.
8TfVKW Very good article.Thanks Again. Awesome.
CLneS9 Wow, what a video it is! Actually fastidious quality video, the lesson given in this video is truly informative.
7U9bl3 Thank you, I have recently been searching for information about this topic for ages and yours is the greatest I ave discovered till now. But, what about the bottom line? Are you sure about the source?
SADlsw Perfectly pent content , thanks for information.
5hJ0c1 It as difficult to find knowledgeable people for this topic, but you seem like you know what you are talking about! Thanks
lJRm1Z This unique blog is really educating and also diverting. I have chosen many handy advices out of this amazing blog. I ad love to go back again and again. Cheers!
LMirJR magnificent issues altogether, you just received a new reader. What might you suggest about your post that you just made some days ago? Any sure?
OdfPQ0 I will likely be coming back to your blog for even more soon.
XprKci you are not sure if they really are the Search Engine Optimization Expert they say they are.
JlXiYG This is really interesting, You are a very skilled blogger. I have joined your rss feed and look forward to seeking more of your fantastic post. Also, I ave shared your web site in my social networks!