Layout issues with android - android

So I'm working on the Login and Registration page for my android app and I'm trying to get this layout implemented but I can't get it to work properly.
The desired layout I'm looking for is this.
The background image covers the whole screen and then there is a button at the top right and a button at the middle bottom.
But this is what I got from implementing the design
and this is what I wrote down in the layout file
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" android:fitsSystemWindows="true" android:alwaysDrawnWithCache="false"
android:layout_gravity="center">
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:scaleType="center"
android:layout_alignParentTop="true" android:src="#drawable/nyork2"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="top" >
<Button
android:id="#+id/register"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="left"
android:text="#string/button_register"
/>
<Button
android:id="#+id/login"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="left"
android:text="#string/button_login"
/>
</LinearLayout>
</RelativeLayout>


This should help
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" android:fitsSystemWindows="true" android:alwaysDrawnWithCache="false"
android:layout_gravity="center">
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:scaleType="center"
android:layout_alignParentTop="true" android:src="#drawable/nyork2"/>
<Button
android:id="#+id/register"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:text="#string/button_register" />
<Button
android:id="#+id/login"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:text="#string/button_login"/>
</RelativeLayout>


remove the linear layout so you can put the button where you want them to be

Related

How to put one view over another relativelayout in xml

I searched a lot but nothing seems to work in my case. Here is what I want to achieve using relative layout.
below is my xml code for it.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:focusable="true">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/microphone" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#color/white"
android:padding="#dimen/padding_16">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:drawableRight="#drawable/arrow"
android:text="#string/next"
android:textAllCaps="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableLeft="#drawable/arrow"
android:text="#string/previous"
android:textAllCaps="true" />
</RelativeLayout>
By doing this the microphone is hidden behind the Next-Previous Strip. I guess there is some parameter to control the view height in z-axis but I don't remember that and will it work below Lolipop too. Please help.

If you want to show your "Microphone Layout", you don't have to do much with your current layout(xml)
Just put your "Microphone Relative Layout" after "Previous and Next Relative Layout", like below
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#color/white"
android:padding="#dimen/padding_16">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:drawableRight="#drawable/arrow"
android:text="#string/next"
android:textAllCaps="true"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableLeft="#drawable/arrow"
android:text="#string/previous"
android:textAllCaps="true"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:focusable="true">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/microphone"/>
</RelativeLayout>
</RelativeLayout>
Hope this helps you.

Android Diamond Button Layout

I am currently working on a sample application using android studio. I need to design diamond shaped buttons and view them as follows (Screenshots attached). But I don't have an idea how to make this kind of thing with android.
There are be four diamond shaped buttons, and they are be aligned as according to the following screenshot.
Screenshot:

Here is sample code adjust margins according to devices you can use imageView instead buttons
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/firstRow"
android:rotation="-30"
android:layout_centerHorizontal="true"
android:layout_marginTop="30dp"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:layout_width="80dp"
android:layout_height="80dp"
android:text="Button 2"
android:id="#+id/button2" />
<Button
android:layout_width="80dp"
android:layout_height="80dp"
android:text="Button 1"
android:id="#+id/button1"/>
</LinearLayout>
<LinearLayout
android:id="#+id/secondRow"
android:layout_below="#+id/firstRow"
android:rotation="-30"
android:layout_marginTop="24dp"
android:layout_marginLeft="68dp"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<Button
android:layout_width="80dp"
android:layout_height="80dp"
android:text="Button 4"
android:id="#+id/button4" />
<Button
android:layout_width="80dp"
android:layout_height="80dp"
android:text="Button 3"
android:id="#+id/button3"/>
</LinearLayout>
</RelativeLayout>

The easiest way is use .png archives on ImageButtons and display them on a RelativeLayout. You can change positions and adjust them as you wish. If you set the android:background="#android:color/transparent" you can set your form, by playing with the margins (android:layout_marginRight="", android:layout_marginTop="", etc.)
With that I got this:
This is the code I used; it's only necessary .xml, without programmatic changes:
<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"
android:background="#android:color/holo_purple"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin" >
<ImageButton
android:id="#+id/imageButton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_marginRight="39dp"
android:background="#android:color/transparent"
android:contentDescription="#string/im"
android:src="#drawable/diamond" />
<ImageButton
android:id="#+id/ImageButton03"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/imageButton1"
android:layout_centerVertical="true"
android:background="#android:color/transparent"
android:contentDescription="#string/im"
android:src="#drawable/diamond" />
<ImageButton
android:id="#+id/ImageButton04"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignRight="#+id/ImageButton03"
android:layout_below="#+id/imageButton1"
android:layout_marginRight="55dp"
android:layout_marginTop="47dp"
android:background="#android:color/transparent"
android:contentDescription="#string/im"
android:src="#drawable/diamond" />
<ImageButton
android:id="#+id/ImageButton02"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/ImageButton03"
android:layout_alignRight="#+id/ImageButton04"
android:layout_marginBottom="66dp"
android:layout_marginRight="5dp"
android:background="#android:color/transparent"
android:contentDescription="#string/im"
android:src="#drawable/diamond" /></RelativeLayout>
Hope it helps.

<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:orientation="vertical"
android:background="#drawable/splash2"
tools:context="com.example.sv.myfoodapplication.view.SplashActivity">
<LinearLayout
android:id="#+id/sp_breakfast"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_above="#+id/sp_desert"
android:layout_alignStart="#+id/sp_vegetable"
android:layout_marginBottom="43dp"
android:orientation="vertical"
android:gravity="center"
android:background="#drawable/shape_diamond">
</LinearLayout>
<LinearLayout
android:id="#+id/sp_meat"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_alignBottom="#+id/sp_vegetable"
android:layout_alignStart="#+id/sp_desert"
android:layout_marginBottom="80dp"
android:orientation="vertical"
android:gravity="center"
android:background="#drawable/shape_diamond" >
</LinearLayout>
<LinearLayout
android:id="#+id/sp_vegetable"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_alignBottom="#+id/sp_desert"
android:layout_alignParentStart="true"
android:layout_marginBottom="83dp"
android:layout_marginStart="19dp"
android:orientation="vertical"
android:gravity="center"
android:background="#drawable/shape_diamond" >
</LinearLayout>
<LinearLayout
android:id="#+id/sp_desert"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="10dp"
android:orientation="vertical"
android:gravity="center"
android:background="#drawable/shape_diamond">
</LinearLayout>
</RelativeLayout>

Android app not showing complete Samsung S3 mini

I'm new to android and working on my first app which is from a online course project. The fact is that on Android Studio the app is working fine, but I built the apk file to test it on my phone (Samsung galaxy s3 mini). On device, the app is not showing complete as it is missing an edit text and a button at the bottom of the layout. I'm attaching two screenshots, the first one of the app running on the emulator, and the one running on my smartphone.
App running in the emulator:
App running on the smartphone:
Layout 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="10dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.linfosoft.hangdroid.GameActivity"
tools:showIn="#layout/activity_game">
<ImageView
android:layout_width="wrap_content"
android:layout_height="350dp"
android:id="#+id/imageView"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:src="#drawable/hangdroid_0"
android:layout_marginTop="20dp" />
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:baselineAligned="false"
android:background="#drawable/gradient_background"
android:layout_below="#+id/imageView"
android:layout_centerHorizontal="true"
android:id="#+id/layoutAddLetter"
android:layout_marginTop="90dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Ingresa letra"
android:id="#+id/textView2"
android:layout_gravity="center_vertical"
android:layout_marginLeft="40dp" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/editText"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:maxLength="1" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Revisar"
android:id="#+id/button2"
android:onClick="introduceLetter" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/imageView"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="false"
android:layout_alignParentTop="false"
android:layout_marginTop="20dp"
android:id="#+id/layoutLetters">
</LinearLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:id="#+id/textView7"
android:layout_marginTop="150dp"
android:layout_marginLeft="20dp"
android:textColor="#color/red" />
</RelativeLayout>

put your xml code within of a ScrolView:
<ScrollView
android:layout_height="match_parent"
android:fillViewport="true"
android:layout_width="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android" >
your xml
</ScrollView>
or add weight at your layouts:
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1">
</LinearLayout>

Your Hangman picture is really height as it has a value of 350dp
Please check this code:
<ScrollView 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="10dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.linfosoft.hangdroid.GameActivity"
tools:showIn="#layout/activity_game">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="wrap_content"
android:layout_height="350dp"
android:id="#+id/imageView"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:src="#drawable/hangdroid_0"
android:layout_marginTop="20dp" />
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:baselineAligned="false"
android:background="#drawable/gradient_background"
android:layout_below="#+id/imageView"
android:layout_centerHorizontal="true"
android:id="#+id/layoutAddLetter"
android:layout_marginTop="90dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Ingresa letra"
android:id="#+id/textView2"
android:layout_gravity="center_vertical"
android:layout_marginLeft="40dp" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/editText"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:maxLength="1" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Revisar"
android:id="#+id/button2"
android:onClick="introduceLetter" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/imageView"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="false"
android:layout_alignParentTop="false"
android:layout_marginTop="20dp"
android:id="#+id/layoutLetters">
</LinearLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:id="#+id/textView7"
android:layout_marginTop="150dp"
android:layout_marginLeft="20dp"
android:textColor="#color/red" />
</RelativeLayout>
<ScrollView>
As you see I used ScrollView, but scrolling a view would be enabled ONLY if a device would not have enough space to take everything on its screen.
In the other case it would be like any other static layout.
It doesn't mean that you would scroll it on every device or your game would be less attractive ;-)
Also you can change height of your picture to wrap_content, bu I suppose that author if this tutorial make this height by value, because the picture in the reality is much bigger than that with height of 350dp.

Prevent image and button overlapping

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
<ImageView
android:id="#+id/showImg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:contentDescription="#string/showImg"
/>
<Button
android:id="#+id/photo"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignTop="#+id/showImg"
android:text="#string/photo"
/>
</RelativeLayout>
When I run above code image view come over the photo button.
How should I avoid it?

You have two options:
1- Use LinearLayout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical">
<ImageView
android:id="#+id/showImg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:contentDescription="#string/showImg"
/>
<Button
android:id="#+id/photo"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/photo" />
</LinearLayout>
2- Use attribute layout_below:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android">
<ImageView
android:id="#+id/showImg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:contentDescription="#string/showImg"
/>
<Button
android:id="#+id/photo"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/showImg"
android:text="#string/photo"
/>
</RelativeLayout>
I'm assuming you want Image above button. Otherwise you can use layout_above, layout_toLeftOf or layout_toRightOf.

How to fit the image view in the screen based on android device?

I need to design the UI part in android device is,
Actually I'm having one title bar image and four piece of menu image.
I'm using relative layout for designing this menu. But every time it's having some problem to show the last image in device.
How Can I design this?Please help me.

Your should use below code for achieving it ..
<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" >
<Button
android:id="#+id/btnHeader"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginTop="10dip" />
<Button
android:id="#+id/btnMenu1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/btnHeader"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dip" />
<Button
android:id="#+id/btnMenu2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/btnMenu1"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dip" />
<Button
android:id="#+id/btnMenu3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/btnMenu2"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dip" />
<Button
android:id="#+id/btnMenu4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/btnMenu3"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dip" />
</RelativeLayout>

Try with the below code.
<?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" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:src="#drawable/image1" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/image2"
android:layout_marginTop="10dp"
android:layout_gravity="center"/>
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/image3"
android:layout_marginTop="10dp"
android:layout_gravity="center"/>
<ImageView
android:id="#+id/imageView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/image4"
android:layout_marginTop="10dp"
android:layout_gravity="center"/>
</LinearLayout>

Categories

Resources