Android / UI Designs

UI Design: A News Feed App Concept

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 :

  • Displaying your app to fullscreen,
  • Customizing toolbar,
  • Use of getWindow() method for handling screen properties,
  • Intent Your App to browser to open url,
  • Use of strings.xml,
  • Set Screen Orientation to Potrait Mode,
  • Use of External Font ( .ttf )  in App.

Let’s start with the Layout:

Final Layout seems like this:

https://www.uplabs.com/posts/news-feed-app-concept
Design Credits: Dual Pixel

Resources required:

  1. Background Image
  2. menu white icons
  3. more_vertical white icons
  4. person white icons
  5. search white icons
  6. Font (.TTF Format) file.

1,2,3,4,5 will be in drawable folder. 6 will be in assets folder.

So ,we are going to use Views and ViewGroups as follows:

  • Relative Layout
  • Toolbar
  • Button
  • TextView
  • ImageView

We will put the UI into groups:

  1. First Group: Relative Layout which is going to hold all groups which contains data.
  2. Second Group: Toolbar with TextView for newshunt name.
  3. Third Group: Linear Layout with vertical orientation holding Button for interview section, TextView for news title, TextView for small description.
  4. Fourth Group: Relative Layout with ImageView  for author(person) indicator and TextView for author name, TextView for date and time.

content_main.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:id="@+id/content_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.technogrill.apps.Newshunt.MainActivity"
    tools:showIn="@layout/activity_main"
    android:background="@drawable/sexypic">
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_marginTop="33dp"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        >
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="NEWSHUNT"
            android:textColor="#FFFFFF"
            android:id="@+id/toolbar_title"
            android:textSize="25dp"
            android:textAllCaps="true"
            android:layout_marginLeft="20dp"/>
    </android.support.v7.widget.Toolbar>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_above="@+id/rlview"
        android:layout_margin="12dp">
        <Button
            android:text=" INTERVIEWS "
            android:textColor="#FFFFFF"
            android:background="#dba53b"
            android:layout_width="wrap_content"
            android:layout_height="30dp" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/heading"
            android:textColor="#FFFFFF"
            android:textSize="25dp"
            android:textStyle="bold"
            android:layout_marginTop="15dp"
            />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/desc"
            android:textSize="13dp"
            android:layout_marginTop="5dp"
            android:textColor="#ffffff"/>

    </LinearLayout>

    <RelativeLayout
        android:id="@+id/rlview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_margin="12dp"
        >
        <ImageView
            android:id="@+id/person_ic"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_person_white_18dp"/>
        <TextView
            android:id="@+id/author_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@+id/person_ic"
            android:text="ADI RAWAT"
            android:textStyle="bold"
            android:textSize="12dp"
            android:layout_marginLeft="4dp"
            android:layout_alignBaseline="@+id/person_ic"
            android:textColor="#FFFFFF"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/date"
            android:textSize="12dp"
            android:text="15 JUNE 2017 | 2:35 PM"
            android:textColor="#ffffff"
            android:layout_marginRight="17dp"
            android:layout_alignTop="@+id/author_name"
            android:layout_alignParentEnd="true"
            />
    </RelativeLayout>

</RelativeLayout>

If your layout is showing toolbar and floating action button, then remove it. and then have this ui code in your content file.

The two strings are stored in strings.xml to avoid hardcoring of data. They can be used using the key name.

Now lets go to coding side,

To Set Screen Orientation, you need to use setRequestOrientation() method as,

setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);

Next we are going to set Toolbar ( menu icon should present in drawable),

        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        toolbar.setNavigationIcon(R.drawable.ic_menu_white_24dp);
        toolbar.setTitleTextColor(Color.WHITE);
        //As we are using extra textview ,we don't need to set text to toolbar title.
        toolbar.setTitle("");
        setSupportActionBar(toolbar);

We need to add font for the textview in toolbar,

TextView toolbar_title=(TextView)findViewById(R.id.toolbar_title);
Typeface fonttotext=Typeface.createFromAsset(getAssets(),"AGENCYR.TTF");
toolbar_title.setTypeface(fonttotext);

Next we are going to set ui screen to Fullscreen,

using getWindow().getDecorView() method : Retrieve the top-level window decor view (containing the standard window frame/decorations and the client’s content inside of that), which can be added as a window to the window manager.

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(Color.TRANSPARENT);
}

Now we have to show option in toolbar, we are going to use MenuInflator :

Layout Code menu_main.xml:

<menu 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"
    tools:context="com.technogrill.apps.Newshunt.MainActivity">
    <item android:id="@+id/action_search"
        android:title="search"
        android:icon="@drawable/ic_search_white_24dp"
        android:orderInCategory="101"
        app:showAsAction="always"/>
    <item
        android:id="@+id/action_settings"
        android:orderInCategory="102"
        android:icon="@drawable/ic_more_vert_white_24dp"
        android:title="@string/action_settings"
        app:showAsAction="ifRoom" />
</menu>

Adding Menu to Activity Code:

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    // Inflate the menu; this adds items to the action bar if it is present.
    getMenuInflater().inflate(R.menu.menu_main, menu);
    return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
   
    int id = item.getItemId();


    if (id == R.id.action_settings) {
        return true;
    }
    if(id==R.id.action_search){
        Toast.makeText(this, "Opening the App reference!!!", Toast.LENGTH_SHORT).show();
        String url="https://material.uplabs.com/posts/news-feed-app-concept";
        Intent toreferencelink=new Intent(Intent.ACTION_VIEW);
        toreferencelink.setData(Uri.parse(url));
        startActivity(toreferencelink);
    }

    return super.onOptionsItemSelected(item);
}

When we will click search button, the app will intent the browser action with url data.
Keep your menu file in menu folder in res folder.

That’s it, now its time to run your app . It’s great yaa.. Any douts ,questions are welcome.

Click here for Resources:

  1.  Image and Icons
  2. Layout File
  3. Code File

Thank You.

5 thoughts on “UI Design: A News Feed App Concept”

  1. I like what you guys are up also. Such smart work and reporting! Keep up the excellent works guys I have incorporated you guys to my blogroll. I think it will improve the value of my web site 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *