how to make android app density independence? - android-layout

I am developing photo Editor in android Studio . I have images and icons on my screen which is not fit to other screens(different sizes). I have included following support screen code in my manifest.xml file
<supports-screens
android:anyDensity="true"
android:largeScreens="true"
android:normalScreens="true"
android:resizeable="true"
android:smallScreens="true"
android:xlargeScreens="true" />
I came to know that density independence is the way to get rid of this. I don't know how to proceed further .please help me what are the steps to make my App density independence?
activity_main.xml
android:layout_width="match_parent" android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center_vertical|center"
android:background="#403E3E">
<LinearLayout
android:layout_marginTop="30px"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center">
<SeekBar
android:layout_width="300dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:max="200"
android:progress="100"
android:id="#+id/seekBar1" />
</LinearLayout>
<LinearLayout
android:id="#+id/middle_layout3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center"
android:layout_gravity="center_horizontal">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10px"
android:id="#+id/imageView2"
android:scaleType="fitCenter"
android:adjustViewBounds="true"
android:src="#drawable/ic_launcher"
android:layout_gravity="center_vertical"
android:background="#ff0e0e0e" />
<SlidingDrawer
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:content="#+id/content"
android:handle="#+id/handle"
android:id="#+id/slidingDrawer"
android:orientation="horizontal"
android:alpha="0.5"
android:layout_gravity="right|top">
<LinearLayout
android:id="#+id/content"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="#11111111"
android:gravity="center">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/brighticn"
android:scaleType="fitCenter"
android:adjustViewBounds="true"
android:background="#drawable/brighticon"
android:layout_gravity="center_vertical" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/filtericn"
android:background="#drawable/filters" />
</LinearLayout>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/handle"
android:background="#drawable/move" />
</SlidingDrawer>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="bottom"
android:layout_gravity="bottom">
<HorizontalScrollView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/scrollView"
android:layout_gravity="bottom"
android:background="#ff030101">
<LinearLayout
android:id="#+id/sublayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="#ff030101">
<Button
android:id="#+id/buttonhide"
android:text="txt"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</HorizontalScrollView>
</LinearLayout>

To truly be able to have a density independent app, you need to provide your resources in different resolutions. Android is really smart on handling those.
When adding images you should create smaller images, or larger images, based on the format of the screen you want to support and put them in specific folder for that format. Something like this:
res/
drawable/
icon.png
background.png
drawable-hdpi/
icon.png
background.png
This would make Android use drawable/icon.png when you have any other screen density than hdpi. But will use drawable-hdpi/icon.png for that specific type of screen.
To understand this better, you can read this very detailed guide from the Android docs: http://developer.android.com/guide/topics/resources/providing-resources.html

Related

Linear Layout and children not visible

Hi sorry I am having difficulty in getting my layout to been seen when I run the application
I don't see anything when I run my application
here is my XML code
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="409dp"
android:layout_height="729dp"
android:layout_marginStart="1dp"
android:layout_marginLeft="1dp"
android:layout_marginTop="1dp"
android:layout_marginEnd="1dp"
android:layout_marginRight="1dp"
android:layout_marginBottom="1dp"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/edtName"
android:layout_width="match_parent"
android:layout_height="44dp"
android:text="Name" />
<ScrollView
android:id="#+id/scrlText"
android:layout_width="match_parent"
android:fillViewport="true"
android:isScrollContainer="true"
android:layout_height="638dp">
<LinearLayout
android:id="#+id/lltext"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" />
</ScrollView>
<LinearLayout
android:id="#+id/hllsend"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<EditText
android:id="#+id/edtInput"
android:layout_width="159dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:ems="10"
android:inputType="textPersonName" />
<Button
android:id="#+id/btnSend"
android:layout_width="10dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button" />
</LinearLayout>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
How do I make my items visible when running the application?
In your simple layout code, there are many problems. For example:
1.
android:layout_width="409dp"
android:layout_height="729dp"
such android screen size is hard to get. And in Android layout principal, you'd better use relative layout rather than such hard code size. Here you can replace it with match_parent or wrap_content.
In the same way.
android:layout_height="638dp"
totally over screen height ,make no space for hllsend to show.
I suggest you learn some android layout principal before write android app.
It's not a good practice to add LinearLayout in ConstraintLayout and I think it's the issue with your code you just need to make you LinearLayout as a parent and remove your ConstraintLayout.
NOTE: please do necessary adjustment.
Please check quick example for your code I didn't run this.
<LinearLayout 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"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="409dp"
android:layout_height="729dp"
android:layout_marginStart="1dp"
android:layout_marginLeft="1dp"
android:layout_marginTop="1dp"
android:layout_marginEnd="1dp"
android:layout_marginRight="1dp"
android:layout_marginBottom="1dp"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:id="#+id/edtName"
android:layout_width="match_parent"
android:layout_height="44dp"
android:text="Name" />
<ScrollView
android:id="#+id/scrlText"
android:layout_width="match_parent"
android:fillViewport="true"
android:isScrollContainer="true"
android:layout_height="638dp">
<LinearLayout
android:id="#+id/lltext"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" />
</ScrollView>
<LinearLayout
android:id="#+id/hllsend"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<EditText
android:id="#+id/edtInput"
android:layout_width="159dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:ems="10"
android:inputType="textPersonName" />
<Button
android:id="#+id/btnSend"
android:layout_width="10dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
put all your xml codes in LinearLayout and remove ConstraintLayout . thats may helps.

Android Material Design- Elevation shadow not working for nested inner layouts

I am writing a code with a few nested layouts. As I have used material design I also wanted to set elevation. Though elevation was working fine with the elements of outermost layout, the contents of the inner LinearLayout (nested inside a CoordinatorLayout) is not casting shadows despite setting elevation.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
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"
android:background="#color/white"
tools:context="com.joblesscoders.aditya.todolist.HomeActivity">
<TextView
android:layout_width="match_parent"
android:id="#+id/count"
android:text="Main Activity"
android:textSize="20dp"
android:elevation="5dp"
android:textColor="#color/white"
android:gravity="center_vertical"
android:background="#color/colorPrimary"
android:layout_height="50dp" />
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/cly"
android:background="#color/white"
xmlns:app="http://schemas.android.com/apk/res-auto"
>
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/sv"
android:background="#color/white"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/lly"
android:background="#color/white"
android:orientation="vertical">
<TextView
android:text="Task here"
android:id="#+id/tid"
android:textSize="40sp"
android:layout_marginBottom="5dp"
android:layout_width="match_parent"
android:elevation="4dp"
android:paddingBottom="10dp"
android:paddingTop="10dp"
android:layout_height="wrap_content" />
<TextView
android:text="Task here"
android:id="#+id/tid"
android:textSize="40sp"
android:layout_marginBottom="5dp"
android:layout_width="match_parent"
android:elevation="4dp"
android:paddingBottom="10dp"
android:paddingTop="10dp"
android:layout_height="wrap_content" />
<TextView
android:text="Task here"
android:id="#+id/tid"
android:textSize="40sp"
android:layout_marginBottom="5dp"
android:layout_width="match_parent"
android:elevation="4dp"
android:paddingBottom="10dp"
android:paddingTop="10dp"
android:layout_height="wrap_content" />
<!-- More TextViews to suit purpose -->
</LinearLayout>
</ScrollView>
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:src="#drawable/ic_add2"
app:rippleColor="#color/white"
android:id="#+id/fab"
android:layout_gravity="bottom|end"
/>
</android.support.design.widget.CoordinatorLayout>
</LinearLayout>
This code in android studio designer view produces the expected result i.e.
the TextViews displaying "Task here" have required shadows, but as soon I run it on a android 6.O custom device, the page becomes:
I would be thankful if anybody corrects me or advices on the dos and don'ts. I am extremely new to android programming, and this is my first code. So please bear with me if I have made any really very silly mistake.

How to overlap in Relative Layout Android Studio

I'm trying to send the white image in the back of my button and text in Relative Layout. Here is the code:
<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"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.example.sahni.lightspeed.starting_screen"
tools:showIn="#layout/activity_starting_screen"
android:background="#drawable/q1">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/title"
android:textSize="70sp"
android:id="#+id/title"
android:textColor="#00e1ff"
android:layout_centerHorizontal="true"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/start_button"
android:id="#+id/button"
android:textSize="20sp"
android:layout_centerInParent="true"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:onClick="buttonOnClick"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/imageView"
android:layout_alignLeft="#+id/title"
android:layout_alignStart="#+id/title"
android:layout_below="#+id/title"
android:background="#ffffff" />
</RelativeLayout>
The layout sets for the image aren't correct, but I don't know which ones to use to get the output I want. A screenshot of current output:
Am I using the best layout for this problem ?
Can someone please explain to me how the solution works too?
Just move to first ImageView in your RelativeLayout :
<RelativeLayout ... >
<ImageView ... />
<TextView ... />
<Button ... />
</RelativeLayout>
Your ImageView has android:layout_below="#+id/title" property so it' always below your title, so it can't be in background of your title.

Android ScrollView Not Scrolling Correctly

I've been making my way through thenewboston's android tutorials and I'm stuck on number 35. There is supposed to be a scroll bar that takes up a weight of 30 at the top of the app. There are 6 textview/edittext field groups in the code, but I deleted 5 for simplicity. My problem is that all of the text and text boxes appear on the page and are not confined to the given weight (they all just show up on the page). Has anyone else had this problem or know how to fix it?
Please, I'm new to stackoverflow. If you think this is a stupid question, please explain to me why and how I can ask it better.
Here is what it looks like: http://imgur.com/gJmOgqk
<?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="wrap_content"
android:orientation="vertical"
android:weightSum="100" >
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="30" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
<EditText
android:id="#+id/editText1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10" >
</EditText>
</LinearLayout>
</ScrollView>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="40"
android:orientation="vertical" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="30"
android:orientation="vertical" >
<AnalogClock
android:id="#+id/analogClock1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
Welcome to StackOverflow!
Couple of things,
TheNewBoston made a mistake. Whenever you use weights you need
to set the height (or width) of that element to 0dp. I've changed
that in your code.
You shouldn't rely on the xml tool that eclipse has, you should always try to launch your app to some type of a device (emulator or preferably hardware)
I think by ScrollBar, you mean ScrollView? Because you're not doing anything to control the appearance of the scroll bar right now.
The parent of your layout (in this case) should match_parent, not wrap. (this is your main issue)
Also, you don't really need weightSum, android will just sum all the weights anyway.
<ScrollView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="30" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
<EditText
android:id="#+id/editText1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10" >
</EditText>
</LinearLayout>
</ScrollView>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="40"
android:orientation="vertical" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="30"
android:orientation="vertical" >
<AnalogClock
android:id="#+id/analogClock1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
You need to set the height of the views to 0dp if you are using weight. match_parent is causing problems. Also set the height of root view to match_parent. Try this, if I add many EditText's to the LinearLayout in the ScrollView it seems to give the effect you are after:
<?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"
android:weightSum="100">
<ScrollView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="40">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"/>
<EditText
android:id="#+id/editText1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10">
</EditText>
</LinearLayout>
</ScrollView>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="30"
android:orientation="vertical">
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="30"
android:orientation="vertical">
<AnalogClock
android:id="#+id/analogClock1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
</LinearLayout>

Admob to Listview: Android Layout

Once more I need some help. Trial and error is not working so well. Can someone please look at my code? I want my listview to contain admob ads at the top of the page and I am struggling a bit this morning. Thanks in advance!
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:ads="http://schemas.android.com/apk/lib/com.google.ads"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="5dp"
>
<com.google.ads.AdView
android:id="#+id/adView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
ads:adSize="BANNER"
ads:adUnitId="xxxxxxxxxxxxxxx"
ads:loadAdOnCreate="true"
android:layout_alignParentTop="true" />
<TextView
android:id="#+id/txtPlaceName"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:ellipsize="end"
android:singleLine="true"
android:text="saa"
android:textSize="25sp"
android:layout_below="#id/adView" />
<LinearLayout
android:id="#+id/layout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageView
android:id="#+id/imgType"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/marker1" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="#+id/txtCityState"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="city, st"
android:textSize="15sp" />
<TextView
android:id="#+id/txtDistance"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:textSize="15sp" />
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<RatingBar
android:id="#+id/average_ratingbar"
style="?android:attr/ratingBarStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:numStars="5"
android:stepSize="1.0" />
<TextView
android:id="#+id/txtCommentsCount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:textSize="15sp" />
</RelativeLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
Short answer
The Banner ad needs 320dp width. Your base LinearLayout has android:padding="5dp" so you only have 310dp left, and the ad therefore doesn't fit on the screen.
For the future
Android has a logging tool called LogCat that keeps track of all messages that are logged. AdMob SDK provides logging messages that can be very helpful when debugging these issues. This is how I was able to solve your problem.
You can view the LogCat output using the command line by following the directions from the link provided above, or you can view the LogCat output in Eclipse by going to Window -> Show View -> LogCat. When requesting an ad, the SDK logged the following message:
Not enough space to show the ad! Wants: <320,50>, Has: <310,473>
From there it was pretty easy to tell that you didn't have the full 320 width, and sure enough your top level layout had 5dp padding on each side.
Unrelated Layout Tip
Fyi, the android:layout_alignParentTop and android:layout_below attributes only do anything inside of a RelativeLayout. In the layout you provided above, these attributes on the AdView and the TextView don't do anything.

Resources