Android -alert dialog design

Android -alert dialog design - java

In my application I want to show popup dialog. I drew sketch for first phase. and here what I want:
I was trying to implement this and here is my code:
<TableLayout 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:shrinkColumns="*"
android:stretchColumns="*"
android:background="#ffffff"
tools:context=".CustomMainActivity" >
<TableRow
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:gravity="center_horizontal"
android:background="#b6006a">
<ImageView
android:id="#+id/ImageView1"
android:src="#drawable/icon"
android:layout_weight="1"
android:padding="10dip"
android:adjustViewBounds="true"
android:layout_width="70dp"
android:layout_height="70dp"
android:scaleType="fitXY"
android:gravity="right"/>
<TextView
android:id="#+id/TextView1"
android:layout_weight="1"
android:textSize="18dp"
android:text="Nava Messenger"
android:padding="10dip"
android:background="#b6006a"
android:textColor="#fff"
android:gravity="left"/>
</TableRow>
<TableRow
android:id="#+id/tableRow0"
android:layout_height="wrap_content"
android:layout_width="match_parent">
<TextView
android:id="#+id/TextViewSender"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="18dp"
android:layout_span="3"
android:maxLines="1"
android:background="#fff"
android:textColor="#000"/>
</TableRow>
<TableRow
android:id="#+id/tableRow1"
android:layout_height="wrap_content"
android:layout_width="match_parent">
<TextView
android:id="#+id/TextView2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="18dp"
android:layout_span="3"
android:maxLines="4"
android:padding="18dip"
android:background="#fff"
android:textColor="#000"/>
</TableRow>
<TableRow
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:gravity="center_horizontal">
<EditText
android:id="#+id/EditText1"
android:layout_weight="3"
android:inputType="textCapWords"
android:layout_width="0dp"
android:ellipsize="start"
android:gravity="center"
android:textColor="#b6006a"
android:hint="Write a message..."/>
<ImageButton
android:id="#+id/ImageButton1"
android:layout_weight="1"
android:layout_width="0dp"
android:adjustViewBounds="true"
android:background="#null"
android:scaleType="fitXY"
android:src="#drawable/send_now"
android:gravity="right"/>
</TableRow>
</TableLayout>
And result of this code is :
I want to modify something such as:
Decreasing header size(purple area on the top of alert dialog)
Decreasing image size on header (Real size of logo image is :128*128)
Decreasing send image (Real size of send image is : 48 * 48)
Putting send image and EditText on a row
Any suggestion?

Using LinearLayout Adjust Margin/Padding as required. change icons aswell. rough layout.
<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:background="#ffffff"
android:orientation="vertical"
tools:context=".CustomMainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#b6006a"
android:gravity="center_horizontal"
android:orientation="horizontal">
<ImageView
android:id="#+id/ImageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:gravity="right"
android:padding="10dip"
android:scaleType="fitXY"
android:src="#android:drawable/ic_dialog_dialer" />
<TextView
android:id="#+id/TextView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#b6006a"
android:gravity="left"
android:padding="10dip"
android:text="Nava Messenger"
android:textColor="#fff"
android:textSize="18dp" />
</LinearLayout>
<TextView
android:id="#+id/TextViewSender"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#fff"
android:maxLines="1"
android:text="Farhan"
android:textColor="#000"
android:textSize="18dp" />
<TextView
android:id="#+id/TextView2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#fff"
android:maxLines="4"
android:text="FarhanFarhanFarhan"
android:padding="18dip"
android:textColor="#000"
android:textSize="18dp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:gravity="center_horizontal"
android:orientation="horizontal">
<EditText
android:id="#+id/EditText1"
android:layout_width="0dp"
android:layout_weight="3"
android:layout_height="match_parent"
android:ellipsize="start"
android:gravity="center"
android:hint="Write a message..."
android:inputType="textCapWords"
android:textColor="#b6006a" />
<ImageButton
android:id="#+id/ImageButton1"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:background="#null"
android:gravity="right"
android:scaleType="center"
android:src="#android:drawable/ic_menu_send" />
</LinearLayout>
</LinearLayout>

Use RelativeLayout instead TableLayout, it's much easier to use RelativeLayout.
Change width and height for image sizes triying other values of ScaleType if it were neccesary.
If you want to control header's size, don't use "wrap_content".
Define colors in values/colors.xml.

Related

RelataiveLayout positioning

Im trying to achieve a layout using Android XML Layout template:
Layout Diagram
I have XML currently:
<?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="wrap_content"
android:layout_marginBottom="12dp"
android:layout_marginTop="0dp"
android:background="#color/grey"
android:clickable="true"
android:orientation="horizontal"
android:padding="0dp">
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="false"
android:layout_centerVertical="true"
android:layout_marginBottom="0dp"
android:duplicateParentState="true"
android:orientation="horizontal"
android:gravity="center_horizontal"
android:paddingTop="#dimen/schedule_row_paddingtop">
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="#dimen/home_row_teamLogoHeight"
android:layout_centerInParent="false"
android:layout_centerVertical="true"
android:layout_marginBottom="0dp"
android:duplicateParentState="true"
android:orientation="horizontal"
android:gravity="center_horizontal"
android:paddingTop="6dp">
<ImageView
android:id="#+id/teamALogo"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:scaleType="fitCenter"
android:src="#drawable/france_logo"
android:visibility="visible" />
</RelativeLayout>
<TextView
android:id="#+id/programmeSport"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="1"
android:text="sport"
android:gravity="center_horizontal"
android:textColor="#color/yellow"
android:textAllCaps="true"
android:textSize="#dimen/home_row_league_title"
android:textStyle="bold" />
<TextView
android:id="#+id/programmeTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/programmeSport"
android:ellipsize="end"
android:gravity="center_horizontal"
android:maxLines="1"
android:text="programme title"
android:textColor="#color/white"
android:layout_marginTop="-4dip"
android:textSize="#dimen/home_row_programmeTitle"
/>
<TextView
android:id="#+id/programmeDay"
android:layout_height="wrap_content"
android:text="2:30 PM"
android:textAllCaps="true"
android:gravity="center_horizontal"
android:layout_marginTop="-6dp"
android:textColor="#color/green"
android:textSize="#dimen/home_row_date"
android:layout_below="#+id/programmeTitle"
android:layout_width="match_parent"
/>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="#dimen/home_row_teamLogoHeight"
android:layout_centerInParent="false"
android:layout_centerVertical="true"
android:layout_marginBottom="0dp"
android:duplicateParentState="true"
android:orientation="horizontal"
android:gravity="right"
android:paddingTop="6dp">
<ImageView
android:id="#+id/teamBLogo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitCenter"
android:src="#drawable/italy_logo"
android:layout_alignParentRight="true"
android:gravity="center_horizontal"
android:visibility="visible" />
</RelativeLayout>
</RelativeLayout>
</RelativeLayout>
At the moment it does not look great as there is some overlapping going on, and on larger screens the "Team A Logo" and "Team B Logo" float off (as intended to be floating on the left and right side of the text) to the edges of the screen leaving a huge game besides the text in the middle:
Sample output of the issue in Android device
I need the images which float on the left and right to be in the same position vertically for each fixture and for them to be inline with the "TeamA v TeamB" horizontally.
Any assistance will be appreciated.
Thanks

You should follow either ConstraintLayout or LinearLayout in order to achieve your desired output.
You can do something like the below.
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/teamALogo"
android:layout_width="100dp"
android:layout_height="150dp"
android:scaleType="centerCrop"
android:src="#drawable/ic_team_a_logo"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="0dp"
android:orientation="vertical"
app:layout_constraintLeft_toRightOf="#id/teamALogo"
app:layout_constraintRight_toLeftOf="#id/teamBLogo"
app:layout_constraintTop_toTopOf="#id/teamBLogo"
android:layout_marginTop="10dp"
app:layout_constraintBottom_toBottomOf="#id/teamBLogo"
>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="League"
android:textSize="17sp"
android:textColor="#color/black"
android:gravity="center"
android:textStyle="bold"
android:layout_marginTop="5dp"
android:padding="5dp"
/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<TextView
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="Team A"
android:textSize="17sp"
android:textColor="#color/black"
android:gravity="start"
android:textStyle="normal"
android:layout_marginTop="5dp"
android:padding="5dp"
/>
<TextView
android:layout_width="0dp"
android:layout_weight=".5"
android:layout_height="wrap_content"
android:text="Vs"
android:textSize="17sp"
android:textColor="#color/black"
android:gravity="start"
android:textStyle="normal"
android:layout_marginTop="5dp"
android:padding="5dp"
/>
<TextView
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="Team B"
android:textSize="17sp"
android:textColor="#color/black"
android:gravity="start"
android:textStyle="normal"
android:layout_marginTop="5dp"
android:padding="5dp"
/>
</LinearLayout>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Date"
android:textSize="17sp"
android:textColor="#color/black"
android:gravity="center"
android:textStyle="bold"
android:layout_marginTop="5dp"
android:padding="5dp"
/>
</LinearLayout>
<ImageView
android:id="#+id/teamBLogo"
android:layout_width="100dp"
android:layout_height="150dp"
android:scaleType="centerCrop"
android:src="#drawable/ic_team_b_logo"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

TextView overlaps with another textview

I want the text to be displayed to the right of the name,but if the name is too large, the text on the right doesn't fit on the screen. I used the following solution, but it causes the first textview to stretch beyond the size of the text in it.
What I have:
screenshot
What I want:
concept
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="12dp"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:baselineAligned="true"
android:orientation="horizontal"
android:weightSum="1">
<TextView
android:id="#+id/label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignWithParentIfMissing="true"
android:layout_weight="1"
android:fontFamily="#font/montserrat"
android:singleLine="true"
android:text="1"
android:textColor="#color/colorText"
android:textSize="20sp" />
<TextView
android:id="#+id/readed"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_gravity="center_vertical"
android:layout_marginStart="10dp"
android:background="#drawable/back_new"
android:fontFamily="#font/montserrat"
android:gravity="center"
android:keepScreenOn="true"
android:paddingHorizontal="5dp"
android:paddingVertical="3dp"
android:singleLine="true"
android:text="554"
android:textColor="#color/colorWhite"
android:textSize="18sp" />
</LinearLayout>

just remove android:weighSum="1" and android:layout_weight attribute in two textViews
enter code here<LinearLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="12dp"
android:orientation="vertical"
xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:baselineAligned="true"
android:orientation="horizontal">
<TextView
android:id="#+id/label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignWithParentIfMissing="true"
android:fontFamily="#font/montserrat"
android:singleLine="true"
android:text="3"
android:textColor="#color/colorText"
android:textSize="20sp" />
<TextView
android:id="#+id/readed"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_gravity="center_vertical"
android:layout_marginStart="10dp"
android:background="#drawable/back_new"
android:fontFamily="#font/montserrat"
android:gravity="center"
android:keepScreenOn="true"
android:paddingHorizontal="5dp"
android:paddingVertical="3dp"
android:singleLine="true"
android:text="554"
android:textColor="#color/colorWhite"
android:textSize="18sp" />
</LinearLayout>

Change design item of GridView, how? - Android

I want to change a design of me item in GridView.
Now is:
I want this item in square shape not like it is now in rectangle.
Also, the IMG (from the screenshot) i want to have above 'Name' and every textview at the center. Is it possible? Here is my XML:
<?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"
android:background="#color/md_brown_100"
android:orientation="vertical"
android:gravity="center"
android:paddingTop="10dp"
android:paddingBottom="10dp" >
<TextView
android:id="#+id/credit_wallet"
android:text="#string/hi"
android:gravity="center"
android:textColor="#color/md_brown_700"
android:layout_marginTop="20dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
/>
<com.justfashion.Logo
android:text="Fashion Wallet"
android:gravity="center"
android:textColor="#color/md_brown_700"
android:layout_marginTop="25dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
/>
<LinearLayout android:id="#+id/list_offer_item_container"
android:layout_marginTop="15dp"
android:layout_below="#id/text"
android:layout_marginLeft="1dp"
android:layout_marginRight="1dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/shape"
android:gravity="center"
android:paddingTop="10dp"
android:paddingBottom="10dp">
<LinearLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical" >
<TextView
android:id="#+id/txtname"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_marginTop="1dp"
android:textColor="#48899f"
android:textSize="#dimen/textsizeearncredit_title"
android:text="Name"
android:textAllCaps="false"
android:textStyle="normal|bold" />
<TextView
android:id="#+id/txtdesc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="1dp"
android:maxLines="1"
android:textColor="#80869c"
android:textSize="#dimen/textsizeearncredit_desc"
android:text="This is a description of the offer and this is just a demo to show off 3 lines stacking correctly on top of each other"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center"
android:layout_gravity="center_vertical">
<TextView android:id="#+id/list_offer_badge_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/list_offer_item_container"
android:textColor="#color/md_amber_700"
android:textSize="12sp"
android:visibility="gone"
android:text=""/>
</LinearLayout>
<ImageView
android:id="#+id/imgcreditcompany"
android:layout_width="42dp"
android:layout_above="#+id/txtname"
android:contentDescription="#string/app_name"
android:gravity="center"
android:layout_height="42dp" />
<ImageView
android:id="#+id/nextArrow"
android:layout_alignParentRight="true"
android:tint="#color/md_grey_300"
android:rotation="180"
android:layout_width="32dp"
android:visibility="gone"
android:layout_marginRight="16dp"
android:layout_gravity="center"
android:layout_centerVertical="true"
android:layout_height="32dp"
android:contentDescription="#string/app_name"
android:padding="#dimen/two" />
</LinearLayout>
</RelativeLayout>
I tried a lot of combination and don't works. Please help me guys! Thanks!
EDIT
The IMG from the screenshot is
<ImageView
android:id="#+id/imgcreditcompany"
android:layout_width="42dp"
android:layout_above="#+id/txtname"
android:contentDescription="#string/app_name"
android:gravity="center"
android:layout_height="42dp" />
In the code above

Android: How to draw 8 equal rectangles to fit screen width with XML

I'm new to JAVA and Android development.
Basically I would like to draw 8 equal rectangles (keyboard keys) to fit on 100% width.
As far as I know linearlayout doesn't support drawables, so sadly that piece of code doesn't work for me:
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:weightSum="2">
<View
android:id="#+id/keyboardKey1"
android:background="#drawable/keyboard_key_white"
android:weight="1"
android:layout_width="0dip"
android:layout_height="200dp"
android:layout_alignTop="#+id/keyboardKeyC"
android:layout_toRightOf="#+id/keyboardKeyA" />
<View
android:id="#+id/keyboardKey2"
android:background="#drawable/keyboard_key_white"
android:weight="1"
android:layout_width="0dip"
android:layout_height="200dp"
android:layout_alignTop="#+id/keyboardKeyC"
android:layout_toRightOf="#+id/keyboardKeyA" />
</LinearLayout>
Here are the contents of keyboard_key_while.xml as well:
<?xml version="1.0" encoding="UTF-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#fff" />
<stroke
android:width="1dp"
android:color="#000" />
</shape>
As far as I know, I also can't do the the other way round and use linearlayout inside of the drawable XML. Can you give me suggestions of how to achieve that?
Thank you!

I did this before. Let me check my code to see if I still have it.
I found it. The layout I created is for a calculator. I wanted the buttons to scale according to screen size.
I used a TextView with solid white background for the buttons. I'm sure you could use a drawable for a background as well. Anyway, have a look at the way I did the LinearLayouts.
The Code
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="horizontal"
android:layout_marginTop="10dp"
android:layout_marginRight="10dp"
android:layout_marginBottom="5dp"
android:layout_marginLeft="10dp"
android:background="#ffffffff"
>
<TextView
android:id="#+id/name"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginTop="0dp"
android:layout_marginRight="5dp"
android:layout_marginBottom="0dp"
android:layout_marginLeft="0dp"
android:layout_weight="3"
android:background="#ffffff"
android:text="Food"
android:gravity="center|right"
android:paddingRight="0dp"
android:singleLine="true"
android:textSize="27sp"
android:textStyle="bold"
android:onClick="onViewClick"
/>
<RelativeLayout
android:id="#+id/more"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginTop="0dp"
android:layout_marginRight="0dp"
android:layout_marginBottom="0dp"
android:layout_marginLeft="5dp"
android:layout_weight="1"
android:background="#drawable/layer_list_arrow_dn"
android:gravity="center"
android:singleLine="true"
android:onClick="onViewClick"
/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="horizontal"
android:layout_marginTop="5dp"
android:layout_marginRight="10dp"
android:layout_marginBottom="5dp"
android:layout_marginLeft="10dp"
android:background="#ffffffff"
>
<TextView
android:id="#+id/amount"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginTop="0dp"
android:layout_marginRight="5dp"
android:layout_marginBottom="0dp"
android:layout_marginLeft="0dp"
android:layout_weight="3"
android:background="#ffffff"
android:text="0.00"
android:gravity="center|right"
android:paddingRight="0dp"
android:singleLine="true"
android:textSize="27sp"
android:textStyle="bold"
android:onClick="onViewClick"
/>
<RelativeLayout
android:id="#+id/clear"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginTop="0dp"
android:layout_marginRight="0dp"
android:layout_marginBottom="0dp"
android:layout_marginLeft="5dp"
android:layout_weight="1"
android:background="#drawable/layer_list_clear"
android:gravity="center"
android:singleLine="true"
android:onClick="onViewClick"
/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="4"
android:orientation="horizontal"
android:layout_marginTop="5dp"
android:layout_marginRight="10dp"
android:layout_marginBottom="10dp"
android:layout_marginLeft="10dp"
android:background="#00fcb514"
>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"
android:layout_marginLeft="0dp"
android:layout_marginRight="5dp"
android:background="#00333333"
>
<TextView
android:id="#+id/b00"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginTop="0dp"
android:layout_marginBottom="5dp"
android:background="#drawable/ripple_holo_blue_bright"
android:text="7"
android:gravity="center"
android:textSize="27sp"
android:textStyle="bold"
android:onClick="onViewClick"
/>
<TextView
android:id="#+id/b01"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"
android:background="#ffffff"
android:text="4"
android:gravity="center"
android:textSize="27sp"
android:textStyle="bold"
android:onClick="onViewClick"
/>
<TextView
android:id="#+id/b02"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"
android:background="#ffffff"
android:text="1"
android:gravity="center"
android:textSize="27sp"
android:textStyle="bold"
android:onClick="onViewClick"
/>
<TextView
android:id="#+id/b03"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginTop="5dp"
android:layout_marginBottom="0dp"
android:background="#ffffff"
android:text=""
android:gravity="center"
android:textSize="27sp"
android:textStyle="bold"
android:onClick="onViewClick"
/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:background="#00666666"
>
<TextView
android:id="#+id/b10"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginTop="0dp"
android:layout_marginBottom="5dp"
android:background="#ffffff"
android:text="8"
android:gravity="center"
android:textSize="27sp"
android:textStyle="bold"
android:onClick="onViewClick"
/>
<TextView
android:id="#+id/b11"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"
android:background="#ffffff"
android:text="5"
android:gravity="center"
android:textSize="27sp"
android:textStyle="bold"
android:onClick="onViewClick"
/>
<TextView
android:id="#+id/b12"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"
android:background="#ffffff"
android:text="2"
android:gravity="center"
android:textSize="27sp"
android:textStyle="bold"
android:onClick="onViewClick"
/>
<TextView
android:id="#+id/b13"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginTop="5dp"
android:layout_marginBottom="0dp"
android:background="#ffffff"
android:text="0"
android:gravity="center"
android:textSize="27sp"
android:textStyle="bold"
android:onClick="onViewClick"
/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:background="#00999999"
>
<TextView
android:id="#+id/b20"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginTop="0dp"
android:layout_marginBottom="5dp"
android:background="#ffffff"
android:text="9"
android:gravity="center"
android:textSize="27sp"
android:textStyle="bold"
android:onClick="onViewClick"
/>
<TextView
android:id="#+id/b21"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"
android:background="#ffffff"
android:text="6"
android:gravity="center"
android:textSize="27sp"
android:textStyle="bold"
android:onClick="onViewClick"
/>
<TextView
android:id="#+id/b22"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"
android:background="#ffffff"
android:text="3"
android:gravity="center"
android:textSize="27sp"
android:textStyle="bold"
android:onClick="onViewClick"
/>
<TextView
android:id="#+id/b23"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginTop="5dp"
android:layout_marginBottom="0dp"
android:background="#ffffff"
android:text="."
android:gravity="center"
android:textSize="27sp"
android:textStyle="bold"
android:onClick="onViewClick"
/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"
android:layout_marginLeft="5dp"
android:layout_marginRight="0dp"
android:background="#00cccccc"
>
<TextView
android:id="#+id/b30"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginTop="0dp"
android:layout_marginBottom="5dp"
android:textSize="27sp"
android:textStyle="bold"
android:background="#drawable/layer_list_arrow_up"
android:onClick="onViewClick"
/>
<TextView
android:id="#+id/b31"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/layer_list_arrow_dn"
android:layout_marginTop="5dp"
android:layout_marginBottom="0dp"
android:textSize="27sp"
android:textStyle="bold"
android:onClick="onViewClick"
/>
</LinearLayout>
</LinearLayout>
</LinearLayout>

You can do that with a LinearLayout set to horizontal orientation and have each view inside that set an equal layout_weight and zero layout_width. You were almost there but you have to use layout_weight instead of weight.
This shows two keys taking up the width of the screen. If you put 8 views in there it scales accordingly.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<View
android:id="#+id/keyboardKey1"
android:layout_width="0dip"
android:layout_height="200dp"
android:layout_weight="1"
android:background="#drawable/keyboard_key_white" />
<View
android:id="#+id/keyboardKey2"
android:layout_width="0dip"
android:layout_height="200dp"
android:layout_weight="1"
android:background="#drawable/keyboard_key_white" />
</LinearLayout>
Two more things
in your example you are using RelativeLayout layout parameters in the keyboard views (layout_alignTop and layout_toRightOf). However the keyboard views are being hosted by a LinearLayout and are therefore ignored so they can be left out.
Another way to do this is to use the GridLayout where you can specify how many columns and rows you want. Inside the GridLayout you specify for each child view in which column and row you want it to appear with layout_column and layout_row.
Read up on Layouts on the Android Developer API Guides.

Android LinearLayout place elements in the middle with landscape and portrait mode

My layout contains three buttons, one EditText field and one button. I want to place the three buttons in one row, but in the center (horizontal) of the screen. The EditText field should be below the buttons and below the EditText field, there should be one button.
Here is my layout:
<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:background="#color/blueAct"
android:orientation="vertical"
android:paddingBottom="100.0dip"
android:paddingLeft="10.0dip"
android:paddingRight="10.0dip"
android:paddingTop="100.0dip" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:paddingBottom="4.0dip"
android:paddingLeft="100.0dip"
android:paddingRight="100.0dip"
android:paddingTop="5.0dip" >
<ImageButton
android:id="#+id/buttonGreen"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginRight="4.0dip"
android:background="#drawable/green_button"
android:contentDescription="#string/green" />
<ImageButton
android:id="#+id/buttonRed"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginRight="4.0dip"
android:background="#drawable/red_button"
android:contentDescription="#string/red" />
<ImageButton
android:id="#+id/buttonBlue"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginRight="4.0dip"
android:background="#drawable/blue_button"
android:contentDescription="#string/blue" />
</LinearLayout>
<EditText
android:id="#+id/phone_code"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:hint="#string/phone_code"
android:paddingTop="100.0dip"
android:textColor="#color/white"
android:textColorHint="#color/white" >
<requestFocus />
</EditText>
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dip"
android:background="#color/orangeAct"
android:onClick="searchUsers"
android:paddingTop="100.0dip"
android:text="#string/button_go"
android:textColor="#color/white" />
</LinearLayout>
Now the problem is, that the three buttons are not in the center if the user changes from portrait to landscape mode.
How is it possible to make this 'responsive', without creating a separate layout file for landscape mode?
Any help would be greatly appreciated.

Don't use padding on your horizontal LinearLayout to center the views. Instead you can add views before and after that expand to fill the remaining space.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<View
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="1" />
<ImageButton
android:id="#+id/buttonGreen"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
... />
<ImageButton
android:id="#+id/buttonRed"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
... />
<ImageButton
android:id="#+id/buttonBlue"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
... />
<View
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="1" />
</LinearLayout>

<?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:background="#mipmap/background"
android:orientation="vertical"
android:id="#+id/homemain124"
android:weightSum="3">
<RelativeLayout
android:id="#+id/paneltamrin"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="something"
android:textColor="#fff"
android:id="#+id/top1"
android:gravity="center_horizontal"
android:layout_marginTop="10dp"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginRight="40dp"
android:layout_marginLeft="40dp"
android:padding="8dp"
android:background="#drawable/textcorner"
android:layout_below="#+id/top1"
android:text="something"
android:textSize="20sp"
android:textColor="#fff"
android:id="#+id/top2"
android:fontFamily="monospace"
android:textStyle="bold"
android:gravity="center_horizontal"
android:layout_marginTop="30dp"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/top2"
android:text="APPLIED BY"
android:textSize="15sp"
android:id="#+id/top3"
android:textColor="#fff"
android:gravity="center_horizontal"
android:layout_marginTop="30dp"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/top3"
android:text="COURT OF JUSTICE IN INDIA"
android:id="#+id/top4"
android:textSize="15sp"
android:textColor="#fff"
android:textStyle="bold"
android:gravity="center_horizontal"
android:layout_marginTop="10dp"/>
</RelativeLayout>
<RelativeLayout
android:id="#+id/paneltamrin2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center">
<ImageView
android:layout_width="220dp"
android:layout_height="160dp"
android:src="#mipmap/book1"
android:id="#+id/image1"
android:layout_centerHorizontal="true"
android:layout_marginTop="20dp"
/>
</RelativeLayout>
<RelativeLayout
android:id="#+id/paneltamrin3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center">
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="READ NOW"
android:textColor="#fff"
android:lineSpacingExtra="10dp"
android:textSize="20sp"
android:layout_marginTop="10dp"
android:layout_marginBottom="15dp"
android:id="#+id/buttonorder"
android:padding="20dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:background="#drawable/orderbutton"
android:layout_centerHorizontal="true"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#fff"
android:textSize="13sp"
android:layout_marginTop="10dp"
android:gravity="center_horizontal"
android:layout_below="#+id/buttonorder"
android:text="something"/>
</RelativeLayout>
</LinearLayout>
Linear layout added for 3 relative layouts

Develop Reference

Java is a programming language and computing platform first released by Sun Microsystems in 1995.

Android -alert dialog design - java

Use RelativeLayout instead TableLayout, it's much easier to use RelativeLayout. Change width and height for image sizes triying other values of ScaleType if it were neccesary. If you want to control header's size, don't use "wrap_content". Define colors in values/colors.xml.

Related

RelataiveLayout positioning

TextView overlaps with another textview

Change design item of GridView, how? - Android

Android: How to draw 8 equal rectangles to fit screen width with XML

Android LinearLayout place elements in the middle with landscape and portrait mode

Categories

Resources