We Keep Coding

Designing Android App UI for Tab and mobile

I am working on new app in which I have to take care of design over mobile devices and tablets.I already read on SO that for this thing I need to create several buckets for sizes to avoid bad look of app on larger or smaller screen at the same time. here is the code I am working on
[![<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:layout_width="match_parent"
android:layout_margin="35dp"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:gravity="center"
android:orientation="vertical">
<TextView
android:id="#+id/lblLogo"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:autoSizeTextType="uniform"
android:gravity="center"
android:padding="15dp"
android:text="My App Name"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#color/colorPrimaryDark"
android:textSize="32sp" />
<!-- Email Label -->
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/tilLoginEmail"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="30dp">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/etLoginEmail"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Email"
android:inputType="textEmailAddress" />
</com.google.android.material.textfield.TextInputLayout>
<!-- Password Label -->
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/tilLoginPassword"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="30dp">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/etLoginPassword"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Password"
android:inputType="textPassword" />
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.button.MaterialButton
android:id="#+id/btnLogin"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:padding="12dp"
android:text="#string/btnLogin" />
</LinearLayout>
]
This is how the above code looks like on mobile phone (i.e Nexus 6)
**This is how the above code looks like on tablet (i.e Nexus 10)
Notice that on tablet is looking so bad. I know how to handle design in different design buckets. but I want to check if there is any
other solution without replicating the same design file in different
screen sizes buckets
Thanks in advance......

Instead of duplicate the layout try to:
avoid to hardcode the dimension in the layout.
use a ConstraintLayout
use the different qualifiers
For example the margin in your root view:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/login_layout_margin"
android:layout_marginEnd="#dimen/login_layout_margin"
android:layout_gravity="center"
android:orientation="vertical">
<TextView
android:id="#+id/lblLogo"
..>
</LinearLayout>
Then create different dimension in different folder:
res/values/dimens.xml:
<dimen name="login_layout_margin">35dp</dimen>
res/values-sw600dp/dimens.xml:
<dimen name="login_layout_margin">350dp</dimen>
More details here.

TextView does not auto-size despite setting it to uniform

I'm trying to work with TextView's default auto sizing functionality but it doesn't work. I want my TextViews' texts to decrease in size if they move onto the next line and despite setting android:autoSizeStepGranularity="15dp", I barely see any difference. The 2 TextViews are on top of an ImageView
This is my XML:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context=".TopImageFragment">
<ImageView
android:id="#+id/meme_image_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:src="#drawable/click"
android:scaleType="fitXY"
android:tag="img1"
/>
<TextView
android:id="#+id/top_text_view"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:layout_alignTop="#id/meme_image_view"
android:layout_centerHorizontal="true"
android:autoSizeTextType="uniform"
android:autoSizeStepGranularity="15dp"
android:shadowColor="#000"
android:shadowDx="2"
android:shadowDy="2"
android:shadowRadius="2"
android:textAllCaps="true"
android:textColor="#android:color/white"
android:textAlignment="center"
android:fontFamily="#font/impact"
android:gravity="center"
android:textSize="50sp" />
<TextView
android:id="#+id/bottom_text_view"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:layout_alignBottom="#id/meme_image_view"
android:layout_centerHorizontal="true"
android:autoSizeTextType="uniform"
android:autoSizeStepGranularity="15dp"
android:shadowColor="#000"
android:shadowDx="1.5"
android:shadowDy="1.3"
android:shadowRadius="1.6"
android:textAllCaps="true"
android:textColor="#android:color/white"
android:textAlignment="center"
android:fontFamily="#font/impact"
android:gravity="center"
android:textSize="50sp" />
</RelativeLayout>
And here is an example of what I'm talking about:

Your text views have height set to wrap_content. They will grow automatically to accommodate all the text before changing text size.
Pick one of these depending on your use case (with your own values, of course):
android:layout_height="100dp"
or
android:layout_height="wrap_content"
android:maxHeight="100dp"

Is there a way to check overview button?

I am developing an app where there is a left Drawer on the Home screen. The drawer fits perfectly on most devices, but on some devices, the drawer is covered whether the screen has overview button(phone without physical button, using on screen button) or its swallowed under the bottom of the screen(mostly happen on Xiaomi, and yes, i've tried on 5 xiaomi phones).This also happening on the emulator from android studio. The Question is, can the app knows if there a overview button on the phone , so the app can be developed to put the layout on top(not covering) of it. Or is there another way, more simple and efficient?
Here is the layout code:
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:id="#+id/drawer_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
</LinearLayout>
<!-- *********** NAVIGATION DRAWER *********** -->
<LinearLayout
android:id="#+id/left_drawer"
android:layout_width="#dimen/drawer_width"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_gravity="start"
android:choiceMode="singleChoice"
android:divider="#android:color/transparent"
android:dividerHeight="0dp"
android:background="#color/drawerColor"
android:fitsSystemWindows="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/white"
android:paddingLeft="#dimen/drawer_user_padding_left"
android:paddingBottom="#dimen/drawer_user_padding_bottom"
android:paddingTop="#dimen/drawer_user_padding_top_newest"
android:orientation="vertical" >
<TextView
android:id="#+id/referal_ID"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="#dimen/nav_fontsize"
android:textColor="#color/orange"
android:textStyle="bold"
android:text="\nReferal ID: " />
<TextView
android:id="#+id/profile_no"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="#dimen/content_fontsize"
android:textColor="#color/orange"
android:textStyle="bold"
android:text="000" />
</LinearLayout>
<LinearLayout
android:id="#+id/userdata_wrapper"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/theme"
android:paddingLeft="#dimen/drawer_user_padding_left"
android:paddingTop="#dimen/drawer_separator_margin_top"
android:paddingBottom="#dimen/drawer_user_padding_bottom"
android:orientation="vertical" >
<TextView
android:id="#+id/profile_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="#dimen/content_fontsize"
android:textColor="#color/white"
android:textStyle="bold"
android:text="Name" />
<TextView
android:id="#+id/profile_email"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="#dimen/content_fontsize"
android:textColor="#color/white"
android:text="email#email.com" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#+id/icon_point"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:adjustViewBounds="true"
android:background="#android:color/transparent"
android:src="#drawable/magno_coin"/>
<TextView
android:id="#+id/profile_credit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:textSize="#dimen/content_fontsize"
android:textColor="#color/white"
android:textStyle="bold"
android:text="0"/>
</LinearLayout>
</LinearLayout>
<ScrollView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:scrollbars="none">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ListView
android:id="#+id/upper_nav"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/drawer_upper_nav_margin"
android:isScrollContainer="false"
android:scrollbars="none" >
</ListView>
<View
android:id="#+id/upper_separator"
android:layout_width="fill_parent"
android:layout_height="#dimen/drawer_separator_height"
android:layout_marginTop="#dimen/drawer_separator_margin_top"
android:layout_marginBottom="#dimen/drawer_separator_margin_bottom"
android:background="#color/contentColor"/>
<ListView
android:id="#+id/middle_nav"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:isScrollContainer="false"
android:scrollbars="none">
</ListView>
<View
android:id="#+id/middle_separator"
android:layout_width="fill_parent"
android:layout_height="#dimen/drawer_separator_height"
android:layout_marginTop="#dimen/drawer_separator_margin_top"
android:layout_marginBottom="#dimen/drawer_separator_margin_bottom"
android:background="#color/contentColor"/>
<ListView
android:id="#+id/lower_nav"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:isScrollContainer="false"
android:scrollbars="none">
</ListView>
<View
android:id="#+id/lower_separator"
android:layout_width="fill_parent"
android:layout_height="#dimen/drawer_separator_height"
android:layout_marginTop="#dimen/drawer_separator_margin_top"
android:layout_marginBottom="#dimen/drawer_separator_margin_bottom"
android:background="#color/contentColor"/>
<ListView
android:id="#+id/bottom_nav"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:isScrollContainer="false"
android:layout_marginBottom="#dimen/item_margin"
android:scrollbars="none">
</ListView>
</LinearLayout>
</ScrollView>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<View
android:layout_width="match_parent"
android:layout_height="#dimen/drawer_separator_height"
android:background="#color/theme"/>
<TextView
android:id="#+id/current_version"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="bottom|right"
android:layout_alignParentBottom="true"
android:layout_marginTop="#dimen/item_space_margin"
android:layout_marginBottom="#dimen/item_space_margin"
android:layout_marginRight="#dimen/version_margin"
android:textSize="#dimen/smaller_fontsize"
android:textColor="#color/black"
android:text="ver 1.0.0"/>
</LinearLayout>
</LinearLayout></android.support.v4.widget.DrawerLayout>
On the picture i scrolled down until cant be scrolled anymore

Sorry, if I dont understand your question.
I dont see in your xml android.support.design.widget.NavigationView - its container for drawer content. You need to add implementation 'com.android.support:design:27.1.1' to your app dependencies to use NavigationView.
And if you want to do static header for your drawer, there is app:headerLayout="#layout/nav_header" property, where nav_header is your header layout.
For other items there are app:menu="#menu/drawer_view property, where drawer_view is your drawers menu. In this menu you can put as many items as you wish and they will be scrollable if needed. Also you can design it as you want and they are easy for handling in NavigationView.OnNavigationItemSelectedListener
See this Googles guide for more details. Hope it will help you.

This is a common problem. Place a listview (or more) inside a scrollview is not good. If you have a finite number of elements I suggest you to build your view programmatically (use addView).
However if you don't want to change your code read that: list view inside scrollview.
Basically you need to calculate the real height of the listview for every item (getMeasuredHeight) after notifyDataSetChanged. This should fix your problem.

To prevent overlapping by Bottom Soft NavigationBar add this to your styles.xml in a values-v21 dir (if dir not exist, create one and copy same styles.xml file from value):
<item name="android:windowDrawsSystemBarBackgrounds">false</item>
Like this eg -
<style name="Theme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="android:windowDrawsSystemBarBackgrounds">false</item>
.....
.....
</style>

android gmail app like List View with 4 icon in a icon

how can i generate icon using 4 diffrent icons like gmail app have icon with text programmatically, i have spend couple of hours to generate it with TextDrawable but would not able to modify it to use with images
here is the screenshot what i am trying to achive
the numbers 1,2 etc will be replaced with other small images.
any hint or help will be appreciated thanks.

Use my layout construction which generate this image:
<LinearLayout
android:layout_width="100dp"
android:layout_height="100dp"
android:weightSum="2"
android:orientation="vertical"
android:background="#ffacacac"
android:padding="2dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:orientation="horizontal"
android:layout_weight="1"
android:weightSum="2">
<ImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_margin="2dp"
android:background="#ffff2983"
android:src="#android:drawable/presence_busy" />
<ImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_margin="2dp"
android:background="#ffa1ff55"
android:src="#android:drawable/ic_menu_set_as" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:orientation="horizontal"
android:layout_weight="1"
android:weightSum="2">
<ImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_margin="2dp"
android:background="#ff5bffec"
android:src="#android:drawable/ic_menu_send" />
<ImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_margin="2dp"
android:background="#ff4d4eff"
android:src="#android:drawable/ic_menu_month" />
</LinearLayout>
</LinearLayout>

The easiest way is to use a gridlayout with 2 columns and 2 rows as well. You can fill it with your imageviews right in your xml layout file and can manipulate it in your activity/fragment code or even more in your adapter/viewholder

Android Wear: Layout is not displaying properly in Emulator

I'm developing an Android smart watch application. The initial screen appears fine. But, when I go to next screen, the upper part pops up with the name of project something like this. In the below image, Watch is the name of the project.
I want to see the entire screen instead of white space which contains project's name. Does anyone know how to solve it and why is it appearing?
My XML file is
<?xml version="1.0" encoding="utf-8"?>
<android.support.wear.widget.BoxInsetLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:deviceIds="wear">
<LinearLayout
android:id="#+id/mainContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#color/black"
android:weightSum="1"
tools:ignore="UselessParent"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true">
<LinearLayout
android:id="#+id/sign_up_top_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal"
android:layout_marginTop="15dp">
<TextView
android:id="#+id/textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:padding="5dp"
android:textAlignment="center"
android:textSize="18sp"
android:text="#string/text"
android:background="#color/black"
android:textColor="#color/white"
android:fontFamily="Century-Gothic.ttf" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="18dp"
android:layout_height="19dp"
android:layout_toRightOf="#+id/text"
android:src="#drawable/fingerprint" />
</LinearLayout>
<Button
android:layout_marginTop="10dp"
android:id="#+id/button"
android:background ="#drawable/roundedbutton"
android:text="#string/button_text"
android:layout_width="108dp"
android:textAlignment="center"
android:drawablePadding="20dp"
android:layout_gravity="center"
android:textColor="#color/white"
android:layout_height="75dp"
android:layout_weight="0.34" />
</LinearLayout>
</android.support.wear.widget.BoxInsetLayout>

Use a BoxInsetLayout for your root layout:
This class applies the required window insets depending on the screen
shape and lets you easily align views on the center or near the edges
of the screen.
And I would highly recommend you to read through this tutorial.
Edit 2:
You need to use:
android.support.wearable.view.BoxInsetLayout
not:
android.support.wear.widget.BoxInsetLayout
and add to the mainContainer:
app:layout_box="all"
<android.support.wearable.view.BoxInsetLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:deviceIds="wear">
<LinearLayout
app:layout_box="all"
android:id="#+id/mainContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#color/black"
android:weightSum="1"
tools:ignore="UselessParent"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true">

The answer to the question was simple. I figured out after one day. I changed my theme from Theme.AppCompat.Light to Theme.AppCompat.Light.NoActionBar in Manifest file. The program name bar disappeared.