Why shows the emulator not the whole layout in Android Studio?
Question
I'm using Android Studio since some weeks. After my first experience I'm building my first APK und have a problem with the Relative layout.
After I'm putting the stuff (ImageBtn, TextView) into it and trying to run the app in the emulator, it shows only the left side.
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout 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"> <ImageButton android:id="@+id/imageButton5" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_alignParentStart="true" android:layout_alignParentTop="true" android:layout_marginLeft="10dp" android:layout_marginStart="10dp" android:layout_marginTop="30dp" android:background="@android:color/background_light" app:srcCompat="@drawable/beer" /> <TextView android:id="@+id/textView11" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignTop="@+id/imageButton5" android:layout_marginLeft="12dp" android:layout_marginStart="12dp" android:layout_toEndOf="@+id/imageButton5" android:layout_toRightOf="@+id/imageButton5" android:text="Beer" android:textSize="18sp" /> <TextView android:id="@+id/textView12" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginBottom="7dp" android:text="Level 0" android:textSize="18sp" android:layout_alignBottom="@+id/imageButton5" android:layout_alignLeft="@+id/textView11" android:layout_alignStart="@+id/textView11" /> <ImageButton android:id="@+id/imageButton6" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_alignParentStart="true" android:layout_alignParentTop="true" android:layout_marginLeft="10dp" android:layout_marginStart="10dp" android:layout_marginTop="110dp" android:background="@android:color/background_light" app:srcCompat="@drawable/frenchfries" /> <TextView android:id="@+id/textView13" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignLeft="@+id/textView11" android:layout_alignStart="@+id/textView11" android:layout_alignTop="@+id/imageButton6" android:text="French Frits" android:textSize="18sp" /> <TextView android:id="@+id/textView14" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Level 0" android:textSize="18sp" android:layout_centerVertical="true" android:layout_alignLeft="@+id/textView13" android:layout_alignStart="@+id/textView13" /> <ImageButton android:id="@+id/imageButton7" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_alignParentStart="true" android:layout_alignParentTop="true" android:layout_marginLeft="10dp" android:layout_marginStart="10dp" android:layout_marginTop="190dp" android:background="@android:color/background_light" app:srcCompat="@drawable/icecream" /> <TextView android:id="@+id/textView15" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignLeft="@+id/textView14" android:layout_alignStart="@+id/textView14" android:layout_alignTop="@+id/imageButton7" android:text="Ice Cream" android:textSize="18sp" /> <TextView android:id="@+id/textView16" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignLeft="@+id/textView15" android:layout_alignStart="@+id/textView15" android:layout_below="@+id/textView15" android:text="Level 0" android:textSize="18sp" /> <ImageButton android:id="@+id/imageButton9" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@android:color/background_light" app:srcCompat="@drawable/pizza" android:layout_alignTop="@+id/textView11" android:layout_toRightOf="@+id/textView13" android:layout_toEndOf="@+id/textView13" android:layout_marginLeft="28dp" android:layout_marginStart="28dp" /> <TextView android:id="@+id/textView17" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_above="@+id/textView12" android:layout_marginLeft="14dp" android:layout_marginStart="14dp" android:layout_toEndOf="@+id/imageButton9" android:layout_toRightOf="@+id/imageButton9" android:text="Pizza" android:textSize="18sp" /> <TextView android:id="@+id/textView18" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Level 0" android:textSize="18sp" android:layout_below="@+id/textView11" android:layout_alignLeft="@+id/textView17" android:layout_alignStart="@+id/textView17" /> <TextView android:id="@+id/textView19" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignBottom="@+id/textView15" android:layout_marginLeft="102dp" android:layout_marginStart="102dp" android:layout_toEndOf="@+id/textView18" android:layout_toRightOf="@+id/textView18" android:text="TextView" /> </RelativeLayout>
Hope you can help me to fix that problem.
Greetings Phil Newman
1 answers
solution1
0 ACCPTED 2017-05-22 22:18:34
I will present two ways I would do this if it was me. So you can also choose from this to suit your need.
METHOD ONE
You can use a LinearLayout with vertical orientation as the parent layout. Use another LinearLayout with horizontal orientation to host a two RelativeLayout s. Each RelativeLayout will also contain the three components( ImageButton , TextView s).
Looks at an xml text I have presented here:
<LinearLayout
android:id="@+id/lay1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<RelativeLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".50">
<ImageButton
android:id="@+id/imageButton5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="10dp"
android:layout_marginStart="10dp"
android:layout_marginTop="30dp"
android:background="@android:color/background_light"
app:srcCompat="@drawable/beer" />
<TextView
android:id="@+id/textView11"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="@+id/imageButton5"
android:layout_marginLeft="12dp"
android:layout_marginStart="12dp"
android:layout_toEndOf="@+id/imageButton5"
android:layout_toRightOf="@+id/imageButton5"
android:text="Beer"
android:textSize="18sp" />
<TextView
android:id="@+id/textView12"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="7dp"
android:text="Level 0"
android:textSize="18sp"
android:layout_alignBottom="@+id/imageButton5"
android:layout_alignLeft="@+id/textView11"
android:layout_alignStart="@+id/textView11" />
</RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".50">
<ImageButton
android:id="@+id/imageButton6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="10dp"
android:layout_marginStart="10dp"
android:layout_marginTop="30dp"
android:background="@android:color/background_light"
app:srcCompat="@drawable/frenchfries" />
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="@+id/imageButton6"
android:layout_marginLeft="12dp"
android:layout_marginStart="12dp"
android:layout_toEndOf="@+id/imageButton6"
android:layout_toRightOf="@+id/imageButton6"
android:text="French Frits"
android:textSize="18sp" />
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="7dp"
android:text="Level 0"
android:textSize="18sp"
android:layout_alignBottom="@+id/imageButton6"
android:layout_alignLeft="@+id/textView1"
android:layout_alignStart="@+id/textView1" />
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:id="@+id/lay2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<RelativeLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".50">
<ImageButton
android:id="@+id/imageButton2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="10dp"
android:layout_marginStart="10dp"
android:layout_marginTop="30dp"
android:background="@android:color/background_light"
app:srcCompat="@drawable/icecream" />
<TextView
android:id="@+id/textView0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="@+id/imageButton2"
android:layout_marginLeft="12dp"
android:layout_marginStart="12dp"
android:layout_toEndOf="@+id/imageButton2"
android:layout_toRightOf="@+id/imageButton2"
android:text="Ice Cream"
android:textSize="18sp" />
<TextView
android:id="@+id/textView102"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="7dp"
android:text="Level 0"
android:textSize="18sp"
android:layout_alignBottom="@+id/imageButton2"
android:layout_alignLeft="@+id/textView0"
android:layout_alignStart="@+id/textView0" />
</RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".50">
<ImageButton
android:id="@+id/imageButton3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="10dp"
android:layout_marginStart="10dp"
android:layout_marginTop="30dp"
android:background="@android:color/background_light"
app:srcCompat="@drawable/pizza" />
<TextView
android:id="@+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="@+id/imageButton3"
android:layout_marginLeft="12dp"
android:layout_marginStart="12dp"
android:layout_toEndOf="@+id/imageButton3"
android:layout_toRightOf="@+id/imageButton3"
android:text="Pizza"
android:textSize="18sp" />
<TextView
android:id="@+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="7dp"
android:text="Level 0"
android:textSize="18sp"
android:layout_alignBottom="@+id/imageButton3"
android:layout_alignLeft="@+id/textView3"
android:layout_alignStart="@+id/textView3" />
</RelativeLayout>
</LinearLayout>
You can analyse it carefully and just copy and paste depending on the number of buttons(your categories) you want.
METHOD TWO
Arrange everything well in the Relative layout (linearly or preferably a LinearLayout ) and put the RelativeLayout in a ScrollView layout as the parent layout. This will enable the user to scroll down and up if the widgets are out of view.
Also here is an xml for that:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageButton
android:id="@+id/imageButton5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="10dp"
android:layout_marginStart="10dp"
android:layout_marginTop="30dp"
android:background="@android:color/background_light"
app:srcCompat="@drawable/beer" />
<TextView
android:id="@+id/textView11"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="@+id/imageButton5"
android:layout_marginLeft="12dp"
android:layout_marginStart="12dp"
android:layout_toEndOf="@+id/imageButton5"
android:layout_toRightOf="@+id/imageButton5"
android:text="Beer"
android:textSize="18sp" />
<TextView
android:id="@+id/textView12"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="7dp"
android:text="Level 0"
android:textSize="18sp"
android:layout_alignBottom="@+id/imageButton5"
android:layout_alignLeft="@+id/textView11"
android:layout_alignStart="@+id/textView11" />
<ImageButton
android:id="@+id/imageButton6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="10dp"
android:layout_marginStart="10dp"
android:layout_marginTop="110dp"
android:background="@android:color/background_light"
app:srcCompat="@drawable/frenchfries" />
<TextView
android:id="@+id/textView13"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/textView11"
android:layout_alignStart="@+id/textView11"
android:layout_alignTop="@+id/imageButton6"
android:text="French Frits"
android:textSize="18sp" />
<!-- android:layout_marginBottom="7dp" -->
<TextView
android:id="@+id/textView14"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="7dp"
android:text="Level 0"
android:textSize="18sp"
android:layout_alignBottom="@+id/imageButton6"
android:layout_alignLeft="@+id/textView13"
android:layout_alignStart="@+id/textView13"/>
<ImageButton
android:id="@+id/imageButton7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="10dp"
android:layout_marginStart="10dp"
android:layout_marginTop="190dp"
android:background="@android:color/background_light"
app:srcCompat="@drawable/icecream" />
<TextView
android:id="@+id/textView15"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/textView14"
android:layout_alignStart="@+id/textView14"
android:layout_alignTop="@+id/imageButton7"
android:text="Ice Cream"
android:textSize="18sp" />
<TextView
android:id="@+id/textView16"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/textView15"
android:layout_alignStart="@+id/textView15"
android:layout_below="@+id/textView15"
android:text="Level 0"
android:textSize="18sp" />
<ImageButton
android:id="@+id/imageButton9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@android:color/background_light"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="10dp"
android:layout_marginStart="10dp"
android:layout_marginTop="270dp"
app:srcCompat="@drawable/pizza" />
<TextView
android:id="@+id/textView17"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/textView16"
android:layout_alignStart="@+id/textView16"
android:layout_alignTop="@+id/imageButton9"
android:text="Pizza"
android:textSize="18sp" />
<TextView
android:id="@+id/textView18"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Level 0"
android:textSize="18sp"
android:layout_alignLeft="@+id/textView17"
android:layout_alignStart="@+id/textView17"
android:layout_below="@+id/textView17" />
</RelativeLayout>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Why Android Studio emulator shows black screen?
Different layout in Android Studio between preview and emulator
Why is everything in one heap in the Android Studio emulator?
Why my android studio emulator is not working?
Does Android studio layout editor shows custom view properties?
Scrollbar on the whole Layout in Android
Why does my android app keep stopping in the Android Studio emulator?
Why addView() reset my layout in Android Studio?
Android Studio emulator is not working
Why is my default layout for android-studio set as linear layout?
Related Tags