Android how to proper overlay image to support multiple screen

Android how to proper overlay image to support multiple screen - android

I was able to overlay an image in the table layout, but the design will be run in multiple size of screen. Because i'm using margin to achieve the effect of overlay. Below is the code. Is there any suggestion that i can achieve the desired result? Thanks.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
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:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_weight="0.7"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="35dp"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="0dp"
android:background="#drawable/ads_body"
android:stretchColumns="*">
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.10"
android:gravity="center"
>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:id="#+id/button"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_marginLeft="260dp" />
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="50dp">
</View>
</TableRow>
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_weight="0.20"
android:gravity="center">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/scoreboard_avatar_how_to_earn_point"
android:textColor="#color/dark_grey"
android:textStyle="bold" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="5dp"
android:layout_weight="0.20"
android:gravity="center">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/scoreboard_avatar_how_to_earn_point"
android:textColor="#color/dark_grey" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.1">
<RelativeLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_weight="0.5"
android:background="#drawable/ads_table_border"
android:paddingTop="5dp">
<ImageView
android:id="#+id/scoreboard_point"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_centerHorizontal="true"
android:src="#drawable/scoreboard_point" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:background="#drawable/ads_table_border"
android:paddingTop="5dp">
<TextView
android:id="#+id/ads_point"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/scoreboard_point"
android:textColor="#color/dark_grey"
android:textStyle="bold" />
</RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:background="#drawable/ads_table_border"
android:paddingTop="5dp">
<ImageView
android:id="#+id/scoreboard_coin"
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_centerHorizontal="true"
android:src="#drawable/dibs_scoreboard_coin" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginRight="5dp"
android:layout_weight="0.5"
android:background="#drawable/ads_table_border"
android:paddingTop="5dp">
<TextView
android:id="#+id/ads_coin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:text="#string/scoreboard_coin"
android:textColor="#color/dark_grey"
android:textStyle="bold" />
</RelativeLayout>
</TableRow>
</TableLayout>
</RelativeLayout>
</FrameLayout>
<ImageView
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_centerInParent="true"
android:layout_gravity="center"
android:layout_marginTop="-150dp"
android:adjustViewBounds="true"
android:background="#drawable/head_female_1_circle"
android:scaleType="fitCenter" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.30"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="25dp"
android:layout_marginRight="25dp">
<ImageView
android:id="#+id/ifc_reward"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:adjustViewBounds="true"
android:background="#drawable/hero_chamber_city_line"
android:contentDescription="#string/app_name" />
</RelativeLayout>
</LinearLayout>
<ImageView
android:id="#+id/btnView"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_centerHorizontal="true"
android:layout_marginBottom="25dp"
android:layout_marginLeft="25dp"
android:layout_marginRight="25dp"
android:background="#drawable/ads_button" />
</LinearLayout>

Create folders and xml files for different screen sizes:
See: http://developer.android.com/guide/practices/screens_support.html
If that doesn't help try getting screen size from Java code and then setting margins programatically.

Related

How to arrange the components perfectly in android

I have a beginner knowledge in android I am trying to design a screen like below
my design is not work perfectly in landscape mode.I want to overcome this problem I don't know how to rectify this.
What I am trying......
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:id="#+id/rL"
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#mipmap/lay10"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true">
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/frame">
<LinearLayout
android:id="#+id/linearfromdate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|center"
android:layout_marginTop="5dp"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="From Date"
android:textColor="#color/list_background"
android:textSize="10sp" />
</LinearLayout>
<LinearLayout
android:id="#+id/linear"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_below="#+id/linearfromdate"
android:layout_marginTop="20dp"
android:layout_marginLeft="2dp">
<EditText
android:id="#+id/fromDate"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:background="#drawable/edittext_round"/>
</LinearLayout>
</FrameLayout>
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/frame2"
android:layout_marginLeft="2dp"
android:layout_toRightOf="#id/frame1">
<LinearLayout
android:id="#+id/lineartodate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_gravity="top|center"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="To Date"
android:textColor="#color/list_background"
android:textSize="10sp" />
</LinearLayout>
<LinearLayout
android:id="#+id/linear1"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:orientation="horizontal">
<EditText
android:id="#+id/todate"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:background="#drawable/edittext_round" />
</LinearLayout>
</FrameLayout>
<FrameLayout
android:layout_width="80dp"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/frame2"
android:layout_marginLeft="2dp"
android:id="#+id/frame3"
>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/lineardigit"
android:orientation="horizontal"
android:layout_gravity="top|center"
android:layout_marginTop="5dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Digit"
android:textColor="#color/list_background"
android:textSize="10sp" />
</LinearLayout>
<LinearLayout
android:id="#+id/linear3"
android:layout_width="80dp"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:orientation="horizontal"
android:background="#drawable/edittext_round"
>
<Spinner
android:id="#+id/digitspinner"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
</LinearLayout>
</FrameLayout>
<FrameLayout
android:layout_width="80dp"
android:layout_height="wrap_content"
android:id="#+id/frame4"
android:layout_marginRight="3dp"
android:layout_marginLeft="2dp"
android:layout_toRightOf="#+id/frame3">
<LinearLayout
android:id="#+id/lineartime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_gravity="top|center"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Time"
android:textColor="#color/list_background"
android:textSize="10sp" />
</LinearLayout>
<LinearLayout
android:id="#+id/linear2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:background="#drawable/edittext_round"
android:orientation="horizontal">
<Spinner
android:id="#+id/timespinner"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</FrameLayout>
<FrameLayout
android:layout_width="200dp"
android:layout_height="wrap_content"
android:id="#+id/frame5"
android:layout_toStartOf="#+id/rL"
android:layout_below="#id/frame1"
android:layout_toLeftOf="#id/frame4"
android:layout_marginLeft="2dp"
>
<LinearLayout
android:id="#+id/linearname"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_gravity="top|center"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Name"
android:textColor="#color/list_background"
android:textSize="10sp" />
</LinearLayout>
<LinearLayout
android:id="#+id/linear4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:background="#drawable/edittext_round"
android:orientation="horizontal">
<Spinner
android:id="#+id/name"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</FrameLayout>
<FrameLayout
android:layout_width="80dp"
android:layout_height="wrap_content"
android:id="#+id/frame6"
android:layout_marginLeft="5dp"
android:layout_marginRight="2dp"
android:layout_below="#id/frame4"
android:layout_toRightOf="#id/frame5"
>
<LinearLayout
android:id="#+id/linearnametype"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_gravity="top|center"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Name Type"
android:textColor="#color/list_background"
android:textSize="10sp" />
</LinearLayout>
<LinearLayout
android:id="#+id/linear5"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:background="#drawable/edittext_round"
android:orientation="horizontal">
<Spinner
android:id="#+id/nametype"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</Spinner>
</LinearLayout>
</FrameLayout>
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="30dp"
android:id="#+id/frame7"
android:layout_marginRight="2dp"
android:layout_marginLeft="2dp"
android:layout_marginTop="15dp"
android:layout_toRightOf="#id/frame6"
android:layout_below="#id/frame4">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Go"
android:background="#drawable/edittextstyle"
/>
</FrameLayout>
</RelativeLayout>
<LinearLayout
android:id="#+id/linearweb"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/rL"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true">
<WebView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/webView">
</WebView>
</LinearLayout>
</RelativeLayout>
I want to reduce the extra space in landscape mode.It works perfectly in portrait mode.I am trying my best with beginner knowledge.

Try it
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
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:orientation="vertical"
android:background="#mipmap/lay10">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="4">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="5dp"
android:text="From Date"
android:textColor="#color/list_background"
android:textSize="10sp" />
<EditText
android:id="#+id/fromDate"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:background="#drawable/edittext_round" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="5dp"
android:text="To Date"
android:textColor="#color/list_background"
android:textSize="10sp" />
<EditText
android:id="#+id/todate"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:background="#drawable/edittext_round" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="5dp"
android:text="Digit"
android:textColor="#color/list_background"
android:textSize="10sp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:background="#drawable/edittext_round">
<Spinner
android:id="#+id/digitspinner"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="5dp"
android:text="Time"
android:textColor="#color/list_background"
android:textSize="10sp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:background="#drawable/edittext_round">
<Spinner
android:id="#+id/timespinner"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="4">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="5dp"
android:text="Name"
android:textColor="#color/list_background"
android:textSize="10sp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:background="#drawable/edittext_round">
<Spinner
android:id="#+id/name"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="5dp"
android:text="Name Type"
android:textColor="#color/list_background"
android:textSize="10sp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:background="#drawable/edittext_round">
<Spinner
android:id="#+id/nametype"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="10dp"
android:layout_weight="1"
android:background="#drawable/edittextstyle"
android:text="Go" />
</LinearLayout>
</LinearLayout>
<WebView
android:id="#+id/webView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>

You can create a new layout for your application when it's in landscape mode. Meaning you can arrange all your components again to have a better fit by placing them at different positions or possibly using other layouts.
Here's a nice udacity course you might be interested in:
Material design for android course. The entire course is about making your app look great across multiple devices different layouts.
Some links of interest:
Supporting Different Screens
Android portrait and landscape example
Hope this helped and good luck :)

Create different layout for diffrent orientation.
When you have only layout/main.xml then by default Android will render same layout file for both orientation.
If you want your layout to look different for landscape mode then create one more layout specifically for landscape mode.
For that create a folder layout-land/ and put your landscape layout inside that folder.
So your final folder structure will look like this
Here is the official documentation for Creating different layouts
Stackoverflow on same problem

When TextView expanded below linerview is disappear

I have a problem when my TextView expanded with many texts the items below the TextView is disappeared.
I am talking about the TextView with ID: tvPostBody
I added ScrolleView to make sure the text will display completely if the text is more than max lines of TextView
Here is my XML file code:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
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"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
tools:context="com.atjt.login.DisplayOnePost">
<LinearLayout
android:layout_width="368dp"
android:layout_height="495dp"
android:orientation="vertical"
tools:layout_editor_absoluteX="3dp"
tools:layout_editor_absoluteY="-2dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="#+id/ivUserImage"
android:layout_width="108dp"
android:layout_height="127dp"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_marginBottom="5dp"
android:layout_weight="0.13"
android:cropToPadding="true"
android:padding="1dp"
android:scaleType="centerCrop"
app:srcCompat="#mipmap/no_image" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginLeft="10dp"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:id="#+id/tvUserFullName"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="User Full Name"
android:textAlignment="viewEnd" />
<TextView
android:id="#+id/tvPostTitle"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:lineSpacingExtra="8sp"
android:text="Post Title in Full"
android:textColor="#android:color/background_dark"
android:textDirection="rtl"
android:textSize="18sp"
android:textStyle="bold" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ScrollView
android:id="#+id/SCROLLER_ID"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:scrollbars="vertical"
android:fillViewport="true">
<TextView
android:id="#+id/tvPostBody"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginTop="5dp"
android:layout_weight="1"
android:text="TextView" />
</ScrollView>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="7dp"
android:orientation="horizontal">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginRight="10dp"
android:orientation="horizontal">
<TextView
android:id="#+id/tvNumberOfReplies"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="5dp"
android:layout_weight="1"
android:text="0" />
<TextView
android:id="#+id/tvReply"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Reply" />
<TextView
android:id="#+id/textView8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_weight="1"
android:text="|" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/tvNumberOfViews"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="5dp"
android:layout_weight="1"
android:text="0" />
<TextView
android:id="#+id/tvViews"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Views" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/tvDate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="105dp"
android:layout_weight="1"
android:text="15-12-2017" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
<ListView
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</android.support.constraint.ConstraintLayout>
Any suggestions,

Problem is
<ScrollView
android:id="#+id/SCROLLER_ID"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:scrollbars="vertical"
android:fillViewport="true">
Here, height is specified as wrap_content and therefore, it may fill entire below area and view below it may not be visible.
You need to specify some height for this so that you views below it are always visible.

Recycle view row text overlaps on smaller devices

I am building a simple row layout to add data dynamicly inside my recycle view, so i builded a a layout like this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#cfcfcf">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="10dp"
android:background="#ffffff"
android:orientation="horizontal">
<ImageView
android:id="#+id/plantPhoto"
android:layout_width="120dp"
android:layout_height="100dp"
android:layout_weight="1"
android:background="#c7c7c7"
android:padding="0dp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="20"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.example.afcosta.inesctec.pt.android.Helpers.NexusBoldTextView
android:id="#+id/plantName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="left"
android:padding="15dp"
android:text="TextView"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="#color/emerald" />
<ImageView
android:id="#+id/starIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:padding="15dp"
android:src="#drawable/ic_star" />
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:padding="15dp">
<com.example.afcosta.inesctec.pt.android.Helpers.NexusBoldTextView
android:id="#+id/data"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toStartOf="#+id/cameraForbiden"
android:text="TextView"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="#color/base" />
<ImageView
android:id="#+id/cameraForbiden"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:src="#drawable/ic_no_photos" />
<ImageView
android:id="#+id/userIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="left"
android:src="#drawable/ic_user" />
<com.example.afcosta.inesctec.pt.android.Helpers.NexusBoldTextView
android:id="#+id/password"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/userIcon"
android:layout_alignBottom="#+id/userIcon"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="Filipe"
android:textColor="#color/base" />
</RelativeLayout>
</LinearLayout>
</LinearLayout>
the main problem on this approach is that when i check my solution on smaller devices the text at left orverlaps the text at right, one solution that i am searching is to decrease the content based on the device size, but didn't find that yet.
This is what i get on a Nexus 5 for example:
this is what i get on a smaller device:
any help with this guys?
Thank you very much

You can use Linear layout for this. You can assign weight to each item.
Try this code :
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#cfcfcf">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="10dp"
android:background="#ffffff"
android:orientation="horizontal">
<ImageView
android:id="#+id/plantPhoto"
android:layout_width="120dp"
android:layout_height="100dp"
android:layout_weight="1"
android:background="#c7c7c7"
android:padding="0dp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="20"
android:orientation="vertical">
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/plantName"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:gravity="left"
android:padding="15dp"
android:text="TextView"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="#color/black" />
<ImageView
android:id="#+id/starIcon"
android:layout_width="0dp"
android:layout_weight="0.5"
android:layout_height="wrap_content"
android:padding="15dp"
android:src="#drawable/ic_art_track_black_24dp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="15dp"
android:orientation="horizontal">
<ImageView
android:id="#+id/cameraForbiden"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:src="#drawable/ic_art_track_black_24dp" />
<TextView
android:id="#+id/data"
android:layout_width="0dp"
android:layout_weight="2.5"
android:layout_height="wrap_content"
android:text="TextView"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="#color/black" />
<TextView
android:id="#+id/password"
android:layout_width="0dp"
android:layout_weight="2"
android:textAlignment="viewEnd"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/userIcon"
android:layout_alignBottom="#+id/userIcon"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="Filipe"
android:textColor="#color/black" />
<ImageView
android:id="#+id/userIcon"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1.5"
android:gravity="left"
android:src="#drawable/ic_art_track_black_24dp" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>

Move textview from top to bottom

In the image above I want to move the textview containing bill microsoft under the image and the other textview. How can I do this?
I have written this layout right now.
<android.support.v7.widget.CardView
android:id="#+id/card_tracks"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="180dp"
android:layout_gravity="center"
android:layout_margin="16dp"
android:elevation="7dp">
<LinearLayout
android:id="#+id/main_ll"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical">
<ImageView
android:id="#+id/speaker_image"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_margin="10dp"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
android:src="#drawable/default_user"/>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical"
android:padding="10dp">
<TextView
android:id="#+id/speaker_name"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="0.5"
android:gravity="center_vertical"
android:text="#string/placeholder_speaker_name"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#000000"
android:textStyle="bold"/>
<TextView
android:id="#+id/speaker_designation"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="0.5"
android:gravity="top"
android:text="#string/placeholder_speaker_designation"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="#000000"
android:textStyle="bold"/>
</LinearLayout>
</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/main_ll">
<TextView
android:id="#+id/speaker_bio"
android:layout_width="326dp"
android:layout_height="64dp"
android:layout_margin="10dp"
android:text="#string/placeholder_speaker_bio"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="#000000"/>
</RelativeLayout>
</android.support.v7.widget.CardView>

Please use this
<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/card_tracks"
android:layout_width="match_parent"
android:layout_height="180dp"
android:layout_gravity="center"
android:layout_margin="16dp"
android:elevation="7dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:id="#+id/main_ll"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical">
<ImageView
android:id="#+id/speaker_image"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_margin="10dp"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
android:src="#drawable/icon" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical"
android:padding="10dp">
<TextView
android:id="#+id/speaker_name"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="0.5"
android:gravity="center_vertical"
android:text="placeholder_speaker_name"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#000000"
android:textStyle="bold" />
<TextView
android:id="#+id/speaker_designation"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="0.5"
android:gravity="top"
android:text="placeholder_speaker_designation"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="#000000"
android:textStyle="bold" />
</LinearLayout>
</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/speaker_bio"
android:layout_width="326dp"
android:layout_height="64dp"
android:layout_margin="10dp"
android:text="placeholder_speaker_bio"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="#000000" />
</RelativeLayout>
</LinearLayout>
</android.support.v7.widget.CardView>

You just have to add:
android:orientation="vertical"
to your first LinearLayout, so TextViews can be draw below ImageView.

Android - Issue with scrollview

I am using scrollview on my activity. The scrollview contains a LinearLayout and some other views inside that layout. There is another LinearLayout android:id="#+id/linLayoutImagesContainer" used to put images items with 3 images dynamically just like in Gridview with three columns.
All other things are working perfectly. But, If I add more than 12 rows (i,e.36 images) into LinearLayout dynamically then the scrollview becomes blank with no view.
Can anybody help me? Thanks in advance.
My xml layout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:id="#+id/relLayoutActionBar"
android:layout_width="fill_parent"
android:layout_height="50dp"
android:background="#drawable/background_action_bar">
<TextView
android:id="#+id/textViewTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:gravity="center"
android:text="Activity Detail"
android:textColor="#ffffff"
android:textSize="20sp"/>
<ImageView
android:id="#+id/ivButtonBack"
android:layout_width="35dp"
android:layout_height="20dp"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_marginRight="5dp"
android:background="#drawable/back_icon"
android:padding="8dp"
android:layout_marginLeft="10dp"
android:textColor="#FFFFFF"
android:textSize="14sp"/>
</RelativeLayout>
<RelativeLayout
android:id="#+id/relLayoutTripBanner"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/relLayoutActionBar">
<ImageView
android:id="#+id/imageViewActivityBanner"
android:layout_width="match_parent"
android:layout_height="220dp"
android:scaleType="centerCrop"
android:background="#drawable/default_activity_banner"/>
<!--<Button
android:id="#+id/buttonActivityBanner"
android:layout_width="match_parent"
android:layout_height="150dp"
android:background="#null"/>-->
</RelativeLayout>
<ScrollView
android:id="#+id/parallaxScroll"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:fillViewport="true"
android:layout_below="#+id/relLayoutActionBar"
android:layout_above="#+id/relLayoutActionFooter">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingTop="220dp">
<Button
android:id="#+id/buttonActivityBanner"
android:layout_width="match_parent"
android:layout_height="220dp"
android:background="#null"
android:layout_marginTop="-220dp"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="#ffffffff"
android:alpha="0.9">
<TextView
android:id="#+id/textViewTripDescription"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:padding="10dp"
android:alpha="0.9"
android:background="#ffffffff"
android:text="Activity (Description)"
/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="35dp"
android:layout_margin="10dp"
android:background="#drawable/layout_round_border">
<TextView
android:id="#+id/textViewImages"
android:layout_width="wrap_content"
android:layout_height="35dp"
android:layout_alignParentLeft="true"
android:gravity="center"
android:text="Images (0)"
android:textSize="18sp"
android:textColor="#android:color/white"
android:background="#drawable/layout_left_round_colored"
android:layout_toLeftOf="#+id/viewDate"
/>
<View
android:id="#+id/viewDate"
android:layout_width="0dp"
android:layout_height="60dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
/>
<TextView
android:id="#+id/textViewVideos"
android:layout_width="wrap_content"
android:layout_height="35dp"
android:layout_alignEnd="#id/textViewImages"
android:gravity="center"
android:text="Videos (0)"
android:textColor="#ffec6221"
android:textSize="18sp"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_toRightOf="#+id/viewDate"/>
</RelativeLayout>
<LinearLayout
android:id="#+id/linLayoutImagesContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp">
</LinearLayout>
</LinearLayout>
</LinearLayout>
</ScrollView>

Try this way,hope this will help you to solve your problem.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<RelativeLayout
android:id="#+id/relLayoutActionBar"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#drawable/background_action_bar">
<TextView
android:id="#+id/textViewTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:gravity="center"
android:text="Activity Detail"
android:textColor="#ffffff"
android:textSize="20sp"/>
<ImageView
android:id="#+id/ivButtonBack"
android:layout_width="35dp"
android:layout_height="20dp"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_marginRight="5dp"
android:background="#drawable/back_icon"
android:padding="8dp"
android:layout_marginLeft="10dp"
android:textColor="#FFFFFF"
android:textSize="14sp"/>
</RelativeLayout>
<RelativeLayout
android:id="#+id/relLayoutTripBanner"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imageViewActivityBanner"
android:layout_width="match_parent"
android:layout_height="220dp"
android:scaleType="centerCrop"
android:background="#drawable/default_activity_banner"/>
</RelativeLayout>
<ScrollView
android:id="#+id/parallaxScroll"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingTop="220dp">
<Button
android:id="#+id/buttonActivityBanner"
android:layout_width="match_parent"
android:layout_height="220dp"
android:background="#null"
android:layout_marginTop="-220dp"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="#ffffffff"
android:alpha="0.9">
<TextView
android:id="#+id/textViewTripDescription"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:padding="10dp"
android:alpha="0.9"
android:background="#ffffffff"
android:text="Activity (Description)"
/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="35dp"
android:layout_margin="10dp"
android:background="#drawable/layout_round_border">
<TextView
android:id="#+id/textViewImages"
android:layout_width="wrap_content"
android:layout_height="35dp"
android:layout_alignParentLeft="true"
android:gravity="center"
android:text="Images (0)"
android:textSize="18sp"
android:textColor="#android:color/white"
android:background="#drawable/layout_left_round_colored"
android:layout_toLeftOf="#+id/viewDate"
/>
<View
android:id="#+id/viewDate"
android:layout_width="0dp"
android:layout_height="60dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
/>
<TextView
android:id="#+id/textViewVideos"
android:layout_width="wrap_content"
android:layout_height="35dp"
android:layout_alignEnd="#id/textViewImages"
android:gravity="center"
android:text="Videos (0)"
android:textColor="#ffec6221"
android:textSize="18sp"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_toRightOf="#+id/viewDate"/>
</RelativeLayout>
<LinearLayout
android:id="#+id/linLayoutImagesContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp">
</LinearLayout>
</LinearLayout>
</LinearLayout>
</ScrollView>
</LinearLayout>

Develop Reference

The Android operating system is a mobile operating system that was developed by Google (GOOGL?) to be primarily used for touchscreen devices, cell phones, and tablets.

Android how to proper overlay image to support multiple screen - android

Create folders and xml files for different screen sizes: See: http://developer.android.com/guide/practices/screens_support.html If that doesn't help try getting screen size from Java code and then setting margins programatically.

Related

How to arrange the components perfectly in android

When TextView expanded below linerview is disappear

Recycle view row text overlaps on smaller devices

Move textview from top to bottom

Android - Issue with scrollview

Categories

Resources